Domínio de design de UX / UI - da teoria ao site ao vivo no Adobe Xd, figma e Webflow

1. Introdução ao curso: Ser designer de UI UX não é apenas trabalhar no Adobe XD figma. Trata-se de entender seus usuários por meio das decisões de design que você toma durante o processo de design. Hidden Zara, Alex estão aqui e bem-vindos a esta aula de Skillshare, onde vamos passar do zero a herói como designer de UX de UI. Sou criador de produtos digitais e até agora criei mais de 500 produtos de design digital. Também sou criador de cursos e até agora gravei mais de 40 cursos diferentes, todos sobre design de UX e mídias sociais. E até agora eu tenho 60.000 alunos matriculados em cursos. E nesta aula, abordaremos noções básicas de design de UX, o que é e por que é essencial para o processo de design? Crie resumos e explique o que são e como comunicá-los aos seus clientes. Propostas de projetos, o que são e por que você precisa delas para cada projeto. Pesquisa de usuários e como usá-la para criar uma personalidade de usuário, análise competitiva e como evitar erros cometidos por seus concorrentes. O usuário flui de maneiras diferentes. Os usuários acessam seu site, wireframes em papel e por que eles são úteis para design, estrutura, layouts e grades e como usá-los para melhorar a consistência do design, topografia e o emparelhamento de fontes, e como escolher fontes perfeitas para seus designs, iconografia e selecionar os conjuntos de ícones certos para seus projetos. Teoria das cores e como escolher cores perfeitas para qualquer projeto. Trabalhar com imagens, conjuntos de imagens e benefícios de coleções, painéis de humor e por que eles são importantes para definir a carga do projeto, kits de interface e os sistemas de design e qual é a diferença entre eles. Em seguida, passaremos para o projeto deste curso e criaremos um site do zero no Adobe XD Figma, usando as técnicas que aprendemos neste curso, construí-lo no fluxo sanguíneo, torná-lo responsivo e publicá-lo sem escrever uma única linha de código. Estudos de caso e como usá-los para atrair melhores clientes para seus projetos. E onde conseguir o emprego dependendo do tipo de emprego que você deseja conseguir. Em 20 seções deste curso, uma das 200 aulas e todas as 28 horas de conteúdo de vídeo, você obterá todos os modelos e arquivos de prática usados neste curso para o Adobe XD e o fêmur. Assim, você pode acompanhar ou dois anos de gravação e feedback de mais de 60.000 alunos para criar este curso para torná-lo o maior e mais completo curso de UI UX já criado online. Espere para ver você lá dentro. E vamos começar a jornada de design de UI UX. 2. Estrutura do curso e arquivos de projeto: Olá e bem-vindo ao curso. Nesta primeira lição, vou falar um pouco sobre estrutura do curso e os arquivos do projeto. Portanto, a estrutura do curso tem basicamente duas partes principais. Uma é a parte teórica, uma é a parte prática. A maioria dos jovens designers, especialmente, simplesmente pula a parte teórica e vai direto para a ferramenta de design sem saber nada básico sobre design, sobre o processo, sobre as metodologias que você pode usar junto o caminho. E é por isso que eles estão com dificuldades ou, pior ainda, os demônios mantêm a parte do design e vão direto para o Webflow ou direto para o código, ou algo como WordPress ou Wix ou qualquer outra ferramenta que sejam usando sem nunca saber como realmente projetar. É por isso que decidi criar este curso em primeiro lugar para cobrir as duas estruturas, tanto a teoria quanto a prática, e para mostrar a vocês duas e como usá-las no final. Então, como eu disse, se você quiser, você pode aprender a parte teórica, ou se você conhece a teoria, você pode ir direto para a parte prática, mas é altamente recomendável, especialmente se você está apenas recebendo Comecei a me aprofundar e aprender essa parte teórica porque ela lhe servirá bem no final de sua carreira. E uma última coisa que quero mencionar sobre esta lição são os arquivos de prática. Cada seção, se tiver arquivos práticos, eles serão vinculados ao arquivo zip. Você pode baixar o arquivo zip nessa seção e usá-lo. Ou, se for indicado de outra forma, dependendo de onde você está assistindo a esta aula, você terá um arquivo zip dedicado para baixar todos os arquivos dessa classe. Ou você terá, como eu disse, seções diferentes com arquivos zip para cada uma dessas seções que você pode baixar e acompanhar. Então, vamos começar. 3. Projeto do curso: Seu projeto de aula para esta aula é seguir a seção em que realmente criamos o design do site, seguindo as instruções do vídeo e seguindo o arquivo prático que forneci, Eu quero que vocês criem seu próprio design. Você não precisa mudar muito. Você pode usar as imagens que forneci , por exemplo , mas eu adoraria ver algumas cores diferentes, talvez até mesmo uma topografia diferente. E eu só quero ver vocês experimentarem as ferramentas e técnicas que eu forneci nesta aula. Se você não se sentir confortável em fazer esse tipo de design em grande escala, salvá-lo e enviá-lo para o projeto da sua turma. Então, talvez você deva seguir essas diferentes tarefas para cada seção, porque cada seção tem sua própria tarefa, talvez você possa concluir essa tarefa, salvá-la como JPEG e carregá-la para um projeto de classe. Estou ansioso para ver o que vocês podem criar e, por favor, compartilhem seu trabalho. Estou ansioso para lhe fornecer qualquer tipo de feedback e qualquer tipo de ajuda que eu possa e ter certeza compartilhar seu trabalho nos projetos de classe. 4. Atualizações de cursos de Figma: Agora que a Adobe comprou o Figma, quero atualizar este curso no futuro e incluir todo o conteúdo irrelevante do Figma. Portanto, você poderá ter a opção de ter conteúdo do Adobe XD e Figma em termos do que é diferente. Há algumas coisas diferentes do Figma que não estão incluídas no Adobe XD, por exemplo, figueira e páginas e todos os tipos de recursos de prototipagem que são um pouco mais avançados e estão no Adobe XD. Mas, por outro lado, o adobe XD tem alguns recursos que o Figma não tem. Portanto, essa atualização será lançada gradualmente nos próximos meses. E vou tentar atualizar cada parte deste curso que também tem conteúdo XD para conteúdo Figma. Vou começar com partes importantes deste curso, como, por exemplo, design, propostas de resumos e projetos e persona e design das páginas em si, exportando-as e trabalhando com o Webflow, porque essas são as partes principais deste curso que precisam ser atualizadas, obviamente. Mas nos próximos meses e no próximo ano, por exemplo, vou até incluir o design, a configuração do sistema e a criação de seu próprio kit de interface de usuário. Mas você vai ter que esperar um pouco mais por essas aulas. Mas se você der uma olhada no conteúdo atualizado que eu criei até agora, você também terá uma ideia fácil de como criar isso no Figma. Também há a questão sobre as futuras atualizações, agora que a Adobe comprou Figma e o que ela fará com o Figma no futuro incluirá todos os recursos do Photoshop, por exemplo incluirá todos os recursos do ilustrador, por exemplo , ninguém sabe neste momento, neste momento. Mas, por enquanto, aproveite essas atualizações e fique por aqui, pois vou atualizar este curso no futuro e adicionar todo o conteúdo relevante assim que for lançado. E, claro, se também houver algumas atualizações importantes no Figma no futuro, eu também as abordarei neste curso. Em termos de conteúdo x D, eu praticamente abordei tudo o que há para ser abordado no Adobe XD. Agora, no futuro, vamos nos concentrar apenas no conteúdo do Figma em termos de uso do XD. A Adobe chegou com uma declaração, já gravou um vídeo separado sobre isso, que vai manter o XD por enquanto. O que isso significa é que nos próximos dois anos, por exemplo , você poderá usar x normalmente, ele ainda continuará recebendo atualizações e acabou de ser atualizado hoje cedo. Então você pode conferir, instalar essas atualizações, você pode usá-las. Você pode seguir este curso de forma totalmente normal. Então, no próximo ano e meio, dois anos, nada vai mudar. Você pode usar o XD, você pode usar o Figma, praticamente da mesma forma. E, como eu disse, vou criar o conteúdo deste curso e abordar tudo o que você precisa saber sobre o Adobe XD e o Figma. Então aproveite o curso. Certifique-se de conferir todas essas atualizações se você estiver interessado no conteúdo do Figma. E para alguns, você terá que assistir ao barco porque eu não queria perder muito tempo recriando todo o conteúdo para ser exatamente o mesmo para o XD Figma. Acabei de o conteúdo para ser exatamente o mesmo para o XD Figma abordar o que é diferente no Figma e no Adobe XD porque, como mencionei no início deste vídeo, eles agora fazem parte da mesma família da Adobe. Então, no futuro, tudo parecerá exatamente o mesmo. Então aproveite o curso. 5. SEÇÃO 1 Princípios básicos de design de usuário: design Ux é extremamente importante no processo de design, porque se você pensa nele como uma casa, design UX é a estrutura XOR da casa. Portanto, o design de interface de usuário físico é a fachada real que entra em uma casa e faz com a casa pareça bonita do lado de fora. E o código real que aparece no final são as janelas reais, a eletricidade, a Internet. Portanto, para tornar uma casa habitável e fazê-la funcionar, cada uma dessas etapas é extremamente importante no processo geral de design. Portanto, pular uma dessas etapas é uma péssima ideia. Nesta primeira seção desta aula, falaremos apenas sobre noções básicas de design de UX. Então, vamos começar. 6. O que é o design de UX: design da experiência do usuário é o processo de criar experiências que sejam eficientes, eficazes e agradáveis para os usuários. Então, em outras palavras, você precisa saber para quem você está projetando? O que você está projetando em primeiro lugar e quais problemas esse produto ou serviço ajuda a resolver? Então, para saber isso, você precisa realizar algo que é chamado de pesquisa de experiência do usuário. E você precisa entender quem são seus usuários, quais são suas necessidades, quais são seus desejos? Porque nem todos os usuários são iguais. Portanto, seu trabalho como designer de UX é atingir essas necessidades e ajudar a resolvê-las por meio do processo de design de UX. Como cada projeto é diferente, cada usuário é diferente e suas necessidades variam de projeto para projeto. Você precisa se adaptar como designer de UX a essas necessidades do usuário. 7. O que faz o designer de UX: designer de Ux entende as necessidades e objetivos do usuário. Eles se conectam com os usuários para entender o que eles realmente precisam desse produto ou dessas experiências. Isso é chamado de pesquisa de usuários. E é a primeira etapa do processo de design de UX. A próxima etapa é definir claramente quais produtos precisam e desejos dos usuários, para que você possa definir claramente as metas do produto. Isso leva ao estágio de ideação , no qual os designers de UX apresentam soluções potenciais para os problemas que os usuários enfrentam. Em seguida, vem a fase de prototipagem, na qual os designers de UX pegam suas ideias e as transformam em protótipos funcionais, que eles então compartilham com as partes interessadas e outros membros da equipe para apenas testar e certifique-se de que eles realmente funcionem antes de colocá-los em produção e antes de colocá-lo em testes adicionais com os usuários. Depois disso, vem a fase final, que é teste, em que os designers de UX enviam suas soluções aos usuários para garantir que elas realmente funcionem e para garantir que eles realmente resolvam o problemas que o usuário enfrenta. O processo de design de UX nunca é concluído porque quando você realmente testa o produto que você criou como designer de UX, assim como os mais adiantados, por exemplo, seis meses ou 12 meses depois, as necessidades dos usuários mudarão. Portanto, você precisa melhorar esse produto ou experiências de acordo com as necessidades desses usuários. E os designers de UX estão lá para fazer isso durante todo o ciclo de vida do produto ou serviço. Eles precisam continuar pesquisando, precisam continuar aprimorando o produto ou serviço para atender às necessidades do usuário. Porque, como eu disse, as necessidades e desejos do usuário estão mudando constantemente. Porque no mundo de rápido desenvolvimento em que vivemos hoje, essas mudanças são necessárias de tempos em tempos, por exemplo, para alguns produtos. Mas essas mudanças são necessárias mensalmente, o que é muito raro. Mas geralmente é algo como seis meses ou um ano. E você precisa entender, como designer de UX, quais são essas necessidades conduzindo entrevistas de dose oral com todos esses pesquisadores. E você precisa adaptar o produto ou serviço para atender aos novos requisitos e às novas necessidades que seus usuários têm. 8. É o UX o mesmo que a IU: Design de interface de usuário, ou design de interface de usuário, é o processo de criar experiências como sites ou aplicativos móveis. Está na fase posterior do processo de design de UX, mas igualmente importante porque não é apenas parte do processo de design de UX, é a parte crucial do processo de design de UX. Você pode ter a melhor pesquisa, uma estratégia de conteúdo perfeita. Mas se a experiência deles não for bonita e legível, ninguém vai querer usá-la. Alguns designers de UX vão até wireframes de papel e param por aí porque seu nível de habilidade parou, mas você pode chamá-lo de wireframes de jornal. É aí que os designers de UI intervêm para transformar esses wireframes de papel para transformar esses pesquisadores e ideias em modelos funcionais, protótipos funcionais, às vezes até códigos que os usuários possam realmente usar, teste. E então, designers de UX e designers de UI em conjunto podem melhorar para maior usabilidade e para mais testes e pesquisas. Os designers de interface do usuário não precisam saber programar, mas é importante que eles entendam como o código funciona e como estruturar seu design para compartilhamento com desenvolvedores. Também existe algo chamado ferramentas sem código, que nos dias de hoje é muito comum no setor de design de UI UX. E essas são ferramentas como o Webflow e o aplicativo Bravo Studio, que são as ferramentas que ajudam você, como designer de interface do usuário, a criar todas essas experiências e transformá-las de designs estáticos e protótipos em belos sites funcionais ou aplicativos móveis. Ferramentas sem código são realmente ótimas porque você não precisa saber codificar. Mas, mais uma vez, é muito importante que você entenda como o código funciona, como estruturar projetos, porque será muito simples criar essas experiências. em ferramentas que mencionei como fluxo de trabalho ou um aplicativo Brow Studio, ou para enviar esses designs e exportá-los adequadamente para seus desenvolvedores, porque todo esse sistema precisa funcionar como um só. Caso contrário, ele simplesmente vai desmoronar. Porque, mais uma vez, qual é o objetivo de pesquisa bem executada de todas essas reuniões com clientes e usuários. Se isso não é algo que os usuários realmente gostariam de usar em seus dispositivos, como laptops , dispositivos móveis, tablets e muito mais. Então é aí que o design de interface do usuário é crucial em todo esse processo, porque eles estão lá para transformar essas ideias e colocá-las em conceitos funcionais com mais frequência do que nunca, usando algo chamado ferramentas sem código, que acabei de mencionar. Ou simplesmente saber como estruturar esses projetos em algo chamado, por exemplo , sistema de design, que é então escalável posteriormente no processo de design mais adiante, por exemplo, seis meses, 12 meses, ou mesmo alguns anos depois. Porque esse sistema de design existe para ajudá-los a escalar o produto e a atualizá-lo o passar do tempo. Porque você, como designer de UI, estará nessa empresa, por exemplo, por , digamos, dois anos. Mas o que acontece depois que você sai, depois de mudar de empresa, depois de trabalhar como freelancer, outra pessoa tem que se substituir e continuar de onde você parou. É aí que esses sistemas de design ou kits de interface do usuário, por exemplo, são úteis. E é aí que o designer de UI como cargo é realmente crucial. Porque, mais uma vez, é a principal lacuna e a ponte fundamental entre os designers de UX como conceito e pesquisa e, em seguida, os desenvolvedores como pessoas que colocaram esses conceitos e pesquisas em desenvolvimento para o real usuários para usar. Ui design não é design de UX, mas é parte do processo de design em geral e parte igualmente importante, na minha opinião. Para isso. 9. Necessidades de designer de habilidades: Um bom designer de UX deve ter empatia para ouvir seus usuários e entender suas necessidades. Ao realizar pesquisas com usuários, os designers de UX devem saber quais perguntas fazer para entender melhor quais problemas resolver. E eles precisam entender como lidar com as ferramentas necessárias para realizar esses trabalhos, porque as ferramentas são muitas e vamos abordá-las em uma das aulas futuras. Mas você precisa entender quais perguntas fazer para ajudar outros membros da equipe a se ajudarem a resolver o problema que seus usuários enfrentam. A comunicação com os usuários, mas também outros membros da equipe, como designers e desenvolvedores de UI, é a chave para um processo de design que funcione perfeitamente. E essa é uma habilidade fundamental que todo bom designer de UX deve ter. Grandes designers de UX também se especializam em algo chamado de redação de UX, design visual e, às vezes, até marketing para ajudar a facilitar todo o processo de design e ajudar a agregar mais valor a a equipe em que eles trabalham. Você não precisa ter todas essas habilidades que acabamos de mencionar. E há muitas, muitas, muitas outras habilidades. Mas quanto mais deles você tiver, maior valor você trará para a equipe da qual faz parte. Ou, se você estiver trabalhando como freelancer, maiores as chances de conseguir projetos maiores e mais caros para trabalhar porque você será a parte crucial dessa equipe, porque você possui todas essas habilidades. Essas habilidades vêm com o tempo. Portanto, não se preocupe se você está apenas começando e não tem algumas dessas habilidades ou não entende o que são algumas dessas coisas. Comece pequeno do que grande, construa a partir daí e depois aprimore suas habilidades com o passar do tempo. 10. In House VS Freelance Designer de UX: Quando você trabalha como parte de uma agência, provável que você trabalhe apenas como designer de UX. Quanto maior a empresa, maiores as chances de ter um redator dedicado e de ter uma equipe de pesquisa dedicada, de ter designer de UI dedicado ou, por exemplo, desenvolvedores. Assim, você pode se concentrar no design de UX si e em todo o processo em si. E quanto maiores as chances de você ser parte interna dessa equipe porque você pode simplesmente se concentrar em quais são suas funções como designer de UX. Nesse ínterim, trazemos bons produtos, salários, mas somos limitados, porque você será parte integrante dessa equipe de design. Mas você simplesmente trabalhará como designer de UX sozinho. Mas quando você trabalha como designer freelancer, quanto mais dessas coisas você souber fazer, maior será o valor que você trará para a parte da equipe ou para o projeto em que vai trabalhar. Portanto, você pode obter um salário maior. Por esses motivos, você pode, por exemplo fazer dois ou três grandes projetos por ano e depois relaxar pelo resto do ano. Você não precisa trabalhar pelo resto do ano, por exemplo, ou pode realizar muitos, muitos projetos menores por causa do conjunto de habilidades que possui. Mais uma vez, quanto maior o conjunto de habilidades que você tem, maiores as chances de você trabalhar nesses grandes projetos e trazer grande valor para essas empresas. E, mais uma vez, quanto mais desses valores você puder trazer para a equipe em que está, maiores as chances de obter um grande salário com esses projetos. Depende apenas do que você gostaria de fazer e de onde você quer estar em sua carreira. Algumas pessoas gostam de trabalhar em uma agência por anos a fio. Outras pessoas simplesmente gostam de trabalhar como freelancers. Algumas pessoas gostam de fazer as duas coisas. Talvez trabalhe em uma agência e depois trabalhe como freelancer. outro lado, depende apenas de quem você é, onde você quer estar em sua vida e em sua carreira. Por exemplo, algumas pessoas gostam da estabilidade da agência porque ela continua gerando custos, a receita ou as pessoas gostam de correr riscos, podem ser e assumir alguns projetos maiores como designers freelancers de UX. Mas, mais uma vez, também depende do seu conjunto de habilidades, que você sabe fazer, do quão bom você é no trabalho que está fazendo? Por exemplo, neste caso, designer de UX. Você pode se comunicar bem com outros membros da equipe? Como mencionei, por exemplo, designers de UI, desenvolvedores e designers gráficos, alguns casos, equipe de marketing. Então, tudo depende de você, se você está apenas começando ou realmente recomenda tentar fazer as duas coisas, talvez comece com o design freelance apenas para entender o que o cliente precisa. Talvez você possa acessar plataformas como Upwork ou 99 designs. Escolha alguns projetos de design aqui e ali e, em seguida, simplesmente entenda o que esses clientes realmente precisam. Entenda seus usuários, entenda as necessidades do usuário e entenda como conduzir uma pesquisa adequada sobre a experiência do usuário. E depois siga em frente a partir daí. Então, talvez com essa experiência, passe a se candidatar a um emprego em agência de design apenas para entender como é fazer parte de uma equipe física trabalhando com outras pessoas dentro dessa agência. E simplesmente entenda o ritmo de trabalhar dentro de uma agência, trabalhando em um projeto por vez com várias pessoas no mesmo escritório, ao mesmo tempo. Talvez essa seja a parte boa para você. Então, meu conselho para você é tentar fazer as duas coisas e ver onde você se encontra. E nunca se esqueça que você sempre pode alternar entre esses dois de agência para freelancer e de volta para agência. Isso realmente não importa. O que importa aqui é tentar fazer as duas coisas para que você possa entender os dois lados de uma moeda. 11. Ferramentas para designers de UX: Há muitas ferramentas diferentes que você usará como designer de UX. Então, neste vídeo, vou abordar apenas alguns básicos. Além disso, como mencionei nas lições anteriores, passar do tempo, medida que você aperfeiçoa suas habilidades, você encontrará algumas dessas lojas e poucas outras ferramentas que fazem coisas semelhantes. Tudo depende de você, do projeto das necessidades dos usuários, do que você realmente gosta de fazer e do que precisa fazer. Portanto, certifique-se de fazer sua pesquisa. E para essas ferramentas que vou mostrar neste vídeo, vou criar um PDF que será anexado nesta aula que você pode baixar. E você pode simplesmente clicar nesses links para acessá-los facilmente, sem mais delongas. Vamos começar. Então, as primeiras ferramentas que abordaremos são ferramentas para pesquisa de UX. Agora, algumas dessas ferramentas são premium e você precisa pagar por elas , pelo menos, o teste gratuito dessas ferramentas para que você possa testá-las e ver se elas são adequadas para você. Uma recomendação que tenho para você é que, se você está apenas começando, faça sua pesquisa sobre ferramentas gratuitas e faça isso a pé. O que quero dizer com isso é que você pode usar maioria dessas ferramentas gratuitas, como o Skype, como o Google Meet e coisas assim para conduzir suas pesquisas e entrevistas com usuários, por exemplo, e coisas como o DOS. E certifique-se de sempre receber pagamentos antecipados por seus projetos. Especialmente se você tiver que pagar por algumas dessas ferramentas porque elas são caras, elas podem ser muito caras no futuro, especialmente mais e mais ferramentas que você adiciona à sua caixa de ferramentas . Será cada vez mais caro. Portanto, sempre, sempre certifique-se de receber o pagamento antecipado antes de realmente começar a usar essas ferramentas. Então, como mencionei, as ferramentas para pesquisa de UX vêm em primeiro lugar e temos os livros Teller para que você possa entender o kit de ferramentas de UX interativo do seu cliente para iniciar seu próximo projeto com uma pesquisa adequada. Certifique-se de assista ao vídeo. Mais uma vez, os links estarão no PDF, clique neles e acesse todas essas ferramentas. Assim, você pode personalizar o processo de design de acordo com as necessidades do seu projeto. Você pode obter esse piloto com modelos interativos exclusivos. Portanto, a maioria desses modelos, entrevista com partes interessadas, entrevista com usuários, e você pode simplesmente adaptar todos esses modelos às suas necessidades e às necessidades de seu projeto específico. Você tem os dados que pode analisar e criar equipes com tags. Assim, você pode marcar, por exemplo, erros de inscrição. Inscreva-se Uma única inscrição precisa ser integrada, onde os usuários ficam presos e todas essas coisas. Em seguida, temos o ajuste de UX. A única plataforma de pesquisa de UX que você precisará de buffer é como ferramenta para melhorar a usabilidade de sites e aplicativos, desde o protótipo até a produção. Assim, você pode ver testes de usabilidade, pesquisa de arquitetura da informação análise do comportamento do usuário. Então, mais uma vez, quando os usuários ficam presos, eles precisam de ajuda com alguma coisa para que você possa fazer toda essa pesquisa aqui mesmo. E então você pode exportar essa pesquisa para entender e analisar mais, por exemplo, comunicar-se com sua equipe para entender melhor o que eles realmente precisam, tudo em uma única solução para criar dados Com base nas decisões de design do seu site, você pode organizar seu conteúdo com perfeição para poder classificar cartões, classificar cartões e testar árvores. Você pode enfatizar com seus usuários. Assim, você pode fazer testes de preferência, pesquisas de teste de cinco segundos, gravação de sessões e todas essas coisas e, em seguida, analisar os dados posteriormente para entender o que seus usuários realmente precisam. E, finalmente, temos algo que é chamado de fracasso. Então, basicamente, todas essas ferramentas são muito semelhantes, fazem um trabalho muito semelhante. E eu odeio esses pop-ups irritantes. Então, eles têm a plataforma, as soluções, os estudos de caso, os recursos, que você possa aprender a usar essas ferramentas. E, finalmente, eles têm o preço. Então, mais uma vez, soluções intuitivas de CX para melhorar as experiências. Você pode transformar a excelência em experiência em uma vantagem competitiva. Assim, você pode ver todas essas ferramentas. Então, vamos ver a plataforma. Assim, você pode usar pesquisas interativas, SMS e e-mail, feedback digital. Você pode importar feedback, contextos e temas de mapeamento de viagens. Então, eles têm a maioria dessas ferramentas. Mais uma vez, se você está apenas começando, não precisa saber o que é tudo. Você só precisa se familiarizar com a maior pesquisa de UX. E a chave aqui é que nem todas as agências, nem todas as equipes usam essas ferramentas. A maioria das grandes agências tem, mas as agências pequenas em equipes não, porque seus projetos são muito menores, as necessidades desses usuários são muito menores. E, finalmente, no final, mas crucialmente importante, os orçamentos desses projetos são muito menores. Então, projetos maiores usarão todas essas ferramentas e todas essas pesquisas, pesquisadores, porque eles têm mais usuários e esses usuários têm mais necessidades do que projetos menores. Então você tem que entender isso. Em seguida, temos ferramentas de design de UX para criar sitemaps e fluxos de usuários. sitemaps e os fluxos de usuários são muito importantes e são parte crucial do processo de design de UX. Então, aqui vou mostrar apenas duas ferramentas, mas, mais uma vez , existem muitas, muitas outras ferramentas que fazem a mesma coisa. Então, você pode ver como essas ferramentas se parecem aqui. Assim, você pode criar um mapa do site, criar um fluxo de usuários, explorar personas, criar mapas da jornada do cliente. E, finalmente, você pode criar wireframes, que estão em andamento para essa plataforma específica chamada mapa de fluxo. Mais uma vez, os vazamentos estarão em um PDF para que você possa verificar facilmente a boca. Então, como isso funciona? Bem explicado aqui. Assim, você pode criar um mapa do site. Você pode ver como fica aqui. Você pode criar fluxogramas. Você pode pesquisar usuários. Você pode brincar com as viagens dos clientes. Você pode gerenciar o conteúdo para entender e fazer upload de arquivos em descrições de páginas, textos e apenas lábios criminosos. E, finalmente, compartilhe com o cliente para obter feedback. Então, isso é ótimo. E então temos o transbordamento. Assim, você pode criar diagramas de fluxo de usuário interativos que contam uma história. Você pode comunicar seus projetos como nunca antes. Assim, você pode transformar seus designs em belos fluxos de usuário e ver como ficam aqui. Então, um pouco diferente deste site chamado fluxograma, é que você pode realmente fazer o upload de seus designs aqui e conectá-los fluxogramas e, em seguida, compartilhar esses fluxogramas com seus clientes, por exemplo. alguns clientes não entendem designs como esse. Eles realmente querem designs como esse. Então, dependendo de quem é seu cliente, quem são seus colegas de equipe, quais são seus desejos e necessidades, quão grande é o orçamento, quão grande é o cronograma, você terá que escolher um ou outro. Então, estou apenas mostrando esses exemplos. Mais uma vez, os links estarão em um PDF. Não deixe de conferi-los e ver e entender o que é certo para você. Em seguida, temos ferramentas para criar wireframes e protótipos. O balsâmico é a primeira ferramenta. É uma ferramenta bem conhecida. Então você pode fazer todas essas coisas aqui. Você pode entrevistar todas essas pessoas. Você pode colocá-los nesses wireframes. E o objetivo do Balsamiq é que eles estão oferecendo esses modelos realmente básicos. Então, se você está atrás desse tipo de coisa, então você pode usar Balsâmico. Deixe-me mostrar rapidamente o produto. Você pode ver aqui em segundo plano como parece que eles estão fornecendo todos esses elementos básicos pré-preparados, que parecem sites, que pareciam aplicativos móveis. Assim, você pode comunicar rapidamente suas ideias aos clientes e partes interessadas. Mas, na minha opinião, o que você pode fazer é subir degrau e transformar essas ideias em protótipos cada vez mais bonitos e viáveis. Então, para isso, eu gosto de usar ferramentas como o Adobe XD. Eu o uso todos os dias. Eu adoro isso. Dediquei meus anos nesse negócio ao Adobe XD porque realmente acredito que essa ferramenta é algo excelente. Nem todo mundo vai concordar comigo. Está tudo bem. É por isso que temos ferramentas como Figma e temos ferramentas como o Sketch. Mas, na minha opinião, o Adobe XD é o melhor porque faz parte da família Adobe. O que quero dizer com isso é que, se você precisar ajustar algumas imagens, poderá usar o Photoshop. Se precisar criar algumas ilustrações, você pode usar o Illustrator. Se precisar editar alguns vídeos muito rapidamente, você pode usar o Premiere. Se precisar criar alguns efeitos, você pode usar o After Effects. E todas essas ferramentas fazem parte de uma única família, que reduz o tempo de uso ao alternar entre os aplicativos, que reduz o tempo de aprendizado. Todos esses novos aplicativos fazem parte do mesmo sistema. Tenho muitas aulas e cursos no Adobe XD. Portanto, não deixe de conferi-los também. Se você quiser aprender mais sobre o Adobe XD, o que ele é e o que ele pode fazer. Mas, por enquanto, eu gosto muito e gosto muito de usá-lo. Mas, ao contrário do Adobe XD, que faz parte dessa grande família, Figma e o Sketch são empresas separadas e dedicadas apenas a essas ferramentas. Mas isso significa que eles serão mais dedicados aos usuários. Mas essas ferramentas nunca serão tão completas quanto algo da família Adobe, por exemplo, como o Adobe XD. Como as equipes que estão por trás dessas empresas são muito menores do que as equipes da Adobe, por exemplo, que podem gerar mais atualizações maiores a cada mês, por exemplo, como na Adobe, o XD é o estojo. Depois, para o Sketch, que eu sei que eles estão lançando atualizações todos os anos, enquanto a equipe do Adobe XD faz atualizações todos os meses. Então, mais uma vez, não estou tentando usar nenhuma dessas ferramentas porque não tenho um cavalo nesta corrida, como dizem. Mas eu só estou te dizendo o que eu gosto de fazer. Você pode decidir por si mesmo, por exemplo, para algumas pessoas, o Adobe XD não é uma solução. Figma é a solução. E para algumas pessoas, o esboço ainda é. Na minha opinião, Adobe XD, figma r2, as melhores ferramentas para o trabalho aqui. Mas você é quem tomará a decisão final no final do dia. Em seguida, temos as ferramentas para pesquisa e testes de UX. E aqui temos usertesting.com, que é um dos melhores sites disponíveis para esse serviço específico. Você pode ter uma visão vívida em primeira mão do que seus clientes estão pensando e vivenciando com as narrativas da experiência do cliente. Assim, você pode realmente se aprofundar nessas ferramentas. Como eu disse, não vou fazer isso neste vídeo em particular. Estou apenas tentando mostrar essas ferramentas que estão disponíveis para que você possa explorar melhor quais ferramentas são importantes para você e quais ferramentas são importantes para o projeto específico em que você está trabalhando. Então, aqui você pode fazer qualquer pergunta que você possa direcionar, qualquer pessoa que você possa engajar e enfatizar, descobrir e analisar e compartilhar ideias. Então, eles estão basicamente cobrindo toda essa rota de teste de usuário para você nessa ferramenta específica. Em seguida, temos câmera UX para que você possa oferecer a experiência de aplicativo perfeita. Então, mais uma vez, há um aplicativo de segmentação aqui. É líder de mercado em análise de experiência de aplicativos, capacitando equipes móveis com contexto rápido e alta fidelidade interna. Portanto, apenas uma análise de aplicativo móvel. Então, se você está trabalhando em projetos móveis, talvez essa seja a opção certa para você. Ou se você estiver trabalhando em projetos de desktop e dispositivos móveis, talvez essa ferramenta seja adequada para você. Mais uma vez, certifique-se de usar as ferramentas que são realmente cruciais para você. E mais uma vez, vou repetir o que eu disse no início deste vídeo. Certifique-se de receber o pagamento adiantado, pois essas ferramentas podem se acumular rapidamente à medida que você adiciona mais e mais dessas ferramentas. E antes de começar a gastar dinheiro com essas ferramentas, minha principal dica aqui é experimentá-las, testá-las e ver se elas realmente funcionam para você nesse projeto específico. Não se amarre a uma ferramenta. Se não for uma boa opção para você, certifique-se de testá-los, experimentá-los e entender se eles são realmente necessários para esse projeto específico ou não. Finalmente, temos as ferramentas para colaboração em equipe. O que temos aqui é a folga, e é uma das ferramentas mais conhecidas que existem. Mas o que você pode fazer no Slack é criar todos os tipos de comunidades diferentes. Você pode criar bate-papos separados com pessoas diferentes em sua equipe. Você também pode usá-lo para usuários. Você pode usar pesquisas, fazer alguns testes aqui mesmo no slide, mas é principalmente uma ferramenta de comunicação entre equipes e colegas de equipe. Em seguida, o que temos é para entregar, você pode usar algo que é chamado de amostragem. E a amostragem funciona bem com as ferramentas que mencionei anteriormente, como Adobe, XD, Figma e Sketch. Assim, você pode começar a fazer a integração nativa, mas à medida que você adiciona mais e mais pranchetas, à medida que adiciona mais e mais pranchetas a esse arquivo, isso vai começar a custar dinheiro. O ponto principal do Chaplin é permitir que você trabalhe com desenvolvedores para que você possa compartilhar facilmente seus projetos com os desenvolvedores. Em seguida, eles podem medir distâncias, margens de preenchimento e coisas semelhantes para entender facilmente o que precisam usar dentro do código posteriormente Você pode fazer isso nativamente no Adobe XD. Figma. Não tenho muita certeza sobre o esboço, mas algumas pessoas realmente gostam de usar o poder de Chaplin porque você também pode deixar comentários aqui e ali, o que também pode ser feito no Adobe XD e no Figma. Mas, mais uma vez, algumas pessoas também gostam de usar o Zeplin porque estão acostumadas com ele ou precisam facilitar o código morto posteriormente de alguma forma. Então, mais uma vez, cabe a você decidir o que ela realmente quer fazer com essas ferramentas e o que você realmente precisa usar. Então, como mencionei algumas vezes ao longo deste vídeo, não deixe de conferir o PDF. Vou deixar todos os links que mencionei dentro desse PDF. Certifique-se de ver quais dessas ferramentas são adequadas para você. Quais dessas ferramentas farão o trabalho para você? E mais uma vez, minha dica principal aqui é não se apressar e investir todo o seu dinheiro nessas ferramentas. Se você não for usá-los, certifique-se de testá-los. Certifique-se de entender o que eles fazem. Deveria aprendê-los aqui e ali. Porque quando o projeto chega, você conhece todas essas ferramentas que o ajudarão nesse projeto específico. Mas não se esforce e invista seu dinheiro no projeto e nessas ferramentas que você não vai usar naquele momento, certifique-se de que, à medida que você se desenvolve, cresce, à medida que descobre essas ferramentas para usar apenas as ferramentas que você realmente precisa para o seu trabalho e , em seguida, evoluir mais tarde durante sua carreira. E à medida que essas ferramentas surgirem, certifique-se de explorar todas elas porque é muito importante, mas não se apresse e invista seu dinheiro em todas elas. 12. SECÇÃO 1: Sua tarefa para esta seção da aula é apenas aprender mais sobre design de UX. Você pode se informar visitando sites como o Nielsen Norman ou visitando sites como o Career Foundry e apenas lendo diferentes blogs on-line de renomados designers de UX. Só para se informar um pouco mais, nesta aula, vamos falar apenas sobre os fundamentos do design de UX, abordagens básicas, porque, afinal de contas, essa é a aula para iniciantes. E eu não queria aborrecer vocês com muitas metodologias e só para confundi-los ainda mais, uma vez que vocês realmente obtivessem todas essas noções básicas desta aula, vocês serão muito melhores preparado para atacar algumas informações adicionais e algumas técnicas mais avançadas que os designers de UX usam. Então, você pode usar esses dois ou simplesmente navegar pelos agentes do YouTube. Smart, ter um canal muito bom no YouTube e existem muitos designers de UX diferentes que você pode seguir no YouTube para aprender até mesmo mais. Existem até classes diferentes sobre design de UX, mas antes de realmente fazer compras diferentes sobre design de UX, certifique-se especificamente de que o primeiro se informe sobre elas recursos gratuitos que acabamos de mencionar para ver se o design de UX é algo pelo qual você realmente é apaixonado e que realmente deseja seguir. 13. SECÇÃO 2 resumos de design: Quando você começa a trabalhar com seus clientes, o resumo do design é algo extremamente importante para cada projeto. Então é sobre isso que vamos falar nesta seção. Qual é o resumo do design, como estruturá-lo e como usar o modelo gratuito que forneci. Então, vamos começar. 14. O que é um resumo de design: O resumo do design é essencial quando você está começando cada projeto seu. Sempre que há um projeto pequeno ou um grande projeto, você precisa entender o escopo do que seu cliente acha que ele precisa antes de prosseguirmos com a pesquisa de UX e todo o resto da UX parte do seu projeto. Mas primeiro, pare nessa jornada com seu novo cliente ou um cliente existente é o resumo do projeto. Você precisa começar com um resumo de design de cada projeto, especialmente com novos clientes, porque muitas vezes eles pensam que entendem o que realmente precisam desse projeto, mas quando você entra e explica a eles que eles realmente não precisam disso, eles precisam daquilo. Dessa forma. Com essa discussão com seu cliente, você formará uma opinião e seguirá o caminho que eles não necessariamente pensavam que você iria seguir. Ok, talvez eles precisem de um site para ser projetado. Tudo bem, mas talvez eles não precisem dessa página exata. Talvez eles precisem de duas dessas páginas. Talvez eles não precisem de muitas informações nesta página específica e assim por diante. É aí que o resumo do design é útil. Você deve criar e discutir o resumo do design no início do seu projeto. Em primeiro lugar, talvez às vezes você faça uma ligação com seu cliente, apenas uma ligação introdutória. Quem você é, quem eles são, o que eles precisam. Então, em sua próxima ligação, talvez você possa preparar um resumo de design. Você pode preenchê-lo quando estiver conversando com eles porque precisa entender quem eles são, em quais mercados estão, quão grande é a empresa, qual é o tamanho do projeto, onde eles querem este projeto está por vir. Quais são os objetivos desse projeto? Quais são os objetivos deste projeto? Qual é o orçamento para esse projeto? Você precisa fazer todas essas perguntas no início do seu projeto. Porque se você guardar para mais tarde, pode ser tarde demais. Nesta aula, vou mostrar meu modelo. Na verdade, vou lhe dar esse modelo e você pode usar e reutilizar exatamente esse mesmo modelo para todos os seus futuros clientes. Você pode mudar as cores. Você pode incluir seus logotipos, se quiser. Você pode fazer com isso o que quiser. A melhor parte desse modelo, que mostrarei na próxima lição, é que ele pode ser impresso. Se você estiver indo às reuniões com seus clientes pessoalmente , você pode imprimi-lo, entregá-lo a eles e, se necessário, ambos podem discutir algumas mudanças, se necessário, antes que realmente possamos continue com seu projeto e, antes de realmente começarmos a criar esse projeto em particular, esse modelo pode ser infinitamente editável e eu o estou dando a você como parte desta aula para que você possa fazer com ele o que você quiser em seu próximo projeto. Então, na próxima lição, eu vou te mostrar esse modelo. Eu vou te mostrar como você pode editá-lo e vou te mostrar como você pode usá-lo para seus futuros clientes. Então, eu vou te ver lá. 15. Como criar um resumo de design no Adobe Xd: Criar um resumo de design no Adobe XD pode ser muito simples, e esse mesmo resumo de design você pode usar e reutilizar ao salvá-lo como modelo para todos os seus futuros clientes. O que é ótimo é que ele foi criado com os recursos mais recentes do Adobe XD em mente, como pilhas, como componentes. Assim, você sempre pode alterar as cores, as fontes, os ícones e muito mais. Eu vou te dar esse modelo. Você pode usá-lo em todos os seus projetos futuros, se quiser. Então, sem mais delongas, vamos começar. Então, aqui está no Adobe XD. Essa é a aparência do modelo. E aqui temos os fundamentos do resumo de design, e aqui temos o modelo de resumo de design real. Agora, antes de seguir em frente e mostrar o que realmente está incluído, eu só queria mostrar isso rapidamente. Aqui temos a cor do parágrafo, que é a cor de todos esses parágrafos. Eu tenho a cor do ícone aqui. Então, obviamente, a cor dos ícones e a cor do título, que é a cor desses títulos. Agora, lembre-se de que o design é essencial, isso não deve ser alterado. Você pode alterá-lo, excluí-lo se não quiser tê-lo aqui. Mas o objetivo principal é lembrá-lo do que você pode incluir seu modelo de resumo de design, que é esse modelo aqui. Minha recomendação é mantê-lo como está e apenas adicioná-lo a esta parte. Mas se você quiser, você sempre pode excluí-lo. Se você quiser. Querendo observar que, se eu selecionar isso, você pode ver que essa caixa inteira é a caixa de texto porque, como eu disse, ela não deve ser alterada. Mas, como eu disse, mais uma vez, você pode excluí-lo. Você pode fazer com isso o que quiser para começar. Por que temos aqui? Se eu ampliar um pouco mais, temos o perfil da empresa e temos a mesma coisa aqui. Em seguida, temos a visão geral do projeto, a mesma coisa aqui. Temos metas e objetivos. Você entendeu. Então, todas essas coisas importantes estão incluídas aqui. Então, vamos analisar cada um deles e vou explicar o que está por trás deles e por que você deve incluir algo assim. Portanto, antes de tudo, no perfil da empresa, você deve incluir detalhes como nome, produtos do setor ou serviços que a empresa possui. Lembre-se de que você pode explorar esse modelo aqui. Você pode editá-lo, estender a caixa de texto, alterá-lo. Você pode adicionar várias páginas, você pode fazer com elas o que quiser. Isso é apenas um indicador em que direção você deve incluir todas essas informações para que seu cliente possa entender melhor o que você realmente precisa para esse projeto específico. Então, mais uma vez, uma proposta de venda única, o que os diferencia da concorrência? Isso é muito importante e, como você deve saber quando começar a explorar a concorrência, você deve saber o que ela ganha com ela, o que ganha com a concorrência, então para que serve a seus negócios e a concorrência de Derek, o que os diferencia da concorrência e assim por diante. Quem são as principais partes interessadas? Quem são os principais tomadores de decisão, basicamente, colaboradores e pontos de contato no círculo de negócios com o qual você está lidando nesta organização? É esse o CEO, é o RH? Com quem você está lidando diariamente nesta lista de projetos de concorrentes diretos e indiretos. Assim, você pode fazer sua pesquisa sobre eles. Isso é o que eu estava mencionando sobre o principal ponto de venda, a proposta de venda exclusiva e assim por diante. Então você precisa entender quem está lá, concorrentes diretos e indiretos. Você precisa pedir essas informações aos seus clientes, especialmente se você não estiver nesse setor ou nicho. Então, talvez você não entenda quem é essa empresa, com o que ela está lidando e coisas assim. Isso lhe dará uma compreensão muito melhor do projeto e do que você realmente precisa fazer nele. Se você solicitou essas informações , o que você pode fazer ao reunir todas essas informações, você pode reuni-las em um documento do Word ou algo parecido. Você pode acessar seu modelo de resumo. Você pode inserir sua empresa de projeto aqui mesmo. E, a propósito, eu estava usando o Roboto, como você pode ver aqui, que é uma fonte gratuita do Google. Assim, você pode simplesmente baixá-lo e começar a usá-lo imediatamente. E mais uma vez, você pode simplesmente clicar com o botão direito do mouse aqui e editar e alterar todas essas fontes, cores, ícones e assim por diante. Nome do cliente aqui, prazo do projeto, quando o projeto terminará, o que é crucial para cada projeto, nome do projeto. Então, se o projeto tem um nome, você pode inseri-lo aqui, por exemplo, não sei se algo é algo site ou algo assim, algo aplicativo ou um painel ou qualquer perfil da empresa, certo? Sua pesquisa sobre a empresa aqui. Então é disso que estávamos falando aqui. Em seguida, temos uma visão geral do projeto. Então, é aqui que você criará uma descrição detalhada do projeto. Desculpe, isso tem o máximo de contexto possível. Tente perguntar ao seu cliente o que eles estão fazendo e por que estão fazendo isso. O quê? Você está construindo algo novo, o que é crucial? Você está redesenhando o que eles já têm? Quais ativos eles têm inesperados após a conclusão deste projeto? E, finalmente, os y, tentam identificar os problemas que eles têm. Ao entender os problemas, você encontrará uma solução com mais facilidade. Então é aqui que você realmente vai fazer algumas perguntas e ser criativo aqui. Estou apenas apontando a direção certa sobre o que você deveria estar fazendo. Mas você deve basicamente abrir esse breve modelo, por exemplo, em uma tela ou em uma parte da tela. E quando estiver falando com eles, você pode simplesmente inserir as informações que eles estão lhe dizendo, ou você pode usar um documento do Word, você pode usar papel e caneta. Você pode fazer o que quiser e simplesmente colocar todas essas informações neste breve modelo. Mais uma vez, se formos direto aqui, clique aqui, kid Control ou Command E para exportá-lo, eu posso selecioná-lo como PDF e então você pode compartilhar esse PDF com seu cliente. Eles podem então dar mais feedback sobre o que você fará neste projeto específico hoje, concordar, discordar e coisas do tipo. Então temos metas e objetivos, o que também é muito importante. metas refletem o propósito de origem do seu projeto, enquanto os objetivos destacam os métodos para alcançar essa meta. Então, por exemplo, o cliente quer mais tráfego em seu site. Exemplo objetivo, aumente a quantidade de sessões semanais em 20% até essa data específica. Então esse é o exemplo perfeito. Na maioria das vezes, os clientes não entendem, o que você realmente quer que isso alcance? Você quer, como neste caso, mais tráfego em seu site? Se sim, o que você vai fazer com esse tráfego é convertê-lo em leads e usar leads quentes ou leads frios. Você vai dar a eles algum tipo de produto ou brinde gratuito para que você possa anexá-los à sua lista de e-mail. Você quer que eles liguem para você ou que eles comprem alguma coisa? É um produto novo no mercado? É o produto que existe neste mercado? Qual é o seu público-alvo e o que você realmente quer que eles façam quando chegarem ao seu site? Muitas vezes, e acredite em mim, quando você faz essas perguntas aos seus clientes, eles realmente começam a pensar e dizer: sim, você está certo. Talvez não precisemos de um site 50 páginas diferentes, como falamos em primeiro lugar. Talvez eu só precise de uma boa página de destino, talvez sobre a página, talvez a página do produto. É basicamente isso. Portanto, você precisa fazer todas essas perguntas para que eles entendam o que realmente precisam desse projeto em particular e de você, como designer , desse projeto. Então, mais uma vez, como eu disse, exemplo objetivo, aumente a quantidade de sessões frequentes em 20 por cento. Então, digamos que você queira redesenhar seu site para vender seu produto e queira oferecer um brinde ao maior número possível de pessoas para que você possa convertê-las por meio seu boletim informativo por e-mail toda semana. Então, o objetivo é apenas aumentar a quantidade de assinaturas semanais do meu boletim informativo para que eu possa converter, digamos, 10% a mais de pessoas no próximo mês. Então essa é a sua pista. Meta, objetivo claro, o que eu deveria fazer como designer do que começar como devo fazer isso, como devo integrar tudo isso? Eles deveriam usar soluções existentes para e-mails, como, por exemplo , o Mailchimp, digamos, ou devo criar algo novo e direcioná-los nessa direção? Além disso, porque eles dizem que querem mais inscrições de e-mail para converter essas pessoas posteriormente, você precisa criar essas inscrições de e-mail para serem mais proeminentes em seu site. Você pode ver que já estamos começando design de UX apenas por ter um bom resumo de design, é por isso que o resumo do design é muito importante. Ao estabelecer metas e objetivos antecipadamente, que é o que eu disse, você não está apenas preparado para tomar decisões mais informadas que estão sendo planejadas, mas também está mais bem armado para provar sua valor e valor para o cliente fora da estética visual do seu site. Então, mais uma vez, você um designer que está resolvendo problemas. Você não está aqui para criar algo bonito e pronto. Você tem que resolver os problemas deles por meio seu design e torná-lo bonito ao mesmo tempo Esse é o objetivo de ser um designer. Público-alvo. Mais uma vez, você não sabe para quem, para quem está projetando. Você não pode projetar. Outra forma de informar suas decisões de design é desenvolver uma compreensão sólida dos usuários que interagirão com o aplicativo ou site de seus clientes. Se seu cliente tem essa pesquisa, você já está com sorte. Mas se eles não tiverem, você mesmo terá que fazer essa pesquisa. Você pode vender isso como um serviço diferente e ganhar mais dinheiro, o que é crucial. O que deve surgir em sua pesquisa é a personalidade do público. As informações sobre a personalidade do seu público devem incluir detalhes como idade, sexo, país, Fresno, cidade de residência, local de trabalho, hábitos de consumo de mídia, hábitos diários, como viajar, comer fora, socialização e assim por diante. Então, o que isso nos diz é, por exemplo , se eu estou criando um site de calçados para pessoas de 30 anos, esse site tem que ser completamente diferente do que se eu estivesse criando o mesmo site para pessoas de 65 anos. Como as pessoas de 65 anos, a maioria delas tem deficiência visual. Eles não gostam de cores brilhantes. Eles já têm muito mais dinheiro do que o primeiro grupo de jovens de trinta e poucos anos. Então você tem que pensar em todas essas coisas quando você começa a projetar, você tem que criar personas. quem você está projetando isso? Portanto, quando você tiver essas personas, quando tiver essa pesquisa, quando tiver esse público-alvo pronto, você saberá quais cores usar, quais fontes usar, quais tamanhos de fonte usar, que tipo de imagem, que tipo de tom, que tipo de linguagem? Então, digamos que o idioma para crianças de três anos seja completamente diferente do que para crianças de 65 anos. Se você estiver usando gírias e termos que somente pessoas de 35 anos entendem, essas pessoas de 65 anos não conseguirão entender e simplesmente sairão. Isso aumentará sua taxa de rejeição e dobrará suas costas para o quadrado. Em seguida, projetamos os requisitos. Você deve especificá-los antecipadamente, porque muitas vezes, especialmente esse é o modelo do Adobe XD. Digamos que meus clientes gostem de trabalhar com esboços. Eu não trabalho com sketch, eu trabalho no XD. E então chegaremos ao final do projeto. Ficará completamente inconsciente de qual ferramenta estou usando. E então houve dois pedidos de arquivos de esboço. É claro que há muitas conversões por aí. Você pode pagar por determinados serviços para fazer essas conversões para você ou pode fazer essa conversão por si mesmo. Mas qual é o objetivo? Por que se preocupar? Você pode simplesmente perguntar com antecedência. Então, as dimensões dos ativos e as resoluções. Em primeiro lugar, isso é crucial para o dinheiro. Se eles quiserem, por exemplo , a tela 10 do iPhone, é isso. Então você vai cobrar uma certa quantia de dinheiro. Mas se eles quiserem o iPhone 89, 101-112-1314, seja o que for, todos esses tamanhos e também as versões do Android. Claro, você terá que cobrar muito mais dinheiro porque terá que trabalhar muito mais. Então, faça essas perguntas com antecedência. Os formatos de arquivo, como mencionei, devem ser acordados com os desenvolvedores antes de você começar a trabalhar. Alguns desenvolvedores gostam de usar arquivos Figma, outros gostam de esboçar arquivos. Outros simplesmente não se importam desde que você esteja usando algo como, sei lá, plataformas de compartilhamento ou um desses plug-ins, vamos explorar. Vamos ver o que podemos fazer aqui. Algo como o Zeplin, por exemplo, muitas pessoas gostam de usar o Zeplin, digamos. Então, se você não está usando urina de Zeplin que não vale a pena, você não é bom para eles, então você tem que usar o Sapling. Mas se você nunca usou mudas antes, isso pode criar uma situação embaraçosa para você, então você precisa aprendê-la no meio do projeto. Portanto, pergunte com antecedência, isso ajudará muito a exigir uma paleta de cores. Eles têm suas cores existentes? Porque se o fizerem, você está com sorte. Se não o fizerem, você terá que criar isso do zero. Então pense em todas essas coisas. Os ativos de imagem também devem ser incluídos. Eles têm suas próprias imagens ou você precisa usar imagens. Se você precisar usar imagens, precisa usar imagens gratuitas ou premium. É muito simples fazer essas perguntas, mas a maioria dos designers simplesmente não faz isso. Você tem que pensar nisso porque, se eles quiserem, se quiserem usar imagens premium, por exemplo, quem está pagando por essas imagens premium? Está saindo do bolso deles? Ou estão pensando nisso porque eles pagam você, por exemplo, digamos $5.000. Tudo está incluído em todas essas imagens, todos esses ícones, vídeos, imagens de estoque, tudo está incluído nesses 5.000 v. Então pense em todas essas coisas que estão presentes. Isso vai te poupar muito tempo. Então, o que temos são documentos de cópia associados. Especialmente, os documentos copiados podem ser algo como um contrato ou se você pode usar algo NDA , por exemplo , um acordo de confidencialidade ou se você pode usar o logotipo deles, digamos, nesta orientação, não nessa orientação. Portanto, você precisa falar sobre todas essas coisas com eles para entender melhor o que eles realmente precisam e o que você pode realmente fornecer a eles. Finalmente, precisamos entregar os arquivos. Você deve sempre entregar seus modelos, diretrizes de marca. Se você os criou, moodboards ou qualquer outra coisa que possa ajudar os clientes a entender e confiar, posso confiar em sua trabalhar. O que quero dizer com isso é que, se você criou seu quadro de humor, basta entregá-lo a eles. Porque se você cobrar essa quantia de dinheiro pelo quadro de humor no meio do projeto, mostre o quadro de humor para eles. Se você criou estruturas de arame de papel e densas, mostre essas molduras de papel. Isso vai mostrar a eles quanto tempo e esforço realmente foram gastos nesse projeto em particular. Finalmente, temos o principal motivo aqui. Então, orçamento e cronograma. Isso é muito importante, muito estranho para designers, porque muitos designers simplesmente não querem lidar com dinheiro. Mas o dinheiro é muito importante, especialmente para você, porque você precisa cobrar o que realmente trabalhou neste projeto em particular. Caso contrário, você ficará sem sorte, porque quando você assinar o contrato, é isso. Você não pode fazer nada além de talvez realmente criar um projeto separado ou sair desse projeto e muito mais. É por isso que eu tenho essa animação aqui de punk rosa indo e voltando entre você e o cliente, você tem que especificar todas essas coisas antes de realmente inicie seu Adobe XD e comece a trabalhar dessa forma. Crie modelos breves como esse podem ajudá-lo muito, especialmente quando você está orçando e especialmente, quando está cristalizando, quanto tempo você realmente precisa para de quanto tempo você realmente precisa para todos esses itens específicos partes do seu projeto? Então, voltando ao assunto, se você está trabalhando em uma agência, você não está lidando com essa parte, mas se você é um freelancer, essa parte é absolutamente essencial para o seu sucesso, que é o que eu disse agora. O orçamento, dependendo do tamanho do orçamento, você saberá a profundidade do projeto e dedicará seu tempo e recursos a ele. Você não criará wireframes de papel, wireframes e, em seguida, cinco revisões diferentes de designs. E então, não sei, cinco protótipos diferentes e seguida, animação de seus ícones e , em seguida, criação de maquetes completamente separadas que estão acostumadas com seu projeto. Você não fará tudo isso se eles estiverem apenas pagando a você ou, sei lá, uma quantia boba de dinheiro, dependendo do dinheiro que eles têm, dependendo do que precisam. Esse é o tempo que o projeto vai levar. Portanto, você terá que cobrar o que realmente trabalhou para esse projeto em particular. Caso contrário, eles só vão usar você no final do dia. O que temos valor no momento, antes de qualquer outra coisa, porque os clientes não valorizarão, se você não valorizar seu tempo, ninguém mais valorizará. Cronograma. Os projetos precisam se manter dentro do prazo e serem lucrativos. É por isso que os horários são essenciais para seus resumos. Cada agenda precisa ter paradas. Então, um no início, um no final e tantos ou tão poucos quanto necessário no meio. É assim que você e seus clientes saberão que você está no caminho certo. É por isso que criei essa data de início, data de pesquisa, data do público. claro que você pode mudar tudo isso. Data de apresentação, data de revisão, data de entrega. Você pode adicionar quantas dessas paradas quiser. Você pode removê-los, você pode fazer o que quiser. Então, escreva seu orçamento e cronograma aqui. Então, detalhamento do orçamento aqui, por exemplo , 2000 adiantado, 2000 no meio, digamos algo assim. Então, apresentação, digamos 2000. Então, finalmente, no final, a entrega, anos 2000 lá, ou 50 por cento começam seu planejamento, pés por cento no final. Portanto, você precisa considerar o que realmente vale e o que realmente se sente confortável em pedir de seus clientes. E, finalmente, detalhamento do cronograma. Você não pode fazer isso enquanto estiver vivo. Portanto, você precisa criar cronogramas perfeitamente claros. Pesquise seu cliente, quando é o início, quando é o meio, quando é o fim? Quando são as revisões? Quantas revisões eu tenho? Quando devo entregar isso? Quando você deve entregar isso e muito mais. Portanto, você precisa considerar tudo isso no início do seu projeto. Finalmente, o que temos aqui é que, sem o resumo do design, você está apenas perdendo seu tempo esperando conseguir o que eles gostam na primeira vez. Ao usar o resumo do design, você garante que você e seus clientes estejam na mesma página desde o início. Então, você valorizou seu tempo e também o tempo de seus clientes? Então é isso que eu estava mencionando logo no início desta aula. Você precisa criar um resumo de design todas as vezes para cada projeto, não importa se o cliente é cliente para quem você já trabalhou no passado, você precisa criar um resumo de design para este projeto em particular. Então, todo mundo está no mesmo caminho. Certifique-se de criar esses pontos de parada e essas lacunas em seu projeto. Então, como eu mostrei anteriormente aqui. Então comece por aí, dados da data de início da pesquisa, para o público, pesquisa para a apresentação do design. Tanto mais que você e seus clientes podem seguir o mesmo caminho quanto ao que é exigido desse projeto e que é entregue nele. 16. Breve de design em Figma: Neste vídeo, vamos conferir os breves conceitos básicos de design e sua aparência no Figma, porque é exatamente o mesmo no XD e no Figma, mas ainda assim é importante explicar você porque há algumas diferenças quando você deseja criar ou reutilizar algo assim. E a mesma história dos modelos do Adobe XD, você também receberá modelos Figma. Você pode brincar com eles. Você pode usá-los e reutilizá-los para seus próprios projetos. Então, vamos até Figma e deixe-me mostrar como são esses modelos. Então, aqui estamos em Figma e aqui, como você pode ver, temos o resumo essencial e temos o nosso resumo. E, basicamente, é exatamente a mesma história do Adobe XD , como já mencionado. Então, se você quiser mudar algo, se quiser editar algo, é exatamente o mesmo. Então, apenas as ferramentas estão aqui no topo e não aqui. E ainda assim você tem seu painel de propriedades aqui no seu lado direito. Se dermos uma olhada aqui, temos os estilos locais. Esses são seus estilos de texto e esses são os têxteis que apliquei a partir dos próprios documentos. A mesma história do Adobe XD é que eles estão localizados neste lado. Bem, em Figma, eles estão localizados aqui. E ele vai ler tudo o que está localizado dentro desses arquivos. E então, quando você clica em um quadro, nesse caso, porque não temos nossos quadros no Figma, temos molduras. Em seguida, ele vai pegar as cores de seleção, ou seja, as cores que estão localizadas dentro desse quadro. Mas se eu clicar do lado de fora, isso nos levará de volta aos estilos locais. Agora, lembre-se de que esses modelos são simples e sem propósito. Mais tarde, quando chegarmos a um design, mostrarei algumas técnicas mais avançadas. Mas, por enquanto, para resumos de design , propostas de projetos e personalidades, por exemplo, um modelo, será muito simples porque tem um propósito criado para ser super simples, porque você pode usá-lo e reutilizá-lo muito rapidamente. Então, aqui temos a cor de fundo, que é a cor de fundo em geral. Depois, temos os estilos de texto e você pode ver o texto informativo, os títulos das seções do texto principal. Então, na mesma história de antes, eu gosto de renomear e nomear todas as minhas camadas. Então temos o cinza principal, temos o cinza escuro, e temos os traços que são todas as cores que você já está acostumado em termos de edição Se eu selecionar algo, ele vai aparecer aqui. Então, deixe-me me encontrar para que você possa ver um pouco melhor. O que eu estou falando aqui, basicamente, o que você pode ver aqui é que o texto foi selecionado. Um resumo essencial não é a prancha de arte, mas a moldura em si. Ele foi selecionado e aqui você pode ver como está posicionado. Então, aqui temos o título da página, que na verdade é o estilo desse texto. E então temos o cinza principal, que é a cor real desse texto. Se você quiser mudar alguma coisa, você pode clicar aqui. E você pode ver que tem o título da página, que é 148 pixels e automático. E você quer mudar isso. Você pode clicar aqui para editar algo e editar o nome. Você pode ver a fonte, você pode ver que está em negrito, o alinhamento do texto é automático e assim por diante. E a mesma história vale para as cores, basta clicar aqui. E essas são as cores dentro do documento. E aqui estão as cores pessoais que Figma sugere que você use se quiser alterá-la para as cores que Figma está sugerindo aqui. Mas se não, você pode simplesmente clicar aqui e ele vai para o cinza principal. E aqui você tem as propriedades, aqui temos a opacidade. Você pode escondê-lo, mostrá-lo e assim por diante. Finalmente, temos esse ícone de link. E se você quiser separá-lo, então ele se tornou, vai se tornar sua própria propriedade. Você pode clicar com o botão direito para ver a cor e a fonte e ele a separará de lá. Mas em termos da estrutura geral, parece-me que quando x D. Então aqui temos o título, aqui temos todos esses outros textos. Isso é para os breves fundamentos. E você pode ver nesse vídeo mais detalhes sobre o que está incluído em cada um deles. Porque agora que a Adobe comprou o Figma, Figma real logo se tornou quase exatamente o mesmo que é o XD no momento, apenas com todos esses recursos do Figma e recursos adicionais da Adobe , como Bibliotecas da Creative Cloud e muito mais. Então, basicamente, você poderá abrir arquivos XD no Figma muito em breve. Mas eu ainda queria mostrar esses vídeos enquanto a transição está em andamento , porque pode levar até um ano ou talvez dois anos. Aqui, dentro do nosso resumo, temos o mesmo título aqui. Você pode ver que se chama título de praia e tem essa cor cinza principal. Mas aqui as coisas são um pouco diferentes. Então, se eu destacar aqui, você pode ver que aqui temos esse grupo e aqui temos algumas restrições. Você pode criar um layout automático se quiser. Mas aqui temos seções e elas estão localizadas dentro do layout automático, e você pode vê-las aqui. Agora, também estão em camadas basicamente pilhas no Adobe XD. É só que eles têm talvez mais uma ou duas opções dentro do Figma que não temos no Adobe XD, você pode ver que elas estão posicionadas verticalmente e sua posição no canto superior esquerdo, que é o alinhamento de onde elas vêm. Então, aqui e dentro dessas seções, temos todas as seções separadas. E o espaçamento entre cada uma dessas seções é de 60 pixels que você vê aqui. E você pode posicioná-lo em 40 pixels, por exemplo, você pode ver o que isso faz, mas vou deixá-lo em 60 pixels. Mais uma vez Você pode abrir esse arquivo de projeto. Você pode brincar com isso. Você pode explorá-lo, ver e se aprofundar um pouco mais em como eu criei tudo isso. Agora, cada uma dessas seções tem sua própria estrutura. Então, se eu abrir, você pode ver que temos o prazo do projeto. Então, a mesma história do Adobe XD. E se eu me aproximar um pouco mais, dentro do prazo do projeto, temos a empresa e esse é o ícone, e então temos o prazo do projeto em si. Agora, aqui, se eu selecionar o prazo do projeto, você pode ver que temos um layout automático separado. Agora, desta vez é horizontal. É posicionado do alinhamento à esquerda até o centro. E aqui temos o espaçamento entre os itens. Então, entre isso e isso, quando eu passo o mouse, você pode ver que são 40 pixels. Agora você pode selecionar essa pequena linha vermelha aqui e estender para a esquerda e para a direita, se quiser. Então, basta clicar e arrastar e ele vai estendê-lo. Mas eu, pessoalmente, prefiro escrever meus valores redondos aqui. Então, por exemplo, 60 pixels, isso vai fazer exatamente isso. Finalmente, para cada um deles, ou seja, para o prazo final do projeto, por exemplo, você pode ver que aqui temos o layout automático na direção vertical em 40. Então, se eu definir isso como 60, você pode ver o que essa coisa em particular faz. Claro, porque todos eles estão dentro do layout automático. Se eu ajustar este para, vamos ver 100, eles vão empurrar tudo para baixo porque tudo está dentro de seu próprio layout automático. Mas se eu voltar, você pode ver que agora ele completa essa seção. Agora, em termos desses ícones, quando você seleciona nosso resumo ou seleciona qualquer coisa dentro do nosso quadro de resumo, você pode mudar para os ativos. E aqui você tem seus breves componentes locais para esses ícones específicos. Agora você pode desenhar seu próprio ícone, parecendo um X-Y. Você pode trocar ícones e criar distâncias de ícones. E falaremos sobre isso um pouco mais tarde, quando chegarmos ao design. Mas, basicamente, é assim que parece. E, finalmente, vamos passar para as camadas. Vamos selecionar o prazo e mostrar como isso foi criado. Então, basicamente, não temos nada chique aqui. Só temos um círculo e temos um círculo de data de início e término. Se eu selecioná-lo. Aqui, você pode ver que temos nosso traço e ele está nos mostrando que ele está vinculado, mas está apenas vinculado à cor do traço. Você pode ver esse traço de cor aqui se eu me esconder. Então você pode ver isso um pouco melhor. E aqui temos a cor de preenchimento, que é essa cor branca. Então, basicamente é muito simples trabalhar com isso. E, como mencionei, é exatamente o mesmo que no Adobe XD. Agora temos apenas esses documentos dentro das molduras e não nos aeroportos, como estamos acostumados no Adobe XD, por exemplo, aí está. Você vai receber esse arquivo. Você poderá abri-lo em Figma e explorá-lo por si mesmo. Eu quero criar esse vídeo rápido apenas para mostrar algumas diferenças. Você encontrará arquivos Figma que o Adobe XD tem e vice-versa. Eu encorajo você a brincar com esses arquivos, abri-los, explorá-los um pouco mais, apenas para se familiarizar com o Figma. Mas se você já abriu alguma coisa no Adobe XD, se trabalhou no Adobe XD por um breve período de tempo, notará algumas diferenças aqui e ali, mas as ferramentas são basicamente as mesmas. E esse é o ponto principal aqui. Eu também não queria recriar esse conteúdo do Adobe XD para Figma. Eu só queria criar esses vídeos mostrando o que é o mesmo, o que há de diferente entre esses arquivos? Porque eu não quero perder seu tempo porque essas ferramentas são basicamente as mesmas. E agora que a Adobe e a Figma serão exatamente as mesmas no futuro. Então, basicamente, para este vídeo, não deixe de conferir o modelo. Ele está anexado aos arquivos do projeto do curso. Certifique-se de abri-lo e certifique-se de abrir os modelos do Figma para cada seção deste curso apenas para verificar as diferenças entre os arquivos Adobe XD e os arquivos Figma. 17. SEÇÃO 3 Propostas de projeto: As propostas de projetos são uma parte extremamente importante de todo funil de projetos de designers freelancers, porque você não quer apenas enviar aos seus clientes o preço e dizer: “ Aqui está, você quer reduzir esse preço”. que eles possam entender facilmente o que estão pagando por você. Você quer digerir, para que eles entendam facilmente o que você está trabalhando neste projeto. Quanto tempo isso vai levar? Quanto tempo cada parte do projeto realmente custará. Por que você está fazendo todas essas etapas? Quais etapas estão realmente envolvidas nesse processo de design? Então, tudo o que abordaremos nesta seção, e eu vou realmente mostrar um modelo que você pode usar. E eu vou lhe dar esse modelo para que você possa usá-lo em seus projetos futuros apenas para acelerar um pouco seu processo e fazer com que pareça um pouco mais confiável para seus clientes. Então, vamos começar. 18. O que é uma proposta de projeto: Um dos maiores erros que vejo, especialmente jovens designers, é que eles não enviam as propostas do projeto. Mas quando o cliente se aproxima deles e solicita o preço do projeto, ele simplesmente calcula que acabou, digamos, por exemplo design do site custa $2.000, mas os clientes geralmente não entendem porque eles próprios não são designers na maioria dos casos. E eles não entendem que o que está envolvido nesse projeto específico de design de site é o design ajustado. É codificação? É um tema WordPress? Eles ouviram falar de algo chamado Wix, por exemplo, ou Webflow. O que está incluído no preço e no que você está oferecendo a eles. Você precisa explicar cada pequeno detalhe para justificar seu preço. Isso fará com que você pareça profissional e polido como designer e, por sua vez, fará seu cliente entenda melhor o que ele realmente está envolvido nesse projeto de design de site. Agora, isso não precisa envolver simplesmente o design do site. Pode ser projetado para aplicativos, brochura, design de logotipo, o que quer que você esteja fazendo, você precisa explicar aos seus clientes o que exatamente você está oferecendo a eles pelo preço que está pedindo. Isso é exatamente o que é a proposta de design. Nesta aula, falaremos sobre a proposta de design de UI UX porque isso faz parte de um mundo de design e de uma esfera de design, que é muito diferente de, por exemplo design de logotipo ou folheto design, porque mais uma vez inclui etapas diferentes para chegar à solução, que é design de sites, design de aplicativos e coisas assim. Então, nesta aula, falaremos sobre propostas de design de UI UX. Mas o que quer que você esteja fazendo, seja qual for o ramo ou design em que esteja, você pode aplicar esse mesmo princípio. Basta ajustá-los ao seu próprio nicho de design, sua própria esfera de design, ao que você estiver fazendo e simplesmente acompanhá-los para seus futuros clientes. 19. Quando você deve enviá-lo: Quando exatamente você deve enviar sua proposta aos seus clientes? Bem, primeiro tem que começar com a descoberta, ligação ou e-mail. Então, quando seus clientes se aproximam de você, você os envia por e-mail para, por exemplo Zoom ou Google Meet, Skype, o que quer que você esteja usando. Ou você pode simplesmente continuar essa conversa por e-mail, se não se sentir confortável na frente da câmera ou falando com o microfone, se seu inglês não for muito bom, você coletará todos os essas informações sobre o que eles realmente precisam fazer para esse projeto específico. E você precisa fazer a eles um conjunto de perguntas e conferir meus tutoriais e cursos de UI UX, especialmente minha masterclass do Adobe XD. Porque nele eu realmente me aprofundo sobre o resumo do design e quais são algumas perguntas que você deve fazer aos seus clientes para obter uma imagem perfeita sobre o que exatamente eles precisam dele. projeto específico. Depois de coletar todas essas perguntas e coletar todas essas respostas, chega a hora de começar a preparar esta proposta de design de UI UX. E nele, você incluirá todos os serviços que fornecerá ao seu cliente para esse projeto específico. Então, por exemplo, se você está fazendo pesquisas de projetos, se você está fazendo entrevistas pessoais, se você está fazendo pesquisa pessoal, se você está fazendo wireframes de papel, wireframes no Adobe XD, porque eu sou usando o Adobe XD, essa aula é sobre o Adobe XD, mas pode ser qualquer coisa, pode ser Illustrator, pode ser Sketch, figma, o que você estiver usando, certifique-se de incluir todos esses detalhes. E, claro, design de interface do usuário, exportação de ativos, o tempo que você gasta neste projeto, porque essa é a única coisa fundamental que a maioria dos designers ignora. O tempo que você gasta nesse projeto, seja enviando e-mails, fazendo chamadas telefônicas, fazendo conversas em vídeo com seus clientes via Zoom, Skype ou Google Meet ou qualquer outra coisa. Todas essas coisas devem ser incluídas na proposta do projeto de dívida. Porque dessa forma os clientes entenderão exatamente o que você está cobrando por estagiário, como eu disse, isso fará com que você pareça mais polido e profissional. E mais uma vez, os clientes terão uma ideia clara de quanto é cada dólar que você pediu por eles, para onde vai? Portanto, certifique-se de enviar propostas de projetos. E no próximo vídeo, vamos realmente explorar como criar um no Adobe XD. E vou mostrar quais são, na minha opinião e na minha experiência, algumas coisas importantes que você deve realmente incluir em suas propostas de projetos. 20. Como criar uma proposta de projeto no Adobe Xd: Como eu disse anteriormente, sou usuário do Adobe XD e adoro isso. Eu o uso todos os dias há anos. E nesta aula, mostrarei como criar sua própria proposta de projeto e quais são algumas das perguntas que você deve fazer aos seus clientes e também quais são alguns dos serviços que você deveria oferecer aos seus clientes. Então, vamos entrar no Adobe XD e eu vou mostrar o que estou usando. Aqui está a proposta do projeto Mike. E essa é, na verdade, a proposta de projeto que criei. Eu o criei como um produto e você pode realmente obtê-lo se quiser. Preço muito simbólico, vou deixar o link no PDF. Você pode simplesmente clicar nesse link e obter uma largura, um grande desconto, se quiser. Caso contrário, você pode simplesmente seguir esta aula e criar a sua própria com suas próprias perguntas, respostas e tudo mais. Então, vamos abordar cada uma delas em aulas separadas. Mas eu só queria dar uma olhada rápida e mostrar por que estou usando o Adobe XD e por que configurei todas essas coisas da mesma forma que fiz. Primeiro de tudo, você pode criar esses aeroportos. E esse aumento é de 1920 em 2.500, o que não é realmente ideal para impressão. Mas nos dias de hoje, você está realmente enviando a maioria de suas propostas por e-mail de qualquer maneira. Então, descobri que, ao longo dos meus anos de experiência, tenho quase 15 anos neste negócio. Descobri que tipos de arquivamento desse tamanho funcionam muito bem tanto para impressão quanto para envio por e-mail. E para mostrar que esses são exatamente esses modelos que acabamos de mostrar no XD. Então, eu simplesmente imprimi em um pedaço de papel A4. E você pode ver, por exemplo, esse é o preço do projeto. Você pode ver a qualidade e ver como ela fica. E também posso mostrar detalhes neste projeto, por exemplo, para que você possa ver claramente, embora ele seja muito bom e dependa realmente de seu cliente local? Você vai dar isso a eles pessoalmente ou enviará esses arquivos por e-mail? É por isso que eu disse que o Adobe XD é ótimo porque é uma ferramenta baseada em vetores, que significa que todas essas coisas que você cria nunca perderão qualidade. E eles não são baseados em pixels, como o Photoshop, por exemplo, é por isso que eu não recomendaria e aconselharia usar o Photoshop. Eu aconselharia você a usar o Adobe XD. Além disso, o Adobe XD tem esse recurso incrível incorporado. Como você pode ver, você pode criar um protótipo e compartilhar o interior do design. Você pode criar todas essas coisas que você vê na tela dentro do protótipo. Você pode realmente conectar todos esses detalhes. Se você quiser construir nosso protótipo, os clientes podem realmente clicar. Você pode enviar este link para eles. Eles podem clicar e acessar páginas diferentes se você quiser criá-lo como um site personalizado, por exemplo, não há codificação envolvida, mas parece que existe. E adiciona outra camada adicional de profissionalismo e personalidade ao seu design. Finalmente, há o compartilhamento. Então, o que quer que você faça em um protótipo, você pode entrar na guia Compartilhar. Você pode gerar um link e, em seguida, enviar esse link para seus clientes, se quiser. É por isso que adoro o Adobe XD porque o estou usando para todo o meu trabalho, trabalho de design de interface de usuário e alguns trabalhos que não são UX de interface do usuário, como trabalhos em mídias sociais, por exemplo, mas tudo o que você cria, seja design de aplicativo, design de site, design de produto, o que quer que você esteja fazendo, então você pode facilmente prototipá-lo e compartilhar tudo no Adobe XD. E é por isso que adoro usá-lo. Além disso, como você pode ver, temos todos esses componentes globais. Então, para esse design e modelo específicos, como eu disse, você pode obter isso. Mais uma vez, o link estará em um PDF. Basta clicar e acessá-lo. Você pode clicar com o botão direito do mouse, por exemplo , nesta cor H1, você pode clicar em Editar. Digamos que a cor do seu cliente seja, digamos três, E, C6, f, f, por exemplo, basta pressionar Enter ou Return. E, como você pode ver, com apenas um clique, aplicou todas essas mudanças globais a essa cor específica. Você pode fazer isso com todas essas cores. E eu realmente aconselho você a, se você acabar usando este modelo no final do dia, sempre que fizer uma alteração, sempre que fizer uma alteração, simplesmente selecione essa cor hexadecimal que você selecionou para o seu projeto do cliente. Pressione o comando C do controlador, clique com o botão direito aqui, clique em Renomear e simplesmente altere esse código hexadecimal original com seu novo código hexadecimal. Dessa forma, ele será atualizado em tempo real e realmente mostrará aos seus clientes que você realmente prestou atenção aos pequenos detalhes. Mais uma vez, isso foi projetado para oferecer a você uma possibilidade muito melhor de conseguir esse cliente e esse projeto. Porque, mais uma vez, você vai se destacar como profissional do mar desses designers amadores que estão simplesmente pedindo $500, $5.000 por um site sem nunca explicar o que realmente está envolvido nesse processo. Abaixo disso, temos estilos de personagens. E você pode realmente mudar esses estilos de personagens como eu mostrei com as cores. E temos todos esses ícones. E eu lhe darei o link para esses ícones, se você quiser comprá-los, os premium. Mas se você não fizer isso, tudo bem. Você pode simplesmente usar qualquer tipo de ícone gratuito que desejar. E, finalmente, temos o componente para o rodapé. Então, temos o componente principal, que é esse componente principal aqui. E então, todos esses outros componentes do rodapé são, na verdade, componentes secundários. Então, sempre que você fizer uma alteração nesse componente, que é um componente principal, ele realmente se adaptará, mudará e atravessará todos esses diferentes aeroportos. Portanto, a primeira página desta proposta de projeto é capa. E no próximo vídeo, abordaremos o que realmente está incluído dentro da capa. Então eu vou te ver lá. 21. Capa da proposta: Neste vídeo, falaremos sobre a capa da proposta. Então aqui está, e deixe-me explicar rapidamente o que é tudo. Então, se mudarmos do meu painel de ativos para o painel Camadas aqui e clicarmos, você verá que a organização do projeto é boa e tudo pode ser facilmente acessível. Então, o que isso realmente é o nome do subprojeto, é aí que você inserirá o nome do seu projeto. Por exemplo, se esse é o nosso site de carros, você dirá, por exemplo nosso redesenho do site ou algo parecido. Mas certifique-se de inserir o nome exato do projeto, pois, mais uma vez, isso transformará confiança em seus clientes. E isso realmente vai diferenciá-lo de todos esses outros designers, porque você prestou atenção a esses pequenos detalhes abaixo de que temos o nome da empresa. Então, neste exemplo imaginário, será Audi, qualquer site da empresa, audi.com, por exemplo, e o endereço da empresa o endereço local dessa concessionária Audi. Claro, isso é apenas um exemplo. Você vai inserir as informações do seu cliente. E o que é ótimo sobre isso é quando você seleciona esse nome e, por exemplo Audi, redesenho do site. Como eu incluí o preenchimento, isso vai se expandir à medida que você digita. Mas se você não quiser preenchimento, basta selecionar as informações do projeto. Você pode ver que o preenchimento está verificado aqui. Você pode simplesmente desmarcá-la e ela não se expandirá à medida que você digita. Só querer não estar por trás disso é uma imagem. E eu realmente aconselho você a incluir algum tipo de imagem de fundo da oferta de seu site existente, mídia social, página do LinkedIn, captura de tela do YouTube, o que quer que eles tenham. Mais uma vez, só para mostrar a eles que você realmente presta atenção aos detalhes. Eles poderiam realmente se sentir em casa, como se isso fosse realmente personalizado para seus negócios, para suas necessidades. Como é, basicamente, mas você está simplesmente mostrando a eles como você pode realmente projetar isso e aquilo que realmente prestou atenção e que você realmente se importa com o negócio deles e com a ajuda deles. Abaixo disso, temos o rodapé e o que expliquei anteriormente. Por exemplo, se você não tem seu próprio site aqui, você pode inserir, por exemplo seu endereço do Behance e perfil de beacons , seu perfil de drible, seu perfil Upwork, o que quer que você esteja fazendo, o que quer que você está fazendo isso, você pode simplesmente inseri-lo aqui. Novamente, certifique-se de instalar essas fontes. E vou deixar os links para as fontes em um PDF também. Se você quiser dar uma olhada, então temos o e-mail. Obviamente, isso é apenas o padrão. Você vai inserir seu endereço de e-mail e nós temos um contato, então você pode inserir suas informações de contato lá. Você pode incluir o ícone do WhatsApp aqui ou ícone do Viber se estiver usando qualquer um desses serviços. E, basicamente, quando você os inclui aqui neste primeiro rodapé, conforme explicado como um componente principal, ele será atualizado automaticamente em todos eles. Então, se eu te mostrar isso, por exemplo digamos que seja Alex em indesign.com, que é meu site. Quando eu digito isso, você pode ver que ele se aplica a todas essas páginas, que é o objetivo dos componentes principais. Então, é assim que eles são fáceis de usar. Então, basicamente, uma coisa a menos que eu queria mencionar é que há uma grade envolvida aqui, como você pode ver claramente. Então, quando você seleciona o nome da prancheta, você pode ver aqui, deixe-me me esconder. Portanto, temos 12 colunas. largura da calha é 60, que é a distância entre essas colunas. A largura da coluna é A2, que é a largura dessas colunas. E, finalmente, temos margens vinculadas à esquerda e à direita. As margens são simplesmente esse espaço da última coluna à direita e da última coluna à esquerda. Então, espaço entre a borda da prancheta e a própria coluna. Então, basicamente , isso é tudo para a capa. E, como você pode ver, pode ser muito importante obter a cor certa. E quando você começar a ajustar aqui , ele será facilmente traduzido para essas outras páginas. E uma última coisa a observar aqui que você pode até mesmo adicionar seu próprio logotipo se quiser identificar o logotipo incluído. Mas se quiser, você pode colocar o logotipo deles lá, que é apenas uma camada extra de personalização e uma camada realmente extra de mostrar que você se importa. No próximo vídeo, falaremos sobre os detalhes do projeto. Então, eu vou te ver lá. 22. Detalhes do projeto: Os detalhes do projeto são uma das partes mais importantes da sua proposta de design de UI UX. Então, vamos dar uma olhada e ver o que você pode fazer, certo? Então, aqui está a página de detalhes do meu projeto, como você pode ver aqui. Então, se eu levar você a alguns detalhes, primeiro de tudo, se eu clicar aqui, temos o título da página e esse ícone aqui. Mas, como mencionei anteriormente, você pode usar seus próprios ícones. Você pode alterar os ícones porque eles são criados como componentes se eu selecioná-los aqui. Então, na verdade, não incluí este como um componente, deixe-me pressionar Control K para criá-lo. Então, por exemplo, se eu quiser trocá-lo aqui, posso simplesmente adicionar esse componente, por exemplo, este ícone. E ele será atualizado em tempo real e substituirá esse ícone anterior por esse ícone existente. Então esse é o título do seu projeto. E nós nos dividimos aqui. E, por exemplo, você pode adicionar até mesmo o nome do projeto, se quiser, mas eu realmente não vou incomodá-lo com essas informações. Então, por exemplo, detalhes do projeto de redesenho do site da Audi, se você quiser, mas acho que isso é bom o suficiente. Como você pode ver, não há números de página porque você pode realmente exportar páginas individuais por vez, se quiser, se elas precisarem apenas de detalhes do projeto, por exemplo, então realmente não faz sentido ter o número dois, por exemplo, o número três no topo porque o que é, o que é isso na verdade? Assim, você pode exportá-lo sem nenhum número de projeto e número de página e ainda pode funcionar perfeitamente. Então, o que temos aqui é o projeto Oreo. Assim, podemos criar páginas de descrição do projeto para criar um design responsivo e um cronograma do projeto. Então, tudo isso tem, é claro, seu significado e é muito importante. A descrição do projeto é o que você realmente concordou com seu cliente por e-mail. Somos uma chamada de descoberta e coisas tipo. Páginas para criar. Ou podem ser telas para criar se você estiver fazendo design móvel, as telas são páginas que você concordou em criar, um design responsivo. E, claro, apenas mais uma nota nas páginas para criar. Se houver algumas páginas adicionais para criar , isso ocorrerá na fase de pesquisa. E então você pode simplesmente colocar um asterisco aqui e, por exemplo , dizer: “Ainda não discutimos essas páginas adicionais depois de terminarmos com elas, então provavelmente, por exemplo podemos ajustar o preço”. e coisas assim. Então, certifique-se de prestar atenção a esse design responsivo. Obviamente, se você concordou com o design responsivo, certifique-se de falar com seus desenvolvedores sobre os tamanhos exatos do design responsivo. E, finalmente, o cronograma do projeto. Quando isso vai começar? Quando é o ponto médio e quando ele vai acabar? Obviamente, são extremamente importantes para qualquer tipo de projeto em que você esteja trabalhando. Há um site com uma única página ou com 100 páginas. Isso não importa. É extremamente importante. Em seguida, temos o cronograma do projeto. Então, para todas essas coisas, quanto tempo vou levar para terminar cada uma dessas coisas? Então, por exemplo, dez dias, 20 16 dias, oito dias, que são as revisões. Portanto, as revisões sempre dependem da sua velocidade e da velocidade de seus clientes para lhe fornecer o feedback. Então, por exemplo , se eles precisarem, digamos três dias para fornecer feedback, pois eles precisam verificar com seus parceiros, parceiros negócios e coisas do tipo. Então, obviamente, você vai levar muito mais tempo para fornecer o resultado final, a revisão final. É por isso que eu sempre coloco, como você pode ver aqui, que diz oito mais oito mais esses e mais realmente depende deles quanto à rapidez com que são. Finalmente, ensinamos um tempo total de projeto de mais de 54 dias. Mais uma vez, a vantagem é essa revisão positiva. Então, isso é basicamente tudo para a estrutura. E agora deixe-me explicar rapidamente como tudo isso está configurado. Então, se entrarmos no projeto ou na revisão e abrirmos isso, temos o título, que é esse aqui. Então você pode mudar isso ou contratar o que quiser. Então, esses são os detalhes que combinamos durante nossas conversas por e-mail e ligação. Então, se você acabar comprando esse modelo, mais uma vez, o link estará em um PDF. Você pode mudar isso. Se você não fez uma ligação com eles, basta ter uma conversa por e-mail com eles e, em seguida, remover essa conversa de chamada. E apenas uma nota rápida. Se você acabar usando esse modelo exato ou acabar recriando exatamente esse mesmo modelo, que estou mostrando. Certifique-se de personalizá-lo de acordo com suas necessidades e o que você realmente precisa. Então, como mencionei aqui, pague a ligação. Certifique-se de examinar cada um desses itens e simplesmente personalizá-lo para cada cliente em particular, porque você levará cerca de 1 h para fazer tudo isso e , quando for chega aos seus clientes, seu profissionalismo e à satisfação do cliente. Então, se voltarmos para aqui, o que eu queria mostrar é isso. Então, esses são os itens. Então, esses são esses itens e, como você pode ver, eles estão incluídos em uma pilha vertical de 40. Então essa é a distância. Então, se eu incluí-lo em 80, por exemplo , como você pode ver, a distância será maior entre todos esses itens. E, finalmente, porque está em uma pilha e é um recurso incrível do Adobe XD. Se eu pegar o cronograma desse projeto, por exemplo, e digamos que eu queira colocá-lo acima do design responsivo. O que eu posso fazer é simplesmente clicar aqui, arrastá-lo e posicioná-lo. E, como você pode ver, ele trocará automaticamente de lugar entre esses dois. Agora, o que também é importante é entre esses dois. Portanto, há uma distância clara. Então, aqui temos a pilha de 100. Então, dentro dessa pilha principal, temos esses dois. Então, visão geral do projeto, que é essa, e cronograma do projeto, que é essa com uma distância de 100. Então, o que isso significa é quando você entra em cada uma delas, seja projeto, visualização ou cronograma do projeto. E digamos que eu queira remover esse cronograma do projeto por qualquer motivo. Eu simplesmente clico nele, excluo e, em seguida, o conteúdo abaixo será automaticamente movido para o topo para preencher esse espaço, que agora é um fim de semana quando eu removo o item anterior. E se eu passar o mouse aqui e selecionar isso, você pode ver que ainda estamos com 100 de distância entre esses dois, o que é ótimo. Se você quiser remover qualquer um desses itens, digamos que eu esteja trabalhando com esses itens exatos. Você não o faz e, simplesmente, pode remover qualquer um desses itens que não atenda às suas necessidades. Você pode fazer isso para qualquer um desses que quiser. Então, páginas para criar, digamos que você tenha apenas uma página e excluiu. Como você pode ver, ela aplicará essa alteração a todas essas páginas e a todos esses itens internos. Obviamente, acontece o mesmo com o cronograma do projeto. Portanto, se eu selecionar um item na linha do tempo, clique em excluir. Como você pode ver, o tempo total do projeto se ajustará e simplesmente entrará em um lugar desse item anterior, que eu acabei de excluí-lo. Obviamente, isso é extremamente importante porque você deseja analisá-los com os detalhes do projeto o máximo que puder durante sua conversa por e-mail, durante sua conversa por telefone, porque dessa forma você removerá qualquer dúvida sobre o que realmente está incluído, incluído nesse projeto específico. Então, mais uma vez, se eu voltar atrás, você pode ver as páginas de descrição do projeto para design, design responsivo, cronograma do projeto. E, claro, você pode adicionar qualquer tipo de item que quiser aqui, por exemplo, estão configurados para serem projetados. Seus ativos, meus ativos, todas essas coisas. Portanto, você pode incluí-los aqui, por exemplo se quiser, é claro, prestar serviços. Como você pode ver, pesquisa de projeto, pesquisa de concorrentes, resumo de design e inspiração. Obviamente, como mencionei, você pode remover qualquer um deles e incluir seus próprios itens exatamente no que está trabalhando nesse projeto específico. Porque nem todo projeto exigirá isso. Então, por exemplo, a pesquisa de projetos já pode ter sido feita para você, então você reduzirá sua contagem de dias. A pesquisa de concorrência pode ser datada dessa para você. Então, mais uma vez, você vai reduzir esses dias ou aumentá-los dependendo da rapidez com que está trabalhando naquele projeto específico. Em seguida, temos os preços do projeto. Então, nos vemos no próximo vídeo onde discutiremos os preços do projeto, por que eles são importantes e como você pode realmente ajustá-los à sua proposta geral de projeto. Então, eu vou te ver lá. 23. Preços do projeto: Neste vídeo, falaremos sobre preços de projetos. Então, vamos dar uma olhada. E aqui está. Mais uma vez, pareciam detalhes do projeto e capa do projeto. O preço do projeto é extremamente importante porque, quando se trata de dinheiro, os clientes geralmente são repelentes, digamos assim. E eles realmente não sabem no que estão se metendo. Portanto, é aqui que a proposta geral do projeto é útil, mas também o preço do projeto, pois é uma página separada. Então, vamos dar uma olhada rápida e ver o que está incluído aqui. Então, mais uma vez, exatamente a mesma estrutura. Eu não vou te aborrecer muito com esses detalhes. Então, como você pode ver, temos a pilha de 81 grupos, este está aqui para pagar as taxas do projeto. E o segundo grupo está aqui para ver as opções do projeto. Então, sempre que você remover um desses itens, por exemplo, ele vai saltar como eu mostrei anteriormente. Então, deixe-me realmente mostrar isso mais uma vez. Digamos que eu remova esse item. Como você pode ver, todos eles vão pular para preencher o espaço, que agora é fim de semana quando eu removo esse item, falando em itens, como você pode ver, temos taxas de projeto. Então, isso é o que eu estava falando anteriormente, aos dois anos, o que vai exalar a confiança do cliente e realmente explicar a eles o que exatamente, em detalhes, é o que você está realmente cobrando? esse projeto em particular. Então, se você der uma olhada, temos uma pesquisa de projetos e você pode se aprofundar nos detalhes, explicando a eles mais tarde durante sua ligação. Se você quiser revisar isso com eles ou por e-mail, por exemplo, se eles lhe disserem o que exatamente é uma pesquisa de projeto, então você deve, por exemplo , dizer a eles: bem, eu preciso pesquisar sua empresa. Preciso pesquisar sua concorrência, que é o que vem a seguir. Quem é seu concorrente? O que você é? Em que se insere a natureza? O que o serviço de produto da sua empresa está tentando alcançar? Quem são seus clientes-alvo, por exemplo , onde eles estão localizados, em quais empresas estão trabalhando? E todas essas coisas são o que entra na pesquisa de projetos, no resumo do design. Na verdade, você mesmo escreverá o resumo do design se se inscrever, conforme explicado anteriormente na minha masterclass do Adobe XD, por exemplo, você receberá o modelo de resumo de design e poderá usar esse modelo conjunto com esta proposta de design para trabalhar com a inspiração de seus clientes, o que é uma coisa fundamental. Uma coisa importante em cada projeto é sua inspiração. Então, precisamos nos inspirar. Você precisa passar um tempo em todos esses sites diferentes explorando possíveis soluções, possíveis layouts, possíveis estilos, cores, tipografia, escala e todas essas coisas. Você precisa se inspirar e investir seu tempo para alcançar esses resultados. Portanto, esse é simplesmente um preço básico, que obviamente cobro muito mais por todas essas coisas. Temos pesquisa conceitual em papel, wireframe, mapa do site e fluxogramas. E eu sempre incluo meu tempo neles, mas você pode adicionar uma linha separada. Eu simplesmente coloco assim porque vou ficar sem espaço aqui. Mas você pode incluir uma linha separada. E para fazer isso, por exemplo selecione um item, pressione Control D e ele colocará um item abaixo. E, por exemplo, digamos hora do e-mail, hora chamada e da videochamada. Esse pode ser o seu momento. Então, toda vez que eles querem se encontrar com você e falar com você sobre esse projeto em particular. Você vai cobrar por isso. E basta clicar duas vezes aqui e, digamos, $900, digamos que seja isso. Portanto, certifique-se de incluir todas as coisas que você pessoalmente investirá neste projeto. Então, todo o seu tempo, pesquisa, design, planejamento, wireframes, compartilhamento desses links, revisões de feedback, todas essas coisas que serão incluídas nesse preço. Finalmente, no final do dia, acabei de ler e adicionei tudo isso, e chega a esse preço, ou seja, 30.750. Mas, obviamente, esse é um preço imaginário. Mais uma vez, cobrei muito mais dos meus projetos. Assim, você pode examiná-los e simplesmente ajustá-los ao que funciona para você. Então, por exemplo, um artigo, pesquisa conceitual de wireframe, mapa do site e fluxogramas. Talvez você queira adicionar algo mais aqui. Então, digamos, estrutura de arame de papel, exploração de estrutura de arame. Se é isso que você está fazendo, pesquisa conceitual, mapa do site, blá, blá, blá, e então você pode cobrar mais dinheiro porque adicionou essa coisa adicional. Ou se você, por exemplo não estiver fazendo uma pesquisa conceitual, clique duas vezes aqui, pule, remova a pesquisa conceitual e, em seguida, simplesmente ajuste esse preço para se adequar ao que você está trabalhando neste projeto em particular. Então, isso é basicamente o que são as taxas do projeto. E, como eu disse, isso é o que vai exalar essa confiança em seu cliente. Para realmente entender e se sentir mais confortável em pagar esse dinheiro. Porque agora você mostrou a eles, ok, essas são todas as coisas que eu realmente vou trabalhar para você neste projeto em particular. Então, é por isso que preciso cobrar o dinheiro que expliquei a você, porque todas essas coisas estão realmente envolvidas nesse projeto em particular. Vamos passar para isso. Portanto, temos opções de pagamento. E, mais uma vez, o pagamento é extremamente importante para nunca, nunca, por qualquer projeto em que você esteja trabalhando para qualquer cliente você esteja trabalhando sem receber primeiro o pagamento. E é aí que as opções de pagamento são úteis. Mais uma vez, essas são apenas opções de pagamento usadas no passado. Existem muitos outros, como, por exemplo , pagamento semanal, pagamento mensal , pagamentos únicos ou eles estão pagando a você 100 por cento. Se você se sentir confortável com isso, talvez queira se adicionar à empresa deles, por exemplo, tornar-se acionista e coisas assim. Portanto, existem muitas, muitas, muitas outras maneiras de receber pagamentos. Mas eu fui em frente e incluí três dos mais comuns. Então, por exemplo, dois pagamentos iguais. Então, onde quer que seu total aqui seja simplesmente dividido em dois. E então, aqui mesmo, 50% adiantado pouco antes de começarmos este projeto. E então, 50 por cento no final, pouco antes de eu precisar enviar os arquivos finais desse projeto em particular, temos três pagamentos iguais. Portanto, 33,3% no início, meio e no final do projeto. E temos dois pagamentos, por exemplo , 70, 30 divididos ou 60, 40 divididos. É por isso que eu disse que existem muitas opções de pagamento diferentes, então certifique-se de escolher aquelas com as quais você se sente mais confortável. E, em seguida, simplesmente coloque-o aqui. Então, se for, acho que neste caso foi de 70 a 30 dividido, então 9625 e o último pagamento é de um a cinco. E apenas certifique-se de explicar quando você espera que eles façam esses pagamentos, qualquer um deles que você inclua em todas as opções de O objetivo dessas opções de pagamento é dar a eles opções e explique a eles que você pode lhes dar opções. Então, na maioria dos casos, existe esse estigma sobre dinheiro, que eu realmente não entendo porque você está prestando o serviço. Da mesma forma que você vai à loja para comprar comida, por exemplo, o atendente da loja fornecerá o serviço pelo qual eles são pagos. Parece que é com design de site ou design de aplicativo. Portanto, não é nada diferente. Portanto, certifique-se de fornecer a eles essas opções de pagamento , porque às vezes será muito mais simples dividir esse grande pagamento, especialmente se forem pagamentos grandes três partes ou quatro. partes ou cinco partes. Portanto, certifique-se de dar a eles essas opções primeiro e, em seguida, essas opções entre o YouTube, você pode resolver isso ainda mais. Então, vou te dar um exemplo. Por exemplo, eles podem pedir dois pagamentos, mas em vez de, digamos, 70, 30 divididos, talvez queiram pagar o contrário, talvez 30 por cento no início do projeto, 70% no final do projeto, talvez você esteja confortável com isso. Ou em vez de três pagamentos iguais pode ser o único a dividi-lo em cinco pagamentos iguais. É por isso que eu disse, basta dar a eles essas opções de pagamento com as quais você se sente confortável e com as quais deseja trabalhar. E então, entre vocês dois, vocês podem resolver isso. Por exemplo, como eu disse, para igualar a variação de três pagamentos iguais por meio de pagamentos iguais, o que quer que você se sinta confortável e com o qual seu cliente se sinta confortável, basta chegar a esse acordo incluído nas opções de pagamento e , em seguida vocês dois ficarão satisfeitos. Então, basicamente, isso é tudo para as opções de preços. Como você pode ver, é extremamente importante resolver todas essas coisas porque, mais uma vez, isso mostrará aos seus clientes que você é profissional. Isso lhes dará mais confiança em você para contratá-lo. E como você vai usar essa proposta de design, a proposta de projeto, que é personalizada para seus negócios e sua marca, realmente fará com que eles se sintam confortáveis em contratar você do que algum outro designer. Em seguida, temos os termos e condições. Uma página extremamente importante. Então, nos vemos no próximo vídeo, onde discutiremos isso. 24. Termos e condições: Em seguida, temos os termos e condições. Então, vamos entrar. E aqui está. Então, esses são os termos e condições, mais uma vez, página extremamente importante, porque aqui estão algumas regras básicas que você vai estabelecer. Seu cliente entenderá o que está incluído, que não está incluído, o que é possível, o que não é possível, o que está disponível, o que não está disponível. Portanto, todas essas coisas devem ser listadas em dois termos e condições. Esses são apenas alguns dos meus, é claro, para alguns projetos que usam menos. Para alguns projetos, eu uso muito mais. Então, se você precisar usar muito mais do que, você pode simplesmente duplicar este quadro de arte para n, para qualquer um deles. Por falar nisso, você pode manter opção de tecla Alt em sua palavra-chave, duplicá-la e, por exemplo chamar esses termos e condições de um termo ou condição ou simplesmente continuar de onde parou aqui, mas certifica-se de posicionar esta página em vez da página Sobre mim. Simplesmente tire isso do caminho, assim. Basicamente, basta fazer uma cópia e retirá-la do caminho. Então, simplesmente remova sobre mim, posicione isso aqui. Então, mais tarde, quando você começar a exportar isso como vários PDFs, você será capaz de rolar para baixo entre eles se você precisar incluir mais termos e condições. Agora, falando em termos e condições, o que você realmente deveria incluir. Portanto, temos os recursos do projeto. Então, por exemplo as imagens que você vai usar em seus projetos, que são tantas imagens incluídas neste projeto, você vai acabar usando imagens do Unsplash ou pagando por elas? imagens da Envato Elements, por exemplo, ou pagando por imagens muito caras de fotógrafos que pagarão por essas imagens, por ícones, por fontes, por ilustrações, por maquetes 3D, por maquetes 2D, para todas essas coisas. Esses são os recursos do projeto. Quem vai pagar por isso? Se você vai pagar por isso como designer, precisará voltar ao preço do projeto e aumentar muito o preço do projeto porque você acabará pagando por tudo isso se o o cliente pagará por todos eles e, em seguida, como tudo isso vai funcionar. Você vai encontrar um recurso pedir que eles o comprem? Ou eles lhe enviarão o dinheiro antecipado para os recursos que não estão incluídos no preço do seu projeto. Isso é dinheiro adicional para o projeto. Então, vão te enviar esse dinheiro para os recursos desses projetos? Você vai pagar por eles com esse dinheiro. E então você ainda terá esse dinheiro, que você concordou em ser o preço total do projeto. Então, certifique-se de prestar atenção a essas coisas. Depois, temos as revisões dos projetos, que é o que os clientes mais amam. Você precisa limitar as revisões do seu projeto. Em primeiro lugar, quando essas revisões ocorrerão ou ocorrerão todos os dias, no final da semana ou no final de duas semanas. Ou o que eu realmente gosto de fazer é nas partes específicas do seu projeto. Então, se eu levar você de volta aqui para ver os preços do projeto, por exemplo em meus casos, não haverá avaliações até eu chegar a esta seção. Então, wireframes do Adobe XD, e depois eu dou duas rodadas de revisões e feedback. Eu não quero que eles me incomodem quando eu estou fazendo minhas pesquisas, quadros de humor, preparativos, planejamento, coisas assim. E então, quando eu terminar os wireframes e fornecer a eles esse link compartilhável, poderemos começar com as revisões. Eles recebem revisões nesse preço incluído. Se eles precisarem de revisões adicionais , dentro das revisões do projeto, você acabará dizendo a eles quanto custam suas revisões após essas revisões. E, se você estiver fazendo revisões adicionais aqui , eles precisarão pagar pelas revisões no final do projeto porque, no momento , elas estão incluídas no preço. Mas se eles decidirem, por exemplo, em Greeley no XD, wireframes com link compartilhável. Em seguida, você fará com que eles paguem por essas revisões no final do projeto. Caso contrário, você não vai entregar o arquivo, coisas assim. Mas para evitar qualquer confusão, é por isso que temos termos e condições. Então você vai incluir todas essas coisas aqui. Então, adição de projetos. Então, digamos que eles queiram um cartão de visita adicional. Não, não. Você não está trabalhando em um cartão de visita. Você está apenas trabalhando neste projeto de design de UI UX. Digamos que eles queiram, você inclua postagens em mídias sociais e um design de brochura ou design de menu se o restaurante for nano, apenas UI UX design. Muito obrigado. E para essas coisas, se você estiver trabalhando com elas, poderá criar uma proposta de projeto adicional, que não é UI UX, mas proposta de projeto de design gráfico. E então simplesmente trabalhe neles com todas essas coisas. Mais uma vez, os termos e condições são extremamente importantes porque ajudarão você a evitar qualquer confusão com seu cliente, e você pode simplesmente começar a trabalhar com facilidade. Então temos dias úteis. Se seus clientes estão trabalhando nos finais de semana, tudo bem. Bom para eles. Mas se você não estiver trabalhando nos finais de semana, simplesmente coloque aqui. Se eles realmente querem que você trabalhe nos finais de semana, mas você não quer trabalhar nos finais de semana, cobre mais. É por isso que isso está aqui para formatos de arquivo. Mais uma vez, se você está trabalhando no XD, o que, mais uma vez, eu realmente recomendo porque eu realmente o amo. Mas eles perguntam, por exemplo, arquivo do Adobe Illustrator ou tipos de arquivo do Photoshop. Você pode dizer nesses formatos de arquivo, por exemplo, não os estou entregando porque estou trabalhando no XD. Mas, por um custo adicional , eu posso ir e entregá-las a você, porque são essas ferramentas de conversão on-line que você pode usar e precisa pagar por elas. É por isso que você pagará e ganhará mais dinheiro solicitando pagamento adicional nesses formatos de arquivo porque não está trabalhando com eles. Você pesquisa, certo? Então, após o final do projeto, quem obtém os direitos de usar o design e em qual momento, o que é crucial, se eles não pagaram o pagamento final , eles não têm o direito de usá-lo design. Se sim, você pode enviar a eles o design final do design e, em seguida, depende totalmente deles. Eles podem fazer o que eu quiser com eles. Eles podem vendê-lo, eles podem revender isso. Eles podem fazer o que quiserem. Ou, se você tiver alguns requisitos adicionais , pode colocá-los aqui mesmo em direitos de uso, por exemplo , com este modelo, não quero que vocês vendam esse modelo. É por isso que na Gamma Road, onde eu a vendo, existe uma política rígida no lado da câmera. Você pode comprar isso, você pode usá-lo para seus próprios clientes. Você pode usá-lo para um número ilimitado de projetos, mas não pode revendê-lo como se fosse seu. Caso contrário, Gum Road e eu somos legalmente obrigados a processá-lo porque você quebrou essa regra, que é, em termos e condições, é realmente muito simples. Finalmente, temos o cancelamento do projeto, que na verdade é o meu favorito. Então, isso já aconteceu comigo anteriormente, quando trabalho com clientes, por exemplo, por dois meses e eles acabam sem dinheiro. Isso realmente aconteceu comigo. Então, esse não é meu problema. Eles querem que eu lhes dê esse design, mas ainda não me pagaram na última taxa do projeto. Então, o que acontece na dívida é cancelamento desse projeto faz parte dos termos e condições, você pode realmente descrever isso. Então, se por algum motivo você não quiser me pagar pelo projeto, você não receberá os arquivos do projeto ou os arquivos do projeto para esta parte específica que nós terminei até a parte em que você me disse que não me daria nenhum dinheiro para o final do projeto. Isso realmente aconteceu comigo e eu fiz exatamente assim. Portanto, preste atenção, certifique-se de ser sábio sobre essas coisas porque você não está no controle da vida de outra pessoa. Você não sabe o que vai acontecer com eles amanhã. Talvez, talvez eles morram. Quem sabe? Talvez eles se mudem para outro país. Talvez eles se divorciem. Talvez o negócio deles vá à falência. Talvez, não sei, Bolsa de Valores entre em colapso. Muitas coisas podem acontecer, então certifique-se de se assegurar como designer trabalhando neste projeto, criando o cancelamento do projeto. Então, basicamente, como eu disse, você pode incluir itens adicionais se quiser. Esses são apenas alguns dos que estou usando o tempo todo. Mas, como eu disse, para alguns projetos estou usando menos. Para alguns projetos , estou usando mais. E especialmente se você estiver trabalhando com clientes recorrentes, você pode evitar algumas dessas coisas, mas certifique-se de ser mais inteligente e inclua o que achar necessário. Essas são apenas algumas das orientações incluídas. E mais uma vez, da mesma forma que com todos eles, temos esses itens e eles estão posicionados em uma pilha. Então, por exemplo, esses direitos de uso , você pode clicar em Excluir, ele aparecerá no topo. Portanto, é a mesma estrutura que mostrei com preços de projetos, detalhes do projeto e página de descoberta. Finalmente, o que resta para abordarmos é sobre mim, que é mais uma página importante. Então, nos vemos no próximo vídeo e vamos discutir esse. 25. Sobre você: Finalmente, vamos falar sobre minha página e por que ela é importante. Então aqui está. E mais uma vez, toda essa estrutura de página, como eu mostrei, é a mesma. Mas o que você pode fazer com essa imagem é que eu incluo para ser tão ampla. Então, por exemplo, se você quiser, você pode se colocar em um escritório como este. Se você tem um escritório como se estivesse trabalhando em seu computador, por exemplo, e você pode mostrar uma imagem como essa. Ou se você não fizer isso, você pode simplesmente ajustar o tamanho dessa imagem. Basta clicar nele. Você vai ajustá-lo. Você pode posicioná-lo para ficar no centro. Este texto virá em seguida, para que você possa realmente brincar e fazer o que quiser com ele. Mas eu incluí isso porque, na maioria dos casos, os clientes realmente gostam de ver você, seu rosto, mas também gostam de ver no que você está trabalhando. Por isso, essas imagens abaixo. Essas imagens podem ser tiradas de seu trabalho anterior nos fins de semana ou no Dribble, por exemplo, você pode simplesmente colocar imagens lá, o que mais uma vez vai exalar confiança em nossos clientes porque você é mostrarão mais do seu trabalho que eles realmente venderam porque entraram em contato com seu portfólio de quatro anos a partir do seu site, Behance Dribble, onde quer que você esteja hospedando seu portfólio e seu trabalho. Portanto, você pode realmente incluir imagens lá apenas para lembrá-las da qualidade do seu trabalho, do que você é capaz de criar como designer, porque há uma pequena possibilidade que eles não vão acabar contratando você se acharem que o orçamento é muito grande, por exemplo, ou algo parecido, então esta página está realmente lá para lembrá-los do motivo pelo qual a quantidade devida na primeira lugar. Porque na maioria dos casos, os clientes realmente veem dezenas de designers diferentes. Eles realmente não sabem qual é qual. Então, ao lembrá-los aqui de alguns de seus trabalhos, você pode realmente ajudá-los a decidir acompanhá-lo neste projeto específico. Então, como você pode ver, diz seu nome UI UX designer, mas você pode claramente clicar duas vezes aqui. Deixe-me inserir meu próprio nome porque incluí o preenchimento aqui. Então, quando eu começo a digitar, você pode ver que o rolamento está se ajustando. Assim, você pode incluir UI, designer de UX e designer gráfico slash. Criamos um Blogger, blog ou o que quer que você seja, você pode incluí-lo aqui e ele se expandirá. E, como mostrei anteriormente, você pode simplesmente ajustar essa imagem para o que quiser. Isso vai acontecer. Isso pode acabar sangrando aqui. E é claro que você pode mudar isso para outra cor. Não precisa ser branco, então você pode realmente brincar com isso como se fosse comigo. Aqui está escrito Project Resources. Tão pouco, um pouco mais sobre mim, por exemplo, então você incluirá informações sobre você aqui. Então você realmente vai explicar para eles, quem é você? Quais são suas informações? Qual é a sua educação, por exemplo, qual é a sua experiência nesses projetos? Então, onde você trabalhou no passado, quais são alguns dos seus interesses, por exemplo, estou realmente interessado em carros e depois vou explicar isso a eles. E se você está trabalhando nesse nicho específico, carnificina, por exemplo , dizer que você é realmente inspirado por carros, que está realmente interessado em carros. Há chances e possibilidades extremamente altas. Os clientes vão contratá-lo para este projeto em particular porque você está realmente interessado nessa esfera e nessa parte do mercado. Portanto, é realmente extremamente importante poder contar uma história para esses clientes, porque história é o que vai contratá-lo no final do dia. Mais uma vez, se você não quiser que eles estejam aqui. Então, nesses três parágrafos, você pode clicar em excluir, remover este parágrafo, mover essas imagens para o topo. Você pode simplesmente estender essas imagens dessa forma se quiser que elas sejam maiores. Então, mais uma vez, é extremamente adaptável. Você pode fazer o que quiser com isso. E, finalmente, o que eu quero mostrar aqui é se você é homem e se identifica como homem, você pode clicar duas vezes aqui, e você pode mostrar esse ícone de e-mail ou nós também temos o ícone feminino. Então você pode simplesmente ajustar a opacidade, trazê-la aqui se você se identificar como mulher. Então você pode colocar isso aqui. Caso contrário, você pode usar um ícone de gênero neutro se se identificar com isso, tudo bem, é claro. Então você pode incluir isso se quiser. Eu não o incluí aqui, mas, mais uma vez, vou deixar o link para esses pacotes de ícones. Eles não o incluíram lá, mas se você tiver seu próprio ícone pessoal, melhor ainda, basta incluí-lo ali mesmo. Eu te mostrei como substituí-los. Posso simplesmente arrastar e soltar seu ícone em vez desse componente e ele será atualizado em tempo real. Finalmente, como você pode realmente exportar isso? Você pode simplesmente selecionar antipatia. Então clique em Control E, escolha um PDF, clique em Exportar e ele o exportará para sua área de trabalho. E, por exemplo, onde está, aqui está. Deixe-me clicar duas vezes nele e abri-lo. Aqui está o controle zero. Então, este é o nome do seu projeto, detalhes do projeto, preços do projeto, termos e condições sobre mim. E se eu levar você a esta página, por exemplo, e ampliar um pouco mais. Porque, mais uma vez, esse é um formato de arquivo vetorial. Você pode ver a qualidade do texto. É realmente impecável e não perde qualidade, como você pode ver aqui. E se eu entender que você gosta, você pode ver o quão nítido esse texto realmente é. E é por isso que gosto de trabalhar no Adobe XD. Se você acha que esse texto em cinza não é facilmente legível, mais uma vez, você pode vir aqui onde diz cinza neutro. Aplique-o para ficar um pouco mais escuro e, em seguida, ele se aplicará a todos os seus projetos. Além disso, mais uma coisa a observar: se você quiser exportar esse e qualquer outro tipo de arquivo, você pode selecionar aeroportos individuais e compartilhá-los aqui, se quiser, mas você pode pressionar Control E ou Comando D em vez de PDF, você pode compartilhá-los como imagem PNG ou imagem JPEG ou SVG se quiser que seus clientes visualizem isso como JPEG, por exemplo, então você pode simplesmente compartilhar isso ou como eu mostrei com PDF, você pode simplesmente selecionar todos eles, pressionar Control E. E, em vez de pdf, selecionar JPEG, clicar em Exportar e enviar imagens JPEG para eles, se for isso que eles precisarem. Mas, como eu disse por experiência própria, PDF realmente funciona bem porque eles podem realmente abrir esse PDF e levá-lo com ele por e-mail, em seu laptop, em seu desktop, celular, tablet, qualquer coisa eles estão usando, eles podem pegar esse PDF e é muito bom, simples e leve. Portanto, é facilmente compartilhável com eles por e-mail, páginas de mídia social, aplicativos de comunicação como WhatsApp, Viber e o que você tiver. Então, isso é basicamente como trabalhar com a proposta de design de UI UX. Mais uma vez, se você quiser conferir, link está no PDF. Certifique-se de clicar nesse link e acessá-lo com um grande desconto. Ou eu realmente encorajo você a criar o seu próprio, se quiser. 26. Modelo de proposta de projeto de UX UI: Neste vídeo, eu queria mostrar como criar a proposta de projeto de design UI UX. E a mesma história de todos esses vídeos até agora, vou mostrar como criá-lo no XD em estilo tutorial completo e depois mostrar o que há de diferente entre XD figma, porque não quero perder seu tempo. Então, neste vídeo, vamos notar o que é diferente entre usar Figma e o XD para criar esse tipo de modelo. Então, vamos pular para Figma. E aqui em Figma, você pode ver como tudo parece. Então, parece-me que quando X é simplesmente não temos nossas pranchas aqui. Temos esses quadros que são basicamente exatamente a mesma coisa. É apenas a área de conteúdo em que você insere seu conteúdo. Agora, quando eu clicar do lado de fora, você notará que esses tecidos e todos os tecidos são exatamente iguais aos do XD agora no Figma. E então temos esses estilos de cores que são exatamente iguais no XD e no infimum, porque queríamos que esses modelos tivessem exatamente a mesma aparência. A única grande diferença está aqui. Eles são chamados de layout automático no XD, eles são chamados de pilhas. E esses são esses grupos que você vê aqui você pode posicionar seus elementos. Então, por exemplo, para o preço do projeto, temos o layout automático aqui em vez de pilhas na direção vertical. E a distância é 80 pixels entre todas essas seções. Agora temos duas seções que são informações de preços, que é esta seção aqui, e a opção de pagamento, que é essa aqui. Agora, se eu selecionar o preço do projeto aqui, tenho a distância entre esta seção e esta seção, que é essa distância aqui. Se eu passar o mouse, vai dizer AT, e se eu aumentar para 120, por exemplo, você pode ver o que isso faz. Então, esse é o ponto principal, é apenas um nome diferente e a ferramenta é exatamente a mesma e conta exatamente a mesma história de antes. Se eu vier aqui fora de tudo aqui, eu tenho minha cor H1. Se eu quiser ajustá-lo, deixe-me bater aqui, me elevar, para que você possa ver aqui. Eu tenho a cor H1, mas se eu clicar aqui para ajustá-la, talvez eu queira clicar aqui. E você notará que ele será atualizado em tempo real, ajustando-se à cor que você quiser. Então, se eu voltar um pouco usando o Control Z. Então, a mesma história do XD, por exemplo, e ela vai voltar para a posição original. Agora, se mudarmos para ativos, aqui temos a capa que é o rodapé, que é esse componente aqui. E para criar um componente, é exatamente o mesmo. Basta selecionar o grupo neste caso, e você vem aqui e cria componentes ou usa a tecla Control Alt, por exemplo, e ele mostrará esse componente. E se eu arrastar e soltar em algum lugar por aqui, você vai notar o que está dentro. Aqui temos o site e o texto do site, aqui temos o e-mail, os textos de e-mail e o contrato, e o objetivo principal disso, assim como no Adobe XD, se você assistiu a essa seção, é ajudá-lo a criar nesta primeira seção. E então ele será atualizado automaticamente neste, neste e neste. Assim, você não precisa digitar, copiar e colar seu texto e perder tempo dessa forma. Em vez disso, você apenas criará um único componente no início, que na verdade está aqui. E então ele vai herdar esses blocos no futuro. Aqui. Se trocarmos, você pode ver que agora estamos na capa. Então, na capa, que é esta, ele vai localizar esse componente em particular. Então, se eu voltar aqui, selecionar minha capa, o que eu quero fazer é livrar dessa cor de preenchimento porque eu realmente não preciso dela. Devo clicar nele por acidente. E esse é, na verdade, nosso principal componente. E você pode ver que, ao clicar aqui, você pode adicionar variação a esse componente. E falaremos sobre variantes na seção de design deste curso. Mas eu só queria notar rapidamente que, se você fizer uma alteração aqui, ao contrário do estilo de vida de cores, como a escolha da fonte, será atualizada em tempo real em todas essas outras molduras ou quadros de arte , se você quiser. E isso fará essa mudança em todos eles. A mesma história do Adobe XD. Então, aqui, para a cor, você pode ver que temos esse componente específico para os detalhes do projeto. Aqui temos, se eu abrir, apenas esse componente, que é esse ícone aqui. Mesma história para o preço do projeto, mesma história para os termos e condições. E para saber mais sobre mim, só temos esses dois ícones, que são esses dois ícones aqui. Então, basicamente, se eu clicar fora, já mostrei como editar o texto, já mostrei como editar as fontes, basicamente a mesma história. Basta clicar aqui, deixe-me me encontrar. E aqui você pode escolher a família de fontes que você pode escolher para a aparência e a sensação, as distâncias e assim por diante. E, claro, o nome e para que serve. Então, se eu voltar, eu só queria te mostrar uma coisa a menos porque temos a imagem aqui. Se eu mudar de duas camadas de ativos e selecionar isso, teremos essa imagem, então deixe-me fechá-la para não confundir você. Como você adiciona imagem no Figma? Então, o que você pode fazer é arrastar e soltar sua imagem aqui. E isso vai preenchê-lo. Em seguida, você pode arrastá-lo para dentro e depois mascará-lo e assim por diante. Mas eu realmente não sou um grande fã disso. Portanto, se você selecionar sua imagem aqui, poderá ver o cinza natural. Então, em vez de sorte no XD, que eu realmente gosto Adobe XD e não gosto no figma. Mas agora que a Adobe comprou a Figma, espero que eles a adicionem no futuro. Portanto, você não pode simplesmente arrastar e soltar no suporte. Em vez disso, você pode arrastar e soltar até aqui. Então aqui diz cinza natural. Arraste-o para ousar. Espere um pouco até que ele o reconheça. E então, quando isso acontecer, você poderá simplesmente selecioná-lo, basta arrastá-lo e soltá-lo lá, e ele substituirá isso pela sua cor. Mas, neste caso, o trabalho, então deixe-me separá-lo para que ele se torne a cor de preenchimento. Então arraste e você pode ver que agora ele fica azul e simplesmente solte. E então ele vai se povoar lá. Mas o que acontece se você quiser ajustar essa imagem? Deixe-me me esconder para que você possa ver. Você pode simplesmente clicar nele em vez de preencher, você pode clicar em cortar. Então, preencha, ajuste Crop e tile. Então, quando eu clicar em Cortar, poderei redimensioná-lo, reposicioná-lo, redimensioná-lo e ajustá-lo da maneira que eu quiser. E ele será ajustado perfeitamente a este site, assim como no Adobe XD. Então, isso é apenas uma coisa que eu odeio Figma e adoro acima no Adobe XD. Porque, em alguns casos, parece que alguns cliques são demais, como se fossem. Nesse caso, no XD, você pode arrastar e soltar, clicar duas vezes e depois ajustar como quiser. Bem, aqui você tem que criá-la separadamente, você tem que desbloqueá-la se, por exemplo a cor estiver anexada como neste caso, então você tem que soltá-la em cima assistir isso com um clique, dois cliques e depois três cliques para que eu possa recortá-la dentro do XD. É muito mais intuitivo, mas essa é apenas uma das coisas que espero que a Adobe adicione ao Figma no futuro, agora que eles o possuem em termos de edição, você pode realmente fazer qualquer edição que quiser. A mesma história que mostrei anteriormente no Adobe XD. E, mais uma vez, se você está se perguntando o que são todas essas coisas e pula a parte dxdy , assista porque é muito importante saber como precificar seu projeto corretamente e como fazer essa proposta de projeto de UI UX. É só que você pode abrir esse modelo no Figma e assistir à parte do XD enquanto o orientamos para entender por que fiz certas escolhas e por que todos esses elementos estão onde estão. Então é basicamente isso para este vídeo. Eu só queria explicar rapidamente e mostrar as diferenças entre os arquivos XD e os arquivos Figma. Certifique-se de abrir este modelo no Figma. Você vai obtê-lo e poderá usá-lo e reutilizá-lo para seus próprios projetos e certifique-se de explorá-lo, como eu o criei. E talvez brinque com algumas configurações. Talvez inclua seus próprios ícones, suas próprias cores, suas próprias opções de tipografia e veja como você pode criar suas próprias. Porque esse é o ponto principal aqui. Não use esse modelo sem rodeios para se certificar de ajustá-lo e fazer algumas alterações que se ajustem a você e que estejam em seu estilo específico. 27. SECÇÃO 4 Pesquisa e personalidade do usuário: personas dos usuários são uma das partes cruciais de todo processo de design porque você não quer apenas usar os dados e chamá-los de usuários. Você quer colocar um rosto por trás de sua personalidade, atrás da pessoa para quem você está criando este site ou este aplicativo. E é isso que se chama UI UX persona. Você quer usar essas personas com a maior precisão possível com base na pesquisa que você fez. E falaremos sobre diferentes metodologias que você pode usar para sua pesquisa nesta seção da aula. Mas, basicamente, é para isso que serve todo o propósito. Você quer tratá-lo como uma pessoa real e não apenas como alguns dados do usuário. Então, vamos começar. 28. O que é um usuário: Quando você inicia seu projeto de design, precisa saber para quem está projetando. Caso contrário, você só vai projetar para todo mundo. E as decisões de design que você tomará para a mesa não serão valiosas. Porque mais tarde, quando as pessoas não estiverem comprando, quando não estiverem se inscrevendo, seu cliente perguntará o porquê. E isso é muito claro porque o público-alvo não foi definido. Esse público-alvo é conhecido como persona do usuário. E, em vez de segmentar um público, nesse caso, você terá como alvo apenas uma única pessoa, pessoa imaginária, mas mesmo assim uma única pessoa. Mas como você pode saber quem é essa pessoa solteira que você almeja para sua persona de usuário? Você saberá disso fazendo sua pesquisa com o usuário. Ao fazer sua pesquisa com o usuário, você saberá quem é seu público-alvo e, a partir desse público-alvo, como eu disse, você vai pegar e criar essa persona imaginária. Você vai usar os dados reais e isso é crucial aqui. Não use apenas dados imaginários porque você acha que seus usuários podem gostar de uma determinada coisa. Tente criar sua persona a partir da pesquisa de usuário específica que você fez para obter máximo de informações possível. Agora, você pode imaginar uma cota dependendo do comportamento do usuário, da idade do usuário ou qualquer outra coisa. Mas tente obter informações cruciais, como idade, como status profissional, por exemplo , sexo, como a cidade ou o país em que seus usuários estão. Tente coletar os dados e ser o mais específico possível para que você saiba como formar sua personalidade de usuário da maneira certa desde o início do seu projeto. Por que criar uma persona em primeiro lugar é bem simples. Só para se referir a ela como em vez de usuário, você a chamará de persona, usará mais uma vez dados reais que coletou por meio de pesquisas com usuários. Mas você vai atribuir um nome e um sobrenome fictícios, uma posição de trabalho fictícia a essa persona para que você possa tratá-la como uma pessoa real, mesmo que seja apenas uma pessoa imaginária, essa persona é, mas como eu disse e continuo repetindo, você vai usar os dados reais, o que fará com que pareça uma pessoa real. Ao mover seu projeto para o desenvolvimento no futuro, você se referirá a essa persona de usuário pelo nome e sobrenome, como se ela realmente existisse. E será muito mais simples se adaptar e fazer mudanças na persona quando você a tiver como pessoa real, em vez de apenas dizer seus usuários ou nossos usuários ou qualquer outra coisa. Como eu disse, você vai focar essa persona e foi projetada especificamente para essa persona, para tornar seu design funcional e fazê-lo funcionar para essa persona, sua base de usuários desde o início do seu projeto. Mas como você faz sua pesquisa de usuários? É isso que vamos falar na próxima lição, onde focar e o que procurar. 29. Tipos de métodos de pesquisa: Existem muitos métodos de pesquisa diferentes que você pode usar em seu projeto. E a forma como você pode saber qual usar é pelo tamanho do seu projeto. Se o projeto for menor, obviamente não usaremos os tipos que, por exemplo, o Google usa, ou a Microsoft ou a Apple. Mas você vai formar seu tipo de pesquisa de usuário de acordo com o tamanho do seu público e de acordo com o tamanho do seu projeto. Porque, na minha opinião, é sempre melhor começar aos poucos e se ajustar à medida que a empresa cresce, medida que as metas crescem, à medida que a base de usuários cresce. Então, se você está apenas começando com n grande, se você está apenas se concentrando nesse grande público e depois tentou resumi-lo um pouco. Então você precisa de metas. Você precisa de uma meta específica e uma meta específica de seu cliente em que se concentrar e focar sua pesquisa. Portanto, você não pode projetar para todo mundo, acho que mencionamos nas lições anteriores. Portanto, você precisa da sua personalidade de usuário e da mesma história para a pesquisa do usuário. Você tem que entender qual é o objetivo. O que você está tentando resolver? Qual é o objetivo desse projeto? Quais são alguns pontos problemáticos? Quais são algumas fraquezas do mercado que você está tentando explorar com este produto. Portanto, você precisa entender para quem está projetando e quais são seus objetivos. Porque se os objetivos forem, vamos vender o maior número possível desses produtos. Essa não é uma meta realista. Esse não é um bom objetivo. O objetivo aqui deve ser algo como, vamos tentar, não sei se você está se concentrando em, digamos, uma indústria automobilística. Vamos tentar vender esses pneus, que durarão, por exemplo, seis meses a mais do que a concorrência. E eles proporcionarão uma aderência muito melhor do que a concorrência. E vamos vendê-lo para, digamos, famílias nos bairros ou cidades do centro da cidade. Então, essas são algumas metas realistas que você pode realmente alcançar, em vez de vender milhões desses pneus, mas para quem, como você vai conseguir isso. Portanto, você precisa definir suas metas. Depois de definir suas metas, você também pode criar estratégias o tipo de pesquisa de usuários que também abordará. Porque, como eu disse, quando você está começando aos poucos, você não precisa testar, digamos 200 usuários, porque você pode testar apenas cinco usuários e não desperdiçar seus recursos de pesquisa, para não perder seu tempo que desperdice seu dinheiro lá para desperdiçar seu tempo e dinheiro fazendo essa pesquisa desnecessária. Você pode concentrar seus esforços de pesquisa em, por exemplo cinco a dez pessoas. E a partir desses grupos, você pode distinguir quem é seu público-alvo e quem é sua persona de usuário. Na próxima lição, falaremos sobre diferentes tipos de métodos de pesquisa de usuários. E qual você pode escolher para o seu projeto de acordo com seus objetivos? Como eu disse. 30. Quantitative VS: Ao começar o projeto, você precisa saber em que focar, como mencionei nas lições anteriores, mas também precisa saber qual tipo de pesquisa de usuário deve escolher. E há muitas opções diferentes nesta lição, vou citar apenas algumas. E como esse curso é bastante curto, você pode concentrar seus esforços mais tarde ao descobrir qual é o certo para você, depois pode destilá-lo e explorar mais algumas rotas possíveis. sua pesquisa específica de usuários. Mas, basicamente, você pode dividir seus métodos de pesquisa de usuários em qualitativos e quantitativos. Qualitativo é, na verdade, algo que você pode resumir em números reais, em dados reais. Embora quantitativo seja, na verdade, obter o máximo de dados possível. Quantitativo pode ser algo como pesquisas com usuários ou questionários on-line, onde você pode obter o maior número possível de entradas de usuários diferentes. E então você pode usar métodos de pesquisa qualitativa para focar esse número, para resumi-lo e realmente entender o que todos esses números significam. Por exemplo, se você tem milhares de usuários de todo o mundo, dados quantitativos porque você tem quantidade, então você vai destilar esses usuários usando dados qualitativos para alcançar na verdade, o resultado que você está procurando, por exemplo, em qual país esses usuários estão localizados? E depois, mais abaixo, qual cidade eles estão localizados? Se você puder, então você pode entender a idade deles e entender que tipo de dispositivo eles estão usando. Você pode entender o tipo de navegador, por exemplo, quando você tem todos esses dados, esses dados qualitativos, basicamente, você pode separá-los por quantidade versus qualidade. Portanto, os nomes em questão também existem mais dois tipos, e esses são atitudinais e comportamentais. Com o atitudinal, é basicamente a atitude de seus usuários e o comportamento é como eles se comportam. Então, basicamente atitudinal é o que eles dizem. Comportamental é como eles se comportam. E para ambos, você pode usar diferentes tipos de métodos de pesquisa, por exemplo, para Attitudinal, como eu disse anteriormente, você pode usar questionários, você pode usar fóruns on-line. Você pode usar algo como o Typekit para criar um formulário simples. Você pode colocá-lo em um site existente ou enviá-lo por e-mail aos usuários e depois ver o que eles dizem. E isso pode ser um método quantitativo de pesquisa de usuários porque você acumulará a quantidade de informações antes de colocá-las em qualidade. E então o comportamento é algo muito diferente. Isso é para os estágios posteriores de sua pesquisa, por exemplo, quando você já tem um protótipo feito , você pode colocá-lo na mesma sala em que está. E então você pode fazer o teste de qualidade, por exemplo, esse é o método comportamental, porque você verá como seus usuários se comportarão quando estiverem na sala. Você não precisa fazer isso. Você pode usar milho, por exemplo, que é o que eu uso. E vou vincular todos esses recursos que mencionei no PDF desta aula. Portanto, certifique-se de verificá-los, conferi-los e clicar e ver todos esses sites por si mesmo e explorá-los um pouco mais. Você também pode usar algo chamado de mapas de calor. Os mapas de calor exigem um determinado conjunto de dispositivos para colocar em sua cabeça de sucos. Mas também existem softwares disponíveis e os mapas de calor são basicamente o que o nome sugere, onde os usuários estão vendo é o quê, onde o mapa será mais aquecido, para onde eles estão olhando na lista é onde o mapa será chamado, por exemplo , portanto, você pode saber onde concentrar seus esforços de design porque seus usuários estão principalmente , porque seus usuários estão principalmente olhando para isso e não para isso. Assim, você pode concentrar suas mensagens importantes, por exemplo , em sua página, na parte específica da página em que os usuários estão mais olhando. Então, se você acha que o imposto deveria ser melhor aqui, mas nenhum de seus usuários está olhando nessa direção. Em seguida, tente ver para onde eles estão olhando. Por exemplo, se eles estiverem olhando nessa direção, talvez coloque o texto em desafio. Se o texto for a parte mais importante dessa seção da sua página, por exemplo, isso é comportamental. Você pode monitorar como seus usuários estão se comportando em tempo real. Então, mais uma vez, dependendo seu método de pesquisa sobre quais são seus objetivos, o que você está tentando realizar com sua pesquisa. Certifique-se de usar dados quantitativos primeiro para que você possa acumular os dados de seus usuários. Em seguida, tente usar dados qualitativos para obter alguns números reais com os quais você possa trabalhar e apresentá-los aos seus clientes, por exemplo , que você possa mostrar a eles os resultados da pesquisa que encontrou e, em seguida, você pode usar essas descobertas de pesquisa posteriormente em seu projeto. Além disso, não se esqueça da atitude. Então, qual é a atitude deles, como eles dizem que vão reagir? E então, comportamental, como eles realmente reagem quando você lhes apresenta um teste, um protótipo, o design de um site, e você realmente pede que eles o testem em tempo real, seja na frente de você ou online. No próximo vídeo, falaremos sobre como escolher seus participantes. Se você não tem nenhum participante e já tem um público existente, qual é a diferença e como escolher entre os dois. Então, eu vou te ver lá. 31. Escolher seus participantes: Escolher seus participantes é uma parte crucial de sua pesquisa de usuários, pois se você escolher os participantes errados, o resultado da pesquisa não será válido. Portanto, sua pesquisa é realmente inútil e você desperdiçou seu tempo, o tempo de todo mundo e dinheiro de seus clientes, porque na maioria dos casos você realmente precisa pagar por qualquer tipo de usuário. pesquisa que você faz. Portanto, é muito importante escolher os participantes certos para o tipo certo de pesquisa que você fará e escolher a quantidade certa de participantes para essa pesquisa específica. Como escolher os participantes? Bem, na verdade, existem dois tipos diferentes que você pode escolher entre o público existente. Isso ocorre se seus clientes um site, tiverem um aplicativo, tiverem uma lista de e-mails. E você pode realmente alcançar esses clientes em potencial. E você pode realmente pedir a opinião e o tempo deles. E então você pode realmente conduzir essa pesquisa de usuários dessa forma, porque você já tem esse público existente. A outra forma de fazer isso é com pessoas inexistentes. Isso se o negócio do seu cliente estiver apenas começando. E então você tem que encontrar esses participantes para participar e como fazer isso? Bem, mais uma vez, existem dois métodos diferentes para isso. É com pessoas pessoalmente. Assim, você pode realmente se encontrar com pessoas diferentes cara a cara e fazer seus testes de dívidas de maneira ou on-line. E você vai escolher um ou outro com base em uma coisa simples. Seu cliente é local e seu público será local? Portanto, você provavelmente escolherá pessoalmente. Você também pode escolher on-line, mas filtrar seu país, sua região e sua cidade, por exemplo, mas se o público do seu cliente for global, o melhor método é escolher essas pessoas on-line. Vou deixar alguns links, o PDF para esta aula, onde você pode clicar nesses vários sites diferentes, onde você pode encontrar públicos diferentes para fazer suas pesquisas e testes. E esses sites obviamente vão cobrar por isso. Portanto, é muito importante se você for fazer isso como freelancer cobrar isso na fatura do seu cliente. Você pode separar esse formulário do seu serviço, por exemplo, você pode considerar todo o processo de design como uma única cobrança e depois cobrar essa cobrança, a cobrança separada. Ou você pode considerar todos os descendentes desde o início. Talvez seja a melhor maneira de abordar. Pode ser cobrada a parte de UX do seu projeto separadamente e, em seguida, a parte da UI e talvez a parte de desenvolvimento posteriormente, separadamente porque você já tem todas essas informações da sua parte de UX. E então, quando você passa para a parte da interface do usuário e a criação real do seu design, talvez seja melhor cobrar isso separadamente. Só estou dizendo isso porque, muitas vezes, você receberá pesquisas de usuários que não são realmente tão convincentes. O que isso significa é que talvez você faça as perguntas erradas. Talvez você não tenha recebido a quantidade certa de pessoas e todo esse cliente pesquisador tenha que pagar. Às vezes, se sua sessão durar, por exemplo , 30 minutos, você terá que pagar para que as pessoas se sentem por 30 minutos e ouçam você fazendo as perguntas por 30 minutos e ouçam você fazendo as perguntas ou preenchendo o questionário, ou para testar seu protótipo, ou para testar sua hipótese. Então, seja o que for, você vai ter que pagar essas pessoas. Portanto, é muito importante entender desde o início que você precisa criar seu cliente para esse serviço específico. Ou você pode definir o preço do seu projeto de forma totalmente separada. Então, o design da interface e a entrega virão como uma única cobrança. E o design de UX será algo diferente, especialmente com esses métodos de usuário abordagens de usuário e coisas assim. Com pessoas reais, é muito mais fácil porque você realmente vai se sentar com elas. Você preparará sua lista de perguntas com antecedência. Vamos fazer essas perguntas a eles e às vezes, se você pagar por 30 minutos, muitas vezes você descobrirá que sua palestra durará para todos em 15 minutos para que você possa pagá-los. metade do preço e coisas assim. Mas, mais uma vez, é muito importante considerar essa despesa na despesa do seu projeto. Porque muitas vezes pode ser muito caro. Essas pessoas, e você verá nesses sites que vou vincular no PDF, cobrarão de $20 por hora até $200 por hora, dependendo do usuário. método de pesquisa que você vai fazer com esses usuários. E dependendo de, se você tiver, por exemplo cinco usuários são 20 usuários. Você pode ver claramente que essa despesa será vasta. Mas é uma história completamente diferente seus usuários existentes, porque você pode abordar seus usuários existentes e oferecer a eles algum tipo de desconto em recursos ou produtos existentes, ou em um recurso futuro ou um produto futuro que seu cliente lançará no futuro. Mas tenha muito cuidado com seus usuários existentes, porque muitas vezes há um preconceito porque a maioria deles provavelmente já gosta do produto que está usando. Portanto, eles serão bastante tendenciosos com as respostas que darão à sua pesquisa. Portanto, certifique-se de levar em consideração tudo isso e conferir o PDF que vou fornecer, como eu disse, para clicar em todos esses links para os sites onde você pode encontrá-los testadores de pesquisa de usuários que virão ao seu projeto e virão em seu socorro. Basicamente, onde quer que você esteja em uma fileira, certifique-se de considerar as despesas desse projeto em particular. 32. Como visualizar seus dados: Quando você tem suas informações de pesquisa, muitas vezes elas ficam muito caóticas, porque vamos imaginar que você tenha dez perguntas para cada um dos participantes. Digamos que você esteja fazendo uma pesquisa com usuários. Você terá dez perguntas, terá dez participantes diferentes. Portanto, você obterá 100 respostas diferentes. Então, como fatorar tudo isso n? Bem, existem diferentes modelos on-line que você pode encontrar lá totalmente gratuitos e são usados maior parte do setor, onde, por exemplo, dentro da planilha do Excel ou do Google Sheets, você pode incluir esse modelo que você obtém e ele calculará suas respostas com base no que seus usuários dirão. Ou se você estiver usando algo como métodos quantitativos e, por exemplo você configura uma página de destino e quer ver quantos cliques receberá. É melhor usar o Google Analytics porque a quantidade de informações que você obtém do Google Analytics é muito grande. Então, você tem que entender e organizá-lo de alguma forma para poder considerá-lo em nossa, digamos, uma semana ou duas semanas de tempo ou quantidade de tempo, dependendo de como quanto tempo você vai ficar testando. E, portanto, você pode fatorar todas essas informações posteriormente. No final do dia, quando você fizer isso, você formará sua persona de usuário. Vamos falar sobre isso na próxima lição. Na verdade, forneceremos um modelo que você pode preencher. E vou explicar um pouco mais sobre as diferentes informações que você pode colocar nesse modelo. Mas é muito importante visualizar seus dados e, finalmente, apresentá-los ao cliente antes de prosseguirmos com o processo de design. Porque, muitas vezes, seus clientes terão entradas um pouco diferentes das que você tem. Portanto, é muito importante mostrar a eles os dados e, por exemplo, combater tudo o que eles têm a dizer. Se for um pouco diferente porque eles queriam acreditar que eram diferentes, mas os dados reais estão se mostrando diferentes. Portanto, é muito importante mostrar a eles esses dados, visualizá-los para que eles possam facilitar o entendimento. Então, por exemplo, se você estiver usando XD Figma ou Photoshop, qualquer software, certifique-se de criar um modelo que você possa apresentar esses dados usando ícones, por exemplo, usando imagens diferentes para que eles possam entenda facilmente os dados que você obterá, porque os dados que você obterá geralmente são apenas texto. E o texto é muito difícil para as pessoas entenderem. Portanto, visualizar esses dados será muito mais fácil para seus clientes entenderem e aprovarem para que você avance com o processo de design. Como eu disse na próxima lição, vou te dar um modelo do XD, que você pode usar e visualizar seus dados depois de realmente obtê-los e colocá-los na personalidade do usuário. Então eu vou te ver lá. 33. Como criar seu usuário: Nesta lição, vou te dar um modelo do Adobe XD para criação de persona de usuário. E você pode usar esse modelo para todos os seus trabalhos futuros. E também vou compartilhar com vocês diferentes seções que você pode usar para esse modelo e os futuros modelos que você criará. Então, vamos começar. Então, aqui estou eu no Adobe XD e, como eu disse, você receberá esse modelo. Não deixe de conferir nos recursos da aula. E quando você clica aqui, que diz Bibliotecas, você verá todas as cores diferentes que são usadas, que obviamente podem ser alteradas. Você pode simplesmente clicar com o botão direito do mouse, clicar em Editar e em qualquer cor que você escolher. Como você pode ver, ele será atualizado. Apenas certifique-se, porque temos esse gradiente. Se você for escolher essa cor, por exemplo, direito do mouse e copiar, venha aqui, onde diz gradiente, clique em editar e clique nesta parte superior porque essa é a coisa amarela. Pressione Control ou Command V para colá-lo. E você vai ter exatamente a mesma cor que eu tinha aqui. Ou você pode simplesmente experimentá-lo aqui e ver que ele será atualizado aqui. Então isso é só uma dica sobre a cor. A mesma história vale para estilos de personagens. Aqui é Poppins. Você pode usar qualquer tipo de estilo de personagem que quiser. Eu propositalmente não usei nenhum ícone para manter as coisas realmente simples e concisas. Assim, você pode usar diferentes tipos de componentes. Você pode usar vídeos diferentes se quiser apresentar sua personalidade de usuário como uma pessoa real Você pode imprimi-los simplesmente salvando-os como PDF. Você pode ligar aqui, pressionar Control ou Command E aqui. E então você pode simplesmente usar o PDF, por exemplo você pode exportá-lo, você pode exportá-lo como uma imagem para imprimi-lo. Ou você pode exportar como PDF ou imagem e compartilhá-lo com seus clientes on-line para facilitar a compreensão. Mas, mais uma vez, vamos encerrar isso. É muito importante ter sua personalidade de usuário. É muito importante entender para onde você está projetando. É muito importante compartilhar essas informações com toda a equipe. Você pode estar trabalhando em. Tanto seu cliente quanto as partes interessadas, a equipe de marketing , os desenvolvedores, todos os outros designers, todo mundo na equipe sabe disso. Isto é, neste caso, Marcus Morris, por exemplo, então esta é a nossa persona de usuário. Então, a forma como tudo está estruturado é sobre a seção aqui. E você pode editar todas essas seções. Você pode vê-los aqui. Quando clico no painel Camadas, você tem sua imagem de usuário, que é essa sobre a qual está a seção superior. Então temos necessidades, frustrações, mídias sociais e, finalmente, marcas favoritas. Então, a seção Sobre é quem realmente é esse usuário? E do que eles tratam. Você vai entender isso mais uma vez a partir de sua pesquisa com usuários. Então, vamos usar usuários existentes, por exemplo, se você estiver usando, digamos, o Google Analytics, você entenderá que a maioria dos seus usuários é, digamos, do sexo masculino, neste caso, eles são de Londres, REINO UNIDO. Então você vai dar um nome a ela, digamos marcadores. E ele adora passear com essa filha e esposa de dois anos que se preocupam profundamente com o meio ambiente e com o futuro melhor para sua filha. Você vai entender isso partir de seu combustível, pesquisas adicionais. Então, você não vai usar apenas o Google Analytics nesse caso, você vai realmente entrar em contato essas pessoas em potencial com base no seu Google Analytics. Você vai anotar a idade porque pode ver a faixa etária aqui. E você vai saber a localização aqui. Portanto, você pode ajustar ainda mais quem é seu alvo. Assim, você pode entrar em contato com essas pessoas em potencial e entender do que elas se tratam. Então, essa pessoa disse que tem uma filha, por exemplo, ele tem uma esposa. Ele se preocupa profundamente com o meio ambiente. Ele é apaixonado por todas essas coisas. Então você vai colocar isso em Sobre a ocupação da seção. Eles vão dizer qual é a renda que recebem. Se eles não informarem a renda, você pode facilmente descobrir isso a partir da pesquisa que pode fazer on-line, porque existem muitos pesquisadores diferentes em cada país do mundo. Assim, você pode colocar a renda ali mesmo a partir da renda, que mais uma vez é muito importante. Se eles lhe disserem que, se não, você pode descobrir isso sozinho fazendo uma pesquisa on-line sobre a renda, você pode entender quanto esse usuário pode realmente gastar em meu site. Então, se esse não é o usuário certo para mim porque sua renda é muito baixa, talvez por ter como alvo o usuário errado porque meus produtos serviços ou muito caros para esse usuário em particular. Então você pode ver por que essa pesquisa é realmente importante. Mais uma vez, você pode entender isso fazendo qualquer tipo de pesquisa de usuário que acabamos de mencionar anteriormente. Você pode fazer a classificação de cartões, por exemplo, você pode fazer seus questionários, você pode fazer seus registros de usuários, digamos, nos quais o usuário lhe diz algo sobre eles todos os dias. E você pode fazer algo como pesquisas, por exemplo, onde você pode descobrir quem essas pessoas realmente são, então você pode entrar em contato com elas e fazer essas perguntas específicas ou quaisquer outras perguntas que precisa saber com base em seus objetivos. Mais uma vez, muito importante. Depois de precisar disso, você pode entender as necessidades deles porque pode perguntar a eles quais são suas frustrações, quais são as necessidades? O que eles realmente precisam de um produto como esse? Portanto, com base nas respostas que você receberá, você pode filtrá-las nesta seção específica. Nesse caso, porque eu escolhi uma marca de cartão do nada, é a melhor maneira de pesquisar um carro usado nas linhas. Deixe-me reduzir isso e ampliar um pouco para que você possa ver um pouco melhor. Então, é a melhor maneira de pesquisar um carro usado online. Essa pessoa quer encontrar um carro usado on-line, mas está apenas confusa com todas essas ofertas diferentes que existem. Uma maneira mais fácil de entender o carro que ele olha. Então, na maioria das vezes, você verá todos os tipos de informações diferentes nos sites desses carros e basicamente algum tipo de código que as pessoas da indústria automobilística entendem. Mas pessoas fora da indústria automobilística não sabem realmente o que estão vendo. Então, eles precisam de uma maneira mais fácil entender o que estão vendo. Abordagem fácil para perguntar sobre o veículo. Então, em muitos casos, é apenas um formulário de e-mail. Talvez eu queira direcionar o número de telefone, talvez eu queira usar o WhatsApp ou o messenger ou a barra Y ou o que você estiver usando. Frustrações, sites muito lotados e confusos, o que é a maioria dos casos. Mais uma vez, relacionado à sobrecarga de informações que a indústria usa. Os sites não são compatíveis com dispositivos móveis. Na maioria dos casos, seus usuários usarão dispositivos móveis atualmente. Portanto, se o site não for compatível com dispositivos móveis, é uma grande bandeira vermelha. calor, uma postagem sem preço. Então, eles querem transparência. Eles querem entender qualquer corrente que estejam vendo. Quanto custa? Então, eles querem ver a transparência. Isso os atrairá mais para esse anúncio e possivelmente comprará mais cedo. Hábitos de mídia social. Então, Facebook, Twitter, Instagram, LinkedIn. Por que isso é importante para seus esforços de marketing? Mais tarde, no futuro? E marcas favoritas, você quer ver quem são as marcas favoritas. Porque, a partir dessas marcas favoritas, talvez você possa escolher posteriormente uma dica de estilo para seu design. Digamos que, se você ver um padrão, por exemplo, imagens enormes e texto nítido, talvez preto sobre branco ou gradientes ou imagens de pessoas que você realmente gosta, isso as atrai de volta a esses sites. Dan, talvez você possa visitá-los e dar dicas para seu design ou redesenho específico, o que quer que esteja tentando fazer. Nesse caso, acabei de encontrar vários desses logotipos diferentes, mas seus usuários realmente fornecerão um conjunto específico de marcas. Certifique-se de anotá-los e colocá-los aqui para se inspirar. Finalmente, temos algo como uma citação. Você pode escolher esta citação e perguntar aos seus usuários se têm uma citação favorita. Se não o fizerem, você pode simplesmente encontrar algo on-line para colocar aqui. E, finalmente, o que eu queria mostrar é que temos um gradiente de imagem, vou escondê-lo. Temos uma imagem que eu quero arrastar e soltar minha imagem, trazer de volta o gradiente. E agora, quando você coloca um rosto em cima da sua personalidade de usuário, isso realmente lhe dá essa personalidade. Na verdade, mostra a pessoa que você está tentando criar este site para alguns. Uma última coisa que quero acrescentar aqui é que essas são apenas as seções desse modelo específico de personalidade de usuário. Você pode adicionar várias seções diferentes, mais uma vez, dependendo de seus objetivos, dependendo de sua pesquisa aqui. Então, por exemplo, talvez você queira adicionar uma tag específica que seus usuários mencionaram. Talvez seus sentimentos, talvez estejam se sentindo tristes, talvez estejam se sentindo felizes. Então você vai saber as cores que vai usar. Você conhecerá o ritmo, usará a topografia, o layout com base em tudo o que seus usuários lhe dirão em sua pesquisa. Você colocará isso em sua persona e sempre fará referência a essa persona para se lembrar e lembrar sua equipe. Se alguém quiser usar, digamos, uma cor preta e sites meio rosados, então não vai funcionar muito bem. Você sempre consultará modelo de persona para entender um pouco melhor e lembrar a si mesmo e à sua equipe para quem você está projetando? Então, aqui está o modelo de personalidade do usuário. Não deixe de conferir, fazer o download e usá-lo. Certifique-se de substituir todas essas seções que você acha que não são necessariamente para sua pesquisa específica. Como eu disse, você pode simplesmente voltar para aqui e eu vou voltar aqui. Se quiser, você pode tornar essa imagem muito menor do que você pode, por exemplo, posicionar esta seção para ficar aqui. Você pode brincar com o que quiser com este modelo que o distribuiu totalmente de graça. Portanto, certifique-se de explorá-lo e criar sua persona de usuário perfeita. 34. Modelo de usuário Persona Figma: Deixe-me mostrar como usar a aparência de um modelo de persona no Figma. Quais são algumas diferenças entre arquivo Figma e o arquivo Adobe XD e como você pode usá-lo e reutilizá-lo em seus próprios projetos. Então, aqui estamos em Figma, e você pode ver que o design é exatamente o mesmo. E esse é o ponto principal, na verdade, porque eu não queria ter nenhuma diferença entre os arquivos Figma e XD porque você, como designer, poderá escolher com qual ferramenta trabalhará. Como continuo mencionando ao longo deste curso, a Figma assumirá porque a Adobe comprou a Figma. Isso vai acontecer em algum momento. Mas antes que isso aconteça, certifique-se de usar o XD se você também sentir confortável com ovos pretos profundos, por exemplo, eu gosto muito mais do XD do que do Figma. Mas a Figma lentamente se transformará em produtos da Adobe com o passar do tempo. Portanto, ele terá exatamente os mesmos recursos algumas outras ferramentas da Adobe, como camadas, por exemplo, como aeroportos e assim por diante. Então, só o tempo dirá qual será a aparência de Figma no futuro. Mas o objetivo deste exercício é mostrar que se você abrir o modelo do XD, se você abrir o modelo Figma, compare os dois. É por isso que eles são exatamente iguais. Realmente não há nenhuma diferença nisso. E as ferramentas em si serão extremamente familiares para você usar. Se você já usou o XD ou se já usou o Figma e está indo vice-versa entre essas ferramentas. Então, se verificarmos isso, você pode ver como é. Então, eles são basicamente grupos aqui. Se eu mudar para ativos, não teremos nenhum componente porque eu propositalmente não queria criar nenhum componente. Suas marcas favoritas serão suas marcas favoritas e não essas marcas aqui. Então, por que tê-los como ícones separados são ativos separados aqui. Então, a imagem em si será um pouco diferente de como você adicionará uma imagem. Porque quando você seleciona uma imagem onde diz cinza claro, você arrasta sua imagem para dentro de onde ela diz cinza claro. Basta arrastá-lo aqui e soltá-lo. E ele preencherá esta seção com essa imagem específica. gradiente da imagem permanecerá onde está. Basta anexar a imagem arrastá-la e soltá-la na própria imagem, como no Adobe XD, mas arrastá-la até aqui, onde diz cinza claro, encostar-se nela e soltá-la. E ele preencherá esta seção com sua imagem. Então, é super simples. Então, não o solte aqui, arraste-o e solte-o aqui. Mas diz cinza claro em termos de cores, como mencionei no breve vídeo de design, por exemplo ao clicar aqui, você poderá ver as cores do seu documento. Ou se você clicar fora de tudo, você verá tecidos aqui, você verá estilos de cores. E aqui temos um gradiente, que é apenas para essa parte do gradiente de imagem. Claro, você pode alterá-lo lá, então, se você não gostar, você pode clicar nele. Deixe-me encontrar a si mesmo para que você possa ver isso um pouco melhor. Então, aqui está o gradiente. Você tem o ícone Configurações e pode clicar ali mesmo, e aqui está seu gradiente. Então, aqui você pode escolhê-lo como linear. Você pode brincar com cores diferentes, orientações diferentes. Você pode colar seu código hexadecimal aqui. Você pode configurar sua obesidade. Então, aqui você pode brincar com o posicionamento. Você pode adicionar diferentes paradas, adicionar diferentes desfoques e assim por diante. E acabei de chamá-lo de gradiente, mas você pode renomeá-lo da outra forma que quiser. Você pode simplesmente clicar aqui e renomeá-lo como quiser. Descrição para quem é, para quem é? Então, talvez isso seja para a seção de heróis. Você pode colocá-lo ali mesmo. Então, entenda o que quero dizer e você pode adicionar propriedades adicionais. Ele tem apenas um gradiente linear, mas se você clicar nesse sinal de adição, você pode adicionar um gradiente linear adicional em cima você pode adicionar um gradiente linear adicional em cima dele, diminuir um pouco a opacidade e simplesmente explorá-lo em termos de opções de fonte e estilos de fonte. Aqui você pode ver que, por exemplo se eu selecionar isso aqui, temos as cores de destaque para esses pontos e , em seguida, temos a cor quase preta para o texto. E se selecionarmos o texto em si, por exemplo, de acordo com as necessidades, teremos o layout automático, que é a mesma história de como chegar a essas pilhas no Adobe XD. Então, a história será exatamente a mesma do Adobe XD. Você acabou de colocar alguns itens em um grupo. Aqui eles são chamados de layout automático. No Adobe XD, eles são chamados de pilhas. Você vai fazer o posicionamento e a direção entre os itens dentro desse grupo. Portanto, nesse caso, o layout automático vai de cima para baixo. Então, direção vertical. E precisa de um, precisa de três grupos dentro dele. Uma distância de oito pixels aqui. Então, se eu mudar isso para 20 pixels, por exemplo, você pode ver como isso vai ficar porque vai acabar espaçando esse ponto e esse texto. Mas se eu selecionar as necessidades em si mesmo, então a seção inteira tem 17 aqui. Então, se eu aumentasse isso para 40, por exemplo, você pode ver o que isso faz. Então, brinque com esses exemplos. E se em algum momento você quiser mudar isso de vertical para horizontal, basta clicar aqui e ver o que isso faz ele volte e se adapte automaticamente ao mesmo tempo. Então, essas são algumas coisas que eu queria mencionar aqui. Se desejar, você pode substituir rapidamente essas cores, conforme já explicado. Se quiser, você pode substituir rapidamente as fontes internas. Você pode substituir o posicionamento interno, você pode alterar a ordem. Mas este vídeo é apenas para você saber qual é a diferença entre o arquivo XD e o arquivo Figma? E, como você pode ver, não há muitas diferenças. Essas ferramentas são basicamente as mesmas. É como você trabalha com imagens, por exemplo, vai diferir um pouco entre o XD figma, mas no final das contas é exatamente o mesmo. Você verá isso quando chegarmos à seção de design deste curso, porque eu vou passar pelo design no XD e depois pelo design completo no Figma, só para mostrar algumas diferenças na forma como você trabalha. Se você assistir essas duas seções, notará que todo o processo é quase exatamente o mesmo e esse é o ponto principal aqui. Não deixe a ferramenta limitar você. Você precisa saber todas essas coisas que mencionamos no curso para se tornar um designer muito melhor do que você é agora. Mas não pareça muito alto, limite você. Eu posso criar isso no Microsoft Paint se meus clientes me solicitarem, mas é muito mais fácil no Figma ou no XD porque essas ferramentas foram criadas em primeiro lugar para fazer um trabalho como esse. 35. SECÇÃO 4: Sua tarefa para esta seção é usar o modelo que forneci e preenchê-lo com suas próprias informações. Você pode imaginar sua personalidade de usuário. Você pode colocar uma imagem diferente. Você pode alterar as cores, alterar a tipografia, certifique-se de alterar os logotipos na última seção do modelo apenas para torná-lo seu e apenas para a prática de realmente usá-lo. Então, quando realmente chegar a hora. Ou se você já tem alguns clientes e deseja criar uma persona de usuário para esse projeto específico. Você tem esse modelo ou pode explorar outros modelos gratuitos que você pode encontrar on-line. Mas agora você realmente tem uma ideia do que realmente é uma personalidade de usuário e por que esses modelos são úteis. 36. SECÇÃO 5 Análise competitiva: A análise competitiva é uma parte extremamente importante do processo de design, porque você quer ver com quem você está competindo? Largura. Você quer ver quem é seu concorrente. Você quer ver o que eles estão fazendo de bom, o que estão fazendo de mal, para evitar isso antes mesmo de começar o processo de design. Você deseja analisar diferentes detalhes do produto ou das páginas das telas dos aplicativos móveis. Você quer entender que tipo de linguagem eles estão usando em seu site ou aplicativo. E você quer entender um pouco melhor o que você pode pegar e o que você pode aprender com eles. Para não cometer os mesmos erros. Então, vamos começar. 37. O que é uma análise competitiva: análise competitiva é a parte necessária do processo de design, pois ajuda você a analisar e entender sua concorrência, ver o que eles estão fazendo e como seu produto ou sua empresa se compara. contra essa competição. É muito importante fazer uma análise da concorrência, especialmente no início do processo de design, porque você pode entender claramente quais são seus objetivos, quais são seus objetivos e quais são seus concorrência, que é igual ou diferente do que você planeja fazer. Você pode fazer uma análise da concorrência independentemente do site do seu cliente ou se ele tem um site ou não. Mas é sempre recomendável começar logo no início do processo de design com a análise da concorrência, para que você possa entender quais são seus principais objetivos e quais são seus principais. alvos neste projeto em particular? Ao fazer uma análise competitiva, você pode entender os pontos fortes e fracos de sua concorrência e entender onde você deve se concentrar como designer e quais problemas você deve resolver? Você também pode entender se há uma lacuna no mercado e seu produto ou serviço pode preencher essa lacuna? Ao fazer essa análise competitiva, você pode entender as vantagens e desvantagens do seu produto. Talvez sua oferta não seja convincente o suficiente. Seus concorrentes estão oferecendo algo que é mais atraente a um preço melhor, por exemplo, e o principal para nós, designers, é entender você realmente precisa aplicar algum tipo de alteração de design em esse design em particular só por causa disso? Ou sua concorrência realmente exige que você aplique essas mudanças? O que quero dizer com isso é que não projete apenas por causa do design. Projete com o objetivo de ser melhor do que seus concorrentes em uma tarefa específica ou em um objetivo específico. Por fim, uma análise competitiva ajuda a resolver problemas de usabilidade porque você pode comparar seus concorrentes ver o que eles estão fazendo. Veja se seu produto é utilizável o suficiente para seus usuários em vários tamanhos de tela diferentes, por exemplo , desktop, tablet ou celular. Seu produto se adapta bem a todos esses tamanhos, se exibe bem ou passa no teste necessário , por exemplo para otimização? As imagens são carregadas rapidamente se você tiver animações que rapidez as animações estão sendo executadas? Você pode fazer todas essas coisas logo no início do processo de design, apenas para entender como seu produto ou design se compara à concorrência. No próximo vídeo, falaremos sobre diferentes tipos de análise de concorrentes. Então eu vou te ver lá. 38. Tipos de análise competitiva: Existem dois tipos principais de análise competitiva. E dependendo de onde você está em seu processo de design e onde está seu cliente em seus negócios. Você vai fazer um ou outro. Ou você fará uma análise completa, pegando alguns dos principais concorrentes e alguns concorrentes secundários e simplesmente comparará suas soluções completas. Agora, eles podem ser sites, aplicativos móveis ou produtos de design digital, por exemplo, e você comparará todos os aspectos de todos esses concorrentes. E então você vai encontrar uma solução, dependendo de quais são os objetivos do seu projeto específico Você também pode fazer uma análise futura. E o que isso significa é, por exemplo que você pode analisar o menu em nosso site. Você pode analisar a funcionalidade de pesquisa de um site. Você pode analisar o item de rolagem no aplicativo. E você pode basicamente criar um recurso que é exigido do seu processo de design e analisar esse recurso em sua concorrência e ver como eles se comparam. No início, você precisa delinear seus objetivos e definir seu produto. Você precisa ser específico sobre quais são as metas de seu produto ou serviço específico. E você precisa defini-lo e entender qual é o seu público-alvo e com quem você está tentando competir? Em seguida, você precisa compilar a lista de concorrentes diretos e indiretos. Concorrentes diretos são os concorrentes que estão exatamente no mesmo nicho que você ou seu cliente, ou concorrentes indiretos são nicho diferente do seu nicho, então você precisa compilar a lista deles e entenda, por exemplo , para uma análise completa, cada coisa, o que eles estão fazendo, como mencionei. Mas é claro que isso não significa que você vai analisar, digamos, 200 páginas diferentes, mas sim as páginas principais do site e das principais páginas de ofertas. Consegue entender exatamente o que eles oferecem e o que você pode aprender com eles. Para o seu negócio em particular, você precisa ter uma meta clara, metas em mente. Então, por exemplo, se seu objetivo é vender mais do que você precisa abordar essa análise simplesmente por essa parte. Então você precisa entender como eles estão vendendo seus produtos. Assim, você pode aprender uma coisa ou duas sobre seu site específico e seu processo específico. Isso não significa que você os copiará palavra por palavra ou seção por seção. Mas simplesmente entenda como eles fazem isso, por que estão fazendo isso e o que você pode aprender com eles? Porque esse é o processo de aprendizagem. É por isso que isso acontece logo no início do seu processo de design. Uma das coisas principais aqui é identificar os fatores diferenciadores entre os produtos. O que isso significa é, por exemplo se seu cliente e todos os concorrentes de seus clientes estão vendendo cartas, por exemplo, digamos, o que há de diferente entre todas essas cartas? É o preço? É o layout dos assentos? São os motores? É o impacto ambiental. O que diferencia esses concorrentes do seu produto e como seu produto pode ser diferente ou melhor em alguns casos do que a concorrência. Você tem que entender, então, se essa meta é boa o suficiente? Isso é bom o suficiente para colocar um site como o principal recurso, por exemplo, como o principal ponto de venda, você precisa entender todas essas coisas ao abordar a análise da concorrência. Basicamente, o que você está oferecendo? É melhor ou tem um custo menor do que a concorrência? E como você pode empacotar isso para que o usuário o entenda melhor e, com sorte, compre mais, se esse é seu objetivo principal. No próximo vídeo, mostrarei como fazer uma análise completa. E vou mostrar apenas algumas etapas que você pode seguir e como abordar a análise completa. Então, eu vou te ver lá. 39. Como fazer uma análise completa: Neste vídeo, mostrarei como fazer uma análise completa da concorrência e como você pode abordá-la? É claro que não vamos entrar em muitos detalhes, mas eu só quero que você entenda a essência e o básico de como você pode abordar isso com seus clientes. Então, vamos começar. Então, aqui temos dois sites que basicamente vendem o mesmo produto, que é o carro neste caso específico. E eu escolhi meus dois sites locais. Então, se você vê um sérvio aqui e ali, não preste atenção nisso. Acabei de tentar convertê-lo para o inglês. Mas o objetivo aqui é entender como eu abordei isso quando trabalho com meus clientes. Então, tentei comparar duas marcas com preços muito semelhantes e ofertas muito semelhantes, porque digamos que meu cliente esteja na mesma faixa de preço dessas duas marcas. Está posicionada no mesmo mercado dessas duas marcas. E eles estão oferecendo basicamente o mesmo, digamos, palete de produtos dessas duas marcas. Então, como podemos posicionar nosso site contra essa concorrência apenas para ver o que eles estão fazendo e o que podemos aprender se fizermos uma análise completa de seus sites. Então, começando aqui no topo, temos o menu e temos o menu novamente. Mas aqui temos uma abordagem mais fácil de usar pois ela não apenas nos fornece o ícone, mas também a pesquisa. Portanto, se eu clicar em Pesquisar, posso pesquisar rapidamente um modelo e pressionar OK ou fechar, que é uma interface de usuário muito boa. Então temos o logotipo aqui à direita. Enquanto estamos neste site, temos apenas o menu. Quando clico para abrir o menu, temos todas essas opções, mas não temos a pesquisa. E eu sei com certeza que a Qia oferece muitos veículos diferentes. Eles têm veículos novos, eles têm veículos usados. Portanto, uma boa função de pesquisa é realmente necessária aqui, mas como você pode ver, ela realmente não existe. Em seguida, temos essa imagem de banner enorme aqui, porque esse é o novo produto que eles estão oferecendo aqui na Citroen. Mas aqui, aqui, temos apenas esse enorme controle deslizante da seção de heróis. E não temos nenhuma opção aqui. Não podemos fazer nada. Só temos esse controle deslizante enorme com essas duas setas. Mas se eu me encontrar na tela apenas para que você possa ver ao rolar para baixo, as informações estão realmente aqui. Então, quando eu clico aqui, você pode ver que temos informações, temos botões, eles funcionam ao passar o mouse, tudo está ótimo, mas se você está aqui, basicamente não sabe o que fazer. E isso é uma experiência de usuário muito ruim, na minha opinião. Então aqui temos essa nova aeronave S3, que é esse veículo porque diz isso aqui. Então, mais uma vez, está muito claro o que eles estão oferecendo. temos esse botão com Na minha opinião, temos esse botão com um efeito de passar o mouse mais agradável. Depois, ao passar o mouse, apenas sublinhamos os textos. Portanto, esse passar o mouse é muito mais fácil de ver, muito agradável, muito mais agradável aos olhos. E funciona muito melhor do que passar o mouse sobre o Qia. Se rolarmos um pouco para baixo , teremos nosso alcance. Então, eu posso clicar aqui e isso realmente desliza. Então, essa é uma desvantagem, porque se eu rolar para baixo, sim, posso ver que há paginação e posso clicar nela e essas informações serão apagadas. Mas se eu clicar neste slide, não há nenhum botão aqui. Então, essa é uma grande desvantagem, porque esse é um dos modelos mais caros. E você espera que funcione bem, mas não funciona neste caso. Além disso, não há flechas aqui. Então, se eu clicar aqui, ele me levará a essa página específica que eu não quero. Eu só quero deslizar entre eles, mas não há setas e teclas ou isso é muito melhor neste caso? Então, talvez a combinação de ambos para o nosso produto seja muito melhor do que a combinação desses dois quando você realmente os coloca juntos. Na minha opinião, então, se você rolar um pouco mais para baixo, há uma variedade. Então, temos veículos de passageiros e podemos realmente derrubar isso. E temos veículos comerciais, o que é ótimo. Temos veículos comerciais. E isso vai me mostrar esses veículos basicamente comerciais, mas são um pouco menores para empresas. Digamos que, se você quiser comprar a granel, você pode com esses carros, mas vamos nos limitar aos veículos de passageiros neste caso. Então, aqui temos apenas esses dois. E eu sei com certeza que existem muito mais. Mas como posso acessá-los? Como isso é C3, C3b, enquanto o C4, onde está o s5, enquanto o C1, não há opções para eu clicar para a esquerda ou para a direita, por exemplo, enquanto estiver digitando um site, se eu rolar para baixo, não há seção como essa. Então, se eu tentar ampliar isso e tentar rolar para baixo, você pode ver que não há nenhuma seção como essa nos sites da Qia. Então, deixe-me colocar isso aqui e tentar ampliá-lo dessa forma, para que fiquemos com o que eu mostrei anteriormente. Então, se eu rolar um pouco para baixo, essa é uma caixa de seleção grande para mim, para a Citroen neste caso, porque. Eles estão te mostrando seu modelo imediatamente. Enquanto estamos aqui, vemos apenas esses modelos que são mostrados aqui. E eu sei com certeza que este veículo, que é elétrico, não está à venda no momento no meu mercado local na Sérvia. Então, por que você o colocaria aqui se eu não posso comprá-lo? Então, se eu clicar aqui, isso me dará todas essas ótimas avaliações. Vai me dar todos esses artigos sobre esse carro, mas qual é o sentido de eu não poder comprá-lo? Bem, no site da Citroen, eles estão sendo muito honestos neste caso. Então, todos esses veículos que você vê no site deles, você pode realmente comprar hoje, o que é ótimo, na minha opinião, neste site específico abaixo, que temos um consultor. Podemos aprender mais sobre esse consultor. Temos locais de venda, o que é mais uma vez fantástico porque eu posso saber onde estão meus revendedores locais, onde está a rede de serviços, qual é o horário de funcionamento e coisas assim? Então, temos algum tipo de blog aqui, todas as últimas notícias, temos o boletim informativo e, finalmente, temos algumas opções de fotos e informações de mídia social. Finalmente, isso permanece pegajoso o tempo todo. Portanto, listas de preços e configuração, para que eu possa imediatamente configurar meu veículo novo ou usado. Temos uma lista de preços, o que é fantástico porque eu só quero ver um preço em um piscar de olhos. Isso é sempre criar. E, finalmente, temos nossos serviços e nossa variedade. E temos isso que nos leva de volta ao topo. Mas se compararmos isso com o Kia, se eu rolar aqui, como eu disse, encontre um representante. Portanto, não há opção como no site da Citroen, de vê-los imediatamente. Eu tenho que clicar em Página externa. Temos o teste de direção, que basicamente significa test drive. Mas o Google não o traduziu muito bem nesse caso. Então eu posso reservar um test drive, o que é ótimo. E não posso fazer isso aqui nos preços e catálogos do site da Citroen. Mas tudo isso, eu tenho que clicar e sair, o que você ainda tem a ver com a Citroen. Pelo menos no caso deles, você pode ver essas informações o tempo todo. Finalmente, temos um rodapé, que é grande, diferente do caso da Citron. Então, deixe-me me mover novamente só para que você possa ver. Então, aqui temos serviços e alcance, enquanto aqui temos veículos novos, veículos usados para empresas, para proprietários inovações sobre a KIA, estamos contratando uma pequena perda e todas essas coisas. Então, dependendo do que você gosta e de qual abordagem você gosta, você vai escolher uma ou outra. Mas, na minha opinião sincera, apenas entre esses dois, prefiro combinar informações para nosso cliente fictício nesse caso específico. Então, eu usaria as informações do site da Citron e usaria design do site Qia, neste caso, para abordar uma pequena combinação de todas essas informações, eu definitivamente colocarei uma pesquisa aqui mesmo no site principal. Definitivamente. E eu aumentaria essas informações, reduziria essa imagem um pouco mais como está neste site. Porque mesmo em páginas maiores, tamanhos ainda maiores, como neste caso específico, você pode ver a quantidade de espaço vazio e espaço desperdiçado que existe aqui. Eu entendo enquanto eles estão fazendo isso, mas na minha opinião sincera, você realmente não precisa fazer isso. Você pode simplesmente abordá-lo como a Citroen está fazendo. Basta dar aos seus usuários a opção de acessar páginas externas e aprender mais sobre determinados produtos, por exemplo, mas neste caso específico, eu realmente gostaria da combinação entre esses dois sites. No próximo vídeo, mostrarei uma comparação de recursos. E como você pode abordar a comparação de recursos usando este exemplo que acabei de mostrar para esses dois sites, porque é muito mais fácil ficar com esses sites. Então eu vou te ver lá. 40. Como fazer uma análise de recursos: Neste vídeo, faremos uma análise de recursos e usaremos os mesmos dois exemplos que foram mostrados em um vídeo anterior, mas em vez de focar em todo o site e todas as páginas, a capacidade de resposta e coisas assim. Vamos nos concentrar em um único recurso e ver como essas duas marcas estão fazendo esse único recurso, que é a opção de configurador de carro em seu site. Então, vamos começar. Aqui temos os dois sites que mostrei anteriormente. E como eu disse neste vídeo, vamos nos concentrar em um único recurso, que é a configuração do seu carro. É muito importante e, na maioria desses casos, você deseja que o carro tenha suas especificações exatas. Pode ser a cor das rodas ou o acabamento interno ou, digamos, não sei, o pacote de informações interno. Então, talvez você queira ter uma tela maior. Talvez você queira que a garantia de segurança seja mais longa ou o que quiser, é aí que o configurador de carro é útil. Aqui estou eu nessas páginas diferentes. E, na minha opinião, Qia faz as coisas não apenas melhor nesse caso em particular, mas também Miles melhor. O que quero dizer com isso é que a citrulina é uma opção muito mais simples do que a Kia para comprar imediatamente. Porque se você quiser comprar esse sutra e modelo, neste caso é um C3, você só vai vir aqui, selecionar sua opção e obtê-la. É tão simples assim. Já com o Qia, é todo esse processo que lhe confere esse tipo de aparência mais refinada. Mais uma vez, os dois são bons. Se você comprar a granel, talvez a Citroen seja uma opção muito melhor para você, porque você pode simplesmente navegar, analisar o preço, comparar o preço ver com outros modelos qual deles funciona melhor para você. Entenda esses pacotes e, em seguida, simplesmente prossiga com sua compra enquanto estiver com a chave. Ou você pode se deliciar um pouco mais todos esses pequenos detalhes. Em primeiro lugar, essas são as páginas, páginas dedicadas a esses dois modelos específicos. Então, aqui podemos ver veículos, novo S3, e aqui podemos ver esses tônicos. Então, essas são duas páginas para esses modelos específicos. Então, primeiro de tudo, a página da Citroen não é tão responsiva, porque você pode ver que posso percorrer aqui e aqui temos quatro etapas diferentes no processo de compra. primeiro passo é basicamente determinar qual modelo e rico pacote de opções você deseja escolher. O próximo é reservar seu test drive. próxima é deixar a informação e a próxima é a conformação, que é a última, devo dizer, o número quatro neste caso em particular. E eles têm a opção de comparar modelos aqui. Eles têm a opção de filtros. Então eu posso usar cinco portas, eu posso usar três portas, que é a caixa de câmbio, que é o tipo de combustível é diesel ou gasolina, e os níveis de equipamento. E você pode basicamente clicar nesse filtro e aplicar essas diferentes alterações. E, mais uma vez, traduzi esses sites do meu mercado local para o inglês. Então vocês podem entender melhor aqui que temos o exterior, aqui temos o interior e aqui temos a tela de alvos, que se eu clicar ali, vou ampliá-la basicamente e colocá-la em tela cheia. E abaixo disso, temos esses ângulos diferentes. Então, essas são basicamente imagens PNG. Nesse caso específico, você notará que não temos a opção de escolher cores diferentes, por exemplo, então é aí que a etapa número dois se torna útil. Mais tarde. Temos o pacote de campo e você pode ver que as opções estão mudando quando eu clico ali mesmo e temos o pacote de brilho. Mais uma vez, isso vai mudar, basicamente adicionando alguns detalhes aqui e ali. A mesma coisa com o interior. Você pode ver como parece que , no campo de trás, você terá uma tela maior de infoentretenimento na parte traseira envergonhada, você terá um pouco mais de opções aqui e ali. Então, quando você clica no interior, você tem 360 graus. Mas só para o interior, você pode clicar e arrastar para entender a aparência do interior, e é basicamente isso. Muito simples. Mais uma vez, igual à página inicial do vídeo anterior em que a comparamos. É basicamente isso. Você tem seu preço imediatamente aqui. Então, a Citroen é um pouco mais honesta, digamos assim. O que eles estão oferecendo a você, o que eles estão mostrando , então o Qia é, mas esta página é realmente super simples. Então, mais uma vez, não é do gosto de todo mundo , mas se dermos uma olhada no exemplo de Kia aqui, imediatamente , imagens maiores, design mais bonito, mais opções tentando vender para você nesses sete anos garantia, que a Citron não menciona em nenhum lugar, que tipo de garantia você realmente tem aqui. Talvez se eu clicar em Leia mais, isso me dê essas opções. Mas não posso aplicar nenhuma dessas opções diretamente aqui. Enquanto é Qia, você tem essas belas imagens. Você pode clicar em todas essas imagens e ter as informações logo abaixo. Você pode entender o que são todas essas coisas. Então, quando eu clico aqui, cheio de conteúdo, compartimento de passageiros. Então, ele lhe dá a resposta imediatamente. Depois, temos o distônico e as impressionantes linhas GT. Então você pode ver claramente a diferença entre os pára-choques, faça as rodas. A combinação de cores aqui. E você pode iniciar uma visão de 360 graus. Você pode ver como fica, mas eu quero lançá-lo para o modelo normal. Eu posso pará-lo a qualquer momento e posso clicar, arrastar e basicamente comparar por mim mesmo , em qualquer ângulo, o que eu gosto, o que eu não gosto, e talvez essa não seja a opção para mim. Finalmente, temos o test drive para que você possa reservá-lo imediatamente a partir daqui. Embora você não possa fazer isso no site da Citroen, você precisa seguir todas essas etapas diferentes e ter o catálogo para entender as opções do seu carro. Você pode entender que essas são apenas as cores que eles estão oferecendo aqui, mas talvez você queira uma cor personalizada. Talvez essa seja uma opção no catálogo deles para que você possa clicar ali mesmo. Talvez eles estejam oferecendo opções adicionais, serviços adicionais, garantia mais longa, coisas assim. É por isso que o catálogo é realmente útil. Finalmente, temos as cores, então essas são a combinação predeterminada, e você pode ver quando eu clico nelas, elas estão mudando em tempo real, o que é fantástico porque você pode compare e veja quais você gosta, quais você não gosta. E talvez eu possa até clicar aqui para simplesmente escolher as cores que não são de dois tons, porque a maioria delas são de dois tons, como este, por exemplo, talvez eu seja apenas um fio mais simples ou conservador . Talvez eu queira clicar aqui para entender isso e ver como fica N. Finalmente, quando terminar, você pode iniciar o 360 nessa cor específica para ver como fica a partir de todos os lados, o que eu acho fantástico. Uma desvantagem é quando eu inicio a visualização e vou até, digamos, esse ângulo e depois clico para aplicar essa cor diferente. Isso o trará de volta aqui, e não é muito avançado, digamos, manter essa visão específica e esse esquema de cores específico. Mas isso realmente não importa. Você sempre pode iniciá-lo e ele sempre rolará assim e você pode fazer isso sozinho, se quiser. Então, abaixo disso, temos características. Eles estão nos mostrando quais opções você obtém diretamente da caixa, quais opções são, digamos, opções adicionais. Você escolheu esta e pode ver a cor, mas ela não atualizou a cor. Essa é uma desvantagem, talvez porque eu não escolhi esta. Na verdade, eu escolhi esse cinza. Então, por que não foi atualizado aqui? Talvez essa seja uma opção a ser explorada um pouco mais. Você pode trocar seu veículo aqui. Então, se você não quer esse tônico, talvez queira outro carro daqui. Você pode fazer isso ali mesmo. Finalmente, você pode reservar uma mesa seca aqui. Portanto, esta é a segunda etapa que a Citroen coloca aqui. Eles estão colocando tudo na mesma página, o que é muito mais fácil de entender à primeira vista. Veja o que é exigido de você. Eu tenho que colocar meu nome, sobrenome, número de telefone para que eu possa entender o que é. E aqui eu tenho o preço, que eu tenho para a Citroen aqui, mas eu tenho o preço aqui. O que eu gosto mais na Citroen é que ela nos mostra essas diferentes opções de preços imediatamente aqui. Portanto, o preço está sempre disponível para você, enquanto com o Qia você precisa rolar até o fim. Vamos ver, isso é 15249. Talvez se eu escolher essa opção mais cara, isso mude isso? Não, isso é apenas uma imagem de banner. Então, talvez eles devessem atualizar mais opções de compras para que tenham ofertas especiais e usem veículos. Então, tudo isso é ótimo, mas eu prefiro a abertura do site da Citron aqui. Então, talvez para o nosso site, site imaginário, talvez a combinação dos dois funcione muito melhor. Então, digamos que design, imagens, opções de personalização e todas essas coisas talvez funcionem melhor, por exemplo, enquanto abertura, transparência e facilidade de uso talvez devam funcionar com o exemplo da Citron. Mas não cabe a mim dizer nada porque realmente não temos objetivos. Neste vídeo em particular, estou apenas mostrando exemplos. Quando você faz isso com seus clientes reais, precisa entender seus objetivos e também entender seus orçamentos. Porque desenvolver uma solução como a Kia, neste caso específico, pode levar muito mais tempo, pode ser muito mais caro do que uma solução como essa. E dependendo de quanto dinheiro pode ser ganho para seus clientes, talvez a opção Citroen seja melhor do que a opção Kia, enquanto eu estou dizendo que talvez seja apenas com essas imagens estáticas, como ele está fazendo aqui, você pode fazer muito melhor do que o que Citroen está fazendo por padrão aqui. Então, preste atenção a detalhes como esses. Veja o que eles estão oferecendo e anote todas essas opções, todas essas soluções, o que cada uma delas está oferecendo, anote para entender e comparar. Examine muitos de seus diferentes concorrentes apenas para entender o que eles estão fazendo melhor ou pior do que você e o que você pode aprender com eles. No próximo vídeo, falaremos sobre ferramentas. Quais ferramentas você pode usar? Então, eu vou te ver lá. 41. Que ferramentas para usar: Neste vídeo, falaremos sobre ferramentas que você pode usar para análise competitiva e quais ferramentas são melhores do que as outras? E, finalmente, no final das contas, quais ferramentas são melhores para você? Então, vamos começar. Então, aqui temos a imagem, e essas são as imagens que eu tirei online. E eu só queria mostrar que realmente não importa quais ferramentas você está usando. O que importa é que eles façam um trabalho para você, porque se você estiver usando, por exemplo Adobe XD em seu trabalho o tempo todo. Não faz sentido mudar para outras ferramentas porque o Adobe XD pode fazer o trabalho tão bem, se não melhor, do que todas essas outras ferramentas. A mesma história acontece se você estiver usando o Photoshop, se estiver usando o Word, se estiver usando produtos do Google, isso realmente não importa. O que importa é que você possa fazer a comparação de todos esses produtos diferentes. Assim, você pode ver que, nesse caso específico, eles estão usando o Adobe Illustrator para fazer análises competitivas. Se mudarmos para outro caso, eles estão usando o Google Sheets. Nesse caso. Aqui, eles estão usando os slides do Google para uma representação um pouco melhor. Aqui estão usando quadros brancos, então você pode até mesmo fazer isso. Você pode fazer com papéis adesivos, você pode fazer isso com quadro branco, você pode fazer isso com pedaços de papel branco. Você pode imprimir, como você pode ver que eles fizeram aqui. Você pode imprimir todas essas páginas do site e entender o que elas estão fazendo, mas também pode fazer capturas de tela e trazê-las para o Adobe XD. E você pode fazer tudo isso no Adobe XD. Se você estiver usando o XD, realmente não faz sentido comprar um quadro branco caro, marcadores caros para imprimir todos esses papéis, comprar uma impressora, se você não a tiver, quando tudo isso pode ser feito no Adobe XD ou na ferramenta que você já está usando para o seu trabalho. Finalmente, aqui temos a ferramenta chamada extensor, e você pode fazer maioria das coisas que acabamos de mencionar, mas às vezes até um pouco mais, porque eles estão fazendo todos esses modelos, o que você pode crie você mesmo no final do dia, ao começar a trabalhar com esses clientes, você pode repetir esses modelos em qualquer tipo de ferramenta que estiver usando. Mas, por exemplo, nesse caso, você pode simplesmente inserir os links para seus concorrentes. Você pode colocar as informações aqui. Eles estão lhe dando esses modelos, como mencionei. Portanto, é um pouco mais fácil fazer isso em uma ferramenta como essa quando você está nesse curto cronograma, mas não precisa ser. Você pode fazer isso em qualquer tipo de ferramenta ou software que estiver usando. Então, como mencionei, realmente não importa o que você está usando desde que esteja usando corretamente, desde que esteja usando, certo? E desde que faça o trabalho. No próximo vídeo, falaremos sobre as coisas a serem observadas, erros e armadilhas comuns. Então, eu vou te ver lá. 42. Coisas para olhar para fora: Neste vídeo, falaremos sobre coisas a serem observadas ao fazer a análise da concorrência e algumas das melhores práticas de como você pode abordar essa análise da concorrência. quando você está fazendo isso? E a primeira coisa é não faça as coisas apenas por uma questão de design. Pense nas metas. Pense no que seu cliente realmente oferece. Qual é a principal oferta deles? E eles tentam ser diferentes da concorrência ou tentam vencer a concorrência em termos de preços? Eles tentam vencer a concorrência em termos de volume de vendas? Qual é o objetivo aqui e qual é o problema que você está realmente tentando resolver? Portanto, não passe meses do seu processo de design tentando colocar imagens bonitas, como eu mostro em um dos vídeos anteriores com os exemplos de carros. Não faça isso apenas por fazer isso. Faça isso se for necessário. Se esse é o objetivo principal e se isso é tentar resolver o principal problema que seu cliente realmente enfrenta, próximo passo é não fazer as coisas apenas para fazer as coisas. O que quero dizer com isso é que, se você quer ser diferente, tente ser diferente com o que está oferecendo e como você o está embalando, apenas para se diferenciar da concorrência e apresentar sua oferta. de uma forma muito melhor e convincente. Em vez de tentar redefinir a pesquisa na aparência da pesquisa ou posicionar o ícone do Menu em vez de, digamos, do lado direito para o lado esquerdo, apenas em termos diferentes. Não tente fazer isso. Não tente reinventar a água quente porque você está apenas gastando um tempo valioso com coisas que não importam. E sob coisas que não vão gerar valor para seu cliente e para seus clientes. Tente seguir alguns exemplos e algumas regras que já estão definidas pelo setor em que seu cliente está inserido, especialmente se ele estiver em um determinado nicho, tente entender o que Nietzsche está fazendo e por que eles estão fazendo isso. E tente fazer isso sozinho, do seu jeito. Mais uma vez, não tente copiar o que eles estão fazendo porque isso não funcionará para sua oferta e seu produto. Tente ser diferente, mas tente ser convincente no que está fazendo. A principal lição aqui é fazer as coisas com um propósito. Não tente fazer coisas só para fazer coisas. Faça coisas com um propósito que fará uma mudança em seus clientes e em seus clientes. Clientes no final do dia. 43. SECÇÃO 5 ATRIBUIÇÃO: Sua tarefa para esta seção é apenas escolher duas marcas diferentes. Essas podem ser as marcas que você quiser, anualizadas e use apenas o que eu mostrei nisso, nessas aulas. Você pode usar sua tela. Você pode dividi-lo por dois. Você pode colocar esses dois sites lado a lado e simplesmente analisá-los, ir direto do topo até o final. Comece pela seção do cabeçalho, começa na seção do herói, comece pela topografia, comece pela cópia. Eles estão usando coisas de imagens, como estão posicionando isso. Existe uma história por trás desse design? O que eles estão tentando dizer analisar todos esses detalhes sobre os quais falamos nesta seção e tente anotá-los. Você pode usar o Word, pode usar o Microsoft Office, pode usar o Google Docs, o que quiser. Você pode até usar um pedaço de papel. Apenas pratique, apenas entenda o que você está vendo na tela. Não se concentre demais no posicionamento dos elementos e em todas essas coisas visuais, certifique-se de se concentrar em coisas mais importantes, como a estrutura, como o que eles realmente estão falando nessas páginas e, por exemplo, a aparência da cópia real , porque a cópia junto com as imagens é o que realmente fala com os usuários. 44. SEÇÃO 6 Fluxos de usuário: fluxos de usuários mostram como seus usuários estão se movendo em suas páginas, como eles estão se movendo em seu site ou aplicativo móvel. E com os fluxos de usuários, você está apenas tentando entender qual é o caminho mais curto possível para seus usuários seguirem para atingir uma meta Você também pode ramificá-los e criar classificação De um fluxo de tarefas para cada tarefa diferente que você deseja usar, você criará fluxos de tarefas diferentes com base no fluxo geral de usuários. Então, vamos começar com esta seção. 45. O que são os fluxos de usuários: Fluxos de usuário, todos os fluxogramas, como às vezes são chamados de nossos caminhos, seus usuários apostam que, ao usar um produto, exibem uma parte completa seu usuário retira do ponto de entrada, certo, até o ponto final quando eles terminam sua jornada. Há muitas partes diferentes que seus usuários podem escolher dependendo de como chegaram ao seu produto, por exemplo, se nosso site, página de destino ou algo parecido, talvez tenham chegado a essa página de destino quando clicou dentro do link do seu e-mail ou, se for página do Shoppe, pode ser uma página de produto ou algo parecido, talvez a explore visitando nossa campanha que você teve no Facebook ou Instagram ou algo parecido . Talvez tenham clicado em um link dentro de um vídeo do YouTube e acessado a página da loja. Ou, se for um aplicativo, talvez eles instalem esse aplicativo usando um link ou download direto de uma loja. E então, quando eles foram instalados nesse aplicativo ou talvez o abriram e acessaram a tela inicial. Portanto, os fluxos de usuários têm uma tarefa simples de direcionar todos esses caminhos de forma que seja lógico para seus usuários e muito fácil entender e otimizá-los de forma que tenham como poucos cliques possíveis para atingir essas metas, dependendo de quem é seu cliente e do que seu produto está tentando fazer. Esses objetivos podem ser comprar um produto, reservar um serviço, fazer o download, um brinde, assinar um boletim informativo por e-mail e muito mais. Portanto, seu objetivo como designer ao usar esses fluxos de usuário é criar esses fluxos e caminhos ideais que seus usuários possam seguir para realizar essas tarefas de forma que seja o mais simples possível . entendam e o mais rápido possível para que eles resolvam e cheguem ao objetivo final. O objetivo do seu cliente é aumentar a conversão, por exemplo, ao usar esses fluxos de usuários, você chegará um passo mais perto dessa conversão aprimorada, reduzindo o número de cliques, por exemplo, dessa conversão aprimorada, reduzindo o número de cliques, por exemplo, seus usuários precisam aceitar para atingir esses objetivos. Ao usar fluxos de usuário, você determinará a quantidade total de telas ou páginas necessárias nessa etapa do projeto. E isso, por sua vez, economizará muito tempo depois, quando você realmente chegar aos estágios de design do seu projeto , porque isso melhorará sua compreensão geral desse projeto. Portanto, isso o acelerará ainda mais nesta fase do projeto, você pode até mesmo informar aos desenvolvedores o que está acontecendo. E você pode até mesmo mostrar eles esses fluxogramas e falaremos sobre isso nas últimas etapas desta aula. Mas esse é o objetivo desse processo, é entender que esse projeto é muito melhor do que começar com o design, porque essa é uma abordagem muito errada. Porque você realmente precisa começar com esses fluxos de usuário para entender quantas telas, quantas páginas você precisará mais tarde, quando chegar a essa parte de design do seu projeto. No próximo vídeo, discutiremos quais são alguns tipos diferentes desses fluxos de usuário e como eles são usados. Então eu vou te ver lá. 46. Diferentes tipos de fluxo de usuários: Há muitos tipos diferentes de fluxos de usuários, dependendo do que você está tentando resolver em seu projeto e do que está tentando realizar. Mas, basicamente, existem três tipos principais que são usados em geral. E, a partir desses três tipos principais, existem muitos tipos diferentes que você encontrará durante sua carreira de design. E esses são fluxos de tarefas, fluxos de fios e fluxos de usuários. Os fluxos de mesa são o que o nome sugere e mostram como o usuário interage com uma determinada tarefa clicando no mesmo ponto de entrada para chegar ao mesmo ponto de entrada e ao mesmo ponto final, todos os seus usuários farão a mesma jornada. Portanto, essa jornada mostrará uma tarefa simples, por exemplo, inscrever-se em nosso boletim informativo por e-mail ou comprar o produto ou reservar um serviço com você ou algo parecido. Todos esses usuários precisam concluir a mesma tarefa. Essa tarefa tem muitas etapas diferentes dependendo da complexidade da tarefa. E, portanto, esses fluxos de tarefas são usados para dívidas. Eles não são usados para outras coisas complexas, por exemplo, pontos de entrada diferentes, pontos de saída diferentes. Mas o objetivo principal dos fluxos de tarefas é focar em uma única tarefa e otimizar essa parte do usuário de forma que eles tenham a lista de etapas possíveis para concluir essa tarefa. Então temos fluxos de fios. E esses fluxos de trabalho são , na verdade, uma combinação desses fluxos de tarefas e wireframes básicos. E é por isso que eles são chamados de fluxos de fios. E o objetivo principal deles é mostrar diferentes jornadas de usuário em todo o produto e diferentes pontos de entrada em diferentes pontos de saída. No entanto, não há muitos detalhes internos. Eles estão lá apenas para mostrar todas essas partes diferentes que seus usuários podem usar. Portanto, o objetivo aqui não é ser muito detalhado, mas mostrar aos seus clientes, aos colegas de equipe, também os desenvolvedores inseridos. Muitas partes diferentes que seus usuários podem usar. Mas usar pelo menos alguns detalhes para mostrar a aparência dessas telas ou páginas. E depois usar setas, por exemplo, apenas para mostrar quais são algumas partes diferentes que seus usuários podem usar. E, finalmente, temos os próprios fluxos de usuários. Eles são, na verdade, uma combinação de fluxos e fluxos de tarefas. E os fluxos de usuário, na verdade, mostram todos os diferentes fluxos que seus usuários podem seguir, todos os diferentes caminhos que eles podem seguir. E, na verdade, são uma combinação de fluxos de tarefas e fluxos de via. O que quero dizer com isso é que eles são uma combinação desses dois elementos. E eu vou te mostrar isso em fases posteriores desta aula. E, basicamente, eles estão mostrando tudo. Eles estão mostrando cada ponto de entrada, estão mostrando cada ponto de saída. Eles estão mostrando todas as várias partes que seus usuários podem seguir, caminhos certos e errados. Eles estão mostrando caminhos alternativos e todas essas coisas. Então, eles são tão detalhados quanto possível. Então, dependendo do que você realmente precisa neste projeto e dependendo de onde você está nos estágios de design deste projeto, você vai usar um ou outro. Às vezes, os fluxos de usuários são, na verdade, sua melhor aposta porque, dependendo do andamento do seu projeto , do andamento do feedback, do andamento da pesquisa. São muito mais simples de mudar, são muito mais simples de editar. Então, se você está apenas começando com os fluxos de tarefas e aí estão eles, adicione fluxos de fios posteriormente e seguida, use os fluxos do usuário no final. Então, talvez o User Flows seja a melhor maneira de fazer isso. E quando realmente usamos esses fluxos de usuário? Vamos discutir isso no próximo vídeo. Então, eu vou te ver lá. 47. Quando são usados: Os fluxos de usuários são usados logo no início de um projeto, logo após a conclusão de todas as pesquisas e personas do usuário. Como eu disse anteriormente, são usados para determinar a quantidade de telas que você precisará e a ordem lógica dessas telas ou dessas páginas, e como seus usuários realmente estão. vai interagir e percorrer todas essas páginas diferentes. E então você pode discutir essa ordem e todos esses fluxos com seus clientes e com seus desenvolvedores ou colegas de equipe para obter o melhor resultado possível na melhor otimização possível. Antes de você realmente passar para os estágios de design deste projeto, eles são usados para criar uma interface intuitiva e agradável para que nossos usuários achem nosso produto ou gostem de usar, e também são usado para aumentar a taxa de conversão, como mencionei anteriormente, porque ao usar esses fluxos de usuário, você determinará logo no início desse processo de design, quando seus usuários vão clique, compre ou compre determinada coisa dentro desse processo, em vez de mais tarde no processo de design, o que, por sua vez, tornará o processo de design muito mais fácil de fazer muito mais fácil de criar. Porque você determina todas essas coisas em seus fluxos de usuários. Você pode usá-los para criar novos produtos ou usá-los com produtos existentes para refinar os caminhos que seus usuários podem seguir dentro desse produto e para aumentar a otimização ou conversão ou qualquer que seja o objetivo deste projeto. Então, como eu disse, eles podem ser criados para produtos novos ou existentes. E eles são muito úteis quando você cria componentes que posteriormente serão usados nas etapas de design deste projeto de design, porque alguns componentes são usados principalmente , como rodapés de navegação. E dentro desse estágio do seu projeto, você pode facilmente determinar o que estará localizado nessa navegação ou rodapé. Você também pode usá-los para criar algo chamado imagens de heróis, por exemplo, ou os controles deslizantes são componentes diferentes, como a dose. Posteriormente, você pode facilmente escalar ou redimensionar esses componentes, se precisar deles ou não mais tarde em seu projeto. Finalmente, há uma ótima maneira mostrar aos seus colegas de equipe, clientes e desenvolvedores suas ideias sobre esse projeto. Todas essas partes diferentes que seus usuários podem usar. Porque a validação nesta parte do projeto é muito importante porque, como já mencionei várias vezes, ela vai acelerar seu design, parte deste projeto é muito mais porque nesta parte com esses fluxos de usuários, você determinará todos esses detalhes importantes. E mais tarde, o design será processo muito mais fácil e muito mais agradável de fazer. Porque é apenas a exploração da criatividade, em vez de lidar com todas essas tarefas complexas que os usuários precisam resolver. Agora, falando em fluxos de usuário no próximo vídeo, na verdade vamos criar fluxos de usuário usando o Adobe XD. Então eu vou te ver lá. 48. Como criar fluxos de usuários no Adobe Xd: Há muitas rotas diferentes que seus fluxos de usuário podem seguir. Há muitas formas diferentes que você pode usar. Mas existem algumas formas básicas que todo designer ou local deve entender. Eles são basicamente o padrão no setor há décadas. E é muito importante conhecê-los, especialmente se você estiver trabalhando com equipes remotas. Se você ingressar em uma agência mais tarde, ou se já estiver trabalhando em uma agência e tentar nos estabelecer uma linguagem que todos possam entender. Então, neste vídeo, vou mostrar um modelo. Você poderá baixar este modelo e explorá-lo mais e , em seguida, desenvolvê-lo com base nele. E mais tarde na aula, mostrarei alguns modelos mais complexos que você pode realmente obter se quiser e, em seguida, expandir esses modelos básicos e simplesmente criar sobre eles. Então, aqui está esse modelo. É chamado de elementos de fluxo de tarefas. E se você quiser obter esse modelo, basta baixá-lo dos arquivos de classe e abri-lo no Adobe XD. Então, o que temos aqui são todos os elementos, todos os componentes. Portanto, temos entrada, ação, processo, decisão e seta negativa, e essas são suas cores. Então, colar de ponto de entrada, colarinho branco, que é basicamente a cor do texto em todos os lugares, e cor dos degraus. Se você quiser alterar essas cores para a marca do seu cliente, por exemplo, basta clicar com o botão direito do mouse. Você pode copiar isso ou editar e, em seguida, simplesmente alterar essa cor como quiser. Como você pode ver, eles serão atualizados em tempo real. Você pode colar seu código hexadecimal aqui se quiser. E então ele será atualizado para a cor hexadecimal que você escolheu. Então, deixe-me voltar um pouco. Então, como eu disse, este é o modelo básico e, em seguida, você pode construir sobre esse modelo. Então, se ampliarmos um pouco também todos esses elementos diferentes, vou mostrar o que todos eles são e o que todos eles fazem. Então, primeiro de tudo, temos a entrada, e este é o círculo de entrada, ou o ponto de entrada geralmente é mostrado como um círculo, mas você pode mostrá-lo de muitas maneiras diferentes que desejar. Nada disso é realmente padronizar. São apenas designers do setor que usam todos esses elementos e modelos há décadas. E então, simplesmente crie todas essas soluções diferentes. Portanto, temos o ponto de entrada e esse também pode ser o ponto de saída. Portanto, o ponto de entrada, se você se lembra dos poucos vídeos anteriores que mencionei, pode ser, por exemplo, uma página de destino do seu site ou tela de login do seu aplicativo ou qualquer outra coisa. O ponto de entrada em que os usuários realmente inserem seu design, seu produto, seu aplicativo móvel, seu site, seja o que for. Depois disso, temos ação. Assim, os usuários podem clicar, os usuários podem navegar, os usuários podem afirmar, os usuários podem digitar que todas essas coisas diferentes são ações. As ações também podem ocorrer se você clicar no botão Avançar dentro do seu aplicativo, por exemplo, para acessar telas diferentes. Ou se você clicar em um determinado ícone, por exemplo, a seta para ir para a esquerda e para a direita, ou se você deslizar para usar a paginação, o círculo de ação está lá. E vou mostrar isso em apenas um segundo com esse modelo realmente básico que encontrei on-line e depois o recriei usando esses elementos. Então, todos esses elementos eu criei para vocês e vocês podem simplesmente baixar e usar este modelo. Como eu mencionei. Em seguida, processamos. Então, o que acontece depois de concluirmos essa determinada ação? Então, fomos para uma página específica? Passamos de, por exemplo, imagem pequena para imagem em largura total? Fomos para o próximo slide? Compramos o produto? Você acessou a página de checkout? Todas essas coisas realmente importam dentro do processo. Então você tem que escrever isso para entender como designer, ou se você está trabalhando com colegas de equipe, com desenvolvedores ou com clientes, você tem que mostrar a eles esse processo. Em seguida, temos essa forma de diamante, que é a decisão. Então, basicamente, isso significa se o usuário se comprometeu a dizer sim ou não a um determinado processo ou a uma determinada ação. O que quero dizer com isso é quando você acessa nossa página de checkout, por exemplo, e deseja comprar um produto? Isso pode ser uma decisão de sim ou não. Sim, eu quero comprar o produto. E então você vai para a página de pagamento, vai para a página de pagamento e assim por diante ou, se não, se eu clicar em Não, para onde isso me leva? É por isso que esse diamante é muito importante e geralmente é chamado de diamante de decisão. Vou mostrar como edito todos esses elementos em apenas um segundo. Mas, em seguida, temos flechas. Agora, essas setas preenchidas, como você pode ver, temos dois tipos. Então, essas setas preenchidas são basicamente setas de degrau. Então, eles movem os usuários de uma etapa para a outra. E então essas flechas são basicamente o que eu as chamei aqui. As setas negativas são quando o usuário diz, diz não ou quando usuário não consegue concluir uma determinada tarefa, por exemplo, se a pesquisa não consegue encontrar nada , não aparece nenhuma seta e ela a pega para uma próxima etapa ou para a etapa anterior ou algo parecido. Então, basicamente, é por isso que essas setas são usadas. Agora, se eu diminuir o zoom um pouco, você pode ver esse fluxo. E, basicamente, eu me inspirei online e, de forma injusta, a recriei usando esses elementos. Como o usuário entra aqui, ele é recebido com uma página de boas-vindas ou uma tela de boas-vindas, por exemplo , a partir dela, ele pode selecionar uma tarefa. A tarefa é selecionada e, em seguida, eles podem seguir em frente. Se estiver correto, eles poderão avançar para a página de detalhes. Se não estiver correto, então isso. Se eles clicarem em não, por exemplo, isso os levará de volta às tarefas selecionadas. Portanto, esse nó pode ser um botão concreto quando eles clicam em não, ou pode ser um X, por exemplo, se eles quiserem fechar o pop-up ou você estrutura seu layout, basicamente, o ponto é o mesmo. Eles podem avançar, então sim, ou podem retroceder. Então não, é por isso que eles são usados. Então, vamos para esta página de detalhes, por exemplo , e na página de detalhes eu posso clicar na pesquisa, digamos para encontrar algo. E então, quando me comprometo a pesquisar, posso pesquisar itens. Se eu não encontrar nenhum item, ele não mostrará nenhum item encontrado. Então, neste caso, imaginei que fosse um ícone X, então, por exemplo, nenhum item foi encontrado. E então você pode fechar para concluir uma pesquisa. Mais uma vez, Para o item é encontrado, meta é concluída neste caso específico porque esse é o objetivo desse item. E então você pode clicar em Pedir. E este é o seu ponto de saída, assim ordenado. Ou se eu não quiser fazer o pedido, talvez eu possa clicar em não ou cancelar ou algo parecido. E isso vai me levar de volta a esta página de detalhes. Então, você pode ver neste exemplo muito rápido e fácil como esses fluxogramas são úteis. Esse é basicamente um fluxo de tarefas que mencionei anteriormente porque mostra apenas uma única tarefa. No próximo vídeo, discutiremos alguns modelos mais avançados e algumas etapas mais avançadas que você pode seguir ao criar esses fluxos. Mas, basicamente, esse é apenas um modelo básico. Mais uma vez, você pode baixá-lo, usá-lo no Adobe XD e explorá-lo. E eu realmente encorajo você a desenvolver esse modelo, adicionar mais páginas, adicionar mais telas e assim por diante. E uma coisa que eu não mostrei é, por exemplo nesta tarefa aqui, eu quero ampliar e, digamos, em vez de selecionar a tarefa, eu quero fazer outra coisa. Você pode ver que é a frase de abertura, então é uma fonte gratuita do Google. Você pode baixá-lo no Google Fonts e no Adobe Fonts, o que quer que você esteja usando, de forma totalmente gratuita. Então, o que eu fiz aqui foi incluir o acolchoamento. O que quero dizer com isso é que, se eu clicar ali mesmo, você pode ver que o preenchimento está ativado nesse componente. Então, se eu clicar duas vezes aqui, posso digitar algo, por exemplo, torná-lo mais visível e você poderá ver como a caixa se expande. Então, basicamente, neste caso, eu, se eu voltar, usei 20, como você pode ver aqui, espaçando todos os meus elementos. Mas você pode usar dez, você pode usar cinco. Você pode até mesmo sobrepor essas setas. Então, se eu posicioná-lo aqui, você pode ver como ele se sobrepõe perfeitamente a essa etapa. Então você pode realmente fazer o que quiser. Além disso, ao arrastar esses componentes, basta arrastá-los aqui. Quero alterá-lo, clicar duas vezes dentro, por exemplo ponto de entrada ou algo parecido, ou no ponto de saída, qualquer que seja. Você pode posicioná-lo aqui, pode fazer com que fique no centro selecionando esses dois elementos, posicione-o assim. Ou você pode simplesmente excluí-lo. Você pode fazer isso com todos esses outros elementos que lhe são mostrados. E, finalmente, para essas setas, porque são bem simples, você pode clicar duas vezes dentro delas . Você pode segurar a tecla Shift e posicionar esta seta aqui. E então você pode clicar na posição para moldar aqui. Se você quiser tornar essa flecha mais curta, por exemplo, se você não quiser que ela seja tão longa por qualquer motivo. E também para essas setas, se eu for ao meu painel de Camadas e as abrir, você pode ver, então, seta negativa, temos o rótulo, que é esse rótulo de nó dentro do qual você também pode alterar se quiser, por exemplo , opção negativa ou nenhuma, ou isso não é uma opção ou o que você queira escrever. E então temos as setas para a esquerda e para a direita e temos essa linha de seta no meio. Então, o que você pode realmente fazer com eles? Você pode clicar na seta esquerda, por exemplo, segure a tecla Shift e mova-a para mais perto. Você pode fazer o mesmo com este ou, se quiser, pode até mesmo afastá-los ainda mais. Então, digamos assim. E então você pode clicar nesse centro e simplesmente estender assim. Se você não quiser que seja assim, basta clicar na seta e ajustar isso para ver que temos a cor da borda, que é essa cor. E então temos a largura do traçado, temos a largura do traço. Então, basicamente, a largura entre todos esses traços diferentes, você pode ajustar o que quiser para obter um determinado estilo que você procura. E, basicamente, esse é o objetivo deste modelo para ajudá-lo nesse processo de exploração. Então, como mencionei no próximo vídeo, vamos discutir modelos um pouco mais complexos. Vou mostrar onde você pode obter esses modelos, que na verdade são meus, e então o que você pode realmente fazer com eles. Então, eu vou te ver lá. 49. Trabalhar com fluxogramas no Adobe Xd: Neste vídeo, vou mostrar alguns modelos mais complexos. Esses modelos levaram meses para serem criados. Esses modelos são, na verdade , alguns que eu e minha equipe criamos no passado. E você pode obter esses modelos, links que estarão no PDF com descontos porque são modelos premium. E eu vou te mostrar como todos eles são criados, como eles se parecem no Adobe XD? Você pode obtê-los se quiser. Caso contrário, você pode criar o seu próprio como quiser. Então, aqui está meu site chamado Web donut.net. Mais uma vez, o link estará em um PDF e este é o primeiro modelo que será chamado de flowy. E você pode ver que tem 108 telas, 128 elementos e dois papéis diferentes. Assim, você pode usar esses papéis se quiser alinhar seu fluxograma e depois imprimi-lo mais tarde para mostrá-lo aos seus colegas de equipe. Os clientes são desenvolvedores. Então, se for plural, só um pouco, você pode ver a aparência de alguns desses elementos e vamos explorá-los em apenas um segundo dentro do Adobe XD. Mas, basicamente, essa é a essência disso. Existem muitos desses elementos e desses papéis e temos fluxogramas de fluxo de água, que são muito maiores. Portanto, temos 400 componentes no total. Então, 200 telas, 200 elementos e dois papéis mais uma vez, e desta vez temos a versão clara e escura, então podemos até mesmo explorar isso. E você pode ver que eles são adaptáveis ao que está incluído. Então você tem três tipos de arquivo diferentes, Photoshop, Sketch e XD. Enquanto estamos neste, temos o Photoshop e os arquivos de esboço. Mas como o XD é criado pela Adobe, você pode simplesmente abrir um arquivo do Photoshop. Ele funcionará perfeitamente bem dentro do XD porque está integrado para fazer isso, componentes com pixels perfeitos, fontes gratuitas do Google ou usado onde quer que você encontre fontes. E se você comprar, esses são na verdade, tutoriais em vídeo para ambos incluídos dentro de uma estrutura de camadas organizada. Você vai ver isso em apenas um segundo. Esses são os papéis para imprimir tamanho americano e A4, se você quiser, variações ilimitadas e você pode ver a aparência de alguns desses elementos. Agora, se eu minimizar isso e voltar para o XD, esse é o imposto para o nosso programa de rádio. Você pode ver o quão básico é, mas se eu mostrar, por exemplo , fluido, você pode ver como é. Então, na verdade, eu combino esses três. Então, deixe-me realmente aproximar isso um pouco mais. Então, esses são elementos da web, esses são elementos móveis e esses são todos os elementos adicionais. Então, se você os comprar, eles virão em três arquivos, mas você pode combiná-los em um arquivo no XD, como você pode ver aqui, basta clicar duas vezes para alterar isso. Então, esses são elementos móveis, por exemplo, e o que você pode realmente fazer com esses elementos? Assim, você pode facilmente seu quadro de arte e criar um quadro de arte que seja de 1920 por 1080, por exemplo e digamos que eu queira começar com uma tela de login. Eu posso copiá-lo, posso colá-lo aqui mesmo. E vamos realmente mudar isso para essa cor. Então, deixe-me, na verdade, deixe-me pegar uma bela cor cinza claro só para que você possa ver um pouco melhor o que estou fazendo. E então eu posso começar com esta seta, por exemplo, aqui. Então copie e cole aqui. E talvez eu possa posicioná-lo aqui. Então, quando meus usuários clicarem nesse botão, para onde eles serão levados? Como essa é uma tela de login, talvez, como você pode ver, tenhamos categorias diferentes aqui. Talvez entremos no comércio eletrônico e talvez eu vá para isso, depois para isso. E então vamos ver, talvez essa tela também, assim. Controle C pulando aqui, controle V para colar todos eles. E eu vou fazer isso. Então, por exemplo, eles virão para esta tela aqui. E então vou duplicar minha seta Control C Control ou Control D, o que você quiser. E então, por exemplo, se eles clicarem nele, posicione-o na parte superior. Se você clicar neste produto, por exemplo, ou aqui, e tivermos setas diferentes aqui. Então, se eu realmente excluí este, posso usar essa seta, por exemplo você possa ver por que esses modelos são importantes, porque você pode realmente trabalhar muito mais rápido ao fazer isso. Então, se eu controlar X, controle V, posicione-o aqui. Quando você clica aqui, digamos que seja um botão. E você pode fazer a mesma coisa que eu mostrei anteriormente. Portanto, você pode estendê-los, se quiser. E deixe-me realmente estender até aqui. Na verdade, posso pular para essa tela. Portanto, você pode ver que isso não está de acordo com todos esses fluxos de tarefas anteriores porque esse é um fluxo de usuário muito mais complexo porque, como você pode ver, temos dois botões. Eles podem clicar em Cancelar, por exemplo, e podemos realmente duplicar essa seta. Na verdade, posso invertê-lo, por exemplo apenas para mostrar como isso poderia parecer. Então, talvez eu possa posicioná-lo aqui. Talvez eu possa empurrar esses dois um pouco para cima. Eu posso posicionar isso aqui embaixo. Talvez eles possam clicar ali mesmo. E então essa seta realmente os levará para a primeira tela, por exemplo, você pode até mesmo girá-la e depois posicionar esses elementos. Eu vou te mostrar isso em apenas um segundo. Então, controle D neste caso. E você pode posicioná-lo aqui. Então você pode estender isso. E talvez isso possa parecer um pouco chato, mas é muito importante entender esse fluxo de usuários. E daqui em diante, por exemplo se eles realmente clicarem nesse botão azul, onde isso os levará? E, na verdade, vamos usar isso apenas para tornar um pouco mais simples a navegação deles. Então, vou mover isso para aqui, talvez assim, e depois posicioná-lo um pouco para dentro. Vou deletar este. Você pode ver a rapidez com que isso é realmente criar. Então, quando eles clicam no botão azul, talvez eles possam acessar essa tela. E a partir daí, deixe-me posicionar essa seta até o topo, aqui, posicioná-la aqui. E então eu posso realmente clicar aqui e mover isso assim e reorganizar isso um pouco. Talvez essa seja nossa tela de confirmação ou qualquer outra coisa, podemos chamá-la assim. E então, quando clicam nesse botão azul, eles podem realmente ir para a página de compras e concluir essa etapa. Agora, o que podemos fazer com este é realmente combiná-los com os fluxos de tarefas originais que mostrei a você. Por exemplo, eu posso usar esse círculo de entrada. E então me desculpe, porque eu tenho muitos deles abertos. Eu posso posicioná-lo aqui e movê-lo. Você pode ver que está vinculado porque, na verdade, é uma instância de nossos diferentes componentes. Então, eu posso clicar com o botão direito aqui e posso torná-lo local. E então o que eu posso fazer é realmente pular selecionar os dois, apertar o controle Shift e reduzi-lo um pouco. Também posso reduzir meus textos. Então, talvez dez, algo assim. Então, podemos usá-lo como um ponto de entrada aqui. Mas você também pode usá-los. Então, por exemplo, esta é nossa casa, talvez seja nosso controle de ponto de entrada C. E então eu posso, em vez desse círculo de entrada fazer com que pareça um pouco interessante posicionando-os. Então, eu posso posicionar isso para ser meu círculo de entrada N, por exemplo I. Posso usar essa cor se eu quiser. Eu posso mudar esse ícone. Se eu quiser. Eu posso até mudar a cor do ícone. Basta clicar ali mesmo, você pode fazer o que quiser com eles. Além disso, o que você pode ver aqui são todas essas maquetes diferentes, que são basicamente formas. E então você pode usar essas maquetes para mostrar, por exemplo, esta é uma visualização de um aplicativo móvel. E eu posso usar essa maquete simples. Talvez posicione aqui no topo, talvez escreva alguns textos aqui. Mova todos esses elementos um pouco para baixo, talvez, e depois escreva aqui. Esta é uma visão de como a versão móvel ficará, por exemplo, no Android ou iOS ou no que você quiser. Ou eu posso usar todos esses outros. Então, navegador, versão para laptop, versão para desktop, seja o que for. Então, se a etapa for concluída, podemos usar esta, por exemplo, então vamos posicioná-la aqui. E eu posso realmente posicioná-lo no centro da minha flecha assim. E então eu posso realmente usar minha cor principal, por exemplo, para dizer que a etapa foi concluída, ou posso posicioná-la aqui, bem ali, ampliá-la se eu quiser. Eu posso até incluir uma borda nele. Tudo o que eu puder usar é uma sombra projetada sobre esse fundo. Assim, eu possa me posicionar lá. Portanto, seja qual for o seu estilo para esse fluxo de usuário específico , você pode implementar esse estilo usando esses modelos. E você pode ver em questão de minutos, se você não está falando como eu, obviamente você pode criar isso em um período de tempo muito menor. Então, isso foi fluido. Se estamos pulando aqui, apenas para mostrar rapidamente os elementos do fluxograma do fluxo de ar. E você pode ver quantos elementos diferentes temos aqui. E, obviamente, você pode criar componentes a partir desses elementos. Você pode mudar suas cores. Então, por exemplo, eu quero mudar a cor desse cabeçalho. Eu posso posicioná-lo aqui. Ou se eu quiser mudar completamente a cor do meu plano de fundo, posso alterá-lo assim. E, obviamente, se você tiver cores como eu já mostro neste modelo padrão como este. Então, se você criou suas cores, você pode simplesmente aplicar essa cor a esse elemento. Você vai trabalhar muito mais rápido dessa maneira. Mas se você não fizer isso, tudo bem. Você pode entrar aqui e mudar as cores até mesmo disso. Então, por exemplo, isso pode ser vermelho brilhante ou qualquer outra coisa. E então isso pode ser da mesma cor. Então, eu posso selecioná-lo assim e você pode ver como fica. Então, obviamente, há muitas opções incluídas aqui e todos esses elementos são iguais. Você pode ver que temos muitas flechas diferentes incluídas no interior. De um ponto de entrada a vários pontos de saída. Você pode fazer o que quiser. Você pode usar o perigo, você pode usar a atualização. E eu realmente encorajo você a usar seus próprios ícones. Você pode usar esses ícones esquerdo e direito para as etapas, se quiser. Mas, basicamente, você pode ver como eles se parecem. Eles têm muito mais detalhes incluídos no interior. Em vez dos que mostrei anteriormente para os fluxos de tarefas. Então, basicamente, você tem duas opções. Você pode usar esta versão, que é extremamente leve, ou pode usar essa versão, que é muito mais complexa. Mas esse não é o layout final. Isso serve apenas para transmitir suas ideias forma muito melhor para seus colegas de equipe , clientes e desenvolvedores. E a vantagem disso é que você tem vários pontos de entrada e saída, vários fluxos. Então, por exemplo, se eu for para aquele que criamos usando flowy, assim, eu posso criar, como mencionei aqui. Portanto, temos essas duas setas, por exemplo, temos um botão de fechar aqui, por exemplo, onde esse botão de fechar nos leva, ele nos leva de volta à tela de login ou a essa tela. Então, você pode imaginar que pode criar esses fluxos múltiplos, fluxos complexos e o mesmo modelo que estou oferecendo gratuitamente. Você pode entrar aqui mesmo. E você pode simplesmente ajustar todos esses elementos e torná-los menores. Se quiser aplicar uma cor diferente, você também pode fazer isso. Assim, você pode usar a cor que quiser neles. E, claro, porque existem muitos, muitos desses diferentes elementos divididos em categorias de depoimentos promocionais, equipe, blog, comércio eletrônico e assim por diante. Tanto para a versão móvel quanto para desktop, seu fluxo de trabalho será muito mais rápido e seu tempo de entrega será muito mais rápido. E mais uma vez, a vantagem de usar isso é que seus clientes entenderão você é muito melhor do que se estivesse simplesmente usando algo assim. Este é um ponto de partida fantástico. Mas se as coisas precisarem ser um pouco mais complexas, por exemplo, como eu mostro aqui. Então, você precisa criar vários fluxos, obviamente, como em cada aplicativo aqui, então eu realmente recomendo usar um modelo premium como esse, porque isso realmente vai melhorar seu fluxo de trabalho dramaticamente. E isso realmente permitirá que você trabalhe muito mais rápido e mostre suas ideias aos seus colegas de equipe. Clientes são desenvolvedores, o que eles entenderão , porque, especialmente com clientes, mostrar a eles algo assim não vai torná-los realmente fáceis de entender, mas mostrá-los. algo assim, por exemplo , fará com que eles entendam muito melhor porque reconhecerão pelo menos alguns desses elementos, em vez de apenas mostrar a eles essas formas em branco, como círculos e quadrados e diamantes e coisas assim. Então, essa foi uma análise muito rápida desses modelos premium. Mais uma vez, se você quiser obtê-los com um desconto muito grande, os links estarão no PDF. Você pode simplesmente clicar nesses links e simplesmente inserir o código de desconto que vou fornecer e , em seguida, obtê-los e usá-los no XD Você pode ver como algo assim pode melhorar seu fluxo de trabalho drasticamente. Você ainda obterá esse fluxo básico de tarefas gratuitamente, é claro. E você pode baixá-lo e usá-lo. Mas se você quiser melhorar seu jogo, se quiser mostrar suas ideias da melhor maneira possível para seus clientes, colegas de equipe e desenvolvedores, o uso desses modelos premium melhorará esse fluxo de trabalho em massa. Como você viu, você pode mudar qualquer coisa, você pode ajustá-las como quiser. Você pode trabalhar tão rápido ou tão devagar quanto quiser. Você pode usar todos os tipos de cores diferentes, todos os tipos de formas e ícones diferentes e coisas assim. Então, se você quiser usar algo assim, mais uma vez, eu vou te dar os links e descontos em um PDF e você pode conferi-los. No próximo vídeo, falaremos sobre como você pode compartilhar algo assim com seus colegas de equipe, clientes e desenvolvedores. Então, eu vou te ver lá. 50. Compartilhar seus fluxos: Compartilhar seus fluxos de usuários é uma parte muito importante de todo o processo, pois realmente permitirá que seus clientes, colegas de equipe e desenvolvedores entendam seu processo de pensamento por trás de tudo isso. E isso realmente tornará a discussão muito mais simples do que simplesmente fazer isso e depois simplesmente contá-las em palavras ou algo parecido. Então, neste vídeo, vou mostrar algumas maneiras práticas que você pode usar para mostrar isso aos seus clientes e desenvolvedores. Então, o primeiro é um, eu criei isso para meus modelos premium que são mostrados a você. Então, tanto para um fluxo que você está vendo aqui, quanto para fluxogramas de fluxo de ar. E você pode abri-los se comprá-los, que mencionei no vídeo anterior. Esses são esses papéis. Então, esse é o tamanho A4, esse é o tamanho da letra dos EUA. E você pode simplesmente abri-los enquanto trabalha e alinhar todos os seus elementos aqui e, em seguida, simplesmente imprimir todos eles. Você pode selecionar isso. Você pode pressionar Control ou Command E dentro do XD e, em seguida, selecionar PDF aqui. Em seguida, você pode clicar em Exportar e ele exportará este PDF pronto para impressão. Você pode imprimi-lo e depois mostrá-lo aos seus clientes. Ou se seus clientes estão trabalhando remotamente e você não está ao alcance deles ou algo parecido, você pode simplesmente compartilhar esses PDFs com seus clientes e, em seguida, eles podem imprimi-los e depois deixe anotações nesses PDFs. Ou melhor ainda, você pode simplesmente alinhá-los aqui e clicar aqui para compartilhar isso com seus desenvolvedores ou clientes. Como isso funciona é que você pode simplesmente clicar aqui. E isso vai gerar esse link público. E então você pode dar um nome a ele aqui, por exemplo, digamos elemento Webflow ou fluxo de fio para um site ou algo parecido. E então você pode mostrá-lo aqui. Esse é o nome do link e, em seguida, você pode simplesmente copiar esse link e compartilhá-lo com seus clientes. Em seguida, eles podem deixar seus comentários no navegador aqui e, em seguida, você pode simplesmente alterar a aparência desse fluxo de usuário no seu XD e voltar aqui mesmo na guia Compartilhar. Em seguida, basta atualizar esse link e depois voltar e compartilhar esse link novamente com seu cliente. Nome do cliente, nome do projeto, prazo, número de páginas do site e número de telas de aplicativos é o que é realmente importante e o que realmente determinará quanto você realmente vai cobrar no final deste projeto, ou quanto tempo o projeto vai levar. Porque geralmente, especialmente designers freelancers cobram por todo o projeto. Então, eles sabem, por exemplo , por meio de uma conversa com o cliente, se o cliente tem um projeto existente ou algo parecido, eles já sabem quanto cobrarão reunindo todos os essas informações. Mas se não, você pode simplesmente trabalhar em etapas. Assim, você pode cobrar por essa fase de exploração e teste de usuários, de pesquisa de usuários. E depois de concluir isso, você saberá simplesmente usando esses fluxos de usuário, quantas telas você criará posteriormente, quantas páginas do site você criará. E a partir desse número, você pode fazer uma suposição fundamentada e cobrar essa quantia de dinheiro de seus clientes. É por isso que compartilhar é muito importante nessa fase do projeto. Porque você saberá facilmente, usando esses fluxos de usuários , quanto dinheiro você realmente cobrará de seus clientes. Agora, esse é um dos métodos e, em seguida, você pode seguir este modelo, especialmente se você os comprar ou não, você pode simplesmente usar algo assim. Então, digamos que você criou isso. Você pode dar um nome a ele aqui, então clique duas vezes para chamá-lo como quiser. Então, por exemplo, o fluxo móvel, é claro, isso será muito mais limpo quando você realmente o estiver criando. Você pode pressionar Control ou Command E. E, em vez de PDF, você pode selecionar JPEG ou PNG. Você pode clicar em Exportar e, em seguida , enviá-lo para um cliente dessa forma. Além disso, o que você pode fazer é conectar essas páginas. Então, digamos que essa seja a porta número um, essa é a nossa porta número dois. Você pode ir para o modo de protótipo, conectá-los e, em seguida simplesmente compartilhar esse protótipo, como mencionei aqui, copiar esse link e compartilhá-lo com seu cliente. Agora, a vantagem de usar algo assim diretamente no Adobe XD é porque você não está desperdiçando papel. Você não está perdendo seu tempo. Você não está desperdiçando o tempo deles. Você pode simplesmente compartilhar um link. Eles podem acessar esse link, comentar nesse link voltar para você com suas alterações. Você pode alterá-lo dentro do XD, atualizar o link, enviá-lo novamente e, em seguida, eles podem deixar o novo feedback até que todos estejam satisfeitos. E depois disso, você iniciará o processo de design com instruções claras de seus clientes, com uma compreensão clara deles e dos desenvolvedores o que deve ser feito dentro disso. projeto. 51. SECÇÃO 6: Sua tarefa para esta seção é usar o modelo que eu forneci para criar seu próprio fluxo de usuários. Você vê como é fácil de criar, e você vê como é fácil de entender e por que é realmente uma parte útil do seu processo de design. Portanto, tente torná-lo seu. Tentei imaginar um cliente imaginário e o que você deseja que seus usuários alcancem neste projeto específico. Então comece a praticar, tente resolver isso sozinho. Você pode mudar as cores, você pode mudar a tipografia, você pode mudar a ordem. Você pode posicionar essas setas da maneira que quiser. Apenas tente torná-lo seu e tente praticar e aprender melhor. 52. SECÇÃO 7 Molduras para fios de papel: Fornecer molduras é uma parte importante do processo de design porque é muito mais fácil cometer um erro em um pedaço de papel, descartá-lo e jogá-lo fora. Então, para sempre começar em seu software de design, você sempre precisa iniciá-lo, configurá-lo , prepará-lo para seu fluxo de trabalho, todas essas coisas. Portanto, os wireframes de papel existem para acelerar esse processo e, qualquer que seja a ideia que você tenha, jogue-a no pedaço de papel. Não importa se funciona ou não. Você só quer transformar todas as ideias que você tem em sua cabeça em um pedaço de papel, escolher duas ou três das melhores ideias e, em seguida, passar para o você tem em sua cabeça em um pedaço de papel, escolher duas ou três das melhores ideias e, em seguida, passar para o software de design preferido. Isso é especialmente importante se você estiver trabalhando como parte de uma equipe, porque todos na equipe podem pular em um único pedaço de papel muito mais rápido do que se você estivesse usando uma ferramenta de design e quer colaborar com seus colegas de equipe. Então, vamos começar. 53. O que são wireframes de papel: wireframes de papel são partes muito importantes do seu processo de design de UX porque são uma maneira barata, fácil e simples de colocar suas ideias da cabeça para baixo em um pedaço de papel. Essas ideias são apenas para você porque, nesta fase, você explorará esses possíveis layouts e combinações de layout que explorará. Você vai, por exemplo, usar muitas imagens ou mais textos ou muitos ícones ou coisas assim. Então, vamos apenas explorar o layout possível. Você também pode compartilhar esses wireframes com seus clientes, desenvolvedores, partes interessadas e colegas de equipe, é claro, para obter a opinião deles e entender se você está indo na direção certa, os wireframes são existem apenas para formar esses layouts antes de realmente progredir no software, porque é muito mais rápido desenhar em um pedaço de papel e desenhar essas formas regulares em um pedaço de papel só para obter suas ideias vêm de sua cabeça e apenas para entender para onde esse projeto possivelmente vai acontecer. No próximo vídeo, discutiremos possíveis combinações de layout e alguns elementos principais que você pode incluir em seus wireframes de papel. Agora, esses elementos são apenas alguns dos principais elementos que encontrei ou meus 15 anos nesse negócio funcionam melhor em estruturas de arame de papel. Mas é claro que você sempre pode voltar e incluir elementos adicionais em cima desses elementos regulares. Então, eu vou te ver lá. 54. Quais elementos para incluir: Há quatro elementos principais que você pode incluir em seus wireframes de papel. E são imagens, textos, botões e formulários ou campos. As imagens existem porque realmente ajudaram a contar uma história e a orientar seus usuários até o possível objetivo final. Agora, essa meta final pode ser eles comprem um produto que você esteja usando ou reservem um serviço que você esteja oferecendo ou qualquer outra meta. Mas, basicamente, as imagens existem para ajudar a contar a história com muito mais facilidade porque você sabe que dizer uma imagem diz 1.000 palavras e, falando em palavras, você precisa usar texto. Agora, ao usar textos, você os usa em conjunto com suas imagens para contar melhor a história e orientar melhor seus usuários nessa história. Porque a combinação de textos e imagens realmente afetará seu design, não importa o que você esteja criando. Se for um site, se for um aplicativo móvel ou um produto web baseado em um produto ou algo parecido, isso só ajudará a contar uma história melhor e a orientar seus usuários muito melhor. Vou te dar um exemplo rápido. Por exemplo, se você estiver vendendo um sapato, digamos que uma boa imagem desse sapato se converta muito melhor porque seus usuários entenderão todos os detalhes sobre o sapato. É um tênis de corrida? É apenas um sapato de caminhada normal? Que cor é essa? Quais materiais são usados e coisas assim. Então, todos esses elementos serão representados muito melhor se você tiver imagens de alta qualidade, se tiver imagens de baixa qualidade e apenas elementos baseados em campos de texto e layout ao lado delas. imagem. Portanto, usar textos e imagens em conjunto trará muito mais valor para seus usuários. Eles entenderão seu produto ou serviço muito melhor. Mas no final da meta, eles precisam fazer alguma coisa. E é aí que entram os botões. Os botões são extremamente importantes porque geralmente são chamados de CTA ou call to action. E isso é exatamente o que eles são. Os usuários precisam realizar determinadas ações. Eles precisam comprar esse produto, por exemplo, o sapato que acabei de mencionar, ou precisam reservar um serviço, por exemplo, você está oferecendo um serviço freelance ou um serviço de design ou qualquer outra coisa que eles tenham para reservá-lo no final de sua viagem. O Journey é suportado com imagens e textos. E então, no final, há um botão, mas eles precisam preencher algumas informações nesse seu design. É aí que entram os formulários e os campos. Agora, os fóruns podem ter muitos layouts e combinações diferentes e podem ser usados para uma variedade de coisas diferentes. Mas geralmente eles estão lá para coletar informações do usuário, por exemplo, endereços de e-mail, informações de cartão de crédito, criação de conta de usuário e coisas assim. Portanto, fóruns e campos são partes realmente importantes de seus wireframes de papel. Agora, há muitos elementos diferentes que você pode incluir em seus wireframes de papel, por exemplo, logotipos, avatares e logotipos de parceiros. Você pode incluir migalhas de pão, paginação, setas diferentes, dicas de ferramentas e coisas assim. Mas todos esses elementos, vou vir dessas quatro categorias principais que, ao longo dos anos, descobri que , ao longo dos anos, funcionam melhor na jornada de wireframing de papel. Agora, existem muitos estilos diferentes de wireframes de papel. E dependendo de quanto tempo você tem e do tamanho do orçamento para esse projeto, você explorará esses estilos possíveis. E no próximo vídeo, exploraremos esses estilos e mostrarei alguns dos principais estilos usados na moldura de papel, mas também alguns dos estilos que você pode desenhar em cima eles para melhorar a aparência geral e a qualidade de seus wireframes de papel. 55. Estilos de estrutura: Existem muitos estilos diferentes de estrutura de arame a partir de caixas simples que você pode desenhar em um pedaço de papel apenas para colocar suas ideias da cabeça para baixo naquele pedaço de papel e apenas para começar a formar esse layout possível. Mas, mais uma vez, eles dependem do tamanho do projeto, quanto tempo você tem nele e do tamanho do orçamento do cliente. No final do dia, você formará estilos diferentes e explorará diferentes combinações de layout. Então, neste vídeo, vou mostrar esses estilos e o que você pode fazer com wireframes de papel. Então, se voltarmos para o Google e fizermos uma pesquisa rápida no Google por wireframes de papel, se você inserir imagens. E, claro, existem muitos sites diferentes que você pode explorar para isso. Mas podemos simplesmente explorar as imagens do Google porque é a mais rápida. Você pode ver aqui o site, o aplicativo, o móvel Android protótipo móvel Android Design Envision, seja o que for. Você pode explorar tudo isso e basicamente um layout como esse. Deixe-me mudar para aqui para que você possa ver melhor. Esse layout de imagem, como esse, é o layout mais comum porque essas caixas representam imagens que representam grandes elementos em seus wireframes de papel. E esses rabiscos abaixo representam o texto. Agora você pode mostrar esse texto de várias maneiras diferentes. Você pode usar linhas mais grossas. Você pode enfatizar as linhas com cores. E falaremos sobre isso em alguns dos vídeos futuros desta aula. Mas agora esse é apenas um estilo simples e regular que a maioria dos designers usa. Você vai usar esse estilo se não tiver muito tempo neste projeto, se o orçamento do cliente for limitado e coisas assim. Mas basicamente essa é a principal dívida de estilo que a maioria dos designers de hoje eu gosto de usar se eu mostrasse esse estilo, por exemplo, você pode ver esse desenho aqui. Agora, esse é o próximo estilo e você pode, claro, ver o texto, que é o texto real nesse caso, o que novamente exige muito mais do seu tempo. Então, pense em todas essas coisas na próxima vez que estiver desenhando esses wireframes de papel. Porque se você não tem muito tempo em seus projetos, se o cliente não está pagando muito dinheiro , não invista muito do seu tempo em wireframes de papel. Mais uma vez, o objetivo dos wireframes de papel é explorar ideias rápidas e colocá-las da cabeça para baixo em um pedaço de papel. Esse é o objetivo dos wireframes de papel no final do dia. Portanto, não invista muito tempo. Você pode ver como eles são confusos, por exemplo, esses são apenas alguns rabiscos e você pode ver combinação desses elementos simples, por exemplo essas caixas, esses rabiscos para os textos, mas também textos regulares como e-mail, senha e coisas assim. Você pode ver o botão Editar aqui. Você pode ver esse tipo de desenho de uma pessoa para o perfil. Você pode ver essa marca de seleção para os salvos. Então, mais uma vez, você pode combinar todos esses elementos dependendo do tempo que você tem neste projeto. Mas se eu fechar isso muito rapidamente e explorar diferentes layouts, você pode ver este que está bem organizado. E eu gosto de fazer esse estilo pessoalmente. E você verá isso em alguns dos vídeos posteriores desta aula. Gosto de deixar espaço no lado direito ou no papel porque é aí que posso desenhar minhas ideias. Posso extrair possíveis diretrizes de meus colegas de equipe para os clientes e coisas assim. Por exemplo, se você tiver uma ideia, você tem esse espaço vazio à sua direita ou esquerda, dependendo se você escreve com mão direita ou com a mão esquerda, isso realmente não importa. O objetivo aqui é deixar um espaço para anotações, por exemplo, você pode se lembrar mais tarde O que você estava pensando no momento da criação desta estrutura de papel? Então, da próxima vez que você voltar, você pode se lembrar, ok, isso é o que eu estava pensando no momento. Então, ter um espaço como esse é muito importante e realmente vai te ajudar mais uma vez, a linha tem para o layout, você pode ver o texto aqui, mas você também pode ver essas caixas simples. Mas se eu clicar neste, você pode ver como ele é detalhado. Então, aqui temos todas essas ilustrações incríveis, por exemplo, para que você possa explorar layouts como o DOS. E aqui temos marcadores. Temos todos esses elementos diferentes que você pode usar. Se eu clicar neste , você verá que essa pessoa está usando marcadores. Eles estão usando todos esses wireframes. E se eu clicar nesse, você pode ver que essa pessoa, esse designer, está preenchendo o espaço desses. Então, por exemplo, essa é a cor principal do aplicativo e você pode ver que ela usou descolorido em todos os botões do coração. Portanto, você pode realmente optar por esse estilo se quiser enfatizar a cor do logotipo da marca do seu cliente ou algo parecido. Então, se eu rolar um pouco mais para baixo, você pode ver essa abordagem, que é usada em escritórios em todo o mundo. Então, por exemplo, os designers realmente gostam de usar essa abordagem porque podem facilmente mostrar isso para a equipe. Eles podem apresentar isso ao cliente ou às partes interessadas porque podem desenhá-lo em um pedaço de papel, recortá-lo com uma tesoura e, em seguida, simplesmente colar na parede, por exemplo, e apenas apresentá-los wireframes para que seus clientes entendam o fluxo geral do aplicativo ou do site, por exemplo, se o usuário clicar no botão da sessão do livro, para onde ele irá? Assim, você pode usar modelos desses dispositivos móveis ou dispositivos de sites, qualquer que seja. E então você pode simplesmente guiar seus usuários pela estrutura de arame de papel. E se eu rolar um pouco mais para baixo, estou apenas tentando encontrar, por exemplo esse estilo, você pode ver canetas muito mais detalhadas, muito diferentes são usadas em diferentes layouts. Você é, como você pode ver, o menu pop-up, que é usado aqui. Assim, você pode usar todos esses elementos que ajudarão você, seus usuários e colegas de equipe a entender como esses wireframes se transformarão em um design real mais tarde, quando você entrar no software do escolha. Meu software preferido é o Adobe XD, o que é incrível, mas ainda é como usar wireframes de papel em todos os meus projetos porque, como continuo mencionando neste vídeo e nesta aula , só me dá a possibilidade de colocar todas essas ideias rápidas em um pedaço de papel e comunicá-las aos meus clientes. Mais uma vez, você pode ver neste exemplo, você pode ver neste exemplo, você pode obter detalhes com estruturas de arame de papel ou pode se bagunçar com estruturas de arame de papel. Então, tudo depende de você, do orçamento do cliente e do tempo que você tem neste projeto. Porque, como continuo mencionando nesta aula, você não vai gastar muito tempo desenhando essas ilustrações detalhadas, esses ícones de detalhes. Se o cliente não estiver pagando dinheiro suficiente para fazer isso neste projeto específico. Então, mantenha essas coisas em mente. E quanto ao estilo, você pode ver se você não é muito bom em desenhar como eu, eu não sou, eu não sou muito bom em desenhar, mas ainda estou usando esses wireframes de papel por mais de um Há uma década, e eu nunca tive problemas com isso. Assim, você sempre pode usar uma régua, por exemplo, apenas para manter as linhas retas. Ou você pode usar diferentes papéis pontilhados que serão mencionados mais adiante nesta aula. Mas o ponto principal aqui é colocar essas ideias da cabeça em um pedaço de papel porque não existe um único software que seja mais rápido do que seu cérebro e sua mão. Então, mantenha essas coisas em mente. No próximo vídeo, discutiremos o que você precisará do equipamento para desenhar essas estruturas de equipamento para desenhar arame de papel, porque existem algumas opções de equipamento realmente básicas e existem algumas opções de equipamentos realmente avançadas . Então, vou compartilhá-los com você. E mais uma vez, dependendo do orçamento do cliente e quanto tempo você realmente tem neste projeto, você vai usar um ou outro. Então eu vou te ver lá. 56. Equipamento que você precisa: Quando se trata de equipamentos, existem muitas opções diferentes. Você pode usar um equipamento realmente padrão. E eu realmente recomendo, especialmente se você está apenas começando, começar com o equipamento padrão, especialmente se você nunca usou estruturas de arame de papel antes. Em seguida, suba a escada e simplesmente compre todas essas opções mais caras à medida que você sobe de nível. Então, neste vídeo, vou mostrar a vocês alguns dos equipamentos que estou usando, um romancista usando ao longo dos anos. E só para te mostrar o que é tudo isso. Então, aqui estão todos os equipamentos que eu tenho atualmente e que atualmente possuo e usei em todos os meus diferentes projetos. Então, este aqui é apenas um pedaço de papel branco comum. Este é o papel de impressão porque estou localizado na Europa. Estou usando um pedaço de papel A4 se você estiver em nós do que o tamanho da letra para você. Mas, basicamente, eu uso esse papel A4 porque minha impressora o suporta. E se você se lembra, acabei de mencionar isso quando quero compartilhar esses wireframes com meus clientes, com meus colegas de equipe e coisas assim. Eu realmente acho mais fácil fazer isso com o scanner. Então, posso simplesmente pegar esse pedaço de papel A4, digitalizá-lo e enviá-lo para todas as pessoas em questão. Em seguida, o que temos é apenas esse lápis velho e simples. E você pode usar esse lápis para desenhar o que quiser nesse pedaço de papel. E apenas o equipamento básico ali mesmo. Em seguida, eu tenho essa caneta e você pode usar qualquer caneta que quiser, mas eu realmente recomendo que você tenha caneta preta ou azul. Não importa o que você esteja usando, você sempre precisará usar alguns deles. E também tenho essa banda, que é completamente preta, mas um pouco mais escura, como você pode ver aqui. Então, essa banda realmente me ajuda a anunciar alguns detalhes, como drop shadows, por exemplo, e coisas assim. Ou se eu quiser apenas preenchê-lo com cores. Em seguida, tenho uma régua e, na maioria dos meus wireframes, não uso réguas porque descobri que suas réguas estão apenas me atrasando muito. Mas se quiser, você sempre pode usar uma régua apenas para ajudá-lo a começar, apenas para estabelecer uma base. Porque se você estiver desenhando com a mão livre, obviamente, seus layouts ficarão assim, por exemplo, se você se lembrar do exemplo anterior das imagens que mostrei. Mas se você quiser, você pode usar a régua apenas para chegar a essas linhas perfeitas como essa, mas você pode ver como isso é muito mais lento em comparação com isso. Então, mais uma vez, sempre voltaremos ao e ao cronograma do projeto. Então, depende realmente de quanto tempo você tem em seu projeto, você vai usar um ou outro. Em seguida, temos todos esses marcadores, para que você possa usar marcadores diferentes. E esse é apenas um tipo que comprei na minha loja local. Portanto, não importa realmente que tipo de criador seja esse. Este é um pastel Firebird, vamos ver. Isso é fibra Pelican, Christelle, é alguma marca desconhecida, néon ou qualquer outra coisa. Portanto, isso realmente não importa, porque, mais uma vez, esses marcadores existem apenas para destacar a cor que seu cliente está usando. Digamos que temos um botão e vamos criar um botão aqui. E digamos que eu queira destacar esse botão usando essa cor para que você possa ver o quão rápido isso é. E se você se lembrar desse exemplo que eu mostro on-line, você pode simplesmente destacar essa cor e simplesmente integrá-la ao seu projeto. Se essa é a cor do cliente , quando você começa a ganhar, alguns clientes querem começar a ganhar impulso. Uma vez que você começa a ganhar não muito dinheiro, mas quando começa a ganhar dinheiro suficiente esses projetos para começar a investir em si mesma e em seu equipamento. Eu realmente recomendo que você os compre. Agora, isso é o que chamamos de papel quadriculado. E este papel vem em muitas culturas diferentes, muitos tamanhos diferentes mais uma vez se parecem com este papel. Mas a diferença é que todos esses pontos estão lá para ajudar você a não usar uma régua. Agora, mais uma vez, você pode usar uma régua. E nos próximos vídeos, você verá que, quando começarmos a desenhar esses wireframes, eu vou usar a régua por causa da consistência, por causa do layout combinações e coisas assim. Porque eu estou acostumado com isso neste momento. Na maioria dos meus casos, não estou usando o rolo porque essas ideias são basicamente só para mim. Esses papéis, se você começar a usá-los ou precisar de diferentes tipos de equipamento, porque se eu mostrar, se eu pegar esse marcador, por exemplo e começar a desenhar nele, você não poderá ver esse marcador muito bem porque esse papel de grade de pontos é muito mais grosso do que esse papel. Então, esses marcadores realmente não funcionam aqui. Portanto, você precisa de equipamentos especializados como esses. Agora, essas são canetas Jelly Roll e esta é da Sakura. Isso é, eu não sei, alguma outra marca, isso realmente não importa. Então, a marca realmente não importa nesse caso, o que importa é como elas funcionam. Então, basicamente, essas canetas, ao contrário desses lápis, por exemplo, ou canetas que você normalmente vai usar, não contêm o gel interno. Esse gel é o que ajuda esse wireframe a se destacar. Então você pode ver que, como eu tenho todos esses pontos, é muito mais rápido para mim desenhar sem uma régua. E eu ainda vou ter alguma consistência e um layout bonito. E você pode ver claramente a diferença entre isso e isso. Parece muito melhor, porque está em um pedaço de papel preto. Estou usando essas canetas brancas do que essas porque estão em um pedaço de papel branco e eu as estou usando, então elas se destacam muito melhor. Parece muito mais polido e profissional. E isso realmente vai engajar seus clientes muito melhor. Ao longo dos anos , descobri os clientes realmente gostam de ver no que você está trabalhando, porque eles estão pagando pelo seu trabalho no final do dia, obviamente. Então você realmente tem que mostrar a eles para onde o dinheiro deles está indo. Então, basicamente , isso é tudo para o equipamento. Você pode começar aos poucos. Todo mundo pode pagar um desses e um desses. Então você pode começar pequeno, você pode começar devagar. E depois de fazer o upgrade, depois de começar a ganhar dinheiro, você poderá investir em diferentes marcadores. Mais uma vez, eles não precisam ser essa marca sofisticada ou os tons dos marcadores ou nada disso. Porque você não é ilustrador, não está desenhando, está apenas esboçando essas ideias em um pedaço de papel para apresentá-las aos seus clientes. No próximo vídeo, vamos começar com o esboço. Eu vou te mostrar algumas ideias e vou te mostrar como você pode trabalhar com esses wireframes de papel e como você pode realmente transformar as ideias que você tem em sua cabeça. Coloque-os em um pedaço de papel e transforme-os em layout, que você pode usar em seu software favorito. Então, eu vou te ver lá. 57. Desenho no papel simples: Neste vídeo, vamos desenhar em um pedaço de papel comum e vou mostrar como você pode transformar nosso layout que você tem em sua cabeça e colocá-lo nesse pedaço de papel. Como mencionei em um dos meus vídeos anteriores, nosso exemplo de sapato, dent, quando você usa imagens em conjunto com texto, é muito importante para contextualizar. E é muito importante ter imagens de alta qualidade que ajudem a contar uma história melhor para seus usuários. Então, neste exemplo, vamos desenhar, vamos usar aquele exemplo de sapato que mencionei no vídeo anterior. Então, vamos começar. O que eu tenho aqui, como você pode ver, é apenas um pedaço de papel impresso comum, como eu mostrei anteriormente. Eu tenho dois marcadores que vou usar apenas para indicar botões, por exemplo, e áreas clicáveis. Eu tenho minha régua, tenho um lápis e uma caneta. Vou usar o lápis para sombras projetadas, por exemplo, apenas para anunciar algumas dessas sombras projetadas. Então, sem mais delongas, vamos começar. O que eu realmente gosto de fazer em todos os meus wireframes é, como mencionei no vídeo anterior, onde exploramos os estilos de wireframe, eu realmente gosto de deixar essa parte do meu papel em branco porque me ajuda a escrever algumas anotações que tenho e que serão muito úteis para me reunir mais tarde, se eu me lembrar de algo, ou com meus colegas de equipe ou clientes, se eu quiser orientá-los em uma determinada direção. Então, o que vamos fazer? Primeiro, vamos desenhar um esboço rápido. Então, como eu disse, você pode usar uma régua, mas ela realmente não é obrigatória. E você pode ser muito rígido com seus ângulos, por exemplo, você pode fazer ângulos retos. Você pode usar aquelas réguas que, por exemplo, os designers de automóveis usam apenas para fornecer todos esses ângulos e coisas assim. Mas eu não vou fazer isso. Não vou me preocupar com muitos detalhes. Eu só vou fazer algo assim. Então, essa aqui vai ser a nossa navegação aqui no topo. Vou usar um estilo de avião e navegação porque seus usuários estão acostumados a certificar certos tipos de navegação. Portanto, não torne isso muito complicado, certifique-se de usar algo que todos possam entender. Na maioria dos casos, as navegações já foram testadas e testadas. Portanto, não tente inventar água quente só por causa disso, use navegações que já funcionam na conversão. Bem, então, neste caso, vou usar a navegação. Vou colocar um logotipo aqui. E para fazer isso, vou simplesmente desenhar um círculo. E eu posso usar imediatamente minha cor para que eu possa preenchê-la bem assim. E então eu posso fazer algo assim. Para que eu possa usar minha régua mais uma vez, certifique-se de ir a algum lugar no meio. Isso realmente não importa. E vou usá-los que indicam minha navegação aqui. O que eu vou fazer, vou desenhar dois botões. Então, eu vou fazer isso com a mão livre. Por exemplo, assim. Por exemplo, assim. Esse botão aqui será o botão de login, por exemplo, porque esse é o ponto principal. Quero que meus usuários façam login e tenham o maior número possível de usuários. E isso pode ser, por exemplo , o botão de inscrição, que trará meus usuários de volta aos seus perfis. Vou anotar isso. Então eu vou desenhar uma flecha assim. Então, na verdade, é usado este. Então, podemos ver isso melhor. Então, inscreva-se e isso aqui pode ser o login. Posso sublinhar isso porque, mais uma vez, é muito mais importante do que se inscrever porque você já tem esses usuários, mas precisa converter novos usuários e trazer novos usuários para o seu site. Em seguida, quero criar uma bela imagem de grande herói para que eu possa posicioná-la aproximadamente por aqui, por exemplo, e como mencionamos sapatos, mais uma vez, eu não sou muito bom em desenhar, mas sou só vou ilustrar isso aqui. Claro que você pode. Se você é bom em desenhar, você pode desenhar isso. Você também pode tirar imagens da Internet, recortá-las e colá-las em um pedaço de papel. Mas, mais uma vez, essa abordagem exige muito do seu tempo e energia. Então, certifique-se de entender isso antes de realmente entrar em um processo como esse. No meu caso, vou apenas rabiscar algo parecido com um sapato. Mas antes de fazer isso, quero posicionar um texto. Então, vou usar um bom título grande aqui. Assim. E eu vou preenchê-lo com uma cor como essa. Então eu vou usar a legenda aqui. E então eu posso realmente usar meu lápis para preenchê-lo aqui. E, abaixo disso, posso usar um botão porque eles estão aqui e descrevem seu produto. Fotografe na nossa maleta. E vou usar essa cor novamente. Então, vamos agora criar uma forma básica que se assemelhe ao sapato. Mais uma vez, eu não sou muito bom em desenhar. Então eu vou, digamos, fazer algo assim, talvez assim, e depois terminar aqui. Talvez assim, assim, e depois traga-o aqui. Talvez sejam para os cadarços, algo assim. E vamos usar listras na lateral. Por exemplo, talvez tenha uma forma aqui, e aí está, temos algo que se assemelha a um sapato. E então, o que eu posso fazer na parte de trás, eu posso realmente criar talvez um círculo ou uma forma, o que só vai trazer nosso sapato, a frente, algo assim. Aí está. Essa é a nossa imagem de herói. Portanto, o objetivo dessa imagem de herói é converter melhor seus usuários. Então, esse título indicará o que é isso. É um sapato. Então, o nome do sapato, o nome da marca ou algo parecido. O subtítulo descreverá um pouco mais de detalhes sobre o programa. Então, por exemplo , materiais de que é feito ou para que serve? É para correr, é para caminhar, coisas assim? E então, no botão, os usuários podem realmente conferir isso e acessar uma página separada, que é para aquele sapato em particular. Então, mantenha todas essas coisas em mente. Então, o que eu posso fazer é realmente desenhar uma paginação aqui. Assim, os usuários podem realmente clicar nesses pontos. E digamos que esse ponto esteja preenchido. Ou isso pode ser um controle deslizante automático e pode simplesmente ir para a esquerda e para a direita automaticamente. E os usuários não podem realmente clicar neles para mudar, ou podem, dependendo do layout que você realmente escolher no final. Em seguida, o que vou fazer abaixo é criar uma espécie de faixa de logotipo. Então, vamos usar uma régua e criar alguns círculos básicos. Então, talvez eu possa criar quatro círculos. E então simplesmente faça algo assim. E posicione isso, por exemplo, parceiros ou lojas parceiras, algo assim. Então, digamos que este é um sapato conhecido. E então esses parceiros podem representar todas essas lojas famosas, por exemplo, onde esse sapato é sal. Em seguida, abaixo disso, o que posso fazer é incluir um vídeo, por exemplo, como este. E eu estou apenas tendo ideias. Estou apenas testando essas coisas e apenas explorando essas coisas. Então, talvez possamos fazer algo assim. Talvez eu possa criar um círculo imediatamente, assim. E então use essa caneta para colocar um botão play no centro desta forma. Então, isso pode ser um vídeo. E então, por trás desse vídeo, o que posso fazer é, por exemplo incluir uma bela sombra como esta. E essa sombra projetada indicará que os usuários podem clicar nesse vídeo em particular. Mas também posso indicar que essa é a imagem. Então, embora seja um vídeo, ainda é um elemento de imagem. E então o que eu posso fazer aqui é colocar um bom título. Em seguida, coloque uma legenda grande por trás dela, desculpe, abaixo dela, assim. E então, por exemplo, botão, onde os usuários podem realmente clicar e ir e realizar uma determinada ação. Então, digamos que este vídeo descreva esse sapato ou o processo de criação desses sapatos ou algo parecido. Abaixo disso, o que podemos fazer é, por exemplo fornecer alguns serviços e fornecer um histórico sobre os serviços que este site realmente oferece. Então, por exemplo, além de vender o sapato, talvez eles estejam pegando sapatos usados e depois os colocando em seu site. Talvez eles os estejam reformando. Então, você realmente precisa falar com seu cliente sobre todos esses detalhes e sobre o que eles estão realmente fazendo. Mas no nosso caso, por exemplo, talvez não estejamos apenas vendendo sapatos, talvez também estejamos vendendo roupas. Então, por exemplo, você está vendendo camisetas, estamos vendendo jaquetas, estamos vendendo todas essas coisas. Então eu vou colocar essas três caixas. Uma das minhas imagens, e vamos usar algo assim talvez apenas para indicar que essas são nossas imagens. Mais uma vez, se você estiver fazendo isso com a mão livre, você será muito mais rápido. Mas vou mostrar nesses vídeos que você pode usar uma régua como essa. Então, essas são as imagens, dizem os analistas outros serviços, quais outros produtos? Então, mais uma vez, eu posso saber mais tarde, quando eu voltar aqui, o que são. Então, talvez tenhamos um texto maior. Então, por exemplo título deste produto, então temos uma descrição como esta e, em seguida, temos um link. Então eu posso fazer assim. Então eu posso destacá-lo usando essa cor. E então eu posso apontar para aderir e dizer link. Assim, os usuários podem realmente clicar aqui para acessar este produto. O que podemos fazer abaixo é talvez colocar uma imagem grande e uma imagem grande herói ou um vídeo que esteja sendo reproduzido em loop como este. Então, talvez modele com o produto. Assim. E, abaixo disso, podemos terminar isso, por exemplo, com outra seção como esta. Então, talvez possamos, por exemplo dizer algo como sobre o fabricante desse produto em particular ou algo parecido. Ou talvez possamos até mostrar outro produto aqui com uma imagem. E como usamos um layout à esquerda aqui, talvez possamos usar um layout à direita aqui apenas para dividir nosso layout um pouco assim. E eu posso chamar essa imagem do produto assim. E então o que eu posso fazer é colocar um título aqui, belo subtítulo de título grande aqui, assim. E depois coloque um botão aqui. Então, mais uma vez, os usuários podem comprar esse produto ou pelo menos visitar uma página para comprar esse produto. Abaixo disso, o que podemos fazer é criar um formulário de contato. Então, o que eu posso fazer é colocar um título aqui, subtítulo aqui, por exemplo, e depois um monte desses. Então, vamos preencher isso. Vamos preencher isso. Então, o que é isso, por exemplo, eu posso colocá-lo aqui. Portanto, formulário de contato, por exemplo, gostaríamos de ouvir de você, entre em contato conosco usando as informações de contato abaixo e, em seguida, endereço, número de contato, endereço de e-mail ou algo parecido. Em seguida, podemos colocar nosso formulário de contato aqui. Então, esses são campos de formulário como este. E eu posso, por exemplo colocar uma linha como essa apenas para indicar, por exemplo , seu e-mail, seu nome, seu endereço, algo parecido. E, abaixo de tudo isso, podemos colocar um botão. Vamos colocar um botão aqui só para quebrar um pouco nosso layout, porque temos um botão esquerdo aqui, assim. Então, o que eu posso fazer no final é interromper isso, por exemplo, assim. E então eu posso colocar um logotipo aqui, assim. E então eu posso colocar itens de navegação no menu. Então, vamos ver, 123-456-2345. Talvez eu possa, Jeremy e outro aqui. Então, essa será nossa navegação, por exemplo , original Copyright 2022 e uma marca como esta, por exemplo, e então você pode colocar os termos de serviço. Você pode colocar uma política de privacidade ou algo parecido. Assim, você pode ver em apenas alguns minutos, cerca de 10 minutos, que você pode criar algo que pareça muito bom e que realmente mostre aos seus clientes o DID ou o que você tem. E você pode colocar essa ideia assim em um pedaço de papel. Mas eu esqueci de escrever aqui, é colocar sombra de fundo, por exemplo, eu posso até apontar para isso, chamá-la de sombra projetada para que clientes, colegas de equipe, desenvolvedores, todos os envolvidos possam saber o que você realmente quis dizer com isso. Então aí está. É assim que é fácil desenhar em um pedaço de papel comum. E se você está apenas começando ou se já está começando, já está neste negócio, eu realmente recomendo que você use este papel porque é extremamente barato. É extremamente rápido de desenhar, como você pode ver. Mas no próximo vídeo, vou mostrar aquele papel quadriculado, o preto que eu tenho. Mas você também pode obter muitas outras cores. E só para mostrar como é, esse layout fica naquele pedaço de papel. E então você pode comparar o que você realmente gosta mais. Pedaço de papel comum ou aquele pedaço de papel com grade de pontos , se você quiser gastar um pouco mais de dinheiro nele. Então, eu vou te ver lá. 58. Desenho no papel da grade do ponto: Neste vídeo, vamos usar aquele papel de grade de pontos pretos que eu mostrei para vocês. E vamos criar exatamente o mesmo layout que fizemos anteriormente com o papel branco comum para impressão. E vou mostrar algumas diferenças entre esse pedaço de papel preto escuro e aquele pedaço de papel branco. Então, vamos começar. E primeiro de tudo, você tem todas essas diferentes espessuras de suas canetas. Então esse é o número cinco, por exemplo, esse é o número oito, esse é o número dez. Obviamente, quanto maior o número, mais grossa será a linha. Então, vou começar com apenas esse mais leve. Então, vou fazer o mesmo de antes. Vou simplesmente criar o esboço. E é muito mais fácil alinhar sua régua aqui porque você está usando essas notas. Eu vou fazer algo assim. Vou fazer algo assim, por exemplo, como eu disse, é muito mais rápido e fácil quando você pode realmente contar quantos desses pontos você tem. Então, primeiro de tudo, vamos criar essa navegação para que eu possa criar círculos para o meu logotipo. E como eu não tenho uma cor laranja que usamos anteriormente, vou usar essa só para preenchê-la. Assim. Então eu vou usar o mesmo estilo. Então, vamos fazer isso apenas para indicar esses. E vou criar esses dois botões mais uma vez. Então, eu posso criar um botão como este, botão Ativar como este. E então vou usar essa cor cinza para preencher meu botão de inscrição. E vou usar essa cor roxa para preencher meu botão de login. Mais uma vez, você pode usar cores diferentes. Se eu pegar isso e testarmos isso, leia e veja se funciona melhor. Acho que não. Mas vamos realmente continuar com isso. É muito mais escuro do que esse roxo, na verdade. Então, na verdade, vou trocar assim, mas obviamente, dependendo da cor do cliente, você vai usar um ou outro. Eu já mencionei isso. Então, vamos passar para o próximo. Vou usar o número oito porque não acho que essas linhas sejam grossas o suficiente. Então, vamos alinhá-lo assim. E você pode ver imediatamente o coração mais escuro. É por isso que vou usá-los para o meu título, por exemplo, vamos preenchê-lo assim. Então eu vou usar aquele desejo cinza para minha legenda. Assim. Não há muita diferença , mas você entendeu. E eu vou usar esse vermelho para o nosso botão. Vamos preenchê-lo bem, assim. E então vou usar esses círculos para nossa paginação. Vamos preencher isso. Assim. Em seguida, vou usar esse mais leve para criar meu sapato assim, por exemplo, assim. E, claro, dependendo de quanto tempo você deseja investir, quanto tempo você tem em seu projeto. Mais uma vez, posso continuar me repetindo ou você pode investir dependendo do projeto em questão. Então, vamos sentir o mesmo. Vamos desenhar essas linhas muito rapidamente, como fizemos anteriormente. E se você se lembra, nós tínhamos esse círculo. Agora vou usar o número dez, que é o mais grosso que eu tenho, assim, e simplesmente preenchê-lo com alguma cor de fundo aqui. Agora, o que você também pode fazer é, por exemplo, preenchê-los com essa cor. Assim. Mais uma vez, estou sempre voltando à quantidade de tempo que você realmente tem neste projeto. Então você pode fazer o que quiser com isso. Em seguida, temos aquela faixa de logotipo. Então, deixe-me realmente criar aqui. E nós tínhamos esses círculos. Portanto, está posicionado para círculos diferentes. Meu Excel. E abaixo disso, tivemos aquele vídeo assim, assim. E eu vou realmente criar um círculo no centro assim. E veja onde está meu número dez. Então aqui está. Vou simplesmente desenhar o botão play interno usando minha cor branca. E eu posso continuar usando esse número dez para o meu título. Eu posso usar essa cor cinza para minha legenda. E vamos ver. Eu posso usar o que é esse número cinco. Eu posso usar isso para o botão e, em seguida, simplesmente preenchê-lo com minha cor vermelha assim. Em seguida, o que temos são esses títulos. Então, vamos continuar usando o número dez. Veja os títulos. Eu vou fazer isso com a mão livre assim. Então, título principal, subtítulo. E o que tínhamos abaixo está nessas imagens. Então, a melhor coisa sobre esse papel é que você pode realmente contar. Não vou me preocupar porque já criamos esse layout, mas se você quiser, você pode realmente contar quantos desses pontos você está usando para o seu layout. Assim, você pode ter certeza de que todas as suas linhas são perfeitas, todas as suas alturas são perfeitas. O que, por sua vez, criará um layout muito mais limpo. Então, mais uma vez, dependendo do que você deseja alcançar, que deseja usar, você pode escolher um ou outro. Eu prefiro um pouco esse papel preto porque os detalhes se destacam muito melhor do que em um pedaço de papel branco. É claro que é um pedaço de papel um pouco mais caro e depois branco. Mas dependendo do que você deseja alcançar, que deseja criar, você escolherá um ou outro. Então aí nós os criamos e vamos continuar com este. Então, tínhamos esse título assim. Vou mudar para esta para linhas menores como esta. E, finalmente, tivemos esse link no final. Assim. Em seguida, tivemos aquela grande imagem. Então, vamos usar esse para dividi-lo um pouco. Assim. E vou simplesmente usar a mão livre para não perder muito tempo. E acho que a melhor opção seria, na verdade, descrever isso um pouco melhor com o número dez. Assim porque, na verdade, descreverá todo o site muito melhor do que isso, número cinco, mas, como eu disse, você pode explorar e fazer o que quiser. Agora vamos criar esse título. Então, vamos fazer isso. Vou posicionar esse título aqui. Nós vamos ter essa legenda. E o que tínhamos então é essa imagem. Então você já vê algumas manchas no papel. Espero que não seja muito perturbador quando estiver usando uma câmera, mas o que você deve fazer com elas é esperar um pouco, só então dê a elas um pouco mais de tempo para configurar. Depois disso, você pode continuar criando, mas você realmente deve dar a eles um pouco de tempo para configurarem. E segundo, forma um pouco assim. Então temos nosso botão. Vamos usar o vermelho. Agora estou realmente tentando ir o mais rápido possível aqui, só para não te aborrecer muito com esses detalhes, porque já passamos por esse processo uma vez com um pedaço de papel branco. Então, o que temos abaixo é o título. Então, vamos tentar mantê-lo na mesma linha. Então, temos o subtítulo do título. E então tínhamos o título à direita. Então, tínhamos a legenda abaixo. E então tivemos essas linhas. Então, use sexualmente um pouco mais fino. Então esse é o número oito. Vamos com o número cinco, porque eu quero mostrar essas linhas menores aqui, desse jeito. E então vamos ver. Eu posso usar o número oito para realmente criar esses campos de formulário como este. Assim, você pode ver que pode facilmente alternar entre usar uma régua ou usar essa grade de notas, porque esse é o objetivo de tê-la em primeiro lugar. Então você pode ver sem uma régua quanto mais rápido eu posso criá-los, mas ainda mantendo o mesmo layout, a mesma consistência, tudo parece como deveria. Finalmente, vamos posicionar nosso botão aqui, corrigir isso, preenchê-lo com cores. Isso, assim. E, finalmente, no final, vamos encerrar as coisas. Vamos criar esse rodapé. Então, eu posso posicionar isso como aqui. E eu posso encerrar isso. O rodapé ficou um pouco maior do que antes, mas isso realmente não importa. E o que eu posso fazer aqui é criar esses seis. Então 123456. E eu posso desenhar meu círculo para o meu logotipo. Eu posso usar minha cor, preenchê-la bem. Por fim, veja abaixo isso. Então, vamos usar um mais fino. Então, vamos colocá-lo no centro , na verdade. Então, OC 2022. E o que posso fazer é usar número dez ou, melhor ainda, o número oito para indicar os termos de serviço, por exemplo, política de privacidade. E aí está. Claro, você pode desenhar todos esses detalhes. Então, vamos usar esta, por exemplo, lojas parceiras. Mas não quero aborrecê-lo com muitos detalhes, porque já passamos por esse processo antes. Então, basicamente, é isso. É assim que você usa esse papel de grade de pontos e papel de grade de pontos pretos. No meu caso, eu realmente deveria encontrar marcadores, marcar essas canetas de gel em cores para realçar essas cores um pouco melhor, porque algumas cores funcionam bem, como essa cor dourada, que eu vou te mostrar. Então, por exemplo, você pode usar isso para seus botões, mas se quiser usar a cor exata da marca do seu cliente , terá dificuldades em alguns casos, especialmente se não os tiver. Agora, essa é uma das minhas marcas favoritas. É chamado de Sokoto. É do Japão. E eles realmente criam essas canetas de aparência incrível. Você pode ver como e quão bom é o resultado que você pode realmente obter com essas canetas. Então, eles realmente os vendem em uma variedade de cores diferentes. E você pode comprá-los se quiser. Mas esses três custam até 20% deles. Então esse é o ponto principal, essa é a razão por trás disso. Mas eu queria mostrar que você pode obtê-los em diferentes variedades, em preços diferentes, da mesma forma que com esses marcadores que você vai usar para um pedaço de papel branco. Agora, deixe-me realmente esclarecer isso e deixe-me realmente mostrar a diferença entre esse pedaço de papel preto e um pedaço de papel branco. Então aqui está. É o mesmo layout usando duas técnicas diferentes, usando dois papéis diferentes. Então, aqui temos esse papel branco que já abordamos, e aqui temos esse papel de ponto preto. E você pode basicamente fazer seu julgamento. Isso é muito mais legal e muito mais rápido de criar usando mão livre porque você tem essa grade de pontos. Mas se você quiser basicamente superar a dor de usá-los, porque mais uma vez, eles são preenchidos com esse gel e esse gel vai se traduzir em um pedaço de papel. Estou disposto a passar por isso porque meus clientes ficam muito mais impressionados com um resultado como esse nosso resultado como esse. Mas se você está apenas começando, se não se dá ao trabalho de usá-los e talvez parecer um pouco mais profissional, mas pagando o preço. Então, é claro que você pode usar esses. Obviamente, tudo o que você escolher para criar suas estruturas de arame de papel para tubos. Muito mais importante é a história que eles estão contando, o layout e a aparência do layout. Então, qual papel você está usando? Mas é claro que, voltando a isso, você pode usar opções mais baratas. Você pode usar opções muito mais caras. Mas, no final das contas, o resultado é o que importa e não o pedaço de papel. Na verdade, há mais uma dica que quero compartilhar com você nesta aula: usar modelos. E vamos falar sobre isso no próximo vídeo. Então eu vou te ver lá. 59. Como usar modelos para imprimir: Uma ótima maneira de melhorar sua velocidade e produtividade ao trabalhar com wireframes de papel é usar modelos principais. Agora, esses são apenas modelos de dispositivos conhecidos, por exemplo, dispositivos de telefone, dispositivos de navegador, dispositivos de relógio e qualquer outra coisa em que você esteja trabalhando, você pode usar tablets, você pode usar laptops, o que quiser. Então, neste vídeo, vou mostrar um recurso gratuito que estou oferecendo para que você possa usá-lo. Mas também há uma ressalva nisso. Você precisa corrigir alguns desses tamanhos porque eles são um pouco mais antigos. Também vou fornecer modelos que mostrarei em apenas um segundo, que podem ser impressos em PDF para que você possa imprimi-los imediatamente. Mas também vou mostrar alguns links premium no PDF. Você pode clicar lá e visitá-los e comprá-los se quiser. Mas isso não é realmente obrigatório. Estou lhe dando todos esses recursos gratuitos, mas se você quiser, pode comprar esses recursos premium. Então, aqui está meu site, web donut.net, e esses são dispositivos imprimíveis, modelos. Conforme mencionado, vou deixar o link no PDF e você pode clicar para acessá-los, basta baixá-los. Eles são arquivos do Photoshop. Você também pode abrir arquivos do Photoshop no Adobe XD se não tiver o Photoshop. E o que eles são basicamente são apenas maquetes desses telefones. Então, temos relógios inteligentes, temos telefones celulares e você pode ver iPhone sete e Galaxy pixels, Samsung Galaxy S7. Então, esses dispositivos são um pouco mais antigos neste momento, mas como eu disse, você pode simplesmente usá-los. Por exemplo, você pode remover esses botões, remover essas câmeras, posicionar a câmera no centro, por exemplo, para obter um dispositivo mais atualizado. Vamos fazer assim. Você também pode combinar esses elementos, mas como você pode ver, não há nenhum entalhe. Mas vou mostrar em apenas um segundo, vou fornecer um modelo imprimível em PDF, para um modelo imprimível em PDF, que você possa ter um telefone com um arco, temos tablets, temos o navegador Google Chrome, e é basicamente isso. Então, venha aqui, faça o download agora. E isso é basicamente apertar M para mostrar o que você vai conseguir. Esses são modelos imprimíveis que você pode obter dentro do formato de arquivo PDF. Basta imprimi-los. E como você pode ver, este é o navegador que acabei de mostrar. Esses são os telefones que têm o entalhe na parte superior. Então, na verdade, fui em frente e os criei. E esses são relógios inteligentes, por exemplo para Apple Watch ou algo parecido. Então, como você pode usar esses pequenos, vamos com este. Por exemplo, basta desenhar neles e eles são realmente úteis porque você pode realmente mostrar aos seus clientes e colegas de equipe como tudo isso ficará quando você realmente os colocar. em seu software e quando você realmente começar a criar. Então, por exemplo, vamos usar um logotipo aqui no centro de todos os três. E vamos usar uma régua. Nesse caso, você pode ver por que régua aqui é realmente útil. Porque eu posso, por exemplo colocar uma barra de abas aqui na parte inferior de todas as três ao mesmo tempo. Então você entendeu. Você pode simplesmente desenhar aqui. E eu propositadamente deixei todo esse espaço vazio ao redor. Então, por exemplo, você ainda pode fazer isso. Você pode colocar texto aqui, você pode fazer o que quiser com isso. Mas, basicamente, os modelos imprimíveis economizarão muito tempo, especialmente se você estiver apresentando mais tarde aos clientes. Achei que eles são extremamente úteis quando você cria aplicativos móveis como esses. E quando você está criando conceitos de relógios como esses, porque você pode ver que esses relógios são um pouco menores. Então, criar uma maquete, basicamente, que seja a aparência do produto final no final, é muito útil para mostrar aos seus clientes. Mas e a web? Bem, isso é um pouco complicado. O que temos aqui é o Google Chrome, basicamente um modelo. O que você pode fazer aqui é voltar ao exemplo que mostrei anteriormente, para que possamos, por exemplo desenhar esse sapato mais uma vez. Mais uma vez com meu épico. Estou testando habilidades aqui, mas você entendeu. Você vai usar isso para mostrar conceitos rápidos aos seus clientes. E, claro, o que você também pode fazer é inverter isso. Então use neste espaço e use apenas essa barra. Vire-o e simplesmente reposicione e aqui na parte superior do Photoshop. E então você terá muito mais espaço lá embaixo. O que você também pode fazer é usar a mesma abordagem. Então, use essa barra, vire-a, estreite-a um pouco e posicione-a aqui na parte superior. Então, nesse caso, você terá todo esse espaço vazio abaixo. Então, esses são apenas alguns dos exemplos que eu queria mostrar a vocês. Eles são gratuitos. Você vai pegá-los. Você pode simplesmente baixá-los e usá-los em seu projeto, certo? Agora, se eu voltar aqui, esse é o do meu site, web donut.net. E também vou fornecer alguns recursos premium com muitos desses dispositivos com algumas diretrizes, por exemplo, e coisas assim no PDF. Você pode obtê-los se quiser. E você pode estar se perguntando: é ótimo usar esse pedaço de papel branco, mas e aquele elegante pedaço de papel com pontos pretos? Bem, é um pouco complicado com isso, porque você precisa se certificar de alinhar todas essas maquetes usando essa grade. Portanto, certifique-se de que quer que você esteja comprando seu papel quadriculado, certifique-se de solicitar as dimensões ou, melhor ainda, você pode simplesmente usar uma régua e medir as dimensões entre as bordas do seu papel. Então, apenas as bordas externas do seu papel. Então, por exemplo , essa borda, essa borda, porque o centro realmente não importa. Por que fazemos isso. Bem, ao criá-los e colocá-los em um pedaço de papel antes de imprimir, você pode apenas certificar-se medi-los corretamente, tudo se encaixa como deveria. Então, quando você imprimi-las , elas parecerão alinhadas, coerentes. Tudo vai combinar com sua grade de pontos. Então, quando você começar a desenhar tudo, vou fazer muito mais sentido porque se você imprimi-las assim, todas essas molduras não se alinharão com sua grade de pontos, que então anula o propósito da grade de pontos em primeiro lugar. Portanto, preste atenção a detalhes como esses. Mais uma vez, usar modelos como esse é uma ótima maneira de apresentar aos seus clientes ou colegas de equipe apenas para mostrar a eles como seria o produto final. Então, não deixe de conferi-los. Mais uma vez, estou oferecendo recursos gratuitos e premium você possa decidir o que deseja usar. 60. Compartilhar seus wireframes: Como eu disse, ao longo desta aula, e esses wireframes em papel são principalmente para você e para suas ideias, apenas para descobrir os possíveis layouts que você usará em seu design quando realmente chegar software. Mas se você estiver trabalhando como parte de uma equipe com outro designer ou se quiser apenas compartilhar seu processo com o cliente. E o cliente quer ver onde você está neste projeto neste momento específico, então você pode realmente compartilhar esses wireframes de papel com seu cliente. Mas como você pode realmente fazer isso? Se o cliente ou seus colegas de equipe de design estiverem locais, você pode simplesmente pegar um pedaço de papel e levá-los ao escritório e mostrá-los dessa forma. Se você se lembra, quando eu mostro os estilos possíveis para o wireframe no vídeo anterior, você viu que alguns designers estão, na verdade, cortando esses wireframes do pedaço de papel e, em seguida, apresentam a eles que caminho. Você também pode fazer isso. Mas a maneira mais fácil que descobri ao longo dos anos, especialmente com clientes que só queriam ver, era apenas curiosa porque a maioria dos clientes menores, especialmente não entendem realmente seu processo e eles realmente não sabem o que são wireframes de papel e só querem ver o que estão pagando. Então, nesses casos, o que você pode fazer é simplesmente usar o telefone, colocar um pedaço de papel no chão, verificar se você tem uma boa iluminação e, em seguida, tirar uma foto do telefone. Você não precisa compartilhar todos os wireframes de papel porque, por exemplo, se você tiver 20 páginas diferentes em um site, terá 20 pedaços de papel diferentes. Então, você pode compartilhar um ou dois apenas para eles vejam e entendam o que você está realmente fazendo e o que eles estão pagando, se o cliente quiser ver todo o processo e tudo mais wireframes de papel, você também pode fazer isso. Ou se você tiver um scanner, que é a maneira mais fácil que encontrei ao longo dos anos, você pode simplesmente digitalizar todos esses papéis. Você pode colocá-los em um arquivo zip, por exemplo, e simplesmente enviar esse arquivo zip por e-mail para seu cliente ou para seus desenvolvedores, colegas de equipe, quem quer que seja. Então, mais uma vez, nem todo mundo vai exigir isso de você. Mas se o fizerem, você terá todas essas opções para compartilhar wireframes de papel com eles, porque eles têm todo o direito de entender em que você está trabalhando neste projeto e onde você está no momento. 61. SECÇÃO 7: Sua tarefa para esta sessão é criar qualquer tipo de estrutura de papel que você desejar. Pode ser um site como o que estamos fazendo nesta aula. Pode ser um aplicativo móvel, pode ser anexado a um quadro, pode ser o que você quiser. Apenas pratique com algumas dessas caixas. Você pode usar vários estilos diferentes que são mostrados nesta classe. Você pode fazer o que quiser. O objetivo aqui é apenas praticar. Não se preocupe em usar papéis sofisticados. Não se preocupe em usar lápis ou canetas sofisticadas. Basta usar qualquer tipo de pedaço de papel que você quiser. Você pode até usar um guardanapo e um pouco de caneta. Portanto, não deixe de praticar, experimente e entenda por que isso tornará seu processo de design muito mais rápido quando você realmente pegar o jeito. 62. SEÇÃO 8 Layout e grelhas: Criar layouts comuns no design de UI é extremamente importante porque esses layouts já foram comprovados, certo? Eles já estão provando que estão realmente trabalhando. Portanto, não tente inventar água quente, porque, para se divertir, tente sempre usar essas metodologias comprovadas e esses layouts e grades comprovados existem apenas para organizar um pouco nosso conteúdo. um pouco melhor em vários pontos de interrupção ou tamanhos de tela diferentes. Então, vamos começar. 63. O que é um layout: layout no design de interface do usuário pode ser simplesmente referido à organização dos elementos incluídos em uma página ou na tela do celular. Basicamente, tudo o que está incluído em seu design e como ele é estruturado e organizado pode ser categorizado como layout. Existem muitos layouts diferentes por aí. Portanto, há o layout do celular, do desktop, o layout do tablet. Há também layout de paisagem, layouts de retrato e muito mais. Mas, basicamente, a principal coisa que você precisa saber aqui é quando alguém está mencionando o layout, eles estão basicamente falando sobre a estrutura geral de todos os seus elementos que conduzirão a uma página ou uma única tela. forma como você cria seu layout depende do seu projeto. Quão complexo é seu projeto, quão grande é seu projeto. Você está usando uma grade? Você está usando guias, está usando alguns estados de componentes, alguns elementos. Portanto, todas essas coisas podem depender do seu layout e do resultado final do seu layout. Nesta aula, vamos nos concentrar em como criar seu layout, como usar grades, como estruturar seu conteúdo dentro de suas grades e dentro de seu layout. Então é sobre isso que vamos falar nesta aula. Mas você sempre pode navegar on-line e ver diferentes layouts após essa aula. E apenas entenda o que outras pessoas estão usando em outros tópicos, em outras aulas, em outros projetos. E você vai entender isso muito melhor depois desta aula. 64. O que é um sistema de grade e por que é importante: Os sistemas de grade são usados no design para organizar seu conteúdo muito melhor. Porque se você não usa sistemas de grade, não sabe onde certos elementos devem se alinhar à esquerda ou à direita, ou na parte superior e inferior. Portanto, os sistemas de grade são basicamente projetados para fazer isso: manter seu conteúdo organizado, manter seu conteúdo com uma aparência coerente e manter sua visualização, é muito melhor porque eles estão funcionando para ver esse conteúdo organizado em vez desses elementos dispersos que não se alinham. Os sistemas de grade também são usados por desenvolvedores porque os desenvolvedores podem codificar muito mais simples e fácil do que sem nenhum sistema de grade, porque eles podem colocar o conteúdo dentro do contêineres e, em seguida, você define a largura fixa desses contêineres. Ou podem ser variáveis se estiverem usando algo como um layout de conteúdo flexível. Portanto, esse conteúdo pode ser muito mais facilmente escalável se eles estiverem criando um design responsivo. Você, como designer, pode criar esse conteúdo muito melhor para design responsivo porque você é usando esses sistemas de rede. sistema de rede mais conhecido que existe é o Bootstrap. Também existem muitos outros por aí. E nesta aula vamos mencionar o Bootstrap, e também vamos mencionar algo chamado sistema de grade de oito pixels porque esse sistema de grade é realmente, na minha opinião, o mais escalável lá porque todos os elementos são divisíveis por oito. Os sistemas de grade são ótimos porque, como eu disse, eles mantêm seu conteúdo alinhado lá, mantêm seu conteúdo organizado. E são muito fáceis para os desenvolvedores programarem. Porque especialmente com esses sistemas de grade conhecidos como o Bootstrap, por exemplo, eles já têm esses componentes. Portanto, isso manterá o tempo de desenvolvimento muito menor porque eles já têm todos esses componentes pré-construídos. Eles só precisam inseri-los dentro de seu próprio código. Na próxima lição, mostrarei como configurar grades no Adobe XD. É super simples, então nos vemos lá. 65. Como configurar grades no Adobe Xd: Nesta lição, mostrarei como configurar grades no Adobe XD. Então, vamos entrar no Adobe XD imediatamente. E aqui no Adobe XD, o que você pode ver é que eu criei essas placas de arte de 1920 por 1080, e vou mostrar isso rapidamente no Adobe XD, mas você também pode configurá-las no Sketch. Você pode configurar isso no Figma. E o Figma é uma das melhores ferramentas disponíveis, na minha opinião, porque tem a maioria das funções incluídas por padrão, o XD é ótimo. E por causa da comunidade, eles acabarão por incluir todas essas opções que o Figma já tem, porque essas ferramentas estão competindo o tempo todo. E é ótimo para nós, como designers, porque somos nós que estamos lucrando basicamente com essas ferramentas competindo umas com as estamos lucrando basicamente outras, porque sempre podemos esperar as ferramentas mais recentes e as mais recentes recursos dentro das novas atualizações. Então, como eu amo o Adobe XD, eu o uso há anos, eu o uso todos os dias no meu trabalho. Esta aula é dedicada ao Adobe XD. Mas se você é usuário do Figma ou do Sketch, também pode fazer isso nessas ferramentas. Ou, se você não sabe como , pode simplesmente procurar aulas on-line ou pesquisar vídeos do YouTube. Então, se você voltar ao Adobe XD, como eu disse, o que temos aqui são os aeroportos de 1920 por 1080. É só um aeroporto normal. Você pode configurar isso aqui. Você pode clicar em Prancheta e depois configurá-la ou na tela inicial. Agora, para configurar nossas grades, tudo o que você precisa fazer é simplesmente selecionar este quadro de arte. Vá aqui , onde diz grade. E você tem duas opções. Você tem layout e quadrado. Como eu disse, o figma tem mais opções do que o Adobe XD. E eu realmente espero que a equipe do Adobe XD inclua todas essas outras opções no Adobe XD em breve. Mas, por enquanto, como eu disse, temos o layout e a grade. Então, voltando ao Adobe XD, como você pode ver, temos o layout e o quadrado, e eu vou escolher o layout só para mostrar a você. E você pode clicar aqui apenas para mostrar seu layout. O que temos aqui, nossas colunas, temos a largura da calha, largura da coluna e as margens vinculadas aqui. Você pode usar isso como padrão. Você pode tornar isso padrão ou alterar todos esses valores e, em seguida, tornar esse modelo padrão. Agora isso é ótimo. Se você estiver trabalhando com algo como o Bootstrap, você pode criar uma grade de bootstrap aqui, torná-la padrão. E então, sempre que você voltar, e se estiver sempre trabalhando com o bootstrap, não precisará perder seu tempo criando isso o tempo todo. Você pode simplesmente clicar em Tornar padrão, abri-lo e ele mostrará isso como padrão. Então, se voltarmos aqui, o que você pode ver aqui são as colunas, que são esses pedaços azuis aqui, temos a largura da calha, que é o espaço entre suas colunas. Temos a largura da coluna, que é a largura desses bits azuis, que são as colunas. E, finalmente, temos margens à esquerda e à direita. E você também pode clicar aqui para configurar as margens superiores e as margens inferiores. Temos margens esquerdas e margens direitas. Se você clicar aqui, ele simplesmente vinculará as margens esquerda e direita e tudo o que você definir aqui, vai encaixá-las. Então, por exemplo, se eu quiser ampliar minhas colunas, por exemplo, não sei, 65, pressione Enter ou Return. Você pode ver o que ele faz. Então, aumentou a largura da calha. Ele salvou a largura da minha coluna aqui. E acabou de me mostrar essas margens vinculadas dessa forma. Não gosto muito do espaçamento dessas calhas. Eu vou alterá-los, por exemplo, clique aqui. E então simplesmente mudei para algo menor, como, sei lá, 40, por exemplo e quando eu pressiono Enter ou Return, como você pode ver, isso mudará esses valores. Então, o que você precisa fazer aqui é brincar com esses valores no Adobe XD para obter os valores desejados. E, geralmente, quando você configura os valores com os quais está satisfeito, pode seguir em frente e torná-los padrão. Ou sempre que você voltar ao Adobe XD ao criar sua primeira prancheta e começar a criar. Em seguida, crie-os quando você realmente copia esse aeroporto para outro aeroporto e seja duplicado. Então, se eu voltar aqui e mostrar isso também, o que temos aqui é esse primeiro quadro de arte e, por exemplo digamos que esses são nossos valores. Talvez eu queira mudar isso para 60, talvez, ou mudar isso para 40, isso para 100 e isso 2,0, 80. E você pode ver como esse layout muda. Então, digamos que essa seja minha saída padrão. Tudo o que preciso fazer é pressionar Control ou Command D para duplicar esta prancheta. E, como você pode ver, isso salvará esses valores para você. Mais uma coisa que eu queria mostrar é se eu pressionar Controle Zero para encaixar no local selecionado mais uma vez. Clique aqui. Aqui você pode alterar a cor dessas colunas. Portanto, se você não gosta dessa cor azul-petróleo padrão que o Adobe XD fornece, basta alterá-la para o que quiser. E, finalmente, você pode diminuir a opacidade aqui. Portanto, não é muito perturbador quando você começa a trabalhar. Então, basicamente, isso é tudo para o Adobe XD. Como você pode ver, é extremamente simples. Você pode criar todos os tipos de relatórios que você pode criar na área de trabalho, como era o caso, você pode criar aeroportos para tablets, painéis de arte para telefones. Você pode girá-los na horizontal e na vertical. E então você pode criar essas grades para seus projetos. Na próxima lição, falaremos sobre o Bootstrap e nos vemos lá. 66. Trabalhar com o Bootstrap: A grande maioria dos desenvolvedores e designers gosta de trabalhar com Bootstrap porque é uma fundação bem conhecida e sistemas de grade conhecidos há anos. E muitos sites existentes são realmente projetados e construídos no Bootstrap usando algo com o qual você está familiarizado, com o qual a maioria das pessoas está familiarizada, é ótimo porque o design e o processo de desenvolvimento pode acontecer muito mais rápido. Então, se eu levar você aqui, este é na verdade o site do Adobe XD. E você pode acessar os recursos aqui. E você pode acessar os kits de interface do usuário porque esses são os componentes que você pode realmente baixar do site oficial da Adobe. Então, o que temos aqui, como você pode ver, é o design da Apple. Temos o Google Material Design e você pode usar esses kits de interface do usuário. Você pode baixá-los e usá-los em seus próprios projetos. Mas o que nos interessa para esta lição em particular é o Bootstrap. Então, se você rolar até aqui, você pode ver um Bootstrap aqui. Então, crie sites responsivos rápidos com ativos e componentes predefinidos com o Bootstrap five. Agora, o bootstrap tem suas próprias versões, então você pode criar seu site no Bootstrap, Bootstrap de três anos, pois este é o Bootstrap cinco no momento da criação desta classe. Então, se você estiver assistindo essa aula no futuro e vier aqui e disser bootstrap seis, sete ou dez ou qualquer outra coisa , saiba que essa é a versão do Bootstrap, mas saiba que a estrutura oral, o design geral é basicamente o mesmo. Eles estão apenas incluindo mais e mais componentes, mais e mais código em cada versão. E o que nos interessa nesta classe é apenas um design, apenas os componentes, apenas os nomes dos componentes que serão mostrados em apenas um segundo. Então, se voltarmos aqui, você pode simplesmente clicar em obter o kit. Quando você conseguir, deixe-me fechar isso. É assim que fica quando você o abre no Adobe XD. Então, o que você tem aqui, eu tenho essas fontes ausentes e você pode instalá-las se quiser. Se você tiver um direito aqui, isso mostrará que faltam algumas fontes. O que temos aqui são essas cores. Temos estilos de personagens porque eles estão usando Helvetica. Eu não o tenho no meu Windows. É por isso que está mostrando que eles estão ausentes, mas posso simplesmente substituí-los se quiser. Em seguida, temos esses componentes. Temos esses ícones e todos esses elementos. Então, interruptores de alternância, interruptores externos e assim por diante, giradores. Então, todos esses são componentes do Bootstrap. Deixe-me mudar para o meu painel de camadas aqui. E se eu ampliar até aqui, o que você pode fazer é clicar aqui, ir para a pré-visualização se quiser e, por exemplo você pode clicar no sistema de grade, ele o levará para o sistema de grade se isso é algo que você quer. Mas eu simplesmente gostaria de navegar aqui. Então, vamos começar com o layout. Agora, o layout é extremamente importante porque o layout ajuda você a entender como o Bootstrap é imaginado e você pode entender facilmente todas essas outras coisas, como o Bootstrap online. Por exemplo, a Fundação tem uma e muitas outras por aí. Mas, basicamente, todos eles têm uma filosofia semelhante de como são construídos, usados e atualizados para acompanhar os recursos mais recentes da web. Então, se voltarmos para aqui, você pode ver que temos um sistema de rede. Agora, o que é isso, se eu ampliar um pouco mais, como você pode ver, temos a coluna e todos esses espaçadores em cada lado. Então, temos o marcador direito e o marcador esquerdo. É assim que eles os chamam. E vamos explicar isso em apenas um segundo. Mas o que temos abaixo disso, nossos tamanhos de grade. Tamanhos de grade, se você se lembrar, ao selecionar seus quadros de arte e clicar aqui para criar essa grade. Agora, esses são os tamanhos da grade. Então, temos o extra grande, e estes são de 1.200 pixels em palavras. Então, se você estiver criando algo maior que 1.200 pixels, você pode usar esse tamanho e, obviamente, ele codificará a escala com o tamanho da sua janela de visualização. visualização é basicamente o desktop, por exemplo , o celular, ou qualquer tela que seu usuário esteja vendo em seu site ou aplicativo Esse é o tamanho da sua janela de visualização, neste caso é 1.200. E isso diz basicamente que toda essa grade terá 100.11, 40 pixels de largura. Então, 1140 pixels de largura é tudo isso. E se eu selecionar, você pode clicar aqui e ver na sua largura, estamos nesse tamanho, então 1140. Agora, se nos aprofundarmos um pouco mais e antes disso, você terá todos esses outros tamanhos e poderá ver como suas colunas e seu conteúdo serão escalados em todos esses outros dispositivos. Mas se selecionarmos essa rapidamente, o que temos é que temos as colunas. Temos 12 colunas diferentes. Se você se lembra do vídeo anterior no Adobe XD, na verdade criamos essas 12 colunas e todas essas colunas têm calhas e espaçadores, mas são um pouco diferentes porque são bootstrap e eu vou mostrar em apenas um segundo. Então, temos as calhas aqui. Então, temos a calha esquerda e a calha direita. E essa é, na verdade, a principal diferença entre o Bootstrap e outra coisa que você pode criar sozinho ou descobrir algo sozinho. O Bootstrap tem uma coisa realmente estranha de colocar essas calhas à esquerda e à direita. Portanto, antes das margens à esquerda e à direita, você tem essas calhas. Então, se eu voltar para o Adobe XD. Você pode ver o que quero dizer. Então, imagine que essa é a margem esquerda e essa vai ser a margem direita, aqui. Então, todos esses espaços vazios à direita, e em vez de uma coluna ir até aqui, na verdade, eles deixaram a sarjeta. Então, eu realmente não sei por que eles estão fazendo isso. Eu vi isso em código. Basicamente, o que você precisa fazer ao criá-los é ter cuidado com a forma como os cria. Basicamente, desses 101.140 pixels de largura para suas colunas, você precisa deduzir essas medições esquerda e direita e, portanto, terá sua área de conteúdo lá. Então, o que eu vou fazer é usar este, apertar o Controle C para tirá-lo daqui. E eu também vou entrar e me abrir nesta. Use o Controle C e depois pule para fora para aqui, controle V. E se eu fizer uma cópia, Controle D, pule para dentro daqui e você verá o que estou fazendo em apenas um segundo. até aqui e vá até aqui. Amplie e alinhe-os assim. E então simplesmente mude a cor para outra coisa que você possa realmente ver, por exemplo, essa azul, o que você pode ver na cor azul, na verdade a área de conteúdo. Portanto, essa área de conteúdo é a área para onde seu design real será direcionado, para onde todos os seus elementos irão. E esses pares à esquerda e à direita são na verdade essas calhas que eles deixaram. Não sei por que eles estão fazendo isso, mas basicamente, essa parte azul que acabei de criar é na verdade sua área de conteúdo. Agora, se voltarmos ao XD, você pode ver que eles têm tudo isso em todos os tamanhos da grade. E você pode simplesmente ajustar, alterar e criar sua área de conteúdo para todas essas coisas. Então, na verdade, em vez de 1140 para a largura, sua largura real será 1108. E então você terá que criar esses conteúdos e colunas internas. Um recurso importante do Adobe XD, que na verdade é muito ruim. Se você está criando para o Bootstrap, não é possível mostrar essas calhas à esquerda e à direita. Porque se eu selecionar isso mais uma vez para esta prancheta e não prestar atenção, esse aeroporto é extremamente grande. Eu só quero transmitir o ponto. Se eu clicar aqui, como você pode ver, não podemos usar as calhas para a esquerda e para a direita. Portanto, estamos limitados ao que o Adobe XD tem a nos oferecer. Então, neste caso, o que você tem que fazer é, na verdade, vamos direto para aqui. Deixe-me criar meu quadro de arte e fazer o que eles disseram. Então, 1.200 com 1080 ou qualquer outra coisa. Portanto, a altura realmente não importa porque a altura realmente se adapta ao seu design. Então, se pularmos para aqui, e eu realmente selecionar isso, vamos realmente remover as calhas esquerda e direita. E vamos selecionar esse e esse. Então, controle C, eu vou entrar aqui, controlar V, ter certeza de que eles estão no centro. Então, essa é, na verdade, nossa área de conteúdo. O que você pode fazer nesse caso é realmente desenhar guias. Então, se eu mover isso para baixo para que você possa ver o que estou fazendo, podemos realmente desenhar guias. Então, primeiro guie, então passe o mouse aqui e posicione-o ali. Se você quiser desenhar um guia lá, desenhe outro lá. E então você terá que criar esses guias em todo o seu design. Então, assim, assim. E então, na verdade, comece com cada coluna disponível. Então, o que eu recomendaria é onde quer que esteja sua sarjeta. Então, aí mesmo, basta puxar essa grade aqui. Também existem alguns plug-ins disponíveis que você pode instalar e que ajudarão você com isso. Mas estou apenas mostrando a versão mais lenta e chata. Se você estiver fazendo isso sozinho, você só quer ser o mais preciso possível, mas é claro que você pode instalar um plug-in para fazer isso muito mais rápido. Mas lembre-se de que você precisará verificar o plug-in e ver o que ele faz, o que fez e se fez um bom trabalho. Então, se voltarmos aqui, o que você pode fazer é ver a largura da sua coluna nesse caso. Então, vou duplicar minha parte azul, pressionar o Controle D e, na verdade, vou reduzi-la até aqui, movê-la para cima e ver o que obtenho com isso. Então, o que temos é a largura de 63. Então essa é a largura real da nossa coluna. E o que eu posso fazer agora é realmente criar a grade de repetição a partir desta. Então, o que eu quero fazer é saber o quão amplo isso é. E eu posso simplesmente segurar meu clique de controle dentro e ver que minha calha esquerda é 16. O que você pode fazer é ter duas opções. Você pode usar a grade de repetição. Você pode criá-los e, em seguida, simplesmente passar o mouse no meio até chegar aos 16, assim. E então simplesmente. Ajuste isso. Então, se pairarmos, estamos em 16, como você pode ver. Então, tudo o que precisamos fazer é basicamente criar 12 deles. Então, 24681012. Então eu preciso cortá-la onde esta está, aqui. Assim. E, obviamente, acabei de contar com essa sarjeta aqui. O que você precisa fazer é começar daqui. E como você pode ver, temos essa sarjeta aqui. E temos essa calha aqui, porque é 16 o dobro de 16 é na verdade 32. Então, o que vamos fazer é realmente entrar na nossa grade de repetição aqui e entalhar isso para ficar assim. E agora você pode ver que temos exatamente a mesma configuração para uma mesa que a dívida de bootstrap. Então, o que precisamos fazer a seguir é que você pode excluir este, se quiser. E eu posso realmente deletar este se eu quiser. E o que vou fazer é remover isso. E, na verdade, vou mantê-los dentro, ou posso remover este se quiser, porque essa quantidade está no centro. Então, o que você precisa fazer é não poder desenhar desta linha para frente ou para o lado esquerdo, desculpe, porque essa é a calha que eles incluíram aquele acolchoamento no lado esquerdo. Também há a mesma história aqui. Então, basicamente, seu conteúdo estará aqui. O que vou fazer neste momento, se você quiser adotar essa abordagem mais uma vez, é clicar com o botão direito do mouse para desagrupar a grade. E você pode chamar isso, por exemplo um para a primeira coluna, isso é 23. Isso pode ser quatro e vamos renomear rapidamente esse 567-89-1011. E, finalmente, 12. Se quiser, você pode pedir o mapa. Então, em vez de 12 estarem no topo da sua pilha de camadas, você pode movê-la para baixo. Número um, mova-o até o fim. Então, cabe a você decidir como você quer mudar isso. Se voltarmos aqui, o que você pode fazer neste estágio é simplesmente ajustá-los para movê-los para baixo dessa forma. E você pode colocá-los em um grupo, chamar essa grade. Você pode realmente bloqueá-lo para que ele não se mova. E o que você também pode fazer é pular para dentro daqui. E você precisa selecionar tudo isso e simplesmente reduzir a opacidade. Mas como está bloqueado, basta reduzir a opacidade agora para digamos, dez por cento, algo assim. E então você pode movê-lo até aqui. E agora, quando terminar, você pode simplesmente bloqueá-lo e, em seguida, inserir seu conteúdo aqui. Então, a aparência do seu conteúdo é : digamos que estamos criando um descarte, por exemplo, dois aqui. Depois, você pode simplesmente empurrá-lo até ficar feliz com ele, assim. E vamos arredondar os cantos, por exemplo, vamos colocá-lo aqui. Talvez seja algo como uma imagem. Em seguida, controle D se você quiser, por exemplo criar um botão no mesmo estilo. Digamos que tenha quatro colunas de largura e algo parecido com isso. Vamos movê-lo para 17 de altura ou algo parecido. E vamos realmente reduzir isso para dez porque 20 é demais. Então você pode imaginar como isso vai funcionar. Você pode ver ao mover esses elementos para a esquerda e para a direita como isso funciona, como você pode brincar com isso, por exemplo. Então, basicamente, o que você precisa fazer aqui é dentro do bootstrap, eles têm 12 colunas, oito colunas, seis colunas, quatro colunas e duas colunas. E, claro, uma coluna que é a base de tudo isso. Então, se voltarmos aqui, o que você pode fazer é realmente escalar seu design acordo com o Bootstrap e de acordo com essas colunas. Então, vou compartilhar isso em apenas um segundo. Eles criaram isso aqui. Portanto, você pode ver que esta é uma coluna ou uma coluna menor, da que quiser ajustá-la. E se eu excluir esse, você pode ver claramente o que eles fizeram aqui. Assim, você pode criar colunas pares, quatro colunas com calhas padrão, três colunas, duas colunas, uma coluna. Então, como você quiser, você pode criá-los em pares. Isso significa que você pode criar uma coluna enorme e uma coluna pequena, basicamente para preencher esse espaço de 1140. E você pode brincar com seu layout como se fosse uma dívida, mas eu vou te mostrar isso aqui. Neste exemplo, temos doze elementos brancos de colunas. Então, se eu duplicar e remover quatro colunas como esta. Então, aqui temos os elementos de oito colunas de largura e os encaixamos aqui. Se eu duplicá-lo, mova-o para aqui. Remova dois. Agora temos seis posições aqui, agora temos quatro. E você entendeu a ideia, você pode ir para 2.21. E, basicamente, é assim que seu layout funciona no Bootstrap usando o Adobe XD. Então, como você pode ver, é realmente muito simples quando você pega o jeito. Mas você mesmo terá que criar essas grades porque, como eu disse, não temos a opção de preenchimento à esquerda e à direita. E você pode simplesmente manter esses guias à esquerda, à direita, para saber aonde seu conteúdo pode ir. E isso obviamente não importa se você estiver usando essas imagens grandes. Então, deixe-me mostrar isso rapidamente em apenas um segundo. Então, vamos imaginar que estamos usando uma imagem enorme que vai crescer. Vamos ver 246 colunas de largura. E digamos que eu queira posicionar essa imagem à esquerda para ir até a borda do meu quadro de arte. Você pode realmente fazer isso. A posição está aqui. E desenvolvedores em código, vamos realmente remover o canto superior esquerdo, que é esse, ir para zero. E precisamos remover esse que está no canto inferior esquerdo. Então, basta encontrá-la aqui, que é de um a zero. Então, esses dois estão em zero e esses dois estão em forma de tenda. Então você pode realmente fazer isso. E os desenvolvedores vão , na verdade, ampliar a largura dessa imagem em código. Mas, como você pode ver, ele ainda ocupa seis colunas do seu conteúdo só vai escalar com a margem que você tem aqui à esquerda. Esse é o bootstrap. Resumindo, como você pode ver, é realmente muito simples de criar quando você começa. E eu realmente não mostrei o que está incluído neste kit de interface do usuário. Então eu posso te mostrar isso em apenas um segundo. Então, temos o conteúdo aqui, temos a topografia, temos essas figuras, temos esses ícones, temos tabelas diferentes. Temos cores diferentes aqui. Temos formas diferentes. Temos grupos de entrada, diferentes componentes, componentes, estados, emblemas, breadcrumbs, botões. Temos cartas, carrosséis desabam. Então você tem todos esses elementos. Eu realmente encorajo você, se você está usando o Bootstrap ou está pensando em usar o Bootstrap, basta mergulhar aqui nesses elementos apenas para explorá-los um pouco mais e entender Inicialize um pouco melhor antes de começar seu próximo projeto. No próximo vídeo, falaremos sobre uma grade de pixels. Então, eu vou te ver lá. 67. Trabalhando com sistema de grade 8px: Um sistema de grade que muitos designers usam é o sistema de grade de oito pontos ou o sistema de design de oito pixels. E eu vou te mostrar como fazer isso no Adobe XD. Então, se pularmos aqui, você pode ver que eu criei meu documento padrão mais uma vez, então 1920 por 1080 e podemos ir direto aqui, onde diz grade. Mas, em vez do layout, vamos passar para os quadrados. E você pode definir o tamanho do quadrado aqui. E mais uma vez, da mesma forma que com o layout, você pode usar default, make default e, nesse caso, default é oito. Então, é basicamente disso que trata essa grade de design de oito pixels. Todo o seu conteúdo será criado dentro desses quadrados de oito pixels. E basicamente eles estão usando oito porque oito é divisível por quatro por 16, por 32 por 64. E você usará esses tamanhos posteriormente se estiver usando esse sistema de grade de oito pontos e seu sistema grade de pixels para realmente criar seu conteúdo e espaçá-lo uniformemente. Então, deixe-me mostrar o que isso significa. Se voltarmos para o XD aqui. Então, mais uma vez, se eu ampliar totalmente e fechar, escolha minha ferramenta de retângulo e crie um retângulo como este. Você pode ver que é oito por oito, então oito pixels por oito pixels. Portanto, este é o sistema de grade de oito pixels. E digamos que eu queira criar algo assim e remover a borda. Vamos incluir a cor cinza aqui. E basicamente 12345678. Na verdade, essa é a largura. Então, oito caixas, oito quadrados é igual a 64 porque cada uma delas tem oito pixels de largura. Então, isso é exatamente o que você deve ter em mente: o que quer que esteja criando usando esse sistema de design de oito pixels e sistema de grade, você basicamente multiplicará você basicamente multiplicará todas as suas elementos por oito. Vamos entrar e equipar isso mais uma vez. Então, se pegarmos o texto, por exemplo e se eu digitar aqui, vamos chamá-lo, isso é um título. E vamos fechá-lo aí mesmo. O que você precisa fazer é realmente configurá-lo para algo como, sei lá, 16. Porque, mais uma vez, estamos criando com sistema de design de oito pixels. E eu vou colocá-lo nesta posição. Não se preocupe com isso, porque você sempre pode voltar aqui e ver que o espaçamento entre linhas está lá. E você pode se certificar de mudar todas essas coisas, se quiser. Então, se definirmos como 16, na verdade ele vai configurá-lo assim. Mas se eu configurá-lo para 32, por exemplo, ele o moverá. Então, quando você começar a criá-los, vamos realmente voltar para 16, assim. Eu só queria mostrar, então isso é um título. Depois de pressionar Enter para ir para uma nova linha e uma legenda. E se eu fechá-lo, você pode ver o que ele faz. Então, sempre deixa esse espaçamento um pouco, mas você sempre pode incluí-lo e simplesmente empurrá-lo. Acho que até 20. Algo como 19, talvez. É muito difícil julgar o texto dessa forma, porque isso é apenas o Adobe XD, é um problema porque eles estão incluindo esse espaçamento irregular. Portanto, você nunca poderá contornar seu texto sem essas caixas. É simplesmente branco sujo. Então, vamos imaginar que este é o nosso título, este é o nosso texto, por exemplo, Controle D. E eu quero mover isso para oito, você pode ver, ou por exemplo, 16. Dessa forma, manteremos nossa escrita horizontal crescendo. Digamos que eu queira dobrar isso. Portanto, você sempre pode voltar aqui para pressionar Enter. E ele realmente usará a calculadora para este exemplo. Então, temos 64, vou inserir 64 aqui vezes dois. Então, vai ser 128. Você sempre pode usar essa calculadora ou, como eu disse, fazer isso aqui, mas por algum motivo ela não funciona. Sim. Funciona com as divisões. Vamos fazer assim. Então, por exemplo, 32. E, por algum motivo, não funciona assim. Então, vamos estendê-lo para 64. Mova-o para aqui até 64, e então, qualquer que seja 128, você terá a imagem. É basicamente assim que você obterá o ritmo horizontal e vertical usando as grades de oito pixels. E, basicamente, todo o seu conteúdo terá um posicionamento estratégico de dívidas. E nos próximos vídeos que vou criar nesta aula, vou realmente mostrar que, com design real, falaremos sobre ritmo horizontal e vertical. E vou usar esses componentes pré-fabricados que criei a partir de uma das minhas aulas anteriores, apenas para mostrar como seu layout ficará e seu ritmo vertical ficará no XD. Então, eu vou te ver lá. 68. Ritmo horizontal no Adobe Xd: Neste vídeo, falaremos sobre o ritmo horizontal no Adobe XD faremos isso usando seu incrível recurso chamado stack. Então, eu tenho um projeto aberto, e esse projeto é, na verdade, de uma das minhas aulas chamada masterclass do Adobe XD. Se você estiver interessado, pode encontrá-lo e assisti-lo. Tem mais de 20 horas de duração. E tudo o que você vê aqui neste documento, nós realmente criamos nesta classe. Então, se você estiver interessado, dê uma olhada e talvez explore como criar todos esses elementos. Mas nesta aula, vamos nos concentrar apenas no ritmo horizontal no Adobe XD usando pilhas. Se eu escolher uma dessas placas de arte, por exemplo vamos com esta, por exemplo, pressione Control D. E eu vou criar uma duplicata dela e vou movê-la para o lado. Portanto, não é uma distração em algum lugar por aqui. E eu só quero te mostrar o poder das pilhas. As pilhas estão localizadas aqui à direita. E basicamente o que é simplesmente imaginar que você posiciona muitos dos seus componentes, você já tem muitos dos seus elementos dentro de um grupo. E então você está criando essas pilhas, que na verdade são espaços ou calhas, se você quiser, para o seu design. Agora, as pilhas são ótimas porque você pode criá-las para serem horizontais ou verticais. Então, nesse caso, vamos explorar como isso funciona. Então, como eu disse, temos as pilhas e se eu pular aqui, eu já tenho uma pilha incluída. É uma pilha horizontal de dois O2, então basicamente 202 pixels, mas eu posso entrar ainda mais e depois fazer as alterações dessa forma. Porque eu tenho esse layout aqui. Eu tenho 12 colunas. A largura da calha é 60, largura da coluna é 82 e as margens vinculadas a, esquerda e direita, R1, 38. Então, esses são a grade e o sistema de grade que são usados para criar esse design e toda essa classe que você está vendo aqui. Então, obviamente, temos dois O2 aqui porque isso se encaixa na largura da coluna oral. Se eu pular aqui, o que você pode fazer é colocar esse texto em um grupo, esse texto em um grupo e esse botão está no próprio grupo. E então você pode criar uma pilha para ele. Então, se eu selecionar minhas pilhas, você pode ver que ela sabe disso. Eu quero uma pilha vertical e você pode ver que é 40. Portanto, todos os espaçamentos são 40 neste caso. Então 40 aqui, 40 aqui. Mas o que acontece se você quiser mudar isso para mais, basta clicar e arrastar para posicioná-lo em 80, por exemplo, então é 80 aqui e 40 aqui. Você pode fazer isso se quiser ou se não, se seu cliente perguntar, por exemplo, Ei, vamos mudar o espaçamento aqui. Você pode simplesmente pular dentro do site 60, por exemplo, certifique-se de movê-lo para o centro e pronto. Então, eu realmente gosto desse layout e você sempre pode alternar entre suas pilhas verticais e horizontais se quiser fazer isso. Então, vamos posicionar isso no centro e quero mostrar como isso funciona. Então, no momento, temos essa pilha, que é a pilha horizontal de dois O2. Mas se eu clicar aqui, como você pode ver, ele mudará para a pilha vertical. Agora, esse layout não mudou porque não colocamos todos esses itens em uma pilha. Então, se eu te mostrar que temos isso, isso, isso, isso, e vamos incluir tudo isso, na verdade. Então, se eu clicar aqui e clicar aqui, até o nosso texto. Segure minha tecla shift, selecione tudo, pressione Control G para colocar todos eles em um grupo incluí-los em uma pilha. E então, por exemplo, vamos realmente ver, então isso é 150 entre eles. Então, vamos posicionar isso em um quinto, se quisermos. Já está às 01:50. Então, vamos posicioná-lo dessa forma. E todos os nossos elementos agora serão posicionados às 01:50. Agora, não incluiu isso porque não tínhamos 150 aqui. Então, se eu voltar e reduzir isso para zero ou voltar mais uma vez, será zero porque temos 150 aqui. Temos 150 aqui. E para tudo isso, mas não temos 150 entre isso e o rodapé. Então, mais uma vez, essa é a ótima maneira de usar pilhas no Adobe XD para criar seu ritmo. Se você está tendo dificuldades com seu ritmo, basicamente a regra é dobrar ou triplicar da maneira que você quiser incluí-lo. Então, basicamente, digamos que eu esteja usando 40 aqui. Se eu quiser mover os espaços entre eles, digamos que minha imagem e meu texto abaixo da minha imagem. Então eu vou usar algo como 60, 80 ou um-vinte ou algo parecido. Então, basta multiplicar seus valores. Você sempre pode duplicá-lo ou trigêmeos se não tiver certeza de como usá-los e simplesmente quando encontrar algo que funcione, que pareça ótimo, que nossos clientes aprovaram, por exemplo, ou que você simplesmente pensa parece visualmente atraente do que simplesmente seguir em frente e seguir em frente. Mas comece e verifique se você tem espaçamentos de coerência. Certifique-se de ter valores coerentes. Então, o que isso significa basicamente é que se você escolheu AT, então fique com AT não tente, digamos, incluir aqui, 60 aqui para você porque seu layout está funcionando Para detalhar, seus espaçamentos não serão coerentes. Seu design não parecerá coerente e, portanto, será um pesadelo para seus desenvolvedores desenvolvê-lo mais tarde, porque você pode simplesmente dizer a eles: Ok, espaçamentos entre, por exemplo. H1 e minha imagem são 40. Eles saberão e incluirão isso no código de todos os seus designs. Portanto, certifique-se de ser consistente, o mais consistente possível. Então, se você está apenas começando, porque essa aula é realmente destinada a iniciantes. Se você está apenas começando, certifique-se de usar seus tamanhos em todos os designs, se quiser, ao criar seus primeiros elementos , se quiser. Porque, como eu disse, será muito mais simples para você se lembrar do que usou anteriormente para todos esses espaçamentos. E será muito mais simples para seus desenvolvedores desenvolvê-lo pois eles verão seus espaçamentos com muito mais facilidade. Se voltarmos ao XD, o que eu quero mostrar a vocês quatro no final é basicamente que você pode posicioná-los em uma pilha. Então, eu já disse que se clicarmos aqui, você pode ver que temos dois O2 aqui, o que obviamente é demais. Então, o que você pode fazer é clicar aqui e, em seguida, clicar aqui e arrastar ou ajustar manualmente. Então, digamos que eu queira colocá-lo em 18. E é assim que os dados aparecem. Então, eu posso pular aqui e mudar isso para ser assim. E a grande característica das pilhas é que você pode clicar duas vezes aqui e organizá-las. Então, se eu não gostar disso, posso simplesmente trocá-lo. Então posicionado é estar em cima, isso estar em baixo. E eu posso simplesmente ir e avançar entre esses elementos, o que você também pode fazer é fazer isso dentro das pilhas horizontais. Então, estamos na pilha horizontal se por algum motivo eu quiser colocar isso aqui. Como você pode ver, X d vai trocá-lo facilmente, mas não vai alinhá-lo. Preciso alinhá-la aqui porque essa imagem vai até aqui. Se a imagem for colocada ou onde minha grade estiver, ela simplesmente a alinhará com esse valor. Você pode ver como é simples de usar. Essas pilhas são, quão boas são, como são fáceis de usar com seu ritmo. Você pode usar a grade de repetição no Adobe XD, mas eu realmente prefiro usar pilhas porque elas oferecem muito mais controle sobre o layout do design e sobre os espaçamentos. Então, basicamente, isso é tudo para o Adobe XD e eu gosto muito de usá-lo. Eu realmente encorajo você a usá-lo. E se você ainda não o usou ou não experimentou, certifique-se de fazer isso porque eles têm a versão gratuita e você sempre pode usar essa versão gratuita, sem precisar pagar por ela. Se você não tiver certeza sobre isso. Se você quiser explorar um pouco mais alerta e o Figma aprendeu um esboço, por exemplo, eu realmente recomendo que você experimente o Adobe XD, experimente e experimente todos esses valores. E, claro, vou deixar os links de tudo o que mencionei nesta aula. No arquivo PDF, você pode simplesmente abri-lo, clicar nele e ele o levará a todas essas coisas para que você não precise procurá-las sozinho. 69. SECÇÃO 8: Sua tarefa para esta seção é apenas brincar com grades diferentes. Certifique-se de tentar criar, digamos, uma grade de desktop, grade tablet e grade telefônica. E tentando incluir diferentes quantidades de colunas com diferentes quantidades de largura de uma calha, por exemplo, e a largura da coluna. Apenas tente brincar e tentar ver resultados diferentes que você obterá. Também brinque com a cor das colunas reais. E só para ver o que funciona melhor para você. Talvez para algumas pessoas, o azul funcione melhor. Para algumas pessoas que leem, funciona melhor para algumas pessoas, preto funciona melhor apenas por questões de visão. Tente entender o que funciona para você. Tente praticar e ver por que esses recursos são tão importantes quando realmente começamos com o design. 70. SEÇÃO 9 Tipografia e emissão de fonte: Uma das partes cruciais de qualquer tipografia de design está presente junto com as imagens para contar uma história. E quanto maior o impacto que a topografia tiver sobre seus usuários, melhor será a história contada junto com as imagens. Então, nesta seção da aula, falaremos sobre tipografia e, especialmente, emparelhamento de fontes. Como emparelhar suas fontes de maneiras diferentes. E quais são algumas fontes diferentes que você pode emparelhar? Então, vamos começar. 71. Fontes de tipo VS: Um dos principais erros que vejo jovens designers cometerem é que eles estão chamando fontes, tipos de letra, o que não é realmente verdade. Typeface é, na verdade, uma família de fontes. E a fonte é apenas uma variação dentro dessa família. Deixe-me dar um exemplo rápido. Imagine que você está usando a fonte Roboto, por exemplo, e dentro da outra fonte de água, você tem parafuso, regular, estanho, ultra negrito. Todas essas são fontes, mas o relatório em si é uma fonte. Família endividada é o principal equívoco que os designers têm. Eles estão tentando promover essa noção de que a fonte é tudo quando na verdade não é. O que você pode ter são diferentes tipos de variações de fonte dentro de única família ou de uma garrafa é exemplo muito bom, porque você tem Roboto normal, Roboto normal e então você tem algo chamado roboto slab, que é uma fonte totalmente falsa, linhas muito grossas, e é muito usada principalmente para impressão, mas você também pode usá-la em algum tipo de web design arrojado. Mas esse é o ponto aqui. Não tente confundir fontes com famílias de fontes, pois as famílias de fontes podem ter várias fontes diferentes dentro delas. E as fontes são apenas variações dentro dessa família de fontes. Como eu disse, pode haver várias fontes dentro de uma única família. Portanto, tenha isso em mente e não se confunda. Você pode usar toda a família ou fonte dentro do seu design ou pode usar apenas uma variação, como, digamos, neste exemplo, Roboto regular ou Roboto negrito. Vamos falar sobre isso em apenas alguns vídeos desta aula. Mas eu só queria ressaltar isso. 72. Tipos de fontes: Muitas vezes, quando entrevisto jovens designers quando falo com eles, eles realmente não sabem qual é a diferença entre Serif e Sans Serif quando se trata de fonte É realmente muito simples. E eu fui em frente e encontrei um artigo muito bom. Vou vinculá-lo ao arquivo de recursos da classe. Então, não deixe de conferir e ler você mesmo, porque não vamos nos aprofundar muito neste vídeo, mas eu só quero mostrar rapidamente quais são as diferenças entre serifas, sem serifas, e quando cada uma delas é usada. Então, aqui temos o artigo que mencionei e é de adobe.com, Creative Cloud Design Discover. E vou deixar o link para este artigo, como eu disse nos arquivos de recursos da classe. Então você pode ver alguns exemplos aqui. Talvez isso não pareça distinto para você. Talvez você tenha visto fontes como essas. Talvez você tenha visto fontes como essas. Mas qual é realmente a diferença entre Serif e Sans Serif? Então, aqui temos a pista do nome e a principal diferença entre essas fontes. Então, essas coisas no final da carta em si são surfe. E você pode ver aqui, nós não temos aquele surf na areia, se não me engano, isso é francês. Então, sem essas serifas no final. Então, essa é a principal diferença entre serifas e servidores de envio. Agora, quando pode usá-las, você pode ver quando usar fontes com serifa. Portanto, será muito aprofundado sobre quando usá-los e como usá-los. Você pode vê-los impressos aqui. Portanto, não deixe de conferir este artigo para saber mais sobre isso. E, claro, você pode explorar mais sobre quando encontrá-los. Mas, em poucas palavras, quando usar serifas e sensores, é realmente muito simples. Tudo se resume ao tópico do seu design e à direção do design do seu design e para o que você está projetando. Então, por exemplo, se você está criando design de site arrojado, talvez algo novo , algo novo, algo para a geração mais jovem, você não vai usar serifas, que são as fontes com essas coisas. No final de cada letra, você usará fontes sans serif porque as fontes Cera são realmente atribuídas a algo antigo. E se você está projetando para algo antigo, por exemplo, você está fazendo algum tipo de site antigo ou está fazendo algum tipo de exposição de carros antigos talvez ou algo que eles resolveram. Em seguida, você usará as fontes Serif, que têm essas coisas no final das letras. Mas geralmente a regra geral é que, se você não está projetando para algo que é tradicional, que é elegante, que é antigo, então você vai usar essas fontes sans serif porque elas são fontes mais modernas e mais disponíveis para uso, especialmente em web design, porque estão funcionando on-line e são otimizadas para trabalhar on-line, para facilitar a leitura, para acessibilidade, para escalabilidade, por todos esses motivos, fontes sans serif são muito melhores de usar, especialmente no design de sites. Mas, como eu disse, você ainda pode encontrar milhares de fontes serifadas diferentes se quiser usá-las em seu web design ou design de aplicativo. Tudo isso depende do seu tópico, que você está criando, de quem é seu público-alvo e do que você está tentando transmitir, que tipo de emoção, que tipo de satisfação com a fonte você está escolhendo. Portanto, tenha essas coisas em mente ao projetar para a web. 73. Pesos das fontes e como usá-las: Quando você começa a usar uma família de fontes, dependendo da própria família, você verá que ela tem muitas fontes diferentes dentro, que são rotuladas com nomes diferentes como regular teen bold, extra bold, itálico, negrito, itálico e muitos, muitos, muitos mais, dependendo da própria família de fontes. Eles são chamados de pesos. E como usar esses pesos em diferentes cenários. É sobre isso que vamos falar neste vídeo. E vou te mostrar um exemplo e dar uma ideia de onde usá-los. Então, aqui está o exemplo, e eu estou no Adobe XD, este é o arquivo de design de um dos meus cursos anteriores, e eu apenas o usei como exemplo apenas para mostrar todos esses diferentes pesos de fonte e como usar para acentuar o que você deseja mostrar em seus designs. Então, o que temos aqui dentro da seção de heróis, se eu selecioná-la e vir aqui para o lado direito. Então, deixe-me escolher este. Aí vamos nós. Você pode ver que o nome da fonte é Open. Sans, o tamanho é 24 e o peso é normal. Então, por que é normal? Bem, porque eu só gostaria que as pessoas vissem isso primeiro, que obviamente é maior, mais pronunciado e tem cores diferentes. Isso é chamado de ponto de atenção porque eu quero chamar a atenção deles para esse texto branco primeiro, porque eu queria que eles lessem esse texto primeiro. Portanto, quero que pareça diferente desse texto na parte superior e inferior enquanto eles estão aqui no centro lendo este hotel boutique de heroína. Eu quero que ele veja que há outro texto em cima e na parte inferior. E então eu quero lê-los. Eu quero que eles o leiam porque eles estão lá. Então, se eu lançar rapidamente o protótipo aqui, você pode ver como é. Então, aqui estou na seção de heróis e tudo o que eles podem ver é isso. Então, seu olho é naturalmente atraído para o meio desta página, para o meio dessa imagem. E você pode ler que esse hetero significa hotel boutique após dívidas. Você pode ver todos os outros textos lá. Bem-vindo ao hotel boutique de Halloween. Ok, sua casa, longe de casa. Então esse é o peso da fonte. É assim que os usamos. E você pode notar que essa fonte parece diferente. Você pode ver que é serif, como mencionamos em um vídeo anterior. Então, por que isso? Porque a marca deste hotel e desse design realmente exige isso. E é por isso que eu escolhi esse tipo de look. Então, se eu escolher isso, você pode ver que se chama Playfair display 70, que é o tamanho da fonte, muito maior neste caso. Porque não quero mencionar, novamente, todas essas coisas que mencionei, mas para chamar a atenção para elas. E então você pode ver negrito frio, itálico é o peso. É itálica. Então, está meio inclinado para o lado direito e é ousado. É mais pronunciado do que na fonte normal. É assim que você pode equilibrar os pesos das fontes em muitos exemplos diferentes. E se rolarmos um pouco para baixo, você pode ver mais uma vez que aqui está a mesma fonte agora em uma cor diferente para obter o contraste entre fundo branco e a própria fonte. E você pode ver sua casa longe de casa. Então, mais uma vez, talvez voltemos a esse slogan. Então você pode ver algo realmente interessante aqui. Então, se eu selecionar este, você pode ver que é o parafuso Open Sans 24. E se eu selecionar este, Open Sans 24 regular. E você pode ver que, ao selecionar parafuso e regular e escolher uma cor diferente, estou apontando a direção deles e apontando sua atenção para uma direção diferente. Neste exemplo, você pode ver que eu queria ler essa legenda porque ela é muito importante. Eu quero que a mente deles apenas preste atenção a essas três coisas. Portanto, camas king size, comida, incluindo acesso à praia, porque esses são pontos de venda muito importantes para este site em particular a fim de atrair novos visitantes. E então, se quiserem, é claro, podem ler o texto abaixo. É por isso que este é ousado e esse é normal. Esta tem uma cor um pouco mais escura do que esta porque eu quero que seus olhos sejam atraídos por este texto primeiro. A mesma história com essa e com essa aqui. Se rolarmos um pouco agora, podemos ver os mesmos textos aqui. hotel boutique Headwinds está bem. E aqui temos uma citação de um de nossos clientes anteriores deste site ou um depoimento, você pode ver Jenny de Londres, mas este é muito mais pronunciado. É muito maior. Então, se eu selecioná-lo e vir aqui, você pode ver que é Open Sans 36 itálico. E tem essa cor mais escura que essa, que é Open Sans 24 irregular. Então, mais uma vez, quero que eles leiam a citação primeiro e depois vejam de quem é a citação. O nome, neste caso, realmente não importa muito. Você pode se livrar dele para seguir o layout. Não importa o que importa é a experiência deles com este hotel, porque o próximo cliente que você está tentando adquirir para o seu hotel vai querer ver essa experiência primeiro. Realmente não me importei, é Jenny, é o Mark, é quem quer que seja? Eles realmente não se importam, eles realmente se importam com a experiência. E então você pode ver o contraste abaixo com o botão reservar agora, que é azul e tem texto branco dentro. Mais uma vez, por uma questão de contraste, se rolarmos um pouco para baixo, você pode ver isso em todo o design. E não apenas esse design, mas cada design que eu crio. Porque eu sempre penso nessas coisas. O que é mais importante? O que é menos importante? O que as pessoas vão ver primeiro? E como posso acentuar isso com minhas fontes e pesos de fonte? Você pode ver aqui. Então, para os nomes da sala, fonte é muito maior do que todas elas abaixo. E você pode ver isso com os recursos, sim e não. É claro que estamos escolhendo cores diferentes para mostrar quais recursos estão disponíveis quais não estão. E então temos o estilo diferente mais uma vez com o link abaixo. Então, saiba mais, eles podem clicar nesse link, é diferente. Então, quando eles, como estão, eles verão a mudança. Então você tem que pensar em todas essas coisas. Aqui. Você pode ver os recursos. Então, temos piscina privada, temos um lindo jardim, temos estacionamento privado. Tudo isso é super fácil de ler com um propósito. É por isso que escolhi essa fonte, que é muito maior, que é um pouco diferente, que é pedregulho, tem uma cor mais escura do que a fonte abaixo dela. Mais uma vez, eu estava usando o Open Sans como fonte principal. Esta aqui e a Playfair exibem essa grande fonte em negrito. Mais uma vez, se rolarmos um pouco para baixo, você pode ver isso acontecendo novamente. Então visite Delos, que é o título, e este é o texto. Então, se eu não quiser ler este texto, tudo o que posso ver e tudo que realmente preciso saber é visitar Delos. Portanto, há algo para fazer nas exibições. E se rolarmos um pouco para baixo, mais uma vez, reserve sua estadia conosco. Então, isso realmente os convida a reservar sua estadia neste lugar. E mais uma vez, você pode ver esse contraste aqui mesmo acontecendo com o fundo branco e esse texto cinza escuro. E o exemplo final é se inscrever para receber boletins informativos. Então, está realmente chamando você à ação, à ação. E então é isso que você vê. Primeiro, inscreva-se para receber um boletim informativo. Isso é o que você vê em segundo lugar, e isso é mais uma vez com um propósito porque eu quero pronunciar isso, assinar um boletim informativo porque essa é a ação que eu quero que ele tome. E então, quando eu tiver atenção deles ao se inscrever no boletim informativo, inscreva-se e receba notícias e atualizações e blá, blá. Isso é realmente secundário porque eu quero que eles permaneçam nessa parte da página o maior tempo possível. É assim que você pode usar fontes, formas de fonte e cores diferentes e talvez até famílias de fontes diferentes para acentuar o que você quer que seus usuários vejam em sua página. Você pode explorar isso com muito mais detalhes. E dependendo do esquema de cores do seu projeto, isso pode ser ainda mais complexo ou até mais simples do que o exemplo que acabei de mostrar, que contém apenas algumas cores. 74. Escolhendo as fontes: Quando se trata de escolher fontes para seu projeto, verdade existem duas considerações principais. Você deve ter fontes existentes e o tema principal do projeto. Obviamente, as fontes existentes são as fontes que seu cliente estava usando anteriormente. Depois, você pode dar uma olhada nessas fontes. Veja toda a família de fontes, veja o que ela contém e talvez pense em como você pode acentuá-la um pouco mais. O que falamos em um vídeo anterior desta aula. Como você pode usá-los de forma um pouco diferente para mostrar algumas características principais do produto ou serviço que seu cliente está oferecendo. E então você pode dar uma olhada nas cores, ver como eles usavam anteriormente essa família de fontes com essas cores diferentes. Talvez se você tiver a capacidade de fazer isso, talvez possa mudar essas cores. Talvez você possa incluir algumas cores mais escuras ou mais claras. Talvez você possa adicionar tons dessas cores diferentes que eles já estão usando ou introduzir cores totalmente novas no projeto para dar mais vida e trazer mais adeptos ao projeto. em que você está trabalhando. A outra forma de fazer isso é com novas fontes. E ao escolher novos fundos, preste atenção ao que eu já mencionei em um dos vídeos anteriores. Considerado do projeto em si. Obviamente, você não vai usar essas fontes ousadas, brilhantes e malucas. Se você está criando um site para um banco, talvez porque o banco esteja tentando transmitir um sentimento de confiança, segurança e estabilidade. Não conheço nobreza em alguns casos. Então você quer prestar atenção a isso. Do que trata o seu projeto? O que ele tentou transmitir aos próprios usuários. Portanto, você precisa usar essas fontes que corresponderão bem à equipe do projeto. Claro, se o projeto estiver bom, digamos que você esteja criando um site para uma empresa de quadrinhos ou loja de brinquedos ou qualquer tipo de conteúdo relacionado a crianças, como jogos, flushes ou móveis, o que quer que tenha a ver com crianças. Mas mesmo com crianças, ainda há alguns limites quando você pode usar determinadas fontes como usá-las. Como a herdabilidade é realmente a chave, especialmente on-line, você quer ter certeza de que suas fontes sejam legíveis no final do dia, não importa quem seja seu público-alvo, não importa se é sério ou divertido, se for colorido, todo monocromático, você ainda quer saber se é legível ou não. E como você pode fazer isso é testá-lo em diferentes dispositivos. Ao criar um site, por exemplo, você precisa testá-lo em telas grandes como telas de desktop e laptops, mas também precisa garantir que ele funcione bem e que seja legível nas menores telas como Formulários. Se você estiver usando algo como o Webflow, é muito fácil de fazer. Basta criar uma página responsiva a partir do seu design e simplesmente enviar o link para você mesmo, talvez envie esse link para alguém que seja mais velho, talvez para o novo, e veja se eles conseguem ler facilmente a cor o contraste é bom, se os pesos das fontes forem bons, se o ritmo das cores for bom. Para que eles possam realmente lê-lo. Eles podem realmente entender isso e podem ver o que você estava tentando transmitir naquela página específica. Portanto, certifique-se de sempre testar, sempre pense com antecedência. Com quem você está falando? Com quem você está falando? Quem é seu público principal? E as fontes são legíveis usando essas cores contra esse plano de fundo? 75. Combinação de fontes: Às vezes, em alguns exemplos, você deseja usar famílias de fontes diferentes, como no exemplo que mostrei anteriormente com esse site de viagens. Talvez você queira mostrar uma seção diferente dessa página ou um aplicativo móvel usando uma determinada família de fontes. E depois, outra seção, talvez você queira que eles sintam que estão lendo um artigo. Portanto, você não vai usar uma fonte maluca. Você só quer somar uma fonte antiga comum e simples que seja realmente legível, compreensível e super fácil de ver e ler. Portanto, você precisa saber sobre emparelhamento de fontes e como você pode emparelhar fundos? Bem, existem diferentes ferramentas on-line que podem ajudá-lo com isso. E vou mostrar algumas neste vídeo em particular. Então, aqui estamos com a primeira aspiração desses tipos de frio. E eu já criei um vídeo no YouTube. Vou vinculá-lo aos recursos da aula. Você pode simplesmente clicar e assistir ao vídeo inteiro em que explico todas essas ferramentas diferentes. Mas eu vou te dar uma visão geral rápida. Neste vídeo em particular, você tem inspiração e guias que orientam você sobre como emparelhar essas diferentes fontes. Mais uma vez, tudo se resume ao que já foi mencionado algumas vezes neste vídeo, tópico do seu projeto e ao público com quem você está tentando falar. Portanto, você não vai usar algumas fontes malucas como sempre mencionam para banqueiros, por exemplo, ou para um público sério. Mas você pode fazer o contrário com crianças e usar cores mais divertidas e fontes mais divertidas. Portanto, a inspiração de tipos é o primeiro site e você pode escolher muitos estilos diferentes. Você pode ver o Open Sans e o creme. Alguns textos são as fontes usadas aqui. Essas são as cores. Você pode escolher cores diferentes entre. Aqui você pode escolher fontes de título, você pode escolher fontes de corpo. A fonte do título é essa aqui na parte superior , usada para cabeçalhos ou títulos. E a fonte do corpo é essa aqui, que é usada basicamente para parágrafos e para todo o conteúdo que contém mais texto. E é mais destinado a tarifas mais longas. Basicamente, títulos são mais glândulas, mas você também pode lê-los e Atlanta muito rapidamente, mas parágrafos, você pode realmente ter que gastar seu tempo lendo-os. E esse é o ponto principal aqui. Com parágrafos, você pode explorar com várias fontes e espessuras de fonte diferentes. Mas com parágrafos, você quer ter certeza de que sua fonte é legível que a cor tem um bom contraste com o fundo. E, na verdade, não é muito cansativo passar mais tempo lendo este artigo, especialmente se houver um artigo mais longo, se você estiver criando um site para notícias, por exemplo cansativo passar mais tempo lendo este artigo, especialmente se houver um artigo mais longo, se você estiver criando um site para notícias, por exemplo , extremamente importante. Esse é o principal problema que você deve resolver primeiro e imediatamente nesse projeto específico, porque o objetivo principal de um site de notícias é as pessoas passem muito tempo lendo esses artigos. Portanto, você quer ter uma ótima fonte que seja realmente legível. E esses títulos , que são realmente visíveis porque você não quer eles se destaquem muito, especialmente nesses tipos de sites, porque você quer que eles continuem sendo lidos esses artigos abaixo. Então, explore este site. Como eu disse, vou apontar para o vídeo que eu já criei no meu canal do YouTube sobre essas coisas. E eu explico isso com mais detalhes. E vou deixar os links desse vídeo, então não deixe de conferir. par de fontes é outro. Então você pode ver aqui que temos uma placa sans serif. Então você pode ver que é uma caligrafia monoespacial meio gorda. Portanto, existem vários desses diferentes estilos de fonte que você pode escolher. E você pode ver todas essas fontes importantes e a fonte principal. Você pode ver combinações aqui, você pode ver mais emparelhamentos de fontes. Então, vamos escolher as fontes de exibição e ele mostrará todas essas fontes de exibição. Você pode explorá-los. Então temos isso, que é pareamento de fontes, dot py people.com. Você pode selecionar uma família de fontes aqui. E depois de fazer isso, você pode escolher diferentes estilos e estilos de textos. Então, isso é regular, isso é negrito, essa placa de textos secundários, que são os textos de parágrafos que acabamos de mencionar. E então ele fornecerá os pares disponíveis. E, finalmente, a fonte joy, que é super, super simples de usar. Então, temos o Generate e ele vai gerar um emparelhamento de fontes diferente. Você pode escolher mais contraste ou escolher mais semelhança ou contraste equilibrado. Você pode alternar entre o preto e o branco para ver como ficará. Especialmente se você estiver criando um modo escuro em seu site ou aplicativo, poderá ver pares de fontes e tamanhos de texto diferentes, pesos diferentes e assim por diante. Então aqui temos Montserrat, que é essa aqui. Aqui temos essa fonte Varney simulada, que é essa aqui. Assim, você pode ver H1, H2 e parágrafo ou título, um título, dois parágrafos ou um título principal , subtítulo e parágrafo. Sanchez é o texto do parágrafo em si. Então você pode clicar. Isso o levará às fontes do Google, que é o que essa fonte Sanchez tem quatro. E então eu posso clicar aqui e escolher, sei lá, talvez essa só para ver como fica. Se eu não gostar, vai continuar e trocá-los. Então, digamos que eu realmente não gosto desses ou desse. Talvez eu possa escolher algo um pouco mais brilhante como este. Eu posso trancá-lo aqui. E vai trancar esse Montserrat. Eu realmente não gosto desse, então posso ir em frente e gerar mais. Você pode ver que Montserrat está trancada, talvez eu goste desta, mas eu não gosto desta. Podemos ir direto ao assunto. Você ainda pode rolar até o fim. E no final, quando você encontrar a combinação de fontes perfeita que deseja usar, como mencionei, você pode clicar aqui. Isso o levará às fontes do Google. Certifique-se de baixar a família de fontes Montserrat in Montserrat e depois recorte-as. E o Pylon Quinn, neste exemplo em particular, faz o download de todos eles instalou em uma máquina. Então você tem todas essas diferentes espessuras de fonte, como mencionei, negrito regular e muito mais. Aí está. É assim que é fácil emparelhar fontes. Preste atenção ao seguinte, ao contraste, à legibilidade e ao tópico para o qual você está projetando em primeiro lugar. Você resolve tudo isso. Então, será muito fácil de projetar e dificilmente será fácil de testar. E por falar em testes, certifique-se de sempre testar com seu público, especialmente se você tiver acesso a eles. Então, por exemplo, se você está projetando para crianças, talvez você possa ter acesso às crianças e ver como elas estão interagindo com o protótipo, como estão interagindo com o site, com o aplicativo móvel. É fácil para eles entenderem onde precisam clicar ou se estão se deparando com esses diferentes elementos do seu design, pode ser que algo esteja atraindo muita atenção deles. Ou se você estiver trabalhando com o público mais velho, talvez como eu continuo mencionando os bancos, talvez você tenha acesso às pessoas que trabalham no banco. Se você está trabalhando para um banco nesse caso específico, talvez você possa testá-lo com eles, dar a eles uma tarefa concreta, ver como é fácil para eles encontrar essa tarefa, como é fácil para eles para navegar pelo seu aplicativo e saber como é fácil para eles lerem o texto você está tentando mostrar nessa página específica. 76. Escala da fonte: Quando você está criando para a web ou para aplicativos móveis, você quer ter uma escala consistente em seus tamanhos e espessuras de fonte. E isso pode ser feito com uma escala de fonte. Você pode criar uma escala de fonte, então será muito mais fácil para os desenvolvedores entenderem posteriormente que tipo de tamanho de fonte serve para quê, e é isso que você pode incluir em seu guia de estilo, apenas para mostrá-los ao lado de cores, junto com suas imagens, seus estilos e muito mais. Então, neste vídeo, vou mostrar como criar uma escala de fonte fácil. Você não precisa usar essa abordagem. Você pode encontrar outras abordagens on-line. Existem literalmente dezenas de abordagens diferentes on-line. Veja qual funciona para você, seu projeto e suas finalidades de escalabilidade. Então, vamos começar. Então, aqui estamos no Adobe XD e vou mostrar como criar uma escala de fonte rápida usando o Adobe XD. Se você estiver usando o Figma Photoshop, tudo o que você pode criar lá. Mas, para isso, vou usar x D porque gosto muito dele e o uso todos os dias. Então, vou clicar em T para criar H1 , por exemplo , então o que vou usar é, digamos, uma garrafa como essa. Em vez do normal, vou escolher , digamos, preto. E eu vou usar o tamanho 80. Muito grande. E esse será meu H1. Talvez, talvez até maior, talvez 88, algo assim. Aí vamos nós. Em seguida, vou pressionar o Controle D ou o Comando D e reduzir isso para talvez algo como 64. Aí está. Em vez de preto, eu vou usar o parafuso. E em vez de H1, vou chamá-lo de H2. Então, o que é criado aqui é uma distinção clara entre Heather, Heather e aqui. é algo que vou usar em minhas imagens de heróis, por exemplo, no centro do próprio design, no centro dessas imagens de heróis. Ao contrário do exemplo que mostrei anteriormente. Mas isso é apenas mais acentuado, maior, mais ousado, preto neste caso, mas este é ousado porque talvez eu queira usá-lo como título de minhas seções, talvez ou algo parecido. Portanto, é negrito e não preto e é 64 88. Portanto, se avançarmos um pouco mais, você pode criar um H3 nesse caso. E em vez de 64, talvez possamos usar 48 neste caso. E em vez de parafuso, na verdade não, vamos deixar isso em negrito. Então, se descermos um pouco, podemos criar algo como H4. E em vez de 48, talvez possamos usar 40, neste caso n. Vamos usar irregular desta vez. Assim, você pode ver claramente a distinção entre eles. Então, se descermos um pouco de H5 e, nesse caso, talvez possamos usar algo, sei lá e, nesse caso, talvez possamos , 24. Talvez, aí vamos nós. Talvez possamos usar isso como texto de parágrafo ou alguns exemplos ou algo parecido, algo um pouco menor e H6, vamos com, não sei, 16 talvez nos meus casos realmente não queiram ir qualquer mais do que 16. Portanto, temos H1, H2, H3, H4, H5 e H6. Talvez você possa renomear esse H6 e chamá-lo de textos de parágrafos. Talvez você possa mostrar algo assim para seus desenvolvedores, ver o que eles pensam. E o que você também pode fazer é pressionar Control D mais uma vez em cada deles e digitar o alfabeto. Então a, a, B, B, B, C, C, D, D , E, e assim por diante. Assim, você pode digitar o alfabeto inteiro e mostrar espessura e o tamanho da fonte neste exemplo específico sobre o alfabeto, ou outra coisa que você pode fazer é usar algo como, Não sei, texto de Lorem Ipsum ou algo parecido. Não tenho o atalho de teclado aqui e não tenho o plug-in instalado aqui. Então, vamos continuar com isso. Então Lorem Ipsum ROC se encontrou, talvez eu possa copiar esse texto e depois fazer o mesmo com este. Basta colá-lo. E o que isso permitirá que você faça é mostrar ao seu cliente e aos desenvolvedores como será a aparência de um determinado texto em casos de uso específicos. Então, digamos que eu comecei propositalmente com essa cor específica. E por que eu escolhi fazer isso é apenas para mostrar as principais diferenças entre este texto. Mas nesse caso em particular, o que eu faria propositalmente é rapidamente mudar essa cor para algo muito, muito, muito mais escuro. E talvez salve-o aqui como uma amostra de cor. Ou posso prosseguir e editar aqui mesmo minhas cores. Então, o que eu posso fazer é. Livre-se desse. Talvez eu possa escolher a mesma cor, mas dê alguns passos até algo assim e escolha que seja de uma cor diferente. O que você pode fazer é dar nomes às suas amostras imediatamente. Então, este é da cor H2. Aí está. Este é H1. E talvez possamos ir ainda mais longe. Desculpe, vamos salvar isso como um H2. Então eu posso voltar e usar o H12 e depois dar um passo adiante, algo assim. Salve isso aqui, salve aqui. Chame isso de h três. Aí vamos nós. E então, finalmente, talvez eu queira escolher algo ainda mais brilhante. Para este, talvez, talvez não, mas tudo depende de você. Talvez algo assim. Aí está. E eu posso dar a ele o nome de H4. Nesse caso em particular, você pode ver que eles são muito parecidos. Mas esse é o objetivo desse vídeo, mas seus clientes talvez tenham a cor principal, digamos que o azul seja a cor principal. Então, neste caso, talvez possamos usar algo como três C6 FF. Então, um azul muito brilhante e forte, talvez essa seja a cor principal deles. Então, como você pode incorporar essa cor em seu design? Obviamente, você não vai usá-lo para isso. Isso é realmente para seções de heróis, outras coisas, que eu já mencionei. Talvez você o use para cada três. Então três é C6, F, F. E como você pode ver imediatamente, parece muito melhor neste exemplo do que neste exemplo. Por que isso? Porque se você usá-lo para obter o maior tamanho de texto que você tem em seu design, isso só vai roubar a atenção do usuário de todo o resto. Isso não é algo que você quer. O texto realmente existe para explicar coisas orientar seus usuários sobre o que eles precisam fazer a seguir e, para realmente ajudá-los, atingir a meta sua visita em seu site ou aplicativo móvel específico. Então, nesse caso, eu usaria cores para texto, algo assim. E eu não o usaria para textos de parágrafos porque, como mencionei anteriormente, você quer que seus parágrafos sejam legíveis. Você quer que eles sejam facilmente compreensíveis e que seus usuários possam navegar facilmente por todo o seu design. Então, uma última coisa que eu esqueci de fazer é salvar essa cor. Nós já o temos. Aí está. Então, H5, eu quero salvá-lo. Aí vamos nós. H5. E vamos usar a mesma cor para o parágrafo em si. E uma última coisa que eu quero fazer é selecionar todos os meus tamanhos de fonte e ir direto aqui para os estilos de caracteres e clicar lá. Então você pode ver que isso vai afirmar algo assim. Mas o que eu posso fazer é usar Control ou Command Z. Clique aqui para salvar este para ser o primeiro. E depois desse jeito e para baixo desse jeito. E apenas suba e suba e suba. Aí vamos nós. E, claro, você pode renomeá-los. Você pode vir aqui e digitar H1. E você pode fazer isso com todos esses outros. Então H2, H3 e assim por diante. Não vou incomodá-lo muito com isso. Mas o objetivo aqui é renomeá-los. Então, como eu disse, é muito mais fácil para os desenvolvedores entenderem mais tarde o que você estava tentando transmitir se você não quiser desenvolver esse design sozinho. Então, lá vamos nós. É por isso que é super fácil de usar. E você pode ver se você errar como eu fiz anteriormente, você pode simplesmente ver todos os k em H1 selecionados aqui. Ou se você acidentalmente alterou a cor, você pode ir em frente e ver, ok é um clique H1 ali, e ele vai usar a cor correspondente. Então você pode ver como isso é super simples. E vou fornecer esse arquivo, que acabei de mostrar como um arquivo prático para que você possa testá-lo. Dê uma olhada, explore por si mesmo, talvez brincando com essas cores diferentes que acabaram de ser mostradas, ou talvez famílias de fontes totalmente diferentes. Então, usamos o Roboto neste caso específico, talvez você queira usar algo com uma superfície interna, como a fonte de exibição Playfair, que mencionei anteriormente, ou você queira ir ainda mais ousado do que Robô? Você pode fazer isso da maneira certa. Ali. Aí vamos nós. Essas são as escalas de fonte, e é assim que as usamos. Como eu disse, você terá esse arquivo de prática, certifique-se de explorá-lo, certifique-se de brincar para obter um resultado perfeito. Ou se você não gosta dessa abordagem de oito pixels, como eu disse no início deste vídeo, você tem vários desses exemplos diferentes on-line. Certifique-se de explorá-los por si mesmo e ver o que funciona melhor para você. 77. SECÇÃO 9: Sua tarefa para esta seção é usar uma dessas diferentes ferramentas que mostrei nesta seção. E tente emparelhar fontes diferentes e tente ver se elas funcionam juntas? Se sim, por que trabalham juntos? Qual deles funciona melhor para os títulos? Qual deles funciona melhor para parágrafos, por exemplo, e tentei experimentar cores diferentes usando uma dessas ferramentas que acabei de mostrar. E tente entender qual combinação de cores, qual tipo de combinação divertida você realmente gosta mais. Talvez até experimente tamanhos diferentes e veja qual tamanho causa o melhor impacto para você como espectador. E, obviamente, isso causará o mesmo impacto para seus usuários. Então, experimente, divirta-se e aprenda algo novo. 78. SECÇÃO 10 Iconografia: Como recursos de design, os ícones são extremamente importantes porque a imagem conta 1.000 palavras e os ícones existem para provar que, certo, você pode usar ícones diferentes para contar uma história melhor, em vez de apenas usar um monte dos textos, você pode substituir todos os textos por um ícone simples, que contará uma história melhor do que todo aquele texto que ninguém vai ler, afinal. Então, os ícones são incrivelmente importantes, mas que tipo de estilo você vai usar? Como emparelhar ícones diferentes, onde encontrar ícones? É sobre isso que vamos falar nesta seção. 79. O que são ícones: Ícones são elementos gráficos usados em seus designs para ajudar os usuários a entender melhor seus designs. Eles estão lá apenas para corresponder melhor ao texto ou às imagens. Ao usar ícones, certifique-se não exagerar, pois o objetivo principal dos ícones é ajudar seu outro conteúdo, não a soldagem oral. O que isso significa basicamente é que, quando você estiver usando ícones, certifique-se de usá-los em lugares específicos onde isso faça sentido. Certifique-se de que, quando você tiver vários espaços em seus designs e um espaço enorme em seus designs, não use ícones, pois dessa forma as imagens ficarão muito melhores em seus designs. Os ícones também são usados para explicar aos usuários o que eles precisam fazer um pouco melhor. O que quero dizer com isso é se você simplesmente não consegue usar imagens, se simplesmente não consegue encontrar imagens que expliquem situações complexas. Bem, se não podemos usar o vídeo em determinados lugares , os ícones são uma maneira muito melhor de fazer isso, porque você sempre pode incluir vários ícones para explicar vários tópicos em um único espaço. E é por isso que os ícones são uma ótima abordagem e uma ótima maneira de usar em seus designs. Os ícones podem ser simples ou complexos. Eles podem ser coloridos ou em preto e branco. E falaremos sobre todas as classificações nos próximos vídeos, onde encontrar as diferenças entre os diferentes ícones e como usar seus ícones corretamente. 80. Diferentes tipos de ícones: Há muitos tipos diferentes de ícones. E dependendo do motivo pelo qual você os está usando, você vai usar um certo tipo de ícone onde aquele contorno preenchido com cores. E há várias maneiras de usar ícones, que discutiremos mais adiante nesta aula. Mas também existem várias categorias. Então, aqui eu tenho ícones de materiais, e você pode ver isso aqui na parte superior que descrevemos. E você pode ver todos esses ícones delineados. Você pode ver que a premissa básica dos ícones de contorno, mas não para todos os ícones, especialmente para esse coração que você pode ver aqui é ter espaço vazio dentro deles e depois ter o contorno fora do ícone. Se eu voltar para o campo, você pode ver a aparência de todos eles. Mas, mais uma vez, você pode ver com uma pesquisa, por exemplo simplesmente não faz sentido que alguns ícones sejam preenchidos completamente. Porque se sentirmos completamente esse ícone de pesquisa , ele perderá seu propósito. Vai desaparecer. Esse espaço em branco intermediário para esse logout, o mesmo para esta fase, o mesmo para essa borda favorita. Da mesma forma, se escolhermos o arredondado, basicamente, ele mostrará apenas os cantos arredondados desses ícones. Se escolhermos afiada, ela vai te mostrar as bordas afiadas. E basicamente, todos esses ícones são perfeitos em pixels porque a maioria deles é SVG. E discutiremos isso um pouco mais tarde na parte dessa aula sobre Adobe XD. Quando vou explicar diferentes formatos de arquivo e como você pode trabalhar com diferentes formatos de arquivo. E, finalmente, temos que virar aqui à direita para que o tom, como o nome sugere, tenha todos esses contornos, tudo isso preenchido em cores. Mas também mostra esse design de dois tons, basicamente uma cor, um tom é para o contorno neste caso e um tom e uma cor são para a linha desta caixa. Mais uma vez, dependendo de quais ícones você está usando , qual finalidade será exibida de forma diferente. E se eu te mostrar aqui neste exemplo, este é o pacote premium da Envato Elements, que você pode ver aqui no ícone colorido. Se eu clicar aqui para ampliar esta imagem e mostrar a diferença. Então, esses são os ícones coloridos e esses são o ícone do contorno. Assim, você pode ver imediatamente a diferença entre esses ícones, basicamente no esboço, o mesmo que eu mostrei aqui nesta versão gratuita dos ícones de materiais do Google. A propósito, todos esses recursos que mencionei serão vinculados em um PDF. Certifique-se de baixar esse PDF e explorar todos esses links e acessá-los você mesmo, basta clicar no link desejado. N vai te levar até lá no seu navegador. Se voltarmos aqui, como eu disse, temos esses ícones delineados e esses ícones delineados aqui. A diferença entre esses dois é obviamente a espessura e o estilo. Então, se eu levar você de volta aqui para os ícones de materiais, você pode ver que eles são extremamente simples. Eles são muito simples de usar. Mas se eu levar você aqui para ver esses ícones de viagens, você pode ver que eles são muito mais complexos. Eles têm elementos mais ricos por dentro. Eles têm tez múltipla, até mesmo traços diferentes. Então, eles são muito complexos. Se você quiser fazer coisas assim. Mais uma vez, dependendo do projeto em questão, você usará esses ícones mais simples ou complexos. E, finalmente, se eu levar você a esses ícones coloridos, você pode ver que ainda temos todos esses traços, mas agora temos cores e, com ícones coloridos, você notará às vezes que eles estão usando uma cor ou, como neste caso, eles estão usando várias cores. Então você pode ver que temos verde, vermelho, temos esse cinza escuro, temos esse cinza claro e temos essa cor quase branca. Também temos essa cor azul-petróleo, temos essa cor amarela, vermelha. Então, dependendo do projeto em questão e do que você está fazendo com seus ícones, você escolherá um desses estilos, qualquer um deles, que eu mostrei aqui com os ícones de material. Estilos muito simples. Ou, se você estiver atrás desses estilos complexos mais uma vez, poderá escolher entre contorno ou com cores. E, claro, como uso o Envato Elements há anos, sei que todos esses ícones são realmente de alta qualidade, então você pode ajustar todas essas cores. Então, por exemplo, eu quero usar as cores da minha marca. Digamos que seu cliente tenha duas cores, por exemplo, azul e vermelho. Então, se voltarmos a essas, você pode ajustar todas essas cores. Então, em vez de amarelo em vez de verde em vez de tudo isso, digamos que você esteja usando azul e vermelho. Você pode facilmente alcançar esse resultado simplesmente ajustando essas cores na ferramenta de sua escolha. Para esta aula, estamos usando o Adobe XD. Também vou mostrar isso um pouco mais tarde e como você pode ajustar alguns desses ícones para combinar com sua marca. Mas essa é toda a premissa desses ícones coloridos. Então, mais uma vez, dependendo do que você está fazendo, que tipo de projeto você está trabalhando, complexo do seu projeto, o que você está tentando descrever para os visitantes dela em usuários? É algo realmente simples? Em seguida, você vai usar esses ícones de materiais gratuitos. O que você pode até mesmo usar ícones premium que são tão simples quanto os ícones de material. Ou, por outro lado, você vai usar algo muito mais complexo, como esses ícones premium que mostrei da Envato Elements. 81. Bibliotecas, pacotes e formatos de arquivo: Dependendo do que você vai usar seus ícones, você escolherá a biblioteca de ícones ou o pacote de ícones. A diferença é que, nas bibliotecas às vezes existem milhares de ícones diferentes, como os ícones de materiais que mostrei a você. E não é realmente viável baixar a biblioteca inteira porque, como eu disse, às vezes essas bibliotecas podem ter até 10.000, 15 ou 20.000 ícones diferentes. Então, baixar e classificar todos esses ícones é muito difícil. Depois, você pode usar algo chamado Icon jar, que infelizmente não funciona no Windows, mas funciona no Mac. Portanto, se você estiver usando Mac, poderá usar o icon jar com muita facilidade. Navegue por esses pacotes diferentes. A maioria desses pacotes é premium, então você terá que pagar por eles. Mas se você estiver usando algo como ícones de materiais , você pode usá-lo gratuitamente. E abordaremos o conceito gratuito versus premium um pouco mais tarde nesta aula. Mas, por enquanto, deixe-me explicar rapidamente esses diferentes tipos e formatos de arquivo. Então, se eu levar você aqui para o Adobe X d, este é o meu bate-papo, um kit de interface do usuário, e você pode obtê-lo, o link estará no PDF, se quiser, mas não é obrigatório. Estou apenas mostrando aqui como exemplo. Então, o que temos aqui é um kit de interface de usuário, mas você pode imaginar que é como um projeto no qual você trabalhará para seu cliente. E vamos imaginar que você vai usar alguns ícones. Então, onde você pode encontrar esses ícones? Web, como eu te mostrei. Você pode encontrá-los on-line nesses recursos premium e sites premium, como o Envato Elements. E, na verdade, vou abrir isso de volta em um segundo só para te mostrar. Mas se eu voltar ao XD, você também pode encontrar esse menu de plug-ins aqui e usar algo chamado ícones para design, por exemplo, existem muitos plug-ins diferentes e você pode clicar aqui para acesse o menu de plugins. E então você pode simplesmente pesquisar ícones aqui, pressionar Enter ou Return. E vai te mostrar todos esses diferentes pacotes de ícones. Esteja avisado de que a maioria deles tem versões gratuitas. Portanto, nem todos os ícones são gratuitos. Eles só têm algumas versões gratuitas e ícones gratuitos que você pode usar. Porque a maioria delas são bibliotecas de ícones, como mencionei. Então, eles oferecem a opção de usar um ícone gratuito. Então, se você instalar um desses plug-ins, esteja avisado de que ele mostrará todos esses ícones e você pensará que, sim, todos eles são gratuitos, isso é ótimo. Mas, na verdade, não são. Eles estão apenas oferecendo algumas opções gratuitas, mas para a maioria dos ícones, você terá que pagar. Então, se voltarmos aqui, se você instalar esse plugin de ícones para design, ele funcionará no momento da gravação dessa classe, mas certifique-se de entender isso. Não é minha capacidade garantir que todos esses plug-ins funcionem o tempo todo. Porque assim como o software, assim como tudo na vida vem e vai. Portanto, certifique-se de navegar nesses plug-ins se estiver usando o Adobe XD, verifique a voz do usuário e confira o blog oficial do Adobe XD apenas para ver quando eles atualizam essas coisas, especialmente para os ícones. Porque, como eu disse, às vezes esses plugins vêm e vão. Os desenvolvedores ficam entediados e não os atualizam por meses, então eles não funcionam corretamente. E certifique-se de entender se você está seguindo esse caminho usando esses plug-ins no Adobe XD, certifique-se de se familiarizar se o plug-in realmente funciona. E se você tiver a opção de usar esses ícones em seus projetos premium ou gratuitos, o que é muito importante porque às vezes esses ícones podem ser usados para projetos pré-gratuitos, mas às vezes podem também pode ser usado para projetos pré e premium. Portanto, certifique-se de se familiarizar com a opção que eles estão oferecendo a você. Se você estiver usando uma ferramenta como o Envato Elements, por exemplo, eles oferecem a opção de usar esses ativos da maneira que quiser. E se voltarmos aos elementos do Envato aqui, você terá a opção de usar todos eles. Portanto, a partir de vídeos, músicas, efeitos sonoros, modelos gráficos, kits de interface do usuário, fotos, modelos da web , modelos 3D e ícones, por exemplo, você tem a opção de usá-los todos como quiser, quando quiser você quiser em projeto que você quiser. Mas é claro que é premium, então você terá que pagar por isso. Apenas certifique-se de entender se você está usando software livre, plug-in gratuito, ícone gratuito. Certifique-se de ver a licença no site deles. Ou se o plugin tiver um site, certifique-se de se familiarizar porque a última coisa que você quer fazer e ter em sua vida é a ação judicial de outra pessoa que criou esse ativo. Você está apenas pensando, ótimo, tudo isso é gratuito, mas na maioria dos casos, grande maioria dos casos, não é gratuito. Você terá que pagar por pelo menos alguns desses plug-ins que mostrei que têm versão gratuita, mas não são totalmente gratuitos. Então, mais uma vez, antes de prosseguirmos, certifique-se de usar o que estiver usando para se familiarizar. Se você está usando apenas material, tudo bem porque ele é de código aberto, criado pelo Google, da mesma forma que o Google Fonts. É gratuito e você pode usá-lo como quiser. Então, se voltarmos aqui, como eu disse, temos esse ícone de design. E se eu tenho algo como coração digitado aqui, o que você pode ver aqui é todas essas são bibliotecas de ícones, então está retirando ícones gratuitos de bibliotecas de ícones de antipatia. Então esse é o problema imediato. Esse é o problema que mencionei no primeiro vídeo desta aula sobre a constante mudança de estilos. Porque esse é o principal problema que estou vendo em ser designer. Eles simplesmente não entendem. Eles estão usando um ícone de uma biblioteca reversa, outro ícone de outra biblioteca do Packer. E eles simplesmente não têm a consistência e seus designs. Um look não polido, nem um resumo profissional, parece amador. E você pode realmente dizer, não apenas como designer, mas também como cliente, quem não é designer. Mais uma vez, certifique-se de que, se você os estiver usando certifique-se de se familiarizar e usar todos eles o mesmo estilo e com a mesma aparência. Porque, mais uma vez, isso fará com que seus designs não pareçam profissionais nem polidos. Como você pode ver neste pacote de ícones de penas, por exemplo, temos apenas um ícone. Mas a partir desses ícones incríveis, temos vários ícones, mas, mais uma vez, não, não no mesmo estilo. Por exemplo, quero os ícones de contorno porque eles funcionarão bem com meu projeto. Mas você não consegue encontrar esse estilo aqui. Para icônicos, você pode encontrar estilos diferentes. Mas e se você estiver pesquisando em outro ícone e não o tiver no icon. Por exemplo, eu quero usar esse coração vazio do iOS, por exemplo, let's delivery. Talvez eu esteja trabalhando em um site de entrega. Você pode ver que não há um único ícone na parte de trás. Então, isso é um problema imediato. Se você deseja obter consistência e fazer com que seus designs pareçam profissionais e polidos. Então, o que você pode fazer nesse caso é localizar uma biblioteca que tenha a maioria desses ícones e usá-los gratuitamente se estiver começando. Mas se você já começou e tem alguma força, eu realmente não posso recomendar serviços suficientes que paguem e tenham todos esses ícones disponíveis para você. na ponta dos dedos a qualquer momento. Agora vou te mostrar o pacote premium. Essa é a grande constante que recebi de, UH, é um pacote premium. Mas se eu ampliar um pouco mais, você pode ver que todos esses ícones estão nesse estilo. Então, estilo de contorno, não há estilo preenchido, não há nada mais. Estilo apenas delineado, o que é ótimo se você estiver usando esse estilo em todo o projeto. Então, porque isso aconteceu, eu acho que algo como 240 ou 2.400, na verdade. Amplie um pouco. Sim, acho que é 22400 porque temos todos esses pacotes diferentes e eu simplesmente os desagruparia assim. Mas eu posso navegar on-line e ver, mas acho que são 2.400 ícones diferentes. Então, você pode imaginar que eles têm o ícone para cada ocasião possível. E se você estiver usando esse estilo exato, poderá usá-lo em todos seus projetos, em todo o seu design. Apenas certifique-se de usar esse estilo exato para obter essa consistência e essa aparência profissional. E você pode fazer isso porque todos esses ícones têm a mesma aparência. Porque eles são criados pela mesma equipe de pessoas. Você pode ver que todos eles têm a mesma aparência. Eles parecem pertencer um ao outro na especificação e você pode personalizá-los facilmente. Você pode mudar a cor, você pode mudar esse contorno, fazer o que quiser com eles. Você pode ver, por exemplo alterar essa cor e alterar a espessura da borda se abri-la no formato de arquivo do Adobe Illustrator. E acho que esse é o melhor momento para falar sobre formatos de arquivo. Então, basicamente, os formatos de arquivo são muito importantes, dependendo do projeto com o qual você está trabalhando. Se você estiver trabalhando com imagens JPEG, você não tem a opção de transparência. O que isso significa basicamente é qualquer cor de fundo da sua imagem JPEG que ela mostrará. Você não pode usar esse ícone. Você não pode alterar sua cor sem alterar a curvatura geral da imagem. Então, basicamente, é apenas uma imagem embutida. É uma imagem de bitmap. Então, quando você amplia muito de perto, ela perderá sua qualidade dramaticamente. Portanto, você não pode realmente usá-lo para projetos de páginas da web, para nossos projetos de páginas, onde você precisa obter escalabilidade. Você certamente não pode usá-lo para imprimir, porque assim que começar a imprimir, especialmente em impressões maiores, você verá uma perda de qualidade. Há também P e G, que são basicamente apenas uma imagem de bitmap como o JPEG, mas com transparência. Então, com o JPEG, você tem a imagem de fundo embutida e não tem nenhuma transparência. Com o PNG, você tem transparência. Mas, mais uma vez, por se tratar de uma imagem de bitmap, ainda nos deparamos com esse problema de perda de qualidade. Então, assim que você começar a ampliar, você verá essa perda de qualidade. Então, para algo como impressões grandes, é realmente proibido usar um PNG. Então, o que você pode fazer nesse caso é que eu realmente recomendo que todos os seus projetos trabalhem com imagens SVG. O que isso basicamente significa, se eu voltar aqui, se eu ampliar muito de perto esse ícone, você não poderá ver nenhum pixel. Então, se eu levar você de volta mais uma vez porque eu o baixei para este exemplo em particular. Então, se eu voltar para o Adobe XD, clique aqui no seu computador, abra o BSD ou o AI. Porque o Adobe XD é um produto da Adobe. E porque o Adobe Illustrator e o Adobe Photoshop, que é essa coisa, são basicamente produtos da Adobe. Assim, você pode abrir facilmente qualquer um desses formatos de arquivo. E isso vai manter a consistência vai manter a qualidade. Porque, mais uma vez, é o produto da mesma empresa. Então, se voltarmos aqui, PSD ou o AI abrirão em uma pasta com esses ícones específicos elementos do Envato. Então, esses são ícones de viagens. E o que temos aqui é ai para Adobe Illustrator, EPS, que também é outro formato de arquivo que mantém a consistência. É um formato de arquivo vetorial como o Adobe Illustrator, como o SVG. Então, isso manterá a qualidade. Mas, infelizmente, o EPS não é compatível com o Adobe XD. Então, todos esses ícones são exatamente iguais, mas nesses diferentes formatos de arquivo, o que temos abaixo é o ícone jar, que mencionei anteriormente. Então, se você estiver usando Mac, você sempre pode abrir o jarro de ícones e adicioná-los à sua coleção. Nós temos o PNG e eu não estou totalmente contra o PNG. Você ainda pode usar ícones PNG e imagens JPEG se quiser, por exemplo, em postagens de mídia social, porque elas não exigem uma resolução tão boa. Portanto, você ainda pode usar imagens PNG, se essa for a única coisa que você tem. Mas para qualquer coisa maior, por exemplo , impressão, ou especialmente para algo que as pessoas possam ampliar de perto, como páginas da web, projetos da web e aplicativos móveis é realmente recomendável que você use algo como SVG. Se voltarmos aqui, agora temos a diferença SVG entre eles e você verá isso na maioria dos outros pacotes de ícones e tipos de ícones. É isso que quando você está usando SVG, isso vai separar esses SVG na maioria dos casos. E vai mostrar ícones separados. Então, se voltarmos aqui, você pode ver que explicamos e não explicamos, que é basicamente a quantidade de detalhes. Então, se formos até aqui, temos cores e contornos como eu te mostrei. E não mostra nada porque você precisa abrir o SVG diretamente da pasta, mas eles estão lá. Isso vai mostrá-los basicamente como esses PNGs. Então, espero que apareça aqui. Então, deixe-me ver se consigo mudar isso. Agora, porque abrimos isso como PSD e IA, mas isso não importa. Posso mostrar isso se eu os abrir em uma pasta como essa ou expandir a cor. Então, esses são os ícones SVG. Isso é o que eu estava mencionando, vou mostrá-los individualmente. Então você ainda pode arrastar e soltar esses ícones SVG daqui, que eu vou mostrar em apenas um segundo. Mas voltando a isso, o que eu faria nesses casos é usar a IA, porque a IA ou o Adobe Illustrator são formato de arquivo vetorial e nunca perderão qualidade. Você pode usá-lo para qualquer tipo de projeto em que esteja trabalhando. Você pode usá-lo para tamanhos pequenos e grandes. Sempre manterá a consistência da qualidade e dos detalhes desses ícones. Então, se voltarmos aqui para o que temos, teremos expansão de cor e cor, que neste caso específico desse pacote em particular, é apenas a quantidade de detalhes e a riqueza dos detalhes. Mas em alguns outros pacotes, você não verá que temos viagens e viagens se expandem. Então, basicamente, viajar é sem cor, cor percorrida é com cor. Então, vamos abrir, por exemplo, cores de viagem, porque eu quero mostrar como você pode mudar essas cores. E enquanto isso se abre, deixe-me minimizar isso e trazer de volta isso. Porque eu só quero mostrar que você ainda pode, esses são SVG. Você pode clicar, arrastá-los e soltá-los em seu arquivo Adobe XD. E se eu ampliar muito, muito de perto, você pode ver que não temos nenhuma perda de detalhes. Temos todos esses detalhes contidos dentro desse ícone. E se eu voltar para esse pacote de ícones que acabei de abrir, você pode ver como fica. Então, deixe-me realmente excluir este. Eu posso voltar para aqui. Deixe-me mostrar isso rapidamente , apenas para que você possa ver como fica. Então, se eu abri-lo e pressionar Control Zero para encaixá-lo, amplie bem de perto. Assim, você pode ver todas essas diferentes sombras. Você pode ver que a qualidade é realmente excelente. Então, se voltarmos e selecionarmos, por exemplo , eu não sei, vamos com este. Pressione Control C. Volte aqui, controle V para colar em qualquer quadro de arte que você selecionou e você pode simplesmente movê-lo para o lugar certo. Agora, porque eu já tenho algumas cores pré-preparadas aqui. Se eu quiser ajustar esse ícone para funcionar com meu estilo, o que eu faria é simplesmente, por exemplo, selecioná-lo. Você pode segurar a tecla Control e clicar dentro dela. E temos a fronteira aqui. Se selecionarmos essa borda, você pode ver que ela mudou e atualizou para essa cor. E, por exemplo, eu quero fazer o mesmo com este. Talvez eu possa fazer aqui. E nós temos isso aqui. Assim, você pode ver e ter uma ideia de como vai adaptá-los para funcionar com seu projeto, por exemplo, esse será um azul claro. E eu vou usar essa cor para trabalhar com isso. E talvez eu tenha essa laranja, talvez eu queira usá-la aqui para essas. Talvez eu queira usar isso para ser, sei lá, branco também. Nós temos a fronteira, então. Vamos com este. E para este vermelho, vamos usar este para que você tenha uma ideia de como isso é fácil de ajustar. E somos apenas alguns cliques. Você pode ajustar facilmente esses ícones para combinar com seu estilo. Claro, isso é com os ícones coloridos, então você pode ver como está agora. Então, se levarmos você de volta para como era antes e como é agora. Assim, você pode ver uma mudança completa. E se eu levar você aqui para as camadas, você pode ver todas essas camadas. Agora, o que eu quero te mostrar também é isso. Então, se você estiver usando esses ícones como contornos. Então, se eu voltar aqui, expandir a cor, delineamos e vamos com o elevador, que é o mesmo ícone. Se ampliarmos totalmente, você pode ver que não temos nenhuma cor por dentro. Nós só temos esse esboço. Então, se eu quiser mudar isso, o que farei é simplesmente clicar aqui e você pode ver que ele atualiza em tempo real de acordo com minhas cores, que eu preciso. Então, essa é a opção que você tem ao usar esses ícones premium. E, finalmente, o que eu quero compartilhar com você é a exportação real dos próprios ícones. Então, às vezes você vai exportar esses ícones para desenvolvedores se eles não estiverem usando plug-ins, se aparecerem usando opções do Bridge, como o Zeplin, e eles não as estiverem usando. Eles são uma ferramenta para você exportar ícones manualmente, para que eles os usem em determinados casos. Então você também pode fazer isso no Adobe XD. E para oferecer essas opções de exportação, vamos voltar aqui e selecionar o ícone que já temos aqui. Então, eu tenho esses vários ícones aqui. Então, se eu selecionar este, clicar nele e ir para o painel Camadas, você pode ver o ícone do Perfil. Então, se eu quiser apenas selecionar uma exportação, essa, o que eu faria é pressionar Control ou Command E. Isso me mostrará esse diálogo. Então, mais uma vez, lembre-se do que falamos há um minuto sobre esses formatos de arquivo. Então, se eu voltar aqui, o que temos é P e G. Então, como eu disse, PNG é ótimo para mídias sociais e, na minha opinião, opinião honesta, nada mais. Você pode clicar aqui para escolher SVG, o que é ótimo. Mais uma vez, se você quiser exportá-lo para qualquer coisa de alta qualidade que exija qualidade. Portanto, certifique-se de fazer isso. Também temos PDF. O PDF é ótimo para exportar se você tiver, por exemplo , um guia de estilo com vários ícones dentro e quiser apenas exportar esse guia de estilo para que seu cliente finalize a compra e veja se isso é algo que ele querer. É ótimo para painéis de humor, por exemplo, que eles possam imprimir o PDF e depois fazer algumas anotações, talvez digitalizá-lo e enviá-lo de volta para você. Portanto, dependendo do caso de uso, PDF pode ser realmente útil. E, finalmente, temos o JPEG. Jpeg é muito útil se você quiser apenas enviá-lo ao seu cliente para análise, apenas para ver se esse ícone é o que eles realmente precisam. Se esse ícone for algo que eles gostem. Então, talvez você use esse JPEG, mas para desenvolvedores, para desenvolvimento, para fins de desenvolvimento, eu sempre, sempre, sempre recomendaria ícones SVG. Então, isso é basicamente tudo para ícones. Eu realmente espero que você entenda a ideia e espero ter uma ideia de como usá-los. Diferenças entre pacotes, pacotes premium e pacotes gratuitos. Vamos discutir isso em um momento em um vídeo separado desta aula, porque acho muito importante, especialmente para designers iniciantes, o que usar e onde usá-lo para qual tipo de projetos. Apenas certifique-se de usá-lo de acordo com a licença. Então, se você pode usá-los para pré-projetos e maioria dos ícones existentes pode ser usada para pré-projetos, especialmente se você estiver trabalhando apenas para si mesmo, apenas para fins de apresentação no Behance ou drible, por exemplo, dívidas. Quase sempre está bem. Mas só para ter certeza, verifique com o criador em seu site apenas para ver se você tem a licença apropriada. 82. Ícones gratuitos do VS: Além do preço, obviamente a diferença entre ícones gratuitos e premium está na variedade e nas vantagens. Então, com ícones gratuitos, como mostrei no plug-in do vídeo anterior, às vezes você terá apenas uma variedade de dois, talvez três ícones, mas com ícones premium. À luz dos casos, você terá centenas de opções diferentes para escolher. Portanto, dependendo dos seus projetos, às vezes esses três ícones podem não funcionar corretamente. E o mais importante, se você continuar usando ícones gratuitos, o que é bom no começo se você está apenas começando neste negócio. Mas assim que você ganhar algum dinheiro, assim que tiver alguma força, é sempre recomendável usar ícones premium pois isso o diferenciará dos iniciantes. E isso vai mostrar aos seus clientes que você se importa, porque você vai dar aos seus designs essa nota profissional e vai dar a eles uma distinção entre todos esses outros. designs no mercado. Como mencionei, gosto muito de usar elementos do Envato porque nos elementos do Envato você tem todas essas opções diferentes. E acabei de te mostrar a ponta do iceberg. E se eu mostrar, por exemplo, usamos esses ícones e eles são do Just Icon, o que é uma ótima opção no Envato Elements. Você pode ver que essa pessoa criou esses ícones e pode simplesmente clicar aqui para encontrar exatamente o mesmo estilo dos ícones que estamos usando. Então, se formos aqui, você pode ver que eles têm mais de 1.000 ativos diferentes. Então, se eu clicar em modelos gráficos demais e descer até aqui. Agora, se voltarmos aos gráficos e rolarmos para baixo, você pode ver que temos esses ícones exatamente no mesmo estilo. Então, se a consistência é algo que você gosta, você sempre pode navegar por esses pacotes diferentes aqui mesmo no Envato, elementos do mesmo Criador e da maioria desses criadores estão simplesmente quebrando esses pacotes de uma parte traseira enorme e gigantesca. Assim, é muito mais fácil para você , como consumidor, acessar esses pinos. E, mais uma vez, você não precisa usar os elementos do Envato, são realmente parecidos, porque são todas essas coisas nos elementos do Envato que mencionei de gráficos a fotos, vídeos e fontes, para músicas, para qualquer outra coisa que você possa precisar. Mas essa aula tem tudo a ver com o ícone, então é isso que estou mencionando aqui. Bom. Imagine que, por exemplo, eu estava usando Eu me lembro de algo como dois anos atrás ou algo parecido. E eu estou usando isso há mais de cinco anos. Este Envato Elements de você, eu estava usando ícones de um Criador. Não foi esse criador, se esses outros criadores, mas isso não importa. Eu estava usando um ícone para um projeto de hotel que eu estava tendo. E então eu tive um projeto de locadora de carros. E eu também uso o mesmo ícone de criadores dos elementos do Envato para esse projeto em particular, o que me permitiu navegar de forma muito mais simples porque eu estava trabalhando em dois projetos ao mesmo tempo. Então, eu estava vendo ícones de um único criador e eles se encaixavam, disseram os dois projetos. Então, os dois projetos em que eu estava trabalhando ao mesmo tempo tinham ícones do mesmo criador, mas eles parecem completamente diferentes porque em um site eu estava usando ícones coloridos. Em um site, eu estava usando ícones de contorno, mas eles eram do mesmo criador, então foi muito simples para mim acessá-los. Mais uma vez, você não precisa usar os elementos do Envato apenas pelo serviço que você deseja, existem milhares de serviços diferentes disponíveis. Gosto muito de usá-los porque como mencionei várias vezes, gosto muito de como você tem todas essas coisas aqui, porque não existe um projeto que não funcione. exigem que você use fotos, use fontes diferentes. E por falar em fontes, é a mesma história com fontes, imagens e ícones, quando você está usando coisas premium. Então, ícones, fontes e imagens premium realmente farão com que seu design pareça polido e profissional. E isso vai realmente fazer com que ele se destaque da multidão. E, na verdade, também atrairá cliques, links ou inscrições para seus clientes, porque parecerá muito mais sofisticado e profissional do que a concorrência, porque a maioria dos a concorrência, especialmente para empresas menores, está usando sites como o Unsplash ou usando sites como ícones de materiais para ícones. E todos eles têm basicamente a mesma aparência. Portanto, todos os designers que estão trabalhando nesses sites têm exatamente a mesma aparência. Portanto, esse é o seu principal benefício e os pontos de diferenciação garantem que, se você puder, assim que possível, começar a usar esses ícones e serviços premium, pacotes premium, apenas para diferenciar você mesmo, da multidão, trará ao seu design aparência muito mais profissional e polida. E sem falar que você não terá problemas porque, como mencionei nos exemplos anteriores, se você estiver usando esses ativos gratuitos on-line, terá problemas se não estiver usando eles corretamente. Portanto, certifique-se de sempre verificar o licenciamento. Então, se rolarmos até aqui e pudermos explorar a licença, clique aqui. Assim, você pode ver uma licença comercial simples, para poder usá-la para o que quiser. Você pode registrar itens sempre que usá-los. Diretrizes claras sobre o que não é permitido. Portanto, você não pode revender, não pode colocá-los em serviços sob demanda, como, não sei, por exemplo, Creative Market UI. Então, basicamente, você não pode pegar o que encontrar aqui e vendê-lo como seu próprio licenciamento e pronto para o futuro, o que significa que, mesmo no futuro, se você cancelar a assinatura do serviço deles, você ainda estará coberto por essa licença, da qual eu realmente gosto. Então, por exemplo, seu cliente descobriu que você está coberto e você ainda tem acesso a todos esses ícones anteriormente. O que isso significa basicamente é que, mais tarde, se você estiver usando um desses softwares e ferramentas gratuitas, provável que haja uma dívida, especialmente com os plug-ins, que mencionei em um dos vídeos anteriores, que eles vão ficar entediados com esse projeto. Eles vão matá-lo e desaparecer. Então, mais tarde, por exemplo, seu cliente liga para você, você trabalhou em um site e usa ícones desse plug-in específico, por exemplo, mas esse plug-in não existe mais, então você não consegue encontrar os ícones que você usou no projeto naquele momento específico. Você não consegue mais encontrar esses ícones. Então, o que você pode fazer? Você está basicamente preso. Você precisa encontrar outros ícones que não sejam iguais a esses ícones. vez, seu design não parecerá profissional, polido e coerente como você fazia antes. Então você precisa encontrar outras maneiras de fazer esse projeto funcionar. É por isso que eu gosto e quais dois elementos, porque, como disse aqui , você sempre pode voltar , baixar, dar uma olhada em seus projetos anteriores e sempre pode baixe mais esses ícones. Então, mais uma vez, se seu cliente quiser que você trabalhe em páginas futuras, telas futuras para seu aplicativo móvel, apresentações futuras, slides, qualquer coisa em que você esteja trabalhando no futuro, por exemplo, eles estão apenas lançando. Você sempre pode voltar para o Envato Elements, sempre voltar para aquela categoria específica, aquele projeto específico em que você está trabalhando, pegar esses ícones e continuar no mesmo estilo, usando os mesmos ícones, usando o mesmo serviço, usando o mesmo licenciamento de antes, basta continuar trabalhando nesse projeto. Como eu disse, é disso que eu realmente gosto nesses serviços premium. E com serviços gratuitos, você não entende. A ressalva aqui é com ícones de materiais, você entende. Então, como são ícones de código aberto gratuitos, você pode usá-los o tempo todo. Mas todos nós sabemos como o Google está com seus produtos. Portanto, ninguém garante que eles não vão simplesmente matar os ícones do Material Design em algum momento. Então, o que você pode fazer nesse momento? Mais uma vez, não estou usando esse vídeo e essa aula para pressionar você a comprar nada. Depende totalmente de você. Você pode fazer o que quiser com sua carreira. Eu realmente não estou insistindo na minha opinião sobre você. Estou apenas contando como seus designs foram assistidos e vistos por alguém que está fazendo isso há quase duas décadas. Eu contratei e demiti muitos designers em minha carreira para empresas e para meu próprio negócio. E eu realmente posso dizer muita facilidade se alguém estava usando recursos gratuitos, especialmente com ícones, mas também com fontes, imagens ou se estava usando recursos premium. E você pode realmente dizer a diferença entre designs polidos e amadores. Então, tenha isso em mente. Mais uma vez, não estou pressionando você a comprar nada. Você pode fazer o que quiser com sua carreira, com sua vida. Então, mais uma vez, sem pressão para mim. Só estou dizendo que parecerá muito mais profissional e sofisticado se você estiver usando recursos premium do que gratuitos. 83. Dicas para os melhores resultados: Neste vídeo, vou dar algumas dicas para obter melhores resultados, na minha opinião. E isso realmente vai diferenciá-lo da concorrência, de outros designers. E isso realmente diferenciará seus designs de outros designers não profissionais. Então, o número um é que estou lendo aqui da lista. É muito mais simples para mim. Use ícones exclusivos. Esses ícones exclusivos são os que mencionei aqui nos elementos do Envato. Então, não vou voltar mais uma vez, mas usar ícones exclusivos porque isso vai diferenciar você como designer e seu design vai diferenciar seu cliente da multidão. E isso vai realmente ajudar você a contar uma história melhor. Porque quando você usa ícones exclusivos, isso realmente ajudará a marca de seus clientes a se destacar , porque realmente associará esses ícones a essa marca com muito mais clareza. E isso fará com que ele se destaque da multidão com muito mais clareza. O número dois é ter certeza de que faz sentido. Portanto, sempre que você estiver usando esses ícones, verifique se eles fazem sentido. Portanto, não coloque ícones em uma página aleatória, em algum lugar aleatório da página e espere que seus usuários entendam isso e vejam o que você está vendo como designer, ninguém é designer , mas você mesmo. Certifique-se de que você sabe, isso garante que seu cliente não é um designer. Caso contrário, eles não contratarão você para ser designer. Portanto, certifique-se de entender onde você está colocando esses ícones. Certifique-se de que faz sentido. Certifique-se de não sobrecarregá-los. Certifique-se de colocar esses ícones em locais onde isso faça sentido. Então, lembre-se mais uma vez, os ícones estão lá para ajudar a facilitar o texto. Portanto, não use muitos textos, mas use um ícone. Ou se não houver espaço suficiente para uma imagem, talvez você possa usar o ícone. Se você estiver usando conjuntos de ícones, se estiver usando linhas de ícones, verifique se isso faz sentido, especialmente se você estiver contando o processo ou uma história. Então, nesses casos, certifique-se de usar ícones, mas, mais uma vez, certifique-se de usá-los quando fizer sentido. O próximo passo é ser consistente. Então, conversamos sobre isso nesta aula. Se você estiver usando o ícone de uma biblioteca ou de um verso, verifique se ele é consistente. Portanto, se for um contorno, certifique-se de que todos os seus ícones estejam delineados. Se estiver preenchido, verifique se esse é o estilo que você está procurando. Se você estiver usando ícones coloridos como eu mostrei no Adobe XD nesse caso específico, certifique-se de usar cores que correspondam bem a essa marca específica. Não se afaste muito dessas cores. Vermelho e verde são bons em alguns casos, especialmente para alertas, para perigos, para trabalhos bem feitos para execução correta, coisas assim. Então você pode usar as cores vermelha e verde, também, talvez a cor azul, se essa for a cor correspondente. E estou planejando criar uma aula de cores ainda este ano. Portanto, certifique-se de verificar novamente e ver isso. Mas, no caso dos ícones , certifique-se de mantê-lo na marca, certifique-se de ver onde você pode usar determinadas cores em seus ícones. Seja moderado, então não exagere. Você pode usar ícones em alguns lugares, mas não enlouqueça e os use em todos os lugares. Porque os clientes simplesmente ficarão confusos. Além disso, quando você está sendo moderado, misture para explicar seus ícones, se necessário. Então, se levarmos você de volta ao Adobe XD, deixe-me levá-lo de volta aqui. Então, o que temos aqui é essa barra de abas e ela não tem nenhum texto abaixo dela, mas eu posso facilmente adicionar o texto para esses ícones, por exemplo, aqui onde diz Talvez, diz, digamos perfil, talvez isso pode ser a França, isso é o Chade, isso é cenário. Portanto, use os textos, os explicadores, mas faz sentido e seja moderado. Como você pode ver, eu só tenho quatro ícones aqui. Então, eu não tenho 60 ícones diferentes. Não tenho duas linhas de ícones. Eu tenho quatro porque isso é realmente suficiente. E eu não preciso usar mais do que isso. Não preciso usar menos do que isso. Está tudo bem. E, finalmente, uma dica final é se divertir porque o processo de design é para ajudar a resolver os problemas de seus clientes, mas também para você, como designer, se divertir. Então, se você está explorando esses novos ícones que acabou de descobrir, talvez esteja realmente empolgado em integrá-los aos projetos de seus clientes. Certifique-se de se divertir o máximo possível, porque isso permitirá que você seja mais criativo, evolua mais no design em si e experimente novas ideias, experimente possíveis soluções que você ensinados, por exemplo não são possíveis apenas alguns momentos atrás. É tudo uma questão de se divertir. É tudo uma questão de se divertir. Portanto, certifique-se de usar esses ícones para se divertir o máximo possível e tentar retratar o fundo que você não tem tentar retratar o fundo que você sobre a usabilidade do design em si. Portanto, se você estiver, por exemplo , criando um processo, certifique-se de usar esses ícones de forma criativa, mas não exagere. Seja moderado. Certifique-se de seguir essas dicas, que mencionei neste vídeo. Certifique-se de permanecer consistente. Certifique-se de usar o mesmo estilo de ícone. Certifique-se de usar o mesmo pacote de ícones o máximo possível e se divertir. Basicamente, essas são todas as dicas para esse vídeo. E mais uma vez, basta usar seu bom senso ao usar esses ícones. Não exagere. Apenas certifique-se de usar o mesmo estilo, ser moderado e se divertir. 84. ATRIBUIÇÃO DA SECÇÃO 10: Sua tarefa para esta seção é apenas escolher uma equipe aleatória. Você pode escolher uma equipe, por exemplo, carros de luxo. E então você pode tentar encontrar os diferentes ícones que se encaixarão nessa equipe. Talvez escolha oito ou dez ícones diferentes e tente emparelhá-los. Tente usar o mesmo estilo. Tente usar a mesma espessura de linha, por exemplo , um raio de borda ou cores de fundo diferentes, qualquer que seja o tipo de estilo de ícone que você realmente vai usar, tente usar exatamente os mesmos tamanhos e tente para ter um ritmo consistente com seus ícones, por exemplo, se este tiver fundo preto, certifique-se de que todos eles tenham o fundo preto. Ou se a espessura da linha for distinta, certifique-se de que todas elas tenham isso, tenham a mesma espessura de prazer. Certifique-se de organizá-los e ver como eles ficam juntos e se ficariam bem nos projetos reais? Então, tente praticar dessa forma. Então, quando você realmente começar um projeto real, será muito mais fácil entender que tipo de prática você precisa usar e onde realmente encontramos os ícones. Isso funciona para você? 85. SECÇÃO 11 Seleção de cores: Selecionar as cores certas pode ser muito difícil para alguns designers, porque você não quer que seus designs pareçam muito chatos, mas também não quer que pareçam muito divertidos. É importante escolher as cores de acordo com seu projeto, acordo com a equipe do seu projeto, acordo com o ritmo, inserir o ritmo do seu projeto, o que seu projeto está tentando fazer transmita para os usuários e muito mais. Então é sobre isso que vamos falar nesta seção. Como escolher as cores certas para seu projeto específico. 86. Por que a cor é importante: Além da tipografia, ritmo, grades e muitos desses outros elementos, cor é um dos elementos mais importantes em cada design. Sem cores, os usuários não saberão para onde ir. Eles não saberão o que fazer e não conseguirão distinguir elementos uns dos outros porque todos os elementos teriam a mesma aparência em preto e branco. Então, neste vídeo, vamos discutir por que a cor é importante e em que você deve pensar ao escolher cores para seus projetos de design de UX de interface do usuário. Isso define o tom do seu projeto. Então, se você está falando forma mais voltada para os negócios para seus espectadores, então você vai usar cores diferentes do que se estivesse falando de uma maneira divertida e amigável. Você sempre tem que pensar sobre isso. Certifique-se de falar com seus clientes, compreendê-los profundamente , entender seu setor, entender o nicho e, portanto, ao escolher cores para esse cliente em particular, certifica-se de definir o tom. Se o tom for comercial, use a pedra comercial, mas certifique-se de seguir esse tom em todo o design. Então, é bom e coerente. Para que seus usuários sempre saibam qual é o tom do seu design, onde quer que estejam, isso determina o modo de visualização. O que quero dizer com isso é que, se as cores forem muito escuras, os espectadores ficarão de certo humor. Se as cores estiverem muito claras, elas estarão em um modo diferente. Se as cores forem muito fortes, talvez elas fiquem fortes em seus olhos. Eles estarão em estados de espírito diferentes. Portanto, preste atenção a tudo isso e entenda qual é o clima que você deseja criar para seus espectadores. Mais uma vez, é brincalhão? É o negócio? É o aprendizado? É o modo de focagem? Com todas essas métricas diferentes, você precisa aprender sobre o humor deles. Portanto, ao escolher a cor, você precisa ter esse humor em mente. Então, por exemplo, se quisermos que eles fiquem calmos e relaxados, vou usar algumas cores da natureza, por exemplo, branco, verde e marrom e algo parecido. Se eu quiser mantê-los animados, se eu quiser que sua energia aumente e mantenha-a alta, então talvez eu queira usar algumas cores fortes como vermelho, azul escuro, verde e algo parecido. Portanto, preste atenção ao humor de seus espectadores pois isso é extremamente importante em qualquer design. Ele enfatiza as ações. Então, por exemplo, se você quiser que eles cliquem em um botão, você escolheria a cor desse botão para se destacar porque quer que eles olhem para esse botão e depois ajam, para clicar nele. Ou se você quiser que eles enviem um formulário, se quisermos que eles deixem seu e-mail, você usará cores para enfatizar as áreas em que deseja que eles cliquem ou ajam. E, claro, dependendo da ação que você deseja que eles tomem, dependendo do setor em que seu cliente é, você escolherá algumas cores e tons diferentes dessas cores, simplesmente guiando os olhos de seus espectadores para aquela ação específica que você deseja que eles realizem. Isso ajuda na legibilidade. Isso é extremamente importante porque visão está realmente prejudicada há quase duas décadas, porque todos nós temos esses dispositivos com telas e a maioria das pessoas tem alguns problemas com seus visão. Portanto, ao planejar, especialmente para parágrafos, especialmente para textos, certifique-se de usar cores que não prejudiquem especialmente para parágrafos, especialmente para textos, certifique-se de usar cores que não os olhos dos espectadores. O que quero dizer com isso é que eles não são muito fortes, mas também, ao mesmo tempo , não são muito fracos, porque se a visão deles estiver fraca , eles não serão capazes de lê-la. As cores são muito fracas e vice-versa, então você tem que encontrar um meio termo feliz. Portanto, sua legibilidade será muito melhor e sua taxa de rejeição será muito menor porque eles ficarão na página por muito mais tempo e lerão o texto e as informações que você coloca em seu design. E, finalmente, ele guia os olhos do usuário. O que quero dizer com isso é que, se você quiser que elas olhem da esquerda para a direita, você pode posicionar estrategicamente suas cores nessa direção para poder guiá-las em seu design. Você pode fazer com que o espectador tenha a experiência que você quer que ele seja. E então, quando olham da esquerda para a direita, podem pesquisar, por exemplo cores mais claras ou cores mais escuras ou algo parecido. Você é o responsável pela experiência do usuário deles. Portanto, converta a experiência do usuário em uma melhor usando cores e navegando por elas pelo design usando cores. Existem muitas teorias e técnicas diferentes para escolher as cores que são importantes para o seu design. Então, esses são apenas alguns que descobri que ao longo dos anos, funcionam melhor para mim e para meus clientes. Portanto, certifique-se de navegar na Internet para obter algumas dicas, truques e misturas adicionais para entender quando você está projetando para manter todas essas coisas em mente. E apenas para criar a melhor experiência de usuário possível para seus usuários usando cores. Na próxima lição, falaremos sobre quais cores existem. Então, eu vou te ver lá. 87. Quais cores existem: Existem muitas cores diferentes, mas ao escolher cores para seu design de UI UX, você precisa pensar basicamente em três cores, que são cor principal, cores secundárias e cores terciárias. A cor principal é a cor geral do seu design. A cor secundária é usada, por exemplo botões ou para links de textos, hiperlinks e algo parecido. E a cor terciária é basicamente a cor de destaque. Agora, isso não é verdade para todos os projetos. Às vezes, você escolhe apenas duas cores, por exemplo, e falaremos sobre isso um pouco mais tarde nesta aula. Mas o importante a observar como designer de UX é que você não usará cores CMYK na maioria dos casos. O que isso significa é ciano, magenta, amarelo e chave. A razão para isso é que essas cores são usadas principalmente para design gráfico e impressão. Como estamos trabalhando na tela, não vamos usar essas cores porque elas não traduzem bem na tela as cores que você vai usar. Na maioria dos casos, seus projetos de design de UX de interface do usuário são códigos hexadecimais e cores RGB. Códigos hexadecimais são uma abreviação de hexadecimal. E, basicamente, isso significa que, no dia 16, não se preocupe muito com isso. É apenas a contagem de pixels dentro da cor, mas lembre-se as cores hexadecimais têm todos esses códigos diferentes. Você usará esse código hexadecimal na maioria dos casos. E, em alguns casos, você também usará cores RGB. Rgb significa vermelho, verde e azul. E também existem outras cores como o HSL, que serve para matiz, saturação e luminosidade. Mas dependendo dos desenvolvedores, dependendo do projeto, dependendo se o cliente já tem suas combinações de cores e cores já criadas para eles, você vai usar suas cores e cores nesse código de cores específico, que eles mencionaram em sua teoria. Então, basicamente, neste vídeo, vou mostrar como tudo isso funciona e como você pode encontrar essas cores. Aqui estamos nos sites da Apple e a maioria de vocês conhece a Apple. Basicamente, eles criam esses dispositivos e gadgets de tecnologia e também têm seu sistema operacional para seus dispositivos móveis e dispositivos desktop. Tudo isso não importa. O que importa é que você pode clicar com o botão direito do mouse em seu navegador e instalar esse plugin chamado color pick, especialmente se você for um usuário do Google Chrome, como eu. Quando você clica lá, ele mostra todas essas cores diferentes que são usadas em toda esta página específica. Agora, essas não são todas as cores da marca. Não vai extrair cores de todas as páginas desse site específico. Mas se você der uma olhada aqui, você pode ver todas essas cores. Assim, você pode ver essa cor rosa-púrpura, por exemplo , neste relógio e nos textos ao redor dele, você pode ver essa cor azul. Talvez seja esse aqui. E se eu rolar para baixo, talvez possamos encontrar essa cor. Aqui está. E se rolarmos mais, você pode ver que essa cor escura do texto é, por exemplo esta e essa. Então, podemos entender facilmente qual é a cor que a marca usou nesta página específica? Mais uma vez, estou mencionando essa página em particular porque se eu mudar para a página do Mac, por exemplo , aqui, elas usarão cores completamente diferentes. Então, vamos voltar para a página inicial e vamos para aqui. Mais uma vez, call it big é totalmente gratuito. Vou vinculá-lo em um PDF e você poderá acessá-lo. Você pode simplesmente instalá-lo em seu navegador. E por que isso importa é que você pode simplesmente experimentar as cores como eu mostrei. Então, basta clicar com o botão direito do mouse na cor e escolher entre os estilos de página. Ele vai pegar essas cores dessa página específica e , em seguida, mostrar todas essas cores aqui. O que você pode ver são valores RGB para cada cor específica. Você pode remover essa cor se quiser e não quiser vê-la aqui. Então, se eu clicar neste relógio aqui, você pode ver que temos cores hexadecimais. Então, se eu mudar para hexadecimal, você pode ver como isso funciona. Então, se eu alternar entre RGB e hexadecimal, você pode ver claramente a diferença. Agora, cores hexadecimais são essas cores, e esse é o código de cores. Vou mostrar isso um pouco mais tarde no Adobe XD. Agora, cada ferramenta disponível tem esses códigos hexadecimais. Então, se você estiver usando Photoshop, XD, sketch, Figma, não importa. Todos eles os têm, e todos eles geralmente têm RGB e alguns deles também têm HSL. Se você mudar para HSL, que é matiz, saturação e luminosidade, você pode ver como isso fica. Então, basicamente, você pode copiar isso, especialmente com códigos hexadecimais. Então, selecione essa cópia com o botão direito do mouse ou controle C, controle V e cole-a em uma ferramenta favorita de sua escolha. E então você pode ter essa cor e trabalhar com essa cor. Isso é especialmente importante se você estiver trabalhando com clientes que já têm seus sites concluídos. Se eles tiverem seus aplicativos concluídos ou algo parecido e não souberem quais cores usam, você pode simplesmente acessar o site como eu deveria mostrar, clique com o botão direito do mouse na cor e escolha entre estilos de página e , em seguida, você pode simplesmente entender quais cores eles usaram em seu design. Isso é importante porque se eles quiserem mudar sua paleta de cores, por exemplo, mais abaixo na linha. Ou, se você precisar ter uma cor específica, poderá usar essa abordagem, copiar essa cor específica e usá-la em seu design. A outra maneira de fazer isso é fazer uma captura de tela do design anterior. Arraste-o para sua ferramenta favorita, no meu caso, Adobe XD, e depois simplesmente extraia uma amostra dessa cor do seu design. Essa não será uma abordagem boa porque você perderá alguns pixels ao fazer essas capturas de tela. E, portanto, essas cores serão um pouco diferentes do que se você usasse essa abordagem porque isso se baseia no estilo da página. Então, se eu voltar atrás mais uma vez, aqui, se eu clicar com o botão direito do mouse na página e ir para Inspecionar, você pode ver que se lermos o código, se formos aqui, você pode ver 1d1df. Então, vamos para aqui, um d1, d1. Assim, você pode ver imediatamente que está sendo extraído do estilo da página, então está extraindo cores diretamente do código. Portanto, não há espaço para erros porque ele está sendo extraído diretamente do código. Agora, você pode estar pensando, sim, mas e essas imagens? Então, vamos tirar essa imagem, por exemplo, clique com o botão direito do mouse em Inspecionar. Aqui estamos e aqui temos essa cor. Então, se eu clicar nele, você pode vê-lo aqui. Você pode estar se perguntando: e se meu cliente não tiver nenhum site existente onde você formará a paleta de cores com base no que falamos anteriormente, com base no que vamos falar? em futuras aulas desta classe. Principalmente do nicho de mercado em que estão, por exemplo, se estão em um setor bancário, se estão no setor de TI, as chances dependem de quem é o público-alvo, do site ou do celular o aplicativo vai falar com. provável que eles escolham cores específicas nesses casos. Certifique-se de explorar a concorrência, ver o que eles estão fazendo e de formar suas cores com base nas necessidades de seu cliente, com base na concorrência, com base no modo de visualização em que você deseja colocá-los. Então, quero que eles comprem alguma coisa. Você quer que eles aproveitem o conteúdo e fiquem por mais tempo? Quero ser sério, quero ser brincalhão. De todas essas coisas, você determinará a cor que escolherá em seu design. Finalmente, como eu disse, certifique-se de usar a seleção de cores porque é realmente muito simples. Basta clicar com o botão direito do mouse em qualquer página, para mostrar todas essas cores. E, basicamente, você pode selecionar essa cor, clicar em copiar e colar em seu design. No próximo vídeo desta aula, falaremos sobre combinações de cores e por que elas são importantes, em quais combinações de cores existem e como selecionar qual delas é a certa. para você. Então, eu vou te ver lá. 88. Combinações de cores: Há muitas maneiras diferentes de combinar cores para seus projetos de design de UI UX. Mas nesta aula e nesta lição, vou falar sobre apenas quatro das quais são quatro principais e as quatro que são mais usadas no design, além de uma adicional, que é uma espécie de um bônus nesta lição, aquelas para nossa monocromática, análoga, complementar e triádica. Então, vamos explorar tudo isso e ver o que são. Esquema de cores monocromático é o que o nome sugere. Você só vai pegar uma cor e escolher folhas diferentes dessa cor específica. Então, por exemplo, você está escolhendo a cor azul , que é muito escura, então você vai escolher tons diferentes dessa cor azul para corresponder melhor à cor azul escuro principal. Portanto, você vai usar esses tons mais claros, por exemplo, para seus botões ou vice-versa, você pode usar os tons mais claros para o texto ou os tons mais escuros para os botões para o links e coisas assim. análogas são cores próximas umas das outras na roda de cores Você escolherá três cores que estão muito próximas umas das outras. Então, quando você pega a roda de cores, pode escolher tons diferentes dessas cores que estão lado a lado. O que isso permitirá que você faça é que seu design seja muito mais coerente porque parecerá que pertence um ao outro. Seus elementos serão de cores semelhantes, de ênfase semelhante a essas cores porque você não escolherá tons diferentes de suas cores, apenas as cores que estão vir. um para o outro na roda de cores. Cores complementares são o que o nome sugere. Você vai pegar duas cores que estão na escala totalmente oposta da roda de cores. E então você vai combiná-los. Você pode escolher sua cor principal nessa roda de cores. E então, a partir de sua cor principal, você pode posicionar sua roda de cores dessa forma para encontrar sua cor complementar no lado oposto da roda de cores. Você pode usar tons diferentes dessas cores, então cores mesquinhas e complementares. Mas eu sempre sugiro que você escolha sua cor principal e essa é a coisa mais fácil fazer se seu cliente já tiver algo como um logotipo ou um cartão de visita, ou a cor que ele gosta. E então você pode simplesmente colocar essa cor na sua cor. Escolheremos a cor complementar e, portanto, você pode escolher diferentes tons dessas cores. E você pode saber qual cor é a cor complementar para essa cor. E, finalmente, temos cores triádicas. Agora, as cores triádicas são basicamente apenas três cores espaçadas uniformemente em sua roda de cores. Então você pode imaginá-lo como um triângulo, e você pode girar esse triângulo para escolher a cor principal e as cores complementares que estão no lado oposto formando um triângulo, você pode escolha sua cor principal e, portanto, você pode selecionar as outras duas cores que estão nos lados pares desse triângulo. E a abordagem bônus é 603010. Agora, essa abordagem requer três cores diferentes que você pode escolher como quiser, mas certifique-se de escolher sua cor principal, que compreenderá 60% do seu design. 60 por cento é a quantidade que você vai usar sua cor principal, 30% é sua cor secundária ou complementar e, em seguida, esses dez por cento são sua cor de destaque. Essa é uma abordagem comumente usada em UI, design de UX e InDesign em geral. Então, basicamente, você pode usar qualquer um desses métodos que acabamos de mencionar para selecionar as três cores que você deseja. E você pode usar o triádico se quiser, só para ver no retângulo como essas três cores ficarão. Mas certifique-se de formar essas cores forma que elas não se sobrecarreguem. Se sua cor principal for 60 por cento, certifique-se de usar essa cor em 60% do seu design, depois 30% e, em seguida, dez por cento compreendendo 100 por cento de suas cores. Não use nenhuma outra cor. Apenas certifique-se de usar essa abordagem nesse método para usar apenas essas três cores. Então, essas são apenas algumas das principais combinações de cores. Como mencionei, existem muitas, muitas, muitas outras combinações de cores diferentes, mas essas quatro foram as que descobri que funcionaram melhor para mim ao longo dos anos. E descobri que a maioria dos designers do setor usa. No próximo vídeo, mostrarei algumas ferramentas que ajudarão você a selecionar essas cores. Então eu vou te ver lá. 89. Ferramentas de seleção de cores: Neste vídeo, vou mostrar algumas ferramentas de seleção de cores que tenho usado nos últimos anos. E descobri que a maioria deles, especialmente o Adobe One, é o que a maioria dos designers usa. Porque quando você conhecer a ferramenta, quando estiver familiarizado com duas, você ficará preso a ela e a usará novamente, porque se não estiver quebrada, não a conserte. Então, como eu disse neste vídeo, vou dar apenas alguns exemplos. Se você não gosta de nenhum deles, pode simplesmente navegar na Internet para encontrar o que funciona para você. Então, aqui está o primeiro que se chama Peloton. E você pode ver pelo design do site, é realmente muito antigo. Agora, como tudo isso parece , você pode clicar aqui para selecionar a cor única monocromática, como acabamos de falar, cores adjacentes ou três cores, você pode ver cores triádicas. Então, tríade de três cores, tétrades, então, para cores. E, finalmente, estilo livre de quatro cores, e você pode selecionar duas cores, três cores como quiser. Então, como mencionei no vídeo anterior, dependendo do que você deseja criar aqui, você selecionará as cores monocromáticas, por exemplo ou adjacentes, que são cores complementares ou algo assim assim. Então, vamos usar a tríade neste caso. Então você pode ver quando eu começo a girar isso, você pode ver as cores. Então, digamos que essa seja minha cor principal. E você pode ver que eles estão uniformemente espaçados nesse triângulo e ele está me mostrando todas as folhas da minha cor principal. E você pode segurar a tecla Shift para mover as sombras individualmente. Então, se eu segurar e selecionar essa forma, por exemplo, se eu selecionar esta, você pode ver que estamos obtendo cores completamente diferentes aqui. Então, se eu girá-lo para aqui, você pode ver que agora temos essa paleta de combinação uniforme. Agora, você pode acessar Predefinições e escolher diferentes predefinições para essa cor triádica, o que é muito útil se você não tiver tempo suficiente. E a partir das cores que você escolheu, ele está mostrando essas predefinições. Então, se voltarmos às cores, se você girá-las para aqui, por exemplo, voltar às predefinições, você pode ver que agora elas são completamente diferentes. Assim, você pode escolher essas cores, pode fazer o que quiser com elas. E se nos escondermos daqui, você pode ver a exportação de tabelas. Se eu clicar aqui, você pode ver que você pode exportá-los como HTML, CSS, Less sass, ACML e como texto, você pode exportar amostras de cores e exportar essas combinações de cores para as que nós criado, o que eu acho muito importante e muito útil porque essa ferramenta é gratuita. E, a propósito, vou vincular todas essas ferramentas mencionadas neste vídeo dentro do PDF. Portanto, certifique-se de abri-lo, certifique-se de clicar nesses links se quiser acessar esses sites e todos os recursos e dicas mencionados ao longo desta aula. Então, basicamente, esse é o Palatine para você. Você pode randomizar, redefinir, voltar às cores originais. Então, aqui, e como eu disse, você pode escolher qualquer um, o estilo que quiser. Em seguida, temos o Color Hunt. Então você pode ver mais uma vez, agora temos algumas seleções diferentes aqui porque elas são pré-selecionadas. Então você pode clicar no aleatório, ele mostrará apenas cores aleatórias. Você pode escolher o mês, o ano, a época mais popular ou pode escolher por este. Então, se eu escolher cores pastel, se essas são as cores que você deseja para o seu projeto em particular, você tem retrô vintage, claro, escuro, especialmente escuro, é importante e popular nos dias de hoje e uma época em que temos modo escuro para design de UI UX. Portanto, se você estiver projetando para o modo escuro, não deixe de conferir. Então você pode ver tons de pele, especialmente importantes para marcas de beleza, por exemplo , voltando ao humor de seus espectadores, vamos voltar a esse nicho. Vamos voltar para aquele cliente. Então, ao coletar todos esses pontos, ao conectá-los, você entenderá que tipo de cores e combinações de cores você realmente precisa para seu projeto específico? Então, se rolarmos até o fim, você pode ver que não os temos. Então, se voltarmos aqui, não temos a tríade monocromática de cores adjacentes, mas as temos. Então, esses são os modos, esses são os projetos, esses são, por exemplo , os setores em que seu cliente está. Então, vamos usar o escuro, por exemplo e você pode ver tudo isso. Você pode gostar deles se quiser. Você pode ver que foi postado há 13 horas. Vamos escolher esse. E se eu passar o mouse, você pode ver que obtenho o código hexadecimal ali mesmo. Para cada uma dessas cores. Você pode gostar dessa paleta. Você pode baixá-lo como uma imagem. E você tem todas essas cores aqui como códigos hexadecimais e como RGB, que é o que mencionei anteriormente, maioria dos designers de UI UX está usando códigos hexadecimais e, em alguns casos, RGB cores porque elas são fáceis de serem integradas por seus desenvolvedores no código. É por isso que eles os estão usando. E também cores HSL às vezes, porque elas podem usar porcentagens. Portanto, não deixe de falar com seus desenvolvedores. Se você está apenas começando com essas cores, não deixe de falar com elas. O código hexadecimal é adequado para eles, ou o RGB ou o HSL, dependendo desses valores e dessas, as informações que você obterá de seus desenvolvedores, você escolherá suas cores para este projeto em particular. Então, mais uma vez, você tem mais paleta escura para adultos aqui. E se você acha que essa cor não funciona, por exemplo, você pode escolher as verdes para poder brincar com essas cores. Em seguida, temos colors.com, para que você possa começar a gerá-lo. Mais uma vez, vou vincular todos esses sites em um PDF. E o que temos aqui é esse sabonete. Temos todas essas cores diferentes que você pode explorar, ver, ajustar. Você pode ver como é o daltonismo. Assim, você pode escolher todas essas opções. E se a fecharmos. Você pode criar uma colagem e criar uma paleta a partir da foto. Portanto, se o seu cliente estiver enviando esse logotipo ou a cor que ele gosta, você pode fazer o upload dessa foto aqui. Isso vai gerar a paleta de cores a partir dessa cor específica. Agora, você pode ver que está recebendo os nomes aqui, que é ótimo se você quiser usar esses nomes posteriormente em seu design como símbolos, por exemplo, ao definir suas cores para seus desenvolvedores. E então eles entenderão facilmente qual cor você mencionou, porque eles podem colocá-la dentro do código. Então, por exemplo , esse lobo madeireiro, Allah, Buster e culto, eles podem colocar todas essas palavras dentro do código, conectando-as ao banco de dados principal. Portanto, o banco de dados principal extrairá os nomes dessas cores e as representará como um site ou um aplicativo móvel. Então, como você realmente trabalha com isso? Bem, temos todas essas opções aqui para que você possa remover a cor ver as tonalidades. Então, digamos que eu queira usar esse. Agora pegue esse. Você pode salvar a cor como favorita. Você pode arrastá-lo. Então, posicionado aqui para mudar a aparência da sua paleta de cores. Você pode copiar o código hexadecimal e bloqueá-lo. Assim, você pode escolher qualquer uma dessas cores diferentes. Você pode organizá-los. Então, se um medalhão, e digamos que eu queira posicioná-lo aqui , permanecerá dessa cor e não mudará. Como exportamos daqui? Você tem isso. Então, digamos que eu goste dessa paleta de cores, mas deixe-me realmente mostrar esses galpões de exibição. E digamos que esse, mas eu não tenho certeza. Eu posso clicar aqui mesmo. Então, aqui mesmo. Escolha o hexágono ou qualquer um desses. Deixe-me ir até o seletor e selecionar, por exemplo, esse tom escuro aqui. Eu gosto e posso fechá-lo. E, portanto, posso explorar minhas cores ainda mais a partir dessa cor em particular ou simplesmente deixá-la como está. E, finalmente, se eu quiser exportá-lo, você pode usar o Control E ou copiar o URL para enviá-lo aos desenvolvedores. Você pode exportá-lo como PDF, o que é ótimo como imagem. Você pode obter as cores do CSS, o que é incrível para seus desenvolvedores. Obviamente. Ase, SVG, o que também é ótimo, e você pode obter o código se seus desenvolvedores também quiserem o código. Finalmente, você pode incorporar o código para essas cores específicas se quiser salvá-las dessa forma para seus clientes ou desenvolvedores. Em seguida, temos o Adobe Color, que é um dos mais antigos do mercado. Mas, na minha opinião, talvez seja um dos melhores porque está integrado ao Adobe XD. Com os produtos da Adobe, você pode abri-los em um aplicativo morto da Creative Cloud se estiver usuário da Creative Cloud e, portanto, você pode simplesmente acessar essas cores e abri-las no software de sua escolha. Você pode criar, explorar, tem tendências e, finalmente, tem bibliotecas. Então, dentro das bibliotecas, você pode criar sua biblioteca e, em seguida abrir essa biblioteca no Adobe XD, por exemplo, você pode simplesmente copiar essas cores e colá-las dentro do seu XD. É realmente tão simples. Se você é usuário da Adobe, também há uma integração com o Photoshop Illustrator. Portanto, não importa qual ferramenta você esteja usando da família da Adobe, você terá essa integração. Então, temos ferramentas de acessibilidade para extrair equipes e gradientes, o que também é ótimo. Então, se eu clicar aqui, você pode ver a taxa de contraste, você pode ver a pontuação, você pode ver. Assim, você pode verificar se há falhas de 17 pontos ou menos no sal. Portanto, temos que ajustar essa cor, passar por 18 pontos acima e passar por ícones e gráficos acionáveis se você estiver usando essas cores. Então, basicamente, o que precisamos mudar é a cor do texto. Nesse caso específico, os casos da Adobe. E aqui à esquerda você tem todos aqueles que eu mencionei. Atualmente, está personalizado, mas se eu mudar para análogo e clicar nele, você verá que só podemos escolher essa cor. Se escolhermos o monocromático, você pode ver como isso parece triádico. Então, basicamente três cores. E você pode ver esse triângulo que mencionamos. Então essa é nossa cor principal, essas são nossas cores secundárias e terciárias. Você pode ter uma cortesia. Então, nos lados opostos desta roda de cores, divida como cortesia. Então, basicamente, isso, e você pode escolher quão perto ou longe você quer que esteja. E você pode dividi-los, você pode movê-los. Você pode mover esses diferentes tons para obter a melhor paleta de cores possível. E clique duas vezes em uma divisão gratuita. Então, basicamente a mesma coisa , mas o dobro da cor. Você tem o quadrado, o composto e as sombras. Portanto, dependendo do que você quiser, que mencionei ao longo deste curso, você sempre pode usar o Custom e ajustá-lo da maneira que quiser, por exemplo, se eu escolher uma opção gratuita e se eu for personalizado e eu quero ajustá-los, vamos usar este de forma simplesmente aleatória. Vamos continuar com isso. Você também pode ajustar os tons dessa cor específica aqui. Se eu selecionar essa cor, posso ajustar os tons dessa cor específica, dessa forma. Eu posso ajustar todas essas coisas. Posso copiar rapidamente esse código hexadecimal, se quiser. E, finalmente, você pode salvá-lo como minha equipe de cores, por exemplo, eu posso nomeá-lo. Eu não conheço projetos do meu site, digamos. E você pode ver os códigos que obterá ali mesmo. Então, essas são as tags que você pode verificar quanto à acessibilidade. Mais uma vez, só para ver se isso é bom o suficiente. A equipe é segura para daltônicos, o que é ótimo. Assim, você pode salvá-lo se quiser. Ele aparecerá em suas bibliotecas do XD ou do Photoshop. Finalmente, você pode extrair a equipe. Assim, você pode extrair a cor da imagem e salvá-la como uma paleta de cores. Você pode extrair o gradiente. Então, a mesma coisa. Mais uma vez, ferramentas de acessibilidade, que mencionamos anteriormente e temos a roda de cores, o que é ótimo. Então, finalmente, se você estiver usando isso, certifique-se de salvá-lo, ele aparecerá na ferramenta de sua escolha. Você também tem esses jogos coloridos. Você trocou de equipe para poder escolhê-la. Você explorou, para poder explorar diferentes combinações de cores. O que é tendência, o que não é. Então, se eu mudar para tendências, você pode ver o que isso vai me dar. Então, por exemplo, vai me dar um monte de imagens que estão na moda. E você pode ver as cores que são tiradas dessas imagens específicas. Então, se você gosta dessas cores, pode baixar como JPEG ou adicionar à biblioteca, que mais uma vez aparecerá no seu XD ou Photoshop Illustrator ou no que você estiver usando. E, finalmente, escolha de cores, que mencionamos anteriormente. Mais uma vez, é ótimo. Vou deixar os links para tudo o que mencionei no PDF. Mas eu realmente recomendo que você escolha a cor rosa, porque isso tornará sua vida muito mais fácil. Este é o Spotify, então você tem essas cores do Spotify e, claro, pode acessar o site de sua escolha se quiser escolher as cores desse site específico. E vai te mostrar aqui mesmo , dentro do bico colorido. Aí vamos nós. Essas são as cores, essas são as ferramentas que realmente espero que você as ache úteis. Mais uma vez, vou te dar todos esses links no PDF. Abra o PDF, clique no link, você deseja acessá-lo e não deixe de começar a explorar essas cores. Não deixe de explorar essas ferramentas para ver qual delas funciona melhor para você. E depois de encontrá-lo, certifique-se de explorá-lo mais profundamente, como você viu na cor da Adobe. Certifique-se de explorar as tendências. Certifique-se de fazer upload de imagens, explorar e apenas ver e entender como escolher as cores para seus projetos da melhor maneira para você. No próximo vídeo, mostrarei como criar guias de estilo de exportação para desenvolvedores do Adobe XD. Então, eu vou te ver lá. 90. Guias de estilo para desenvolvedores: O guia de estilo é uma parte muito importante de seus designs de UI UX, porque nele você apresentará todas as cores, ícones, imagens e todos os outros elementos que você usou em seus designs de UI UX. Você os mostrará para seus clientes e, mais importante, para seus desenvolvedores. Porque desse guia de estilo, eles podem extrair informações importantes, como cores, para usar em seu código. Então, vou mostrar a vocês um projeto que fiz anteriormente para uma das minhas masterclasses. E vou explorar o que é um guia de estilo e mostrar algumas dicas e truques. Então, aqui estamos no Adobe XD, e este é o novo projeto de site do banco. E, como eu disse, isso é da minha masterclass do Adobe XD. Vou vinculá-lo ao PDF. Você pode conferir se estiver interessado. E aqui partimos da arquitetura do site, passamos para wireframes de papel, passamos para wireframes no Adobe XD, passamos para o design do site, o design do painel. E, finalmente, fiz o design responsivo e o design responsivo do painel. Também fizemos a apresentação do projeto e, finalmente, o guia de estilo. Então, se mudarmos de camadas para aqui, que é Document Assets, você pode ver todas as cores e códigos de cores que são usados. Então, basicamente, esses são símbolos coloridos. Quando você passa o mouse, você pode ver que o branco liso é FFF. Se você passar o mouse aqui, verá que o RGB valoriza a opacidade 100. Se ampliarmos muito de perto, você pode ver que temos um guia de estilo de projetos aqui. Então, o que eu recomendaria que você fizesse é ao criar esses guias de estilo de projetos, sempre incluir o código hexadecimal, se for esse o que os desenvolvedores exigem, ou os códigos RGB. Se, mais uma vez, esses são os que o desenvolvedor exige. Além disso, o que você pode ver aqui é temos branco liso, que é essa cor. E também incluí o código hexadecimal para que os desenvolvedores possam selecionar facilmente esse código hexadecimal, se quiserem. E indo mais longe, você pode ver todas essas outras cores. O que você pode fazer é dar a eles esse arquivo XD. Eles podem então simplesmente pegar isso. Então, se eu for aqui, posso copiar essa cor. Então, clique com o botão direito e copie. Eu posso ir aqui, copiar essa cor, por exemplo colada no meu editor de código. Portanto, posso tê-lo no meu código ou selecioná-lo aqui e copiá-lo. Ou ainda melhor, você pode simplesmente controlar ou comandar E no teclado para exportar isso como PDF. Quando você clica em Exportar, ele será exportado como PDF. E então, quando eles os abrirem mais tarde, eles podem simplesmente selecionar esse código hexadecimal do PDF, copiá-lo e colá-lo dentro dele. Também para tipografia, você pode ver para iconografia. Então, todos os ícones que usamos nesse projeto específico e todas as ilustrações e elementos adicionais que você usa. Você pode colocar aqui, mas você também pode fazer isso aqui, onde está a sua cor? Você sempre pode combater, por exemplo , sombras de fundo , desfoques, opacidade, capas e todos esses outros elementos aqui , porque as portas também contribuem para um estudioso, porque todos esses planos de fundo, sombras e desfoques também têm cor. Então, outra coisa que você pode fazer com esse alvo é compartilhá-lo. Então, se eu simplesmente selecionar este quadro de arte, vá para Compartilhar. Você pode ver que é apenas um selecionado. Então, se eu diminuir o zoom, você verá que nada mais está selecionado porque acabei de selecionar esse aeroporto em particular. Então, mas o que pode fazer é compartilhá-lo. Eu posso criar o link, mas em vez do Design Review, vou usar o desenvolvimento. Eu posso criar um link. E enquanto está sendo criado, o que eu quero mostrar aqui é que os desenvolvedores podem obter esse link. Eles podem extrair todas essas cores desse link específico. E você também pode escolher esse compartilhamento para desenvolvimento para qualquer outro quadro de arte que você tenha em seu design, por exemplo, temos o design do site aqui e temos muitos desses painéis de arte, então você pode selecionar todos eles. Você pode compartilhá-los para desenvolvimento. E, portanto, seus desenvolvedores terão dívidas pagas. Eles podem escolher isso. Então, se eu clicar aqui para ver nosso guia de estilo, ele os abrirá no meu navegador e mostrará no meu navegador como é tudo isso. Então, se eu te mostrar aqui enquanto está abrindo, então temos metas de projetos. Então, dependendo de como você nomeou seu quadro de arte, ele será exibido dessa forma. Então, mais uma vez, temos todas essas cores diferentes. Então, se eu selecionar um deles, por exemplo, certifique-se de este. E se eu mudar para o código aqui, você pode ver todas as cores e todas as tonalidades das minhas cores, que foram extraídas daqui. Então, se eu selecionar este, você pode ver que se chama Danger read e imediatamente temos propriedades CSS. Então, temos a largura e a altura no canto superior esquerdo, temos o fundo, temos o fundo aqui. Então, é esse código hexadecimal e temos opacidade de 100. Então, basicamente, o que eles podem fazer a partir daqui é escolher copiar daqui. Eles podem clicar nessa cor. Aqui. Classificação copiada em cores. Deixe-me me esconder só para que você possa ver. Então, se eu selecionar essa cor, clicar nela, você poderá ver a cor copiada, para que ela seja copiada e eles possam colá-la posteriormente dentro do código. Também podemos mudar para aqui. Então você pode ver a raiz de todas essas cores. Então, mais uma vez, branco liso, cinza claro, cinza escuro, verde principal, todas as cores que chamei de famílias Point. Portanto, temos famílias de fontes, o que também é ótimo para desenvolvedores, todas localizadas aqui dentro do nosso guia de estilo. E finalmente. Esse estilo de personagem é nove. Então, se rolarmos até o fim, que é esse. Então, se eu selecionar exatamente isso e voltar ao código. Então, deixe-me selecioná-lo mais uma vez. Você pode ver todos os estados que eu criei para esse design específico. Então, temos Visa, Black and White, mastercard. Mastercard Black and White sugere a alteração de todos esses logotipos. E, basicamente, se eu clicar duas vezes dentro e continuar com a aparência, se escolhermos Control e clicarmos, você poderá ver um gradiente linear. Assim, em todas as cores de um gradiente linear, você pode ver a direção do gradiente, opacidade e a sombra projetada. Este é o que eu mencionei anteriormente. Então, drop shadow tem essa cor e esses valores. Então, basicamente, seus desenvolvedores podem extrair esses valores diretamente daqui. Eles têm o código CSS aqui mais uma vez. E, finalmente, se eles mudarem para ouvir, eles podem selecionar isso. E então eles podem ver dentro do CSS raiz todas as coisas daqui. Então, basicamente, eles só precisam encontrar esse cartão aqui e podem copiar o código CSS de lá. Então, se eu selecionar este, por exemplo, e você pode ver o estado padrão quase preto. Então, se eu segurar meu controle e clicar dentro, você pode ver cinza claro. Se eu selecionar e clicar dentro. Então você pode ver essa cor, que é a cor da pele dele. E se eu ampliar um pouco mais aqui. Então, vamos com 100, por exemplo, se aumentarmos o zoom e clicarmos nessa cor verde, por exemplo, você pode ver as cores para que elas possam clicar, elas podem copiar para a área de transferência e basicamente colar o que quiserem. Por fim, eles podem clicar aqui mesmo nos comentários. E eles podem puxar esse pino, por exemplo, aqui. E você pode dizer algo como Você gosta desses ícones ou eles deveriam ser em preto e branco? Se eles disserem que sim , por exemplo, o que você pode fazer é clicar nesse ícone. Você pode voltar ao código, localizar um desses. Então, por exemplo, digamos que este. E só temos o estado padrão para isso. E, por exemplo, você pode criar estados diferentes para esses ícones. exemplo, temos o padrão, temos o mouse. Assim, você pode ver que ele muda a cor para o estado padrão e para passar o mouse. Então, dependendo do que você fez com suas cores, ele reagirá dessa maneira específica. Então, iconografia, cores, a mesma coisa, a mesma história. Então, quando eles selecionarem, eles obterão CSS. Eles podem simplesmente clicar para copiar, para a área de transferência e colar isso em seu código. Então, basicamente, é assim que é fácil trabalhar com o Adobe XD com cores e guias de estilo. E eu sempre recomendaria que você exportasse isso como um PDF pois seus desenvolvedores podem estar em qualquer lugar. Às vezes, eles podem discutir isso com seu cliente. Certifique-se de enviar a eles o link do guia de estilo em si, para não confundi-los demais e certifique-se de enviar links separados. Muitas vezes, design de wireframes, de papel, wireframes, o que quer que você esteja fazendo, porque dessa forma eles podem facilmente inspecionar todas essas cores. Porque se você colocar todos eles em um link, o que você pode fazer, você simplesmente os confundirá. E descobri que essa abordagem funciona melhor com meus desenvolvedores. Mas certifique-se de sempre falar com seus desenvolvedores antes de começar a trabalhar. Certifique-se de mencionar cores hexadecimais ou RGB. Certifique-se de ver se eles combinam bem com algumas dessas cores. E, finalmente, algo que eu não te mostrei. Se eu selecionar essa cor, por exemplo, posso clicar aqui. Deixe-me me esconder. Então você pode ver que temos cor sólida, gradiente linear, gradiente radial e gradiente angular no XD, temos obesidade para a cor, temos tons de cores diferentes aqui, temos a opacidade do canal Alpha para a cor em si. E, finalmente, temos o hexadecimal, RGB, HSB. Portanto, dependendo do que seus clientes e desenvolvedores desejam, você pode escolher aqui. Então, basicamente, é isso. É por isso que esses guias de estilo de projetos são realmente importantes, porque em um único lugar, você tem todos esses elementos que usou em seu design. Quando estiver trabalhando em seus projetos, certifique-se de sempre criar esses guias de estilo em paralelo com o que você está fazendo, pois será muito mais fácil exportá-los posteriormente para seus desenvolvedores para dar uma olhada. Então, basicamente, é isso. Acho que você viu como os guias de estilo são importantes para os desenvolvedores. Eles não são tão importantes para você, mas podem ser importantes para outros designers que podem trabalhar nesse design específico depois de você. Porque na maioria dos casos, você pode não estar interessado em continuar trabalhando nesse projeto específico. Talvez outros designers se coloquem no seu lugar e continuem trabalhando neste projeto. Então, tendo algo como um guia de estilo, sempre será muito mais fácil para esse designer continuar onde você parou no mesmo estilo. E, claro, será muito mais fácil para os desenvolvedores trabalharem com o guia de estilo, porque em um único lugar, eles têm todas as informações de que precisam para começar a chamar esse projeto. 91. SECÇÃO 11 ATRIBUIÇÃO: Sua tarefa para esta seção é usar uma dessas ferramentas que mencionei nesta seção da aula. E para tentar escolher suas cores favoritas para um projeto. Tente usar o projeto imaginário se você tiver usado o mesmo projeto imaginário em toda a classe até agora, certifique-se de usar a seleção de cores também para ele. Certifique-se de usar uma dessas ferramentas. Tente entender quais cores funcionariam melhor, quais não funcionariam melhor e tente ver se essas cores são, digamos, deficientes visuais. Se você usa uma dessas ferramentas on-line, algumas delas realmente têm isso. Eles vão te dizer se essas cores vão passar ou não. Portanto, é muito importante usar essas ferramentas para pessoas com deficiência de cor e para pessoas com deficiência visual que estão realmente tendo dificuldades estão realmente tendo dificuldades em ler essas cores brilhantes. Então, como eu disse, explore, divirta-se e veja quais cores funcionarão melhor para você e tente ver uma dessas ferramentas e escolha qual é a certa para o seu processo. 92. SECÇÃO 12 Imagens: Além da topografia, as imagens existem como um elemento crucial que conta uma história em seu design. Portanto, saber como escolher um par de imagens diferentes realmente fará com que seu design se destaque da multidão. Nesta seção, falaremos sobre imagens gratuitas versus imagens pagas. Como escolher conjuntos de imagens, como escolher o ritmo certo para suas imagens e equipe certa, dependendo do seu projeto e muito mais. Então, vamos começar. 93. Por que as imagens são importantes: Você sabe o que dizem, essa imagem diz 1.000 palavras. Bem, é a mesma história em pinturas e em design, especialmente em design gráfico, mas a mesma coisa pode ser dita em web design e design de aplicativos. Portanto, escolher as imagens certas pode realmente determinar o ritmo com que os espectadores veem seu projeto, seja ele um projeto de aplicativo ou um projeto de design de site. Também pode determinar o tom em que você está falando com seus visitantes. Então, isso pode ser sério ou divertido, divertido. Também pode determinar o ritmo em seus espectadores podem ver seu projeto. Então, o que isso significa é que vou usar imagens menores, vou usar imagens maiores. Você vai usar imagens em tela cheia em largura total e muito mais. Eles também determinarão o quão divertido ou sério é nosso site. E eles também determinarão as cores que você vai usar. É o seu design, porque o tom de suas imagens realmente determinará isso. Porque se você estiver usando, por exemplo , imagens muito escuras, usará algumas cores, que contrastarão muito melhor com essas imagens escuras. Ou se você estiver usando imagens muito claras e arejadas , você vai contrastá-las, mas usando algo muito mais escuro, por exemplo , preto escuro ou cinza escuro ou verde escuro ou algo parecido. Portanto, as imagens são realmente o fator-chave na criação de seus designs e escolher as imagens certas para seus designs vai fazer ou quebrar seu design. 94. 3 tipos de imagens do projeto: Quando se trata de imagens de projetos, verdade existem três tipos principais. O número um são as imagens tiradas pelo fotógrafo. Então, essas são imagens que seu cliente já tem, levou para nosso fotógrafo premium, que tirou essas imagens em cenários e criou realmente toda a história para seu cliente, e depois as entregou. para o seu cliente. E então seu cliente entregará essas imagens para você e você, por sua vez, as usará em seus projetos. Duas são imagens gratuitas. Então, essas são as imagens que você normalmente encontra em sites como Unsplash ou Pixabay. E essas imagens aqui são realmente uma grande falha e essa variedade. Então, o que isso significa é que você pode encontrar uma ótima imagem de um grande fotógrafo, e é basicamente isso. Portanto, você não pode encontrar outra imagem, por exemplo modelo em uma pose diferente, ou um pôr do sol de um ponto de vista diferente, ou uma rua da cidade com um ponto de vista diferente. Portanto, você não consegue encontrá-los. E geralmente essas imagens realmente não são de ótima qualidade. Normalmente, há algo como 1920 por 1080 HD ou pelo menos até k em tamanho. Finalmente, número três, nossos conjuntos premium. Agora, esses são os sites que você pode encontrar on-line. Normalmente, gosto de usar elementos do Envato e seu próprio site 2020, o que significa que eles têm mais de 50 milhões de imagens para escolher. E isso significa que esses fotógrafos premium estão criando cenas. Então, imagine, por exemplo vistos no escritório e então eles estão montando essa cena. Eles estão montando aquele escritório. Eles estão pagando pelos modelos e tirando centenas de imagens diferentes de todos os ângulos diferentes, com modelos diferentes fazendo coisas diferentes. E o principal benefício dessas imagens é que todas elas são captadas em um ambiente controlado por um único fotógrafo sob uma única fonte de iluminação com os mesmos modelos, com a mesma equipe na mesma sala. Então você entendeu a ideia. Essas imagens podem ser facilmente usadas em seus projetos. E, por exemplo, se você precisar fazer uma pequena alteração na largura, por exemplo , brilho, poderá fazer isso em algo como o Adobe Lightroom. E então você pode tirar todas as imagens que você baixa para o seu projeto. Você pode fazer um único tweet, por exemplo , o brilho ou a opacidade, ou com a vinheta ou que quer que esteja fazendo com a primeira imagem. E você deseja aplicar a mesma alteração a todas as suas imagens, por exemplo, você baixou o conjunto de 50 imagens diferentes, então você pode simplesmente aplicar essa primeira alteração na primeira imagem e depois aplique-o em várias de suas outras imagens da mesma coleção, você pode simplesmente sincronizar essas alterações. E, por exemplo, o Adobe Lightroom aplicará essas mudanças. Você não precisa usar o Lightroom. Gosto muito de usá-lo porque sou usuário da Adobe. Eu uso o Adobe XD ou o Adobe Photoshop. Eu uso o Premier e, claro, uso o Lightroom para todas as minhas imagens. E eu gostei muito dessa função, mas não é só no Lightroom. Você pode encontrá-lo em outras ferramentas e softwares disponíveis. Portanto, certifique-se de procurá-lo, mas você economizará muito tempo. Então, se você estiver usando imagens de clientes, talvez precise ajustar algumas coisas aqui e ali. Porque geralmente esses fotógrafos estão tirando imagens fantásticas, mas talvez se você estiver criando sites projetados para nosso tom um pouco mais escuro , digamos que você aplique alguns dos essas mudanças, além dessas imagens. Normalmente, os fotógrafos gostam de deixar essas imagens bem alinhadas. Portanto, os designers, por sua vez, farão essas mudanças. Então, por exemplo , saturação, brilho, contraste e coisas como dívida com essas imagens. Mais uma vez, se você estiver usando imagens gratuitas, as mortes são ótimas, especialmente para clientes de baixo orçamento, porque eles realmente não se importam com a aparência do blog. Mas se você estiver trabalhando com clientes com orçamentos razoáveis, poderá integrar facilmente esses conjuntos premium de imagens em seu trabalho a partir de sites como o Envato Elements, por exemplo, e eu Eu realmente recomendaria porque você pode encontrar milhões dessas imagens diferentes. E, por sua vez, eles farão com que seu trabalho pareça muito mais profissional, muito mais sofisticado do que se você estivesse usando apenas essas três imagens. 95. Como escolher imagens de nicho: Há muitas maneiras diferentes de você escolher imagens de nicho, mas vou dar algumas dicas e técnicas sobre como eu faço isso e como fiz isso nos últimos quase 20 anos. Então, dependendo do nicho em que você está trabalhando, há um certo tom. Então, por exemplo, se você está criando um site para roupas masculinas, por exemplo, há uma boa chance de que seja um site de aparência premium. E eles estão tentando retratar um tom de profissionalismo, de um design limpo, de certo estilo de vida que esses ternos retratarão. Então, obviamente, você não vai usar algo como um amarelo brilhante ou um vermelho brilhante ou algo parecido. Você certamente usará essas cores cinza claro, cinza escuro, possivelmente um toque de azul, talvez até dourado, alguns lugares se estiver trabalhando contra a cor preta. Então, isso permitirá que você se destaque, obviamente nas cores brancas. Então, ao escolher suas imagens, certifique-se de ter essas coisas em mente, pois você não escolherá seus modelos contra esse fundo amarelo e contra o fundo, o que vai estragar a aparência do seu terno. Obviamente, você vai se ajustar ao tom. Então, o que isso significa é que você procurará modelos que estejam nessas posições, por exemplo, em fundos brancos devidamente expostos porque será muito mais fácil integrá-los. imagens em seu trabalho. Também modela contra o fundo preto porque você pode usar algo como uma obesidade na tela e, em seguida, reduzir esse fundo preto em relação ao seu design. Portanto, você pode facilmente extrair seu modelo do fundo e adaptá-lo facilmente ao seu design. Então, obviamente, esse é apenas um dos exemplos. Certifique-se de definir o tom e ver em qual tom seu nicho está. Portanto, você procurará imagens que estejam nesse nicho e nesse tom, o que é muito importante porque seus visitantes se alinharão com muito mais facilidade se eles veem coisas que entendem, em vez de coisas que não entendem. Então, por exemplo, vamos voltar ao exemplo do traje. Imagine que você é esse senhor procurando um terno para o seu casamento, por exemplo, ou para o casamento de seu amigo ou algo parecido, então você está procurando uma classe muito alta, algo realmente sofisticado, algo muito caro, porque você quer aparecer naquele dia e quer ter uma boa aparência. Então você visita este site, que é todo em cores gritantes e todo vermelho, verde e azul. Isso não te dá essa sensação. Isso não lhe dá aquela ideia do site que está vendendo esses ternos caros. Então, algo não vai parecer certo. Algumas coisas que vão parecer certas. Talvez, à primeira vista, você não pense muito sobre isso. Mas quando você começar a navegar, obviamente notará que algo não está bom aqui. Não vai lhe dar essa confiança ao comprar esse traje, porque não está dando a sensação que você normalmente espera do site do traje. Em seguida, você acessa o site da concorrência, que tem todas essas coisas sobre as quais falamos neste exemplo em particular, você se sentirá muito mais em casa lá. Você se sentirá muito mais confortável com sua decisão de compra e se sentirá muito mais em casa, por assim dizer, porque suas expectativas são atendidas por este site, em vez de este site anterior com todas essas cores verdes. É por isso que é muito importante, ao escolher imagens, escolher imagens de nicho, que seu público se identifique importante, ao escolher imagens, escolher imagens de nicho, facilmente. Portanto, seu site, em troca, também será muito mais identificável com seus usuários identificável com seus usuários e aplicativos móveis, porque seus usuários reconhecerão essas pistas, essas imagens. , essas cores, esses estilos, porque estão acostumados com eles. Portanto, não tente experimentar demais e exagerar com suas imagens. Certifique-se de seguir o que você sabe e se ater ao que funciona, que é o mais importante. Afinal, certifique-se de que seus usuários se sintam confortáveis ao visitarem seu site ou aplicativo móvel. Porque, em troca, isso trará mais conversões. 96. Grátis VS Premium: Neste vídeo, mostrarei algumas diferenças principais quando você mesmo está pesquisando imagens. Então, esses são os exemplos em seu cliente não tem nenhuma imagem. Portanto, você precisa pesquisar imagens para esse projeto específico. E vou mostrar algumas diferenças importantes entre imagens gratuitas e premium e o que você deve procurar ao procurar imagens. Então, aqui temos nosso site chamado unsplash.com, que geralmente é o que esses designers estão usando hoje em dia. E também há o pixabay.com e muitos desses outros sites. Mas geralmente o Unsplash e o Pixabay são os sites que normalmente pesquisam. Então, se digitarmos um terno, por exemplo, como mostrei nos exemplos anteriores. E, como falamos no vídeo anterior, vou mostrar e comparar as diferenças entre sites gratuitos e premium. Então, como eu disse, temos um terno aqui e eu vou copiar este texto e vou acessar este site que está em elementos voláteis, que é um site premium. E vou simplesmente colá-lo aqui. Pesquise as fotos, mas você pode pesquisar todas essas coisas diferentes. Então, estoque de vídeos, modelos de vídeo, músicas, efeitos sonoros, modelos gráficos como modelos de impressão e interface de usuário, UX kids, apresentações gráficas acontecem, fotos, fontes , complementos, modelos para web, 3D e muito, muito mais. Então, digitamos ternos e eles também têm um site chamado 2020 com 50 milhões de imagens adicionais. Sim, são 50 milhões de imagens adicionais. E todas aquelas imagens realmente de alta qualidade enviadas por todos esses fotógrafos independentes. Então, se acessarmos esse site, que é o estoque de 2020 e o traje de digitação, aqui. Portanto, temos exatamente a mesma consulta de pesquisa em todos esses sites. E o que temos aqui no Unsplash é quando pairamos, temos essa corrida de caçadores. Temos outro fotógrafo, outro fotógrafo, outro fotógrafo. Então, todos esses são fotógrafos diferentes. Então, vamos ver, isso é Benjamin Roscoe, bem como isso. Então, vamos visitar o perfil deles. Como você pode ver, eles estão tirando imagens de horizontes, barras e detalhes invertidos. Aqui temos algumas imagens dessa pessoa em um terno. Mas isso é basicamente o que é. Você pode ver que temos apenas três ou quatro imagens diferentes. E mais uma vez, essas imagens em barra estão até o fim. Mais uma vez, se eu clicar nesta imagem, por exemplo, o que tenho aqui é que posso clicar em Leia mais para ver todos esses detalhes diferentes. E eu posso digitar as informações. Podemos ver que a câmera é Sony, ISO 400, e essas são as dimensões. Então, na verdade, eles são muito bons nesta fase. E você pode ver quantos downloads e usar essa imagem teve. Mas se voltarmos e clicarmos nesta imagem, por exemplo, vá para as informações. Você pode ver que são cinco K. Mas, mais uma vez, temos o mesmo problema. Então, quando clico nesse perfil, por exemplo, você pode ver que temos muitas imagens diferentes, mas há apenas uma imagem de um terno. Então, vamos imaginar que você queira usar essa cor específica do traje, por exemplo, e queira usá-la nesse ambiente. Então, digamos que dentro de casa contra essas escadas e coisas assim. Então, você pode imaginar que seu modelo será fotografado em ambientes fechados, por exemplo, digamos que dentro de um shopping center, fazendo uma viagem de compras ou algo parecido. Então você tem que encontrar imagens dessa natureza. Bem, essa é apenas uma imagem e você está basicamente preso. Você não tem nenhuma outra opção. Então, se voltarmos e dermos uma olhada em todas essas outras imagens de um terno. Como você pode ver, não há muito mais. Talvez exista essa, mas tem uma árvore de Natal dentro dela. Portanto, não funcionará em todas as suas ocasiões. E, como você pode ver, não há muitas opções aqui para seu projeto específico. Assim, podemos acessar alguns desses sites e encontrar algo que funcione para nós. Então, digamos que este é o shopping e essa é a loja dentro do shopping. Então, vamos abrir isso dentro de uma nova guia. Vamos notar rapidamente que isso tem oito K de tamanho, por exemplo, e você pode ler mais detalhadamente essas informações. Você pode aprender mais sobre isso. E podemos ver que são quatro, requer um workshop de designer de alfaiataria. Mas se eu rolar aqui, você pode ver que tudo é da mesma série. Então você pode ver esse mesmo modelo, mesmo fundo, mesma iluminação, mesmo fotógrafo. Então você pode ver sobre imagens, é fotógrafo. Então, todas elas, e o que é ótimo é que, se eu clicar Ver mais e abrir em uma nova guia, você pode ver quantas dessas imagens diferentes temos. Assim, você pode criar claramente uma história a partir de todas essas imagens. Assim, você pode começar em sua página, por exemplo, dando as boas-vindas ao usuário em sua loja e depois explicando a ele. Qualidade de seus trajes e como eles são feitos, quanto tempo cada pessoa leva para ver um botão específico, por exemplo, e coisas assim. Assim, você pode realmente ampliar os detalhes com essas imagens porque elas têm qualidade de oito K e são realmente enormes. Você pode então contar a eles como encaixe funcionará quando experimentarem o traje, como se sentem, quando os materiais do traje forem adquiridos e muito mais. Então você pode fazer isso com essas imagens premium. Você pode realmente contar uma história em vez de apenas mostrar uma imagem singular. O que isso vai fazer é fazer com que seu site pareça muito mais profissional, muito mais polido. Porque, mais uma vez, você pode mergulhar seu espectador nessa experiência porque você tem todas essas imagens diferentes do mesmo conjunto. Então, vamos dar uma olhada neles mais uma vez. Você pode ver que eles estão tomando café. Temos o equipamento aqui. Temos testes do material. Temos o equipamento aqui. Temos, por exemplo, um acordo aqui, temos alguns materiais diferentes. Nós temos como a gravata vai caber. Portanto, você pode ver claramente, em apenas um exemplo, um empréstimo para isso é adequado para quantas dessas imagens diferentes temos. Então, você pode imaginar ampliando esses detalhes e o quanto você pode realmente fazer com todas essas imagens diferentes, em vez de essas imagens diferentes, em vez apenas com uma única imagem. Finalmente, podemos fazer o mesmo aqui. Então, se eu digitar Been Sued e abrir, você tem essas coleções diferentes. E dentro dessas coleções. Então, se eu os abrir, você pode encontrar fotógrafos diferentes. Então, por exemplo, eu realmente gosto desse terno. Talvez eu possa entrar e procurá-lo, ou talvez eu possa até dar uma olhada neste. Então, essas são as coleções. Você pode abrir essas coleções desses diferentes fotógrafos e, em seguida, explorar imagens adicionais. Então, aqui temos essa imagem e esse modelo. Então, se eu clicar aqui e abrir suas coleções, temos essas fotos diferentes, temos amores diferentes, temos todas essas coisas diferentes aqui. Assim, podemos explorar e ver todas as imagens desse fotógrafo. Você pode ver claramente que temos várias dessas imagens diferentes. Mas, mais uma vez, se você não gosta de 2020 e de todas essas imagens diferentes, sempre pode voltar aos elementos do Envato porque esses dois fazem parte da mesma coleção. Então, quando você obtiver essa assinatura do Envato Elements, que é uma assinatura anual, ela será incluída. Portanto, se você não conseguir encontrar uma imagem aqui, talvez possa experimentar em 2020. Você pode ver o que diz Envato. Então, essas são apenas algumas comparações diferentes entre imagens gratuitas e pagas. Apenas certifique-se de entender que você não pode fazer trabalho profissional altamente polido com imagens gratuitas. Por causa dessas limitações, que acabei de mencionar, você precisa usar recursos profissionais, como imagens. de, por exemplo, Envato Elements. Você não precisa usar elementos do Envato. Eles são vários sites diferentes que existem. Mas porque, ao mostrar o que está incluído na sua assinatura, gostei muito deles e os uso todos os dias em meus projetos. Em troca, isso fará com que seus projetos pareçam muito mais polidos, muito mais profissionais. E se você está tentando vender seu design para seu cliente, por exemplo, se você está tentando apresentar a eles uma ideia de design ou mudança de design, redesenho completo ou algo parecido. Fazer isso com essas imagens profissionais e polidas, será muito mais simples do que apenas tirar algumas imagens diferentes de fotógrafos diferentes com exposições diferentes, com modelos diferentes em uma página e depois tentam vender dívidas. 97. Otimização de imagens: Mais uma parte importante ao criar projetos usando essas imagens, especialmente essas imagens enormes, é a otimização de imagens. O que isso significa é que um software de sua escolha reduzirá o tamanho da imagem, que por sua vez será carregada muito mais rápido para o servidor, por exemplo, que, por sua vez, carregará seu site muito mais rápido, dando a ele uma melhor classificação no Google, o que significa melhor SEO. Então, basicamente, essa otimização de SEO é extremamente importante, especialmente nos projetos de design de sites, em projetos de design móvel Também é muito importante, especialmente se você estiver usando do mesmo banco de dados. Portanto, otimizar suas imagens proporcionará aos usuários experiência muito melhor sem perder a qualidade dessas imagens originais. Então, se eu levar você de volta mais uma vez aqui para a Envato Elements, você pode ver, por exemplo esta imagem que estávamos vendo anteriormente. Então, como você pode ver, quase oito K. Então, quando eu clicar em download, ele exibirá todos esses diferentes projetos de classe. Então, por exemplo, vou chamá-los de projetos de imagem. Para nosso projeto de imagem, por exemplo, e eu posso simplesmente criar este projeto. Agora, o que isso significa no Envato Elements é que posso adicionar todos esses elementos diferentes a esse projeto em particular. Então você pode imaginar que vou usar todas essas imagens diferentes. Vou usar ícones diferentes, talvez até mesmo um tema WordPress. Talvez eu precise de algumas músicas dos meus vídeos. Então, todos esses itens diferentes que você baixou do Envato Elements você pode simplesmente colocar neste projeto que criamos agora. O que isso significa é que será muito mais simples para seus clientes licenciar todos esses itens , caso isso seja necessário. Então, por exemplo, você pode usar uma assinatura para um número ilimitado de clientes, e cada cliente pode ter seus próprios projetos. O que significa que o licenciamento pode ser tão simples quanto simplesmente copiar uma licença e enviá-la aos seus clientes. Eles, por sua vez, conterão essa licença e a manterão. Portanto, não há necessidade de atualizar essas licenças todos os anos. Basicamente, uma vez que você paga por ele, depois de baixá-lo, pronto. Assim, você pode facilmente licenciar todos esses elementos diferentes, incluindo imagens no Envato Elements para seus projetos. Então, se voltarmos aqui, posso simplesmente clicar em nosso projeto de imagem para criar esse projeto. Depois, posso simplesmente adicionar e baixar. E o download vai começar a ser baixado aqui. Agora, você pode ver que essa imagem é bem grande. Na verdade, tem quase 18 MB de tamanho. Então, depois de baixado, agora é hora de otimizar nossas imagens. Agora, a otimização de imagens não é nada realmente novo. É feito por desenvolvedores há décadas também por designers há algumas décadas. Basicamente, o que é é simplesmente reduzir o número de pixels dentro da sua imagem. Ele conterá o tamanho da sua imagem. Ele vai conter nitidez, vai conter qualidade. Mas, por sua vez, isso fornecerá um tamanho de arquivo muito menor porque todas essas câmeras diferentes estão simplesmente adicionando o tamanho do arquivo, especialmente dependendo da lente que você está usando no modelo de câmera que você está usando. Então, para não te aborrecer com muitos detalhes, vou te mostrar isso na prática. Então, como estou no Windows, estou usando algo chamado tumulto. E se você estiver em um Mac, você pode usar algo chamado imagem ideal de um loop, o arquivo PDF, e você pode simplesmente clicar no link para baixar o que quiser. E existem muitas ferramentas diferentes disponíveis para ambos os sistemas operacionais, tanto Windows quanto Mac. Então, cabe realmente a você decidir qual deles você quer escolher. Eu escolho, certo? E eu o uso há anos e funcionou bem para mim. Então, se eu te levar de volta, você pode simplesmente ver como é o certo. E aí está. É realmente uma ferramenta básica e realmente quer que você possa aprender a usar facilmente e basicamente o que ela faz. Ele tem essas duas janelas e se eu arrastar e soltar minha imagem dentro , essa é a imagem que escolhemos. Você pode ver que pode abrir imagens, importar imagens em lote, o que mais uma vez é muito importante, especialmente se você estiver trabalhando com essas coleções. Então, não perca tempo. Imagine que você tenha, por exemplo 50 imagens diferentes para baixar. E essa é a ótima maneira, por exemplo, dos elementos da Envato. Talvez você nem use todas essas imagens, mas é ótimo porque elas estão lá. Você pode simplesmente selecionar todos eles, baixá-los todos e colocá-los na mesma coleção. Agora, otimize todos eles usando corretamente, por exemplo , aqui, vou simplesmente usar uma imagem. E o que vou fazer é clicar e arrastá-lo até aqui. Então, uma vez carregado, ele vai me avisar isso. Então esse arquivo contém uma imagem de alta resolução, certo? Pode lidar com essas imagens, mas o processamento pode ser bastante lento nessa situação. Eles querem redimensioná-lo primeiro. É recomendável que a imagem original não seja modificada. Então, observe o que vai acontecer quando eu clicar em Sim. Isso nos dará esse tamanho original. Então, ele vai escalá-lo para um novo tamanho, 100 por 100. Portanto, mantenha a proporção. Isso ocorre em porcentagem porque você pode ver aqui e abaixá-lo em pixels específicos. Mas eu recomendaria que você mantivesse essa porcentagem igual. Então, vamos simplesmente pensar caiu basicamente para 100 por cento? O que isso significa é que quando eu clico em OK, você pode ver a imagem inicial aqui. Portanto, 17,5 MB de tamanho e a nova imagem tem 3,4 MB de tamanho. Agora ele vai carregar muito mais devagar. Então, quando eu clico aqui e passo o mouse, você pode ver 17,5 mb. E esta é a imagem aqui. Mas quando eu otimizá-lo, será 3.4. Então, quando eu clico em Salvar, tudo bem , aqui, queremos substituí-lo. Eu quero digitar, sim. E basicamente substituirá essa imagem. Então, quando eu clico agora e passo 17,5 MB, deixe-me atualizá-lo rapidamente. E você pode ver que tem 3,4 MB. Então, basicamente, começamos com 17,5 MB. Agora estamos em 3,4 mb. E o mais importante de tudo, se eu passar o mouse aqui, você pode ver 7952 com 5304. E se levarmos você de volta aqui, você pode ver que essas são exatamente as mesmas dimensões em que funcionam com a imagem original. Isso apenas reduz o tamanho da imagem em geral. Então, o que isso significa para você, basicamente, dará aos seus desenvolvedores muito mais espaço de jogo, porque você reduz o tamanho dos arquivos pode ir ainda mais longe. Por exemplo, estou usando o Adobe XD diariamente para criar todos os meus projetos. Então você pode imaginar que eu vou colocar essa imagem de oito K em algo que é, digamos , 1920 por 1080. E então vou exportá-lo do XD nessa resolução específica. Então, 1920 por 1080, o que reduzirá ainda mais o espaço necessário. N reduzirá ainda mais o tamanho dessa imagem. Você pode dizer: por que não usá-lo assim imediatamente? Bem, porque você está inserindo todas essas imagens enormes no software de sua escolha. No meu caso, o Adobe XD vai ficar atrasado porque esses são arquivos enormes. Como você viu, apenas essa imagem em particular tem 17,5 MB. A maioria dos meus arquivos tem cerca de 20 MB. Então, você pode imaginar que o arquivo de design inteiro tem 20 MB e essa única imagem tem 17,5 MB. Portanto, lembre-se dessas coisas ao criar, especialmente para a web, porque você está tentando fazer com que o Google otimize este site. Você está tentando fazer com que o maior número possível de pessoas encontre este site. Portanto, é muito importante que você otimize essas imagens. E quando você trabalha com projetos de design móvel, isso também é importante. Porque então o sistema operacional e o próprio aplicativo, ele não extrairá todas essas imagens enormes do banco de dados, apenas extrairá uma imagem singular tamanho bem pequeno. E ainda conterá essa enorme qualidade que a possuía originalmente. Quando o fotógrafo tirou essa imagem. 98. Estrutura de nomeação: Da mesma forma que com a otimização de suas imagens, é muito importante nomeá-las adequadamente, pois dessa forma elas serão exibidas corretamente em seu site ou em seu aplicativo móvel. Será muito mais simples para seus desenvolvedores encontrarem essas imagens incluí-las no código. E será muito mais simples para código extrair essas imagens dos bancos de dados. Então, deixe-me mostrar o que quero dizer na imagem que acabamos de baixar. Então, se dermos uma olhada nessa imagem, eu baixei novamente no mesmo projeto para que você possa ver o nome até o ano, passar mesmo projeto para que você possa ver o nome até o ano, PA para VBC e C4 ou qualquer outra coisa. Ou seja, reduziu a imagem. Então, como você pode ver mais uma vez, 17,5 MB de sal do tamanho original, e você pode ver o título aqui. E se eu virar à direita aqui, você pode ver que temos um nome como esse. Então, o que podemos fazer com essa imagem, porque ela será inserida no software de nossa escolha. No meu caso, o Adobe XD. No seu caso, pode ser que Sketch, figma, o Photoshop Illustrator realmente não importa. Então, o que você pode fazer com essa imagem é clicar com o botão direito do mouse nela e renomeá-la dessa forma. Dessa forma, ao arrastá-lo e soltá-lo no software de sua escolha, ele se lembrará desse nome. E então, quando você o exporta, ele o exportará assim. A outra coisa que você pode fazer é acessar algo como o Lightroom, por exemplo, e editar metadados dessa imagem em particular, o que fornecerá muito mais detalhes sobre quando essa imagem está, foi filmado com qual câmera, com qual lente você se expõe e assim por diante. Portanto, isso pode ser exigido de você se você estiver trabalhando em algum tipo de projeto de design gráfico, por exemplo , para editoriais e coisas assim, especialmente se essa imagem for impressa em telas enormes. Portanto, alguns grandes clientes sofisticados precisarão de todas essas informações para Mu. Portanto, certifique-se de entender que, independentemente do tipo de projeto em que você está trabalhando, existem alguns requisitos, mas para a maioria desses projetos web e projetos de design de aplicativos, simplesmente renomear seu arquivo será bom o suficiente. Então, se eu levar você de volta aqui mesmo para nossa imagem, o que você pode fazer é imaginar que essa imagem, por exemplo , estará localizada na sua seção de heróis. O que você pode fazer é clicar com o botão direito do mouse em Renomear e simplesmente chamá-lo de herói, IMG. Ou se você é um desenvolvedor quiser adicionar traços, adicione hero, dash, IMG ou underscore como este. Então, aqui, sublinhe o IMG. Então, isso realmente depende de desenvolvedor para desenvolvedor. Então, quando você está iniciando seu design, se tiver acesso às informações de contato de seus desenvolvedores, talvez simplesmente pergunte isso a eles ou simplesmente pergunte a seus clientes para que eles possam perguntar ao seu desenvolvedor. Então, isso, por sua vez será muito mais rápido para você quando começar a criar, para que você possa renomear todas essas imagens e ativos, por exemplo, como ícones e ilustrações antes de começar a trabalhar, depois, quando você começar a trabalhar. E então você precisa renomear todos esses arquivos depois de incluí-los no software de sua escolha. Eu sei que no Adobe XD é realmente uma dor enorme quando você inclui imagens como com esse nome que vi até o erro 58, seja o que for. E então, quando você tenta exportá-los para o seu desktop e deseja enviá-los aos nossos desenvolvedores, você precisa renomear manualmente todos eles em sua pasta de exportação, por exemplo, e especialmente se você compartilhar com algo como sapling, por exemplo , com seus desenvolvedores, então você precisa renomeá-los em Sapling. Então, é realmente uma confusão. Se você puder renomear todas as suas imagens ou pelo menos algumas delas com antecedência. Porque dessa forma, será muito mais simples para você projetar. E também não se esqueça de perguntar aos desenvolvedores que tipo de abreviatura eles gostam? Além disso, se você, por exemplo estiver usando essa imagem de herói e imaginar que, se eu te levar aqui, talvez isso seja sobre nós. Este será o produto um, essa será a seção um do blog. Isso vai ser um depoimento ou algo assim. Certifique-se de renomear todas as suas imagens corretamente. Então, por exemplo se seu depoimento tiver quatro imagens , pergunte ao desenvolvedor sobre abreviações. Então, por exemplo, traço depoimento um traço de depoimento dois traços três traço quatro e qualquer outra coisa ou sublinhado ou sem traços, sublinhados e assim por diante. Então, apenas um depoimento de todos eles juntos. Certifique-se de perguntar se eles gostam do Caps Lock ativado. Mas a maioria dos desenvolvedores não. A maioria dos desenvolvedores, pelo menos que eu conheço, gosta de usar imagens com letras e números minúsculos para que não gostem que sejam maiúsculas. Veja , por exemplo , essas são apenas algumas dicas e técnicas Gosto de compartilhar com vocês porque acho que isso vai melhorar enormemente seu tempo nesses projetos e vai melhorar enormemente a qualidade de sua entrega aos seus clientes. 99. SECÇÃO 12 ATRIBUIÇÃO: Sua tarefa para esta seção é apenas escolher um projeto diferente no qual você deseja trabalhar. Se você usou a mesma equipe em todo o projeto, pode usar essa , por exemplo , escolher cinco imagens diferentes que funcionarão melhor para esse projeto específico e tentar otimizar eles usando algumas ferramentas que mencionei nesta aula. E só tentei ver que tipo de impacto isso causará quando você realmente começar a criar seu design. 100. SECÇÃO 13 placas de humor: Os painéis de humor são uma ótima maneira de deixar você de bom humor, de qualquer forma, daí o nome das palavras do humor, e são incrivelmente fáceis de criar. Neste design moderno, as ferramentas que costumavam ser muito complicadas serão Castle. Na época em que costumávamos criar sites e aplicativos com o Photoshop, por exemplo, mas agora com essas ferramentas de design modernas, é mais fácil do que nunca criar quadros de humor. E eles são incrivelmente úteis para deixar você de bom humor, inspirá-lo e entender um pouco melhor o que seu cliente realmente precisa desse projeto, quais são as cores que você deve usar, que tipo de imagens você deve usar? E só para se inspirar nesse projeto. Então, vamos começar. 101. O que são quadros de humor e por que usá-las: Os painéis de humor são realmente extremamente importantes e , na minha opinião, são a parte fundamental de todo processo de design, seja um projeto grande ou pequeno, porque na fase de mood board, você pode realmente comunique-se claramente com seus clientes e vá direto ao que eles precisam. Com quem eles estão falando? Quão grande é o projeto, quão grande é o público, quem é o público e todas essas perguntas diferentes. E você pode usar o mood board para determinar a direção geral do projeto, para onde o design será direcionado. Você pode fazer isso antes de realmente começar a projetar, o que economizará muito tempo, pois você determinará o estilo, o pagamento do projeto, as cores, as fontes, a iconografia e muito mais mais nesta fase específica com moodboards, em vez de mais tarde, quando você realmente inicia seu software de design favorito e começa a projetar, você pode comunicar claramente esses valores de seus clientes. Em seguida, descreva para seu cliente o que é realmente importante para esse projeto específico. Para que eles possam entender antes de você realmente começar a projetar, que precisam se concentrar? Então, como eu disse, esse estágio é muito importante, na minha opinião porque vai salvar você e seu cliente muito tempo depois. Porque nesse estágio específico, você determinará para onde será o estilo geral do projeto. É claro que o design variará muito mais tarde, quando você realmente começar a projetar. Mas o tom geral do projeto, com as cores, as fontes , a direção do design, tudo será determinado nesse estágio específico com os painéis de humor. Mais tarde, você pode começar a projetar. Você pode adicionar todos esses tipos de elementos diferentes. Mas, por enquanto, como eu disse, vamos nos concentrar nas coisas básicas e mais importantes. Você usará seu resumo de design para determinar todos esses elementos de design e decisões de design. Você fará ao seu cliente todas essas perguntas de design usando seu resumo de design, como quem é seu público-alvo, qual é o nicho deles? Há algum concorrente nesse nicho? Quem são os principais concorrentes? Quem são os concorrentes menores? Qual é o tom geral do design? Então, é divertido ou divertido? É sério? É corporativo? Qual é o tom geral de entrega da cópia do site? E muito mais. Então, como eu disse, você determinará todos esses elementos na fase de mood board não mais tarde na fase de design, o que, como eu disse, permitirá que você economize um monte de tempo em design, tanto para você quanto para seu cliente. Na próxima lição, discutiremos quais elementos você deve considerar em seus quadros de humor. Então, eu vou te ver lá. 102. Quais elementos a considerar: Dependendo do nicho em que seu projeto está e do seu cliente, você incluirá ou considerará incluir elementos diferentes. Então, se seu estilo é corporativo, obviamente você vai usar imagens corporativas. Você vai usar uma fonte clara para ler porque precisa entender quem é seu público-alvo. Então, essas não são crianças, provavelmente são pessoas de meia idade ou pessoas mais velhas. Então você tem que considerar a topografia, você tem que considerar o contraste, a facilidade de leitura do site. Portanto, você precisa considerar todas essas coisas ao planejar seu nicho e seu projeto. Além disso, as imagens desempenham um papel muito importante porque imagens vão definir o tom e definir o ritmo do projeto. Portanto, você deve considerar que as cores também são uma característica importante do design do seu site em qualquer design. Então você tem que considerar as cores. As cores são divertidas e divertidas, como o texto vai contrastar entre essas cores. Assim, você pode determinar todas essas coisas no processo do Mood Board, do processo geral de design. Então, você vai descrever descobrir todos esses elementos quando começar a criar seus moodboards, não quando realmente começar a criar seu design. No próximo vídeo, mostrarei como fazer sua pesquisa, como , por exemplo, se ajustar a diferentes nichos, como explorar diferentes elementos e como apresentá-los ao seu cliente para que ambos Se você puder chegar a um acordo sobre para onde esse projeto será realizado e qual é o estilo e a direção do design oral. 103. Como fazer sua pesquisa: Neste vídeo, na verdade, vamos começar com uma pesquisa. E vou mostrar quais são alguns sites que você pode usar para fazer sua pesquisa e se comunicar claramente com seu cliente sobre quais elementos considerar. Então, deixe-me entrar no meu computador e eu vou te mostrar alguns sites. Então, os primeiros sites que temos são, na verdade, dribles. Dribble, como você sabe, é usado como inspiração, como na maioria das vezes para esses designers, especialmente no mundo do design de UI. Assim, você pode facilmente usar o drible aqui para explorar todos esses elementos. Assim, você pode usá-lo para explorar imagens. Você pode usá-lo para explorar a topografia e ver como a topografia é definida em alguns desses exemplos. Então, se fizermos uma pesquisa rápida aqui, por exemplo, se eu digitar corporativo, pressione Enter e veja aonde isso nos leva. Então, vamos usar o web design, por exemplo, ele não nos dá nada. Então, vamos usar o banco, por exemplo, ou o setor bancário. E vamos ver aonde isso nos leva. Então você pode ver aqui mesmo, para o banco, que não há cores gritantes , exceto por esses gradientes aqui. Mas isso é para determinar o tom geral do próprio site. Então, provavelmente, esse aplicativo de mobile banking aqui está falando para um público diferente. Então, provavelmente, um público mais jovem. Mas você pode ver aqui, eles estão usando realmente todas essas cores dorsais. Eles estão usando essas cores pretas, brancas. Eles estão usando esses fios verdes claros, por exemplo, então a cor provavelmente desempenha um papel fundamental e você pode fazer sua pesquisa aqui no Dribble para explorar, dependendo do projeto em questão e o projeto em que você está trabalhando, quais tipos de cores você deve usar para seu projeto de design específico. Em seguida, se dermos uma olhada na topografia, você pode ver que a topografia aqui está muito clara. Realmente está espaçado uniformemente. Portanto, o espaçamento é realmente muito bem feito aqui. E você pode ver que a maior parte desse texto é preta, o que, por sua vez, aproximará o texto do espectador e, ao mesmo tempo, facilitará a leitura. Então, esse exemplo é realmente ótimo. E se fizermos o contrário, podemos ver isso neste exemplo, por exemplo, porque é divertido com todas essas ilustrações e cores. Mais uma vez, os textos desempenham um papel fundamental porque são muito fáceis de ler, como você pode ver aqui. Se levarmos você ao Behance, que é outro site que você pode usar como inspiração. Se dermos uma olhada aqui e, por exemplo, digitando a mesma coisa. Então, centro bancário, veja aonde isso nos leva. Então, vamos usar este, por exemplo e podemos ver que é diferente do Dribble, se você ainda não sabia. Porque no Dribble você pode realmente postar essas apresentações mais curtas como esta, por exemplo, apenas uma imagem singular. Enquanto estiver nos beacons, você pode realmente publicar essas longas apresentações e aprofundar o projeto. E essa pode realmente ser uma ótima maneira de você se informar sobre a concorrência de seus clientes, por exemplo, digamos que eles estejam no espaço bancário. Você pode usar isso, por exemplo apenas para entender como eles fazem suas pesquisas, qual é seu público-alvo, quais são suas cores e qual é o raciocínio por trás da escolha dessas cores? Assim, você pode facilmente adaptar isso ao seu projeto específico. Se rolarmos para baixo aqui para ir para nossa fase de design, você pode ver que eles estão realmente usando essas cores dorsais. Então, preto e branco com um toque de azul. E isso é realmente o melhor design corporativo. Você pode ver textos grandes, muito fáceis de ler. Você pode ver logotipos, você pode ver esses gradientes por trás. Então, todos esses elementos realmente se destacam para mim neste exemplo em particular como algo tangível, que é fácil de ler, que é fácil de entender, que é fácil de limpar. E você pode ver como a topografia se destaca contra um fundo branco, como ela se destaca contra essas etiquetas, por exemplo, altura se ergue aqui. Esses grandes títulos. Portanto, é super fácil de ler. Se dermos uma olhada nas imagens e essa é a explosão, que é o próprio site da Shopify. E vou deixar links para tudo o que estou falando no PDF. Você pode baixar o PDF e simplesmente clicar nesses links para acessar todos esses arquivos que mencionei. E essas são imagens gratuitas de alta resolução, portanto, gratuitas para uso pessoal e comercial. Então você pode realmente encontrar ótimas imagens aqui, y2q aqui em primeiro lugar é para explicar as imagens. Então, por exemplo essa imagem e essa imagem, desde o início, contam uma história completamente diferente, mesmo que o tom seja muito semelhante porque provavelmente eles estão usando os mesmos fotógrafos. Esses fotógrafos gostam de usar certos filtros, como certas cores e como algumas chamadas se destacam em relação às diferentes cores. Como neste exemplo, não precisamos ver o céu azul. Podemos ver esse céu estourado com um filtro aqui no topo. Então, esses fotógrafos gostam de usar essas técnicas. Mas por que isso é importante para você como designer é simplesmente entender para onde você pode levar seu projeto em termos de imagens. Então, se rolarmos para baixo, você poderá ver coleções diferentes. Então, digamos, por exemplo , que seja uma cafeteria em questão. E você pode ver todas essas imagens de café com uma textura grunge, filtros muito escuros em geral. E você pode realmente falar com seu público se esse for seu público, e você pode entender facilmente quem é seu público se estiver simplesmente navegando nessas imagens. Assim como os mais jovens. Aqui estão os mais jovens. Eles estão gostando de café? Sim. A cafeteria de seus clientes está nesse tom, nessa vibração? É assim? Então, é realmente limpo e simples? Ou é algo um pouco mais sujo, algo um pouco mais antiquado. Assim, você pode facilmente distinguir e falar facilmente com seu público se usar imagens como essas. É por isso que eu disse que as imagens desempenham um papel realmente fundamental em cada design. Se eu finalmente levar você para o Envato Elements, que é um dos meus sites favoritos de recursos. Você pode ver aqui que eu explorei todas essas imagens diferentes para o design de fones de ouvido. E eu uso jovens. Jovens, neste caso, pelo design de fones de ouvido, porque esse é o principal grupo demográfico do meu cliente e eu simplesmente exploro algumas imagens aqui. Agora, o Envato elements é um serviço premium que você terá que pagar para usá-lo. Mas é fantástico porque em um único lugar e você pode encontrar vídeos de estoque, você pode encontrar modelos de vídeo, você pode encontrar feiras de música, modelos gráficos e muito mais, incluindo imagens. No meu caso, acabarei por emparelhar essas imagens, que correspondem à topografia com os ícones correspondentes e muito mais para obter aquela visão coerente que meu cliente vai querer, se eles concordarem, podemos simplesmente passar para a fase de design e começar, por exemplo, com wireframes. Mas antes de tudo isso, quero determinar se é esse estilo de tutorial que meu cliente gosta de usar? Isso é algo em que eles estão interessados? Isso é algo que agrada a eles? Essa é a cor certa? Esse é o tom certo? Esses modelos estão fazendo as poses certas? Então, vou considerar todos esses elementos antes de passar para o design. Porque quando eu começo a projetar, todas essas decisões foram tomadas no quadro de humor, mood board faz parte do processo. Assim, posso simplesmente aplicá-los ao meu design e começar a trabalhar no meu design. É por isso que os moodboards são importantes. É assim que você faz sua pesquisa. E no próximo vídeo, vamos começar com o Adobe XD. Vou mostrar alguns exemplos já criados e vou mostrar como você pode criar os seus próprios e como comunicar suas ideias aos seus clientes. Então, eu vou te ver lá. 104. Crie quadro de humor no Adobe Xd: Neste vídeo, usaremos o Adobe XD para criar nosso mood board. E também vou mostrar alguns dos meus exemplos que você pode comprar, se quiser ou não, você pode simplesmente explorá-los para se inspirar. Se continuarmos e mudarmos para o Adobe XD, o que fiz aqui foi criar documentos de 1920 por 1080. Agora, se você quiser imprimir este documento, o que você pode fazer é vir aqui e girá-lo. Claro que você pode ser tão preciso quanto quiser. Você pode importar o número exato de pixels do tamanho do papel se quiser imprimi-lo posteriormente. Então, por exemplo, se você estiver usando o A4, você pode pesquisar o A4 on-line ou abri-lo no Photoshop e pode simplesmente ver o tamanho exato do pixel. Você pode inserir esse tamanho de pixel aqui. Lembre-se de que você não precisa usar 300 DPI porque o Adobe XD é uma ferramenta vetorial. Então você não precisa fazer isso. Você pode simplesmente importar para 72 DPI aqui. Você pode simplesmente criar seu quadro de humor e exportá-lo mais tarde. Você pode salvá-lo aqui mesmo, como você vê, eu o salvei em meus documentos do Cloud, o que é ótimo porque posso acessá-lo onde quer que eu esteja. Então, por exemplo, se estou trabalhando em um desktop como estou fazendo agora, posso ir à reunião do meu cliente no escritório deles, por exemplo, e posso abrir meu laptop. Posso abrir o Adobe XD com a mesma conta. E eu posso simplesmente extrair esse documento da minha nuvem e podemos simplesmente discutir nosso quadro de humor dessa forma. Então, se voltarmos para o Adobe XD, o que vou fazer é simplesmente chamá-lo de quadro de humor aqui. Antes de prosseguir, quero seguir em frente e mostrar meus exemplos. Então aqui está meu site, web donut.net. E, como eu disse, você pode comprar esses modelos se quiser. Você pode abri-los facilmente no Adobe XD e depois trabalhar com eles dessa forma. Caso contrário, você pode simplesmente usá-los como inspiração. Então, o que temos aqui são esses moodboards, e eles estão em tamanho A4 e tamanho de letra dos EUA aqui. E você os obtém no Adobe XD em arquivos do Photoshop. Se alguns desses produtos forem arquivos do Photoshop, você poderá abri-los facilmente no Adobe XD porque eles foram criados pela mesma empresa. Portanto, a Adobe possui o Photoshop e o XD, e esses arquivos funcionarão perfeitamente no Photoshop e no XD. Se voltarmos aqui, você poderá ver todos esses diferentes layouts de imagens e quatro cores. Você pode facilmente trocar essas imagens por logotipos, por exemplo, e você pode ver que elas estão impressas, prontas e todos esses layouts Se voltarmos para este, isso é para o Instagram porque é quadrado, mas você pode se adaptar facilmente para trabalhar com qualquer tamanho, como você pode ver aqui para as histórias ou para as reais, por exemplo, então essas são postagens do Instagram, essas são histórias do Instagram. Você pode ver como isso parece. E se mudarmos para este, isso é para modelos de quadro de humor de mídia social. Mais uma vez, a mesma coisa. E você pode ver que eles são quadrados ou retangulares, o que é ótimo para o Facebook, por exemplo, se você estiver usando mídias sociais e puder trocá-las facilmente, poderá alterá-las. Você pode usar todos esses layouts diferentes para criar o seu próprio. E você pode adaptá-los facilmente e ver como eles se parecem em diferentes páginas de mídia social. E, finalmente, temos esse. Então, quatro deles, e como eu disse, vou vincular todos eles no arquivo PDF. Você pode simplesmente, se quiser clicar no link de cada um deles, acessá-lo facilmente, se quiser. Caso contrário, como eu disse, você pode simplesmente usá-lo como inspiração. Então, se voltarmos aqui, você pode ver como é essa. Então, mais uma vez, está pronto para impressão. Você pode ver alguns desses elementos de apresentação como incluir logotipos diferentes, cores diferentes, imagens diferentes, e você pode ver o resultado aqui. Agora, você pode usar isso se quiser economizar facilmente um monte de tempo, se quiser, se não, como eu disse, eles são ótimos para inspiração. Você pode se inspirar sobre onde posicionar todos esses elementos diferentes. Caso contrário, você pode simplesmente criar o seu próprio, dependendo do projeto em que está trabalhando no momento. Como ele disse em um dos vídeos anteriores, dependendo do tamanho do projeto, do nicho em que seu projeto está, em que seu cliente está, você vai investir mais ou menos tempo. E essa parte dos projetos não deve ser demorada. Deve ser muito rápido e fácil. Não deve levar mais de um dia para ser concluído, não importa o tamanho da empresa, o tamanho do projeto, não importa o nicho em que seu cliente esteja. Então, considere isso. Não gaste muito tempo em quadros de humor porque eles existem simplesmente para determinar a pasta oral, o estilo e o tom do projeto. E então, quando você começar a projetar, investirá a maior parte do seu tempo nessas mudanças específicas. Então, se dermos uma olhada no Adobe XD, essa é a aparência do nosso documento, e eu posso simplesmente distorcê-lo assim, por exemplo, se quisermos alcançar algo um pouco mais parecido com quatro, como eu disse, você pode inserir facilmente os valores corretos aqui se isso for algo que você deseja. Então, vamos começar com imagens porque eu tenho algumas imagens preparadas. Eu quero fazer é simplesmente criar um retângulo e eu posso usar uma grade de repetição se eu quiser obter uma aparência como esta, e eu posso escolher ficar assim, por exemplo, então você pode simplesmente desagrupar a minha grade, duas vezes clique em uma delas e simplesmente a traga de volta para aqui. Por exemplo, eu posso escalá-lo facilmente. E isso não precisa ser perfeito se você não quiser simplesmente adaptá-lo assim para criar um círculo, por exemplo, ou um elemento como esse, eles podem se sobrepor, você pode incluir sombras diferentes. Então, por exemplo, assim. Então, 5520, digamos e vamos reduzir essa sombra para oito, por exemplo, algo assim. O que eu vou fazer é realmente selecionar todos os meus elementos desta forma. Vou remover a borda e incluir algo como DDT, que é uma bela cor cinza claro. Talvez eu possa reduzi-lo um pouco para algo assim. E, por exemplo, eu posso trazer isso aqui. Eu posso posicioná-lo aqui. Posso clicar com o botão direito do mouse e copiar a aparência do botão direito do mouse e colar para poder colar a mesma sombra. Mas vou simplesmente reduzir o raio do canto de volta a zero. E talvez eu possa facilmente inserir essa imagem. Talvez eu possa expandir este com apenas um toque para algo assim. Talvez eu possa expandir isso para aqui. Então, como você pode ver, essa é claramente uma variação diferente dos exemplos que são mostrados. Então, se eu voltar a esses exemplos, você pode ver que essas imagens são realmente muito retas. Eles podem facilmente incluir ossos aqui. E você pode ver todas essas cores diferentes posicionadas aqui. Você pode ver textos diferentes, você pode ver imagens diferentes. Mas em nosso exemplo, tudo está em todo lugar. Estou fazendo isso apenas para mostrar que você também pode adotar essa abordagem. Mais uma vez, dependendo do projeto, dependendo do nicho. Porque seus clientes corporativos não vão gostar desse estilo que estou criando no Adobe XD no momento. Mas seus clientes que gostam de usar algum tipo de estilo divertido e divertido vão realmente apreciar esse tipo de design. Então, se voltarmos para o Adobe XD e eu vou mostrar isso aqui. Então, vamos simplesmente posicionar aqui. Talvez em algum lugar por aqui os analistas usem o Controle D. Eu vou duplicá-lo e posicioná-lo aproximadamente por aqui, por exemplo, e talvez em algum lugar por aqui. E talvez eu possa usar a mesma distância de 52 neste caso, talvez eu possa fazer isso. E talvez eu possa mudar a cor por trás da minha cela para que você possa vê-la. Então, posso mudar a cor para algo um pouco mais escuro porque vamos usar essa amostra de cor para nossas cores. Então, posso reduzir o tamanho para aqui e usar a grade de repetição mais uma vez para extrair algumas cores, por exemplo, algo assim, talvez desagrupar a migração. E talvez eu possa posicionar isso um pouco aqui. Talvez eu possa aumentá-lo assim. E talvez você possa usar mais um. Então, Controle D. Eu posso reduzi-lo um pouco e talvez posicioná-lo aqui. Então, agora que temos todos esses elementos, talvez o que esteja faltando seja alguma tipografia. Então, eu posso pressionar T e digitar, por exemplo, brincalhão. Isso e eu podemos, por exemplo, usar algo como o Open Sans. Nesse caso, talvez eu possa usar um pouco negrito e escalar isso para 36, talvez apenas para que você possa ver. Tão brincalhão. Controle D, eu posso, por exemplo, digitar. Controle D, algo como amizade. Controle D, eu posso colocá-lo aqui, café. E digamos Control D. Relaxation. Aí vamos nós. Este é o nosso quadro de humor preparado. O que vou fazer a seguir é simplesmente trazer minhas imagens. Já tenho algumas imagens que preparei apenas para esta demonstração. Mas você pode usar as imagens de seus clientes, ou pode usar um dos sites sobre os quais falamos, ou ainda melhores elementos do Envato porque eles literalmente têm tudo. O que vou fazer é arrastar e soltar uma imagem aqui. Só para preenchê-lo. Eu vou deixá-lo aqui mesmo. A propósito, você pode usar a grade de repetição ao criá-la, basta arrastar e soltar a primeira imagem que será preenchida com todas as suas imagens. E então você pode fazer todas essas mudanças que eu fiz neste caso. Mas eu gosto de fazer assim. Ou talvez eu possa posicionar isso aqui porque é uma cafeteria. Eu vou colocá-lo aqui. Talvez eu coloque essa imagem aqui. Clique duas vezes e mova-o assim. E vamos ver, talvez eu possa posicionar essa imagem aqui assim. Isso não funciona para nosso exemplo. Então, o que eu vou realmente fazer é talvez arrastar e soltar, digamos que essa imagem seja assim. E eu acho que é muito melhor. O que vou fazer a seguir é simplesmente provar algumas cores. Mas antes de fazer isso, o que eu posso fazer talvez seja encontrar outra imagem que corresponda, bem. Porque eu não preparei nenhum logotipo para aqui. Mas, por exemplo, eu. Talvez eu possa clicar aqui e usar um desses. Então, vamos ver o que é. Logotipo Ui. Então eu acho que agora, porque você pode usar esses plug-ins e extensões para fazer isso facilmente. Então, como eu disse, você pode extrair imagens do seu cliente, do seu computador, do Envato Elements, por exemplo, ou de um desses plug-ins. Mas digamos que UI Faces. E eu quero incluir do Unsplash, quero usar, digamos, filtros masculinos e femininos. E vou clicar em Aplicar aleatoriamente. E ele escolherá uma imagem e será aplicado aleatoriamente a esse espaço reservado para imagem em particular. Como você pode ver, ele posicionou este. Se isso é algo que você quer, tudo bem. Mas vamos realmente voltar para nossa pasta e ver. O que eu gostaria de fazer é realmente trazer este porque é uma cafeteria. E posso clicar duas vezes posicionar aqui, porque o café realmente deveria estar no centro desse design em particular. Finalmente, o que eu quero fazer é realmente provar algumas cores. Então, o que eu gostaria de fazer é ir do mais claro para o mais escuro. É mais fácil, no meu caso, mas você pode fazer o contrário como quiser. Então, para este, posso simplesmente clicar aqui e, por exemplo, selecionar este. E eu posso clicar aqui e talvez começar com, eu não sei. Vamos com este. Talvez. Posso clicar aqui e experimentar um desses. Então eu posso usar minhas cores escuras como esta. Isso será muito bom se seu cliente já tiver alguns móveis, por exemplo, e ele lhe enviar imagens de sua cafeteria lá. Assim, você pode facilmente extrair essas imagens e extrair amostras de cores dessas imagens específicas e apresentá-las facilmente neste quadro de humor. Então, lá vamos nós. Como eu disse, você pode se aprofundar muito. Você pode realmente entrar em muitos detalhes. Ou você pode simplesmente induzir algo assim, que é rápido, que é limpo apenas para mostrar ao seu cliente quais são as possibilidades desse projeto em particular. Mas você também pode simplesmente selecionar essas cores. Vá aqui, clique aqui para adicioná-las às suas cores. E, por exemplo, se você precisar alterar essa cor do texto, posso simplesmente clicar aqui, por exemplo, e posso facilmente alterar e aplicar cores diferentes. Se você quiser obter um visual ainda mais divertido, pode acabar com algo assim. Se isso for algo que seu cliente apreciará. Se esse é o nicho deles, se é algo que eles gostam, ela vai seguir em frente. Mas se for um pouco mais corporativo do que você, talvez possa entrar inexplorado. Vou explicar como mostrei nesses moodboards que criamos. Finalmente, o que eu quero mostrar é que você pode incluir alguns elementos de fundo. Então, por exemplo, eu posso desenhá-lo, arrastar e criar um retângulo como este. Eu posso criar uma cor como essa. Eu posso posicioná-lo aqui. E se eu não gostar da cor, posso trocá-la facilmente e alterá-la para algo assim. Só para fazer minhas imagens se destacarem um pouco. E incluir talvez esses elementos lúdicos em seu cliente para as pernas. E você pode conseguir um resultado como esse. Isso é tudo para este vídeo. No próximo vídeo, mostrarei como você pode compartilhar esse quadro de humor com seu cliente. Se você quiser receber feedback on-line ou não, pode imprimi-los facilmente. E vou mostrar como você pode exportar para impressão do Adobe XD, como elas parecem impressas e o que você realmente pode fazer com elas. Então, eu vou te ver lá. 105. Compartilhe ou exporte seu quadro de humor: Neste vídeo, vou mostrar algumas configurações que você pode usar para exportar seu moodboard e fonte, imprimindo-os. E também posso mostrar o que você pode fazer para compartilhar esse quadro de humor on-line com seu cliente e obter o feedback dessa forma. Então, se voltarmos para o Adobe XD, aqui está nosso quadro de humor que criamos. O que você pode fazer é simplesmente compartilhá-lo assim. Assim, você pode compartilhar esse quadro de arte específico que criamos com seu cliente e pode simplesmente compartilhar apenas este. Ou você pode clicar aqui na guia Compartilhar. Clique em Gerar link no botão azul, que aparecerá por aqui. Você pode copiar esse link e compartilhá-lo com seu cliente. Agora, o que esse link permitirá que você faça é coletar feedback e seu cliente pode deixar seu feedback nesse quadro de humor específico se estiver longe de você, por exemplo, que é um ótima maneira de se comunicar com clientes que não estão na sua área. Então você pode simplesmente compartilhar esse link com eles. Eles não precisam ter uma conta da Adobe, nenhuma conta. Eles podem simplesmente entrar nesse link e simplesmente deixar um feedback para você. Você pode consultar minhas outras aulas sobre design de UI UX para ver isso em ação e ver esse processo de compartilhamento em ação. Porque é realmente profundo e você pode realmente apontar os giros. E eles podem deixar alguns comentários sobre certas partes do seu design e assim por diante. Mais tarde, quando você começar a criar seu design no Adobe XD, por exemplo, você pode expandir esse arquivo existente para adicionar wireframes, você pode adicionar design. Você vai fazer a prototipagem. Você pode adicionar guias de estilo, você pode fazer tudo dentro desse único arquivo. Então, seu link de compartilhamento obviamente vai crescer. Certifique-se de usar a versão gratuita do Adobe XD para compartilhar apenas um design com seu cliente, pois esse é o limite do plano gratuito. Se você tem um plano premium e um plano premium, como assinatura do Adobe XD Creative Cloud ou o plano premium do Adobe XD , você não tem esse limite. Mas se você estiver usando a versão gratuita, você tem isso limitado a apenas um link que você pode compartilhar com seu cliente. Então, mais uma vez, se você estiver interessado, não deixe de conferir minhas outras aulas, pois minhas outras aulas, pois esses tipos podem realmente ser aprofundados. E acho que em uma das minhas aulas anteriores, há algo como uma sessão de 3h. Onde quer que estejamos, encontraremos detalhes sobre as configurações de compartilhamento do Adobe XD porque você pode compartilhar para clientes, compartilhar para desenvolvedores, compartilhar sua apresentação ou compartilhar de forma personalizada e ajuste todas essas configurações diferentes dentro dela. Então, eu não tenho tempo para essa aula em particular e eu realmente não quero aborrecê-lo porque só temos quadros de humor. Mas quando você começa a expandir, isso é realmente fundamental para entender o que você precisa fazer para compartilhar com seus clientes. A próxima coisa que podemos fazer é exportar isso. Então, se voltarmos aqui, posso ir para Arquivo, Salvar como e salvá-lo assim. Ou eu posso simplesmente pressionar Control E no meu quadro de arte e posso simplesmente exportá-lo assim. Então, eu posso usar PNG, posso usar SVG, posso usar PDF e posso usar JPEG. Você pode definir o destino aqui. Portanto, essa é a saída para onde seu arquivo irá depois de salvo. Então, o que vou fazer é pressionar JPEG, pressionar Exportar e pressionar Control E mais uma vez. Em seguida, altere-o para PDF. E vou exportá-lo mais uma vez. motivo pelo qual estou fazendo isso é simplesmente ter a capacidade de imprimir jpeg e PDF e simplesmente comparar com qual tipo de elemento ele funciona melhor. Então, por exemplo, em alguns casos, os PDFs têm maior qualidade. Em outros casos, os jpegs têm maior igualdade. Então, o que eu realmente recomendaria é exportar o parafuso e ver aonde cada um deles vai levar você. Então, vou imprimi-lo agora e voltar e mostrar como parece impresso e o que você pode fazer com essas versões impressas. Deixe-me agora mostrar como parece impresso. Então, aqui temos o arquivo Adobe XD, e aqui você o imprime. E o que você pode fazer com esta versão impressa é simplesmente usar sua caneta e papel e ir até seu cliente e discutir possíveis soluções, discutir possíveis mudanças. Então, se você se encontrar com eles na casa deles, no escritório, por exemplo, eles podem dizer que está muito escuro. Isso é, por exemplo, a chave, o mundo-chave que talvez eles queiram usar em sua cópia, digamos. Ou se isso é algo que eles estão se esforçando para alcançar. Então você pode realmente discutir com eles todos esses tópicos diferentes, todas essas soluções diferentes que você criou aqui e imprimi-las aqui mesmo. Então, por exemplo, você pode dizer que essas imagens não funcionam. E eles querem ver mais deles. Por exemplo, não incluímos nenhuma pessoa aqui. Talvez mais pessoas. Imagens. Mais desses modos de café, por exemplo, algo assim. Então você entendeu a ideia, discutirá com eles todas essas mudanças, todas essas imagens diferentes, todas essas cores. E quando você concorda com eles, por exemplo , aqui, incluímos apenas uma fonte. Mas talvez se você incluísse várias fontes diferentes em seu moodboard, talvez eles peguem essa e digam que vá com esta. E se você escolheu várias fontes com várias cores, talvez eles digam que sim, essa fonte com essa cor, por exemplo funcionará bem. No nosso caso. Você notará um pouco de equipe, um pouco de tendência se desenvolvendo quando você começar a explorar isso em Quando você começar a conversar com seus clientes, deixei propositalmente um espaço em branco ao redor de todos os meus imagens, em todas as minhas cores, só para que eu possa escrever isso facilmente. Você não precisa fazer isso. Você pode alternar facilmente n, por exemplo, você pode chamar essa imagem de número 1234. E do outro lado, você pode virar na imagem um, por exemplo , você pode dizer “bom”. Imagem três, por exemplo, não é boa ou muito escura ou o que você quiser obter. Como sua referência. Isso é apenas para ajudá-lo quando você começa a desenvolver esse design, quando você começa a desenvolver esse tom. E, como eu disse, isso é muito bom porque você pode imprimi-lo e dar ao seu cliente. Eles podem deixar essas anotações e podem facilmente ter uma ideia de onde esse projeto vai voltar e avançar. Se você puder, você pode fazer essas mudanças com as coisas que acabamos de discutir. E você pode imprimir isso mais uma vez. Você pode voltar para o seu cliente se ele estiver em algum lugar perto de você, e então você pode sentar com ele mais uma vez e simplesmente perguntar: Essa é a direção certa agora? É assim que você quer que pareça mais nessa direção? Você gosta mais desse estilo e de todas essas perguntas diferentes. Então, se eles disserem que sim, você pode pular aqui e então você pode facilmente pegá-los, por exemplo, assim. E se eles não gostarem desse, talvez você possa fazer assim. Então, como eu disse, este é apenas um exemplo rápido do que você pode fazer com essas peças múltiplas. Portanto, certifique-se de entender que esse processo de painel de humor levará tempo e, às vezes, em alguns projetos, você levará, por exemplo 15 minutos para ser criado e talvez 30 minutos para ser discutido. com seus clientes em alguns projetos, você levará um dia para criar em dois a três dias para discutir com seu cliente, para determinar o estilo geral, por exemplo , uma direção neural do projeto em si. Portanto, certifique-se de calcular isso em seu orçamento, pois essa é a parte do processo de design, você deve cobrar por quadros de humor. Então, certifique-se de entender que, quando começar a trabalhar, como eu disse, certifique-se de ajustar o tamanho do papel. Então, por exemplo, isso é A4. Se você estiver trabalhando com o tamanho de letra dos EUA , por exemplo , você pode ajustá-lo a esse tamanho específico no Adobe XD aqui. Então, como eu disse, você pode pular aqui, ajustar os pixels conforme necessário, ajustá-los como quiser. Você pode inverter isso se for algo que você deseja e ter certeza de quando imprimi-lo. Não se preocupe com 300 DPI porque, como eu disse, adobe XD é uma ferramenta de tipo vetorial. Então é isso. Certifique-se de testá-lo, não deixe de experimentá-lo, não deixe de falar com seus clientes. Porque, como eu disse várias vezes ao longo desta aula, essa parte do processo de design é determinar o estilo geral, a direção geral, o tom do seu papel. Portanto, certifique-se de levar isso em consideração em suas direções de design. 106. SECÇÃO 13 ATRIBUIÇÃO: Sua tarefa para esta seção é criar seus próprios moodboards. Você pode usar apenas um que você pode criar, você pode criar cinco quantas quiser e quanto tempo você realmente tiver para investir em um. Mas tente começar com uma e tente escolher algumas cores aleatórias de imagens aleatórias que você realmente gosta. E tente combiná-los em algo útil que você possa realmente usar em seu projeto. Tente praticar dessa forma e, mais tarde, na verdade, quando quiser experimentar com projetos reais e clientes reais, certifique-se de pegar o logotipo deles e escolher as cores dele. Certifique-se de tirar suas imagens favoritas, as existentes ou as que elas realmente gostam, tente usar inspirações diferentes de sites diferentes que eles forneceram no design brain, por exemplo. e acabei de tentar combinar tudo em um quadro de humor utilizável. 107. SEÇÃO 14 Kits de IU: Os kits de interface do usuário podem ser incrivelmente importantes e úteis em seu processo de design, porque você pode reutilizar alguns desses elementos repetidamente . Nesta seção da aula, falaremos sobre o que é um kit de interface do usuário, como criar o seu próprio usando o Adobe XD e como reutilizar alguns desses elementos em seus designs. Então, vamos começar. 108. O que são kits de IU e por que eles são úteis: Os kits de interface do usuário são basicamente apenas uma coleção de elementos diferentes que você pode usar seus projetos de design de interface do usuário. Esses projetos podem variar de design móvel a projetos de design de sites projetos de design de produto , como painéis e aplicativos da web e projetos dessa natureza. Eles podem vir em diferentes tipos de arquivo, por exemplo, Photoshop, Sketch, Illustrator, Figma, Adobe XD. E nesta aula, vamos nos concentrar no Adobe XD. Também podem ser imagens largas e sem imagens. E vamos explorar algumas diferenças entre esses dois tipos. Por que um é melhor que o outro e vice-versa? E, principalmente, você usará esses kits de interface do usuário para acelerar seu fluxo de trabalho porque fará essas tarefas repetitivas, especialmente no design de interface do usuário, por exemplo, você criará navegações para todos os seus projetos. Então, em vez de recriar essa navegação per se para cada projeto em particular, você vai criar apenas um tipo de navegação e, em seguida, simplesmente expandir sua ideia a partir de um tipo de navegação, que eu também vou te mostrar mais tarde nesta aula. Então, basicamente, você acelerará seu fluxo de trabalho na próxima vez que iniciar um projeto de design porque você terá todos esses diferentes tipos de arquivos salvos em seu computador. E então, basicamente, serão capazes de usar e reutilizar todos esses elementos diferentes para todos os seus projetos diferentes. Agora, como vamos trabalhar no Adobe XD, trabalharemos com componentes e você poderá reutilizar esses componentes para alterar as cores, alterar os tipos de arquivo, para mude a estrutura, para mudar a sombra de fundo, por exemplo , para mudar as cores e muito , muito mais com seus filhos, você poderá se adaptar para diferentes projetos. Então, mais uma vez, por exemplo, se você estiver criando no Adobe XD per se, você pode criar componentes, por exemplo design de site em tela cheia, digamos 1920 por 1080, então você pode descer e criar tamanhos de redimensionamento responsivos para seus projetos de design responsivo. O mesmo vale para designs móveis, por exemplo, você cria seu kit de interface do usuário para aplicativos web iOS. Em seguida, você deseja criar o mesmo kit de interface do usuário para funcionar no Android. Será muito mais simples quando você realmente tiver os tipos de arquivo e os arquivos já preparados. Então, para fazer isso do zero, isso permitirá que você cobre mais por seus projetos porque você poderá entregar mais rapidamente. Porque você vem preparado com esses kits de interface do usuário e prepara todos esses elementos para seus projetos futuros. Então, no próximo vídeo, vamos explorar essas diferenças entre kits de UI com imagens e sem imagens. Quais são alguns benefícios e desvantagens de cada um deles? E nos vemos no próximo vídeo. 109. Tipos de kits de IU: Neste vídeo, vamos explorar algumas das principais diferenças dos kits de interface do usuário com imagens e sem imagens. Quais são algumas das principais desvantagens e pontos de venda de cada um deles? Então, vamos começar. Então, aqui eu abri um UI eight, que é um site onde você pode realmente comprar esses kits de interface do usuário. E falaremos sobre esses sites um pouco mais tarde neste vídeo em particular Só quero focar nas diferenças entre kits de interface de usuário com imagens e sem imagens. Para que cada um deles pode ser usado? E o que você pode aprender sobre a criação desses kits de interface do usuário para seus diferentes tipos de projetos. Então, o que temos aqui é esse kit de interface de usuário quântica, que é, como dizem, uma enorme biblioteca de seus cartões para serviços web. E o que eles realmente criaram aqui, como você pode ver, são todos esses componentes diferentes, que são basicamente modelos com aparência de site que você pode usar e reutilizar em seus projetos futuros. Então, por que isso é útil se eu clicar com o botão direito do mouse, abrir a nova guia e ampliar para que você possa ver alguns desses detalhes. Você pode ver que aqui temos, por exemplo este controlador Sony Dual Shock para preto, ou temos o preço, temos esse ícone. Então, basicamente, o que você pode fazer com esse design é simplesmente trabalhar com esse design exato. Basta criar um componente, por exemplo, para este controlador dual show. E digamos que você queira substituir isso dentro do componente, por exemplo, para adicionar um produto diferente, digamos que talvez você queira vender o iPhone, então você pode criar um componente de dívida do este cartão em particular. Você pode simplesmente arrastar e soltar a imagem do seu iPhone. Você pode arrastar e soltar as informações do iPhone que você tem à venda. E Dario, você não precisa criar o cartão mais uma vez, você não precisa adicionar a sombra projetada. Você não precisa escolher a fonte específica. Você não precisa escolher o layout da tipografia, não precisa escolher a hierarquia. Tudo isso é feito por você mesmo no projeto anterior. E agora você pode simplesmente usar e reutilizar exatamente esse mesmo componente em seus projetos futuros. Vou explicar isso um pouco mais adiante na lição, especificamente sobre o Adobe XD, como você pode escalar esses componentes, como podemos alterá-los, usá-los e reutilizá-los e assim por diante. Mas neste exemplo, como eu disse, queremos nos concentrar em kits de UI com imagens e sem imagens e no que você pode usar em cada um desses quatro. Então, voltando a este exemplo, você pode ver quantos deles eles têm. Eles têm esse carro à venda, por exemplo, eles têm essa carga de mais componentes. Então, basicamente, todos esses componentes são extremamente cruciais para criar em um kit de interface de usuário, porque você vai usá-los e reutilizá-los para cada projeto. Então, em navegações, rodapés, cartões de blog, esses são itens de loja e assim por diante. Então, será muito útil ter tudo isso em seus projetos futuros. Se dermos uma olhada neste, chamado de plataforma, nosso kit de wireframe. Então, qual é a diferença aqui entre este e esse? Basicamente, os kits de estrutura de arame são esses kits de interface de usuário sem imagens. E você pode encontrá-los on-line ou onde quer que você pesquise. E eu realmente recomendo que você crie esses tipos de wireframe em kits de interface do usuário. Por quê? Porque você sempre pode arrastar e soltar imagens nos lugares desses kits de wireframing. E você não precisa se registrar com esses tipos de arquivos enormes porque obviamente, quais são os softwares que você está usando, se você não tiver imagens incluídas em seus designs, seus tipos de arquivo serão muitos menor. Vai ser muito mais fácil trabalhar com esses arquivos. Então, se você os tiver com imagens, também será muito mais simples mostrar essas crianças de wireframe para seus clientes e simplesmente dizer a eles imagine incluir imagens dentro, dentro da imagem espaço reservado, por exemplo, você pode alterar a cor. Então, digamos que você possa falar com seu cliente e comunicar essa ideia, por exemplo , imagem será azul, como neste caso, aqui, para que eles possam saber, ok, então esse plano de fundo será apenas imagem. Então, será muito mais simples para eles entenderem e visualizarem em suas cabeças que a imagem vai para lá. Para você, será muito mais simples alterar e fazer alterações nesses kits de wireframe do que nos kits de interface do usuário. Porque os kits de interface do usuário com imagens serão muito mais difíceis de mudar , porque você sempre seguirá algum tipo de estrutura de imagem. Você sempre vai seguir algum tipo de tom de imagem. Talvez você experimente suas cores a partir de suas imagens. Portanto, é bom ser muito mais simples usar cores e usar todos esses elementos do wireframe kids, porque você não tem imagens instaladas. Posteriormente, ao determinar a estrutura com seu cliente durante o trabalho nesse projeto, você pode simplesmente arrastar e soltar imagens dentro e, em seguida, simplesmente ajustar um pouco o design. Por exemplo, inclua a sombra projetada aqui e ali, apenas para destacar o botão, por exemplo , na navegação, na imagem do herói ou nos textos. Talvez você deva mudar a cor do texto de escuro para claro e vice-versa dependendo da imagem de sua escolha. Portanto, crianças com wireframe são muito mais úteis na minha opinião. E então kits de interface do usuário, porque os kits de interface do usuário, como eu disse, seguem a estrutura das imagens e, portanto, se adaptam a essa estrutura e a essas imagens, enquanto as crianças de wireframe simplesmente usam a estrutura em si e não se adaptam para qualquer coisa. Você pode simplesmente arrastar e soltar imagens dentro dela mais tarde. Agora, finalmente, há mais uma coisa que eu quero mencionar, são fluxogramas. Os fluxogramas vêm em diferentes tipos de tamanhos de arquivo, diferentes tipos de elementos. E isso é algo chamado fluxograma móvel de esquema. E eu posso te mostrar um dos meus produtos de fluxograma um pouco mais tarde, porque eu preciso, e vou mostrar como eu os criei e como você pode usá-los para comunicar ideias com seus clientes. Voltando a este, porque você não pode vê-lo. Aqui. Eu o abro em uma nova guia, e aqui você pode ver que eles não usam textos reais. Eles não usam imagens reais. Eles apenas usam esses espaços reservados, por exemplo , este será o parágrafo o subtítulo do título. Esta é a imagem, esse é o botão, essa é a paginação. Você pode ver que eles estão usando ícones para navegação e pesquisa. Usando esses ícones sociais para Facebook e Twitter. E o que isso vai permitir que você faça é poder comunicar suas ideias muito mais rapidez com seu cliente. Porque, mais uma vez, como acontece com os kits de wireframing e UI, você não perde seu tempo escolhendo essas imagens, escolhendo essas cores. Você está simplesmente criando layouts que você pode se comunicar e compartilhar com seu cliente. Depois que essas camadas forem aprovadas, você poderá trabalhar nos detalhes. É por isso que esses kits de wireframe, kits de interface de usuário e esses fluxogramas são tão cruciais para você criar. Então, você pode imaginar que pode começar a trabalhar em um fluxograma, por exemplo, para seu cliente. Depois que o projeto estiver concluído, você pode simplesmente reutilizar esse fluxograma em termos de criação de um kit de interface do usuário para seu próximo projeto, você pode simplesmente criar componentes para formas, cores, fontes, para imagens, para botões e assim por diante. E você pode simplesmente usar e reutilizar esses componentes em seus projetos futuros, o que, por sua vez, economizará muito tempo e ajudará você a seguir em frente com seus projetos mais rápido permitirá que você carregue muito mais porque você gastará muito menos tempo em cada projeto porque já criou todos esses componentes. 110. Quais componentes são importantes: Quando se trata de estrutura, esses componentes são realmente importantes e menos importantes. Então, na verdade , tudo depende de você quais tipos de componentes deseja usar. Então, digamos que você esteja trabalhando em projetos de blog o tempo todo. Basta dar uma olhada em seus trabalhos anteriores e entender quais tipos de componentes você usou no passado. Obviamente, algum tipo de barra de pesquisa ou algum tipo de rodapé de navegação, talvez até mesmo controles deslizantes aqui ou portas de imagens sejam realmente obrigatórios porque esses são tipos de elementos que vão use todo o tempo em seus projetos. Mas, dependendo do nicho, você é independente dos projetos nos quais trabalhará anteriormente e nos quais anteriormente, é você quem determinará quais tipos desses elementos você está usando para usar em seus kits de interface do usuário. Então, vou mostrar os exemplos anteriores que mostrei. E você pode determinar, analisando a dose, quais tipos de elementos você pode escolher. E nos próximos vídeos desta aula, vou mostrar quais são alguns tipos de elementos usados no passado e o que você pode aprender com isso. Então, voltando a esses exemplos que mostrei anteriormente, você pode ver que eles têm comércio eletrônico aqui. E se eu percorrer todo o caminho até aqui, para que possamos ver o comércio eletrônico. E se eu rolar até o final, você pode ver o Dashboard. Então, se você está trabalhando em projetos que exigem todos esses elementos, você pode imaginar o quanto todos eles são demorados. Assim, você pode criá-los uma vez e depois simplesmente reutilizá-los alterando as cores, alterando, por exemplo posição desses diferentes textos e assim por diante. Se rolarmos até o fim, teremos cartões da empresa. Então, isso pode ser, por exemplo depoimentos, características, preços do portfólio da equipe sobre nós , depoimentos e coisas assim. Se rolarmos até o final, podemos ver placas de música e vídeo. Portanto, talvez não sejam tão importantes quanto os anteriores e podem variar de projeto para projeto. Cartões de notícias e revistas. Mais uma vez, se você está trabalhando em projetos de blog o tempo todo, eles são realmente cruciais. Então, depois de criá-los, será muito mais simples reutilizá-los e reutilizá-los para projetos futuros. E você pode ver aqui, então temos diferentes tipos de navegação. Temos esses cartões sociais que, mais uma vez, dependendo do projeto em que você está trabalhando, podem ser importantes ou menos importantes. Temos elementos básicos e cartões de estilo. Portanto, temos elementos básicos, como navegação, rodapés e migalhas. Temos esses diferentes ícones, carregadores, controles deslizantes, botões e cores. E, finalmente, você tem as páginas de amostra neste kit de interface quântica em particular. E você pode ver essas páginas em busca de inspiração e ver onde elas usaram todos esses elementos diferentes. Se dermos uma olhada na plataforma e tivermos cabeçalhos, teremos conteúdo. Então, mais uma vez, blocos de conteúdo, controles deslizantes, grades simples. Então, basicamente, imagens em uma grade à esquerda e à direita. Temos esse cara para Grid. Temos características futuras à esquerda, certo? Por exemplo, com maquete de celular, com maquete de site, desculpe, maquete de laptop com maquete de tablet. Mais uma vez, temos portfólios diferentes, dependendo de onde você está trabalhando, em qual natureza, quando usar um ou outro. Temos comércio eletrônico, especialmente importante se você estiver trabalhando com sites de comércio eletrônico. Temos cartões no blog. E, obviamente, você pode usar e reutilizar esses componentes diferentes, por exemplo , esses cartões de bloco, você não precisa usá-los para sites de blogs. Você pode usá-los, por exemplo, para sites de comércio eletrônico, essa é a beleza desses kits de interface do usuário. Você pode simplesmente reutilizar esses cartões em seus projetos futuros e simplesmente adaptá-los para funcionar nesse projeto específico. Assim, podemos ter depoimentos de equipes, tabelas de preços e apelo à ação. Essas tabelas de preços são especialmente chatas de criar porque, basicamente, digamos que você tenha, por exemplo 20 exemplos diferentes dessas tabelas de preços on-line e todos esses outros exemplos são apenas variações desses exemplos. Então, por que você perderia tempo recriando o tempo todo? Todos esses elementos simplesmente criam, por exemplo cinco ou seis tabelas de preços de uma vez e, em seguida, simplesmente reutilizá-las para seus projetos futuros, economizará muito tempo, especialmente com esses detalhes chatos, onde você tem a maioria dessas opções diferentes, especialmente com a tabela de preços. Então você tem opções, você tem preços, você tem plano mensal, plano anual. Portanto, todos esses detalhes levarão muito tempo para serem criados para cada projeto específico. Portanto, tê-los em um kit de interface de usuário economizará muito tempo. Se dermos uma olhada aqui, chamada à ação, especialmente importante com todos esses cartões promocionais, temos fóruns e contextos. Mais uma vez, com esses formulários, quantas dessas variações você pode realmente ter? Então, digamos que você possa criar, por exemplo , 15, 20 formulários de contato. Aí está. Você pode reutilizá-los para todos os seus projetos futuros. E cabeçalhos e rodapés, especialmente, são chatos para mim criar por causa da repetitividade. E eles estão usando todos esses elementos diferentes. Por exemplo, o logotipo do cliente será à esquerda, à direita e ao centro na parte inferior. E é basicamente isso. Assim, ao começar a criar esses kits de interface do usuário, você pode ter uma ideia de quais tipos de elementos você precisa criar mais. Quais tipos de elementos você precisa criar menos óbvia para qualquer tipo de natureza, em algum tipo de formulário de contato , será bom incluir. Mas, basicamente, uma vez que você começa a criar, você pode usar o formulário de contato para isso, a partir deste projeto. Você pode usar o formulário de contato deste projeto e simplesmente se adaptar e trabalhar em seus projetos futuros. Esse é todo o ponto de vista, eu estou brincando. E é por isso que eu acho que eles são extremamente úteis de ter e criar. E, obviamente, a criação desse kit de interface do usuário não será fácil. Não vai acontecer primeiro. Esse é o processo que você vai usar e reutilizar ao longo de sua carreira. Então, você pode basicamente descartar alguns elementos que não são mais relevantes em termos de estilo, em termos de função. Talvez alguns elementos não sejam usados na indústria ou mais, então você pode simplesmente descartá-los e usar elementos que simplesmente se adaptam e se ajustam ao kit de interface do usuário que você está usando. Então essa é a beleza dos kits de interface do usuário e é por isso que eu os amo tanto. E acho que você deveria começar a explorá-los também. 111. Estrutura do kit de interface do usuário no Adobe Xd: Neste vídeo, mostrarei algumas ideias de estrutura para seus kits de interface do usuário no Adobe XD. Vou mostrar meus exemplos porque venho criando essas interfaces de usuário e UX há quatro anos. E eu tenho mais de 500 produtos de design em minha loja online feitos em the.net. Vou deixar os links para tudo e, falando sobre isso, no PDF, você pode simplesmente clicar nesses links, visitar e explorar. E se você estiver interessado, compre até mesmo todos esses produtos diferentes que mencionei n, que mencionarei no futuro. Quando realmente chegarmos a esses tipos de venda e perfis nesses sites, você poderá vender seus designs. Mas, por enquanto, vamos explorar a estrutura desses kits de interface do usuário, como eles podem funcionar no Adobe XD e como você pode aprender com eles e criar seus próprios. Então, o que eu tenho aqui é o construtor de páginas de destino convertidas, que é o produto que criamos há algum tempo. E este é o kit de wireframe, obviamente, como você pode ver. E se eu ampliar um pouco mais, mas você pode ver aqui que temos a navegação, temos os cabeçalhos, a história, os recursos, os benefícios, a promoção, depoimentos, a equipe, os preços, outros. E para tudo isso, temos várias opções, obviamente porque esse é o construtor da página de destino. Esses são os elementos que serão usados na maioria das páginas de destino. E isso é destinado a alguém que está criando essas páginas de destino o tempo todo porque a maioria dessas empresas está criando essas páginas de destino o tempo todo, por exemplo, para se divertir. iniciando campanhas, para seus lançamentos de produtos, para suas promoções de produtos, para todas essas campanhas, para anúncios no Facebook, para anúncios do Instagram, anúncios do YouTube e assim por diante. Portanto, as páginas de destino são extremamente importantes para isso. Este produto específico foi criado para funcionar com páginas de destino. Então, mais uma vez, vamos voltar ao nicho. Qual é o seu nicho e qual é o tipo de projeto em que você está trabalhando? Você vai criar componentes que funcionarão nesse nicho. Se voltarmos aqui, por exemplo, eu posso ver que são 1.400. E eu posso entrar aqui para criar um novo quadro de arte. E eu posso pular aqui, criar este, clicar aqui e simplesmente ajustá-lo para 1.400, assim para que todos os nossos elementos funcionem. E vou expandi-lo ainda mais. Então, o que eu posso fazer é, por exemplo clicar nesta navegação Controle C. Clique aqui, controle V. E eu posso, por exemplo, clicar aqui, controlar C, controlar V e ajustar isso para caber. Posso até mesmo colocá-los dentro da pilha e, em seguida, simplesmente arrastar e soltar dentro da pilha. Mas também podemos fazer isso mais tarde. Por exemplo, eu quero mostrar essas características diferentes. Então, vamos ver onde estão os recursos. Aqui estão eles. Então, por exemplo, I. Posso usar este controle C, controle V. E você pode ver como é fácil criar esses sites, digamos que esta posição aqui. Talvez eu queira usar esse agora. Posicione aqui. Talvez eu queira usar esse aqui. Assim. E digamos que agora a hora do preço, coloque-o aqui. E talvez algo assim. Quero persuadir ainda mais as pessoas. Coloque aqui mesmo. E a posição não importa , por enquanto, e você vai ver o porquê em apenas um segundo. Então, coloque-os aqui. E digamos que agora que sua landing page esteja concluída, você pode selecionar todas elas, pressionar Control G para colocá-las em um grupo e depois colocá-las em uma pilha. Esta é a pilha vertical e eu posso colocar a distância de 150, por exemplo, entre elas e pressionar Enter ou Return. E agora temos um espaço uniformemente espaçado entre todos os nossos elementos. Eu posso colocá-los todos no topo da página assim. E, por exemplo, eu não quero que seja um quinto disso. Então, eu posso simplesmente ajustar apenas este para zero. E todos esses outros terão 150 para o espaçamento. Assim, você pode ver como é simples criar uma landing page. Você pode clicar duas vezes aqui para fechá-lo aqui. Por exemplo, digamos que a cópia esteja pronta e você queira fazer algumas alterações nas imagens. Você pode simplesmente arrastar e soltar suas imagens aqui, colocá-las e, em seguida, simplesmente fazer alterações. Por exemplo, temos esse ícone de imagem aqui. Eu posso simplesmente clicar em Excluir para removê-lo. E eu posso, por exemplo, diminuir a opacidade da minha imagem para que ela se destaque um pouco mais. E, por exemplo, quero adicionar uma imagem adicional aqui. Talvez nesta imagem, eu queira adicionar algo para o vídeo. Talvez. Talvez essa imagem funcione para que você possa ver como é simples trabalhar com essas imagens diferentes. Então eu posso selecioná-lo, pressionar para, talvez, 40% de opacidade. Talvez eu possa usar um ícone diferente e diferente aqui. E talvez eu queira dizer que isso é, sei lá, algo um pouco mais redondo. Então eu posso pular aqui, digitar 20 para o raio do canto. Se eu quiser fazer isso, você pode ajustar isso para ter uma ideia como é simples criar esses elementos. Então, essa é basicamente minha estrutura e como minha equipe e eu estamos trabalhando há anos nessas estruturas. E vou te mostrar uma estrutura diferente para crianças móveis. E este é o kit Chetty UI. E você pode ver que temos imagens aqui. Obviamente, será muito simples substituir todas essas imagens. Você vai usar exatamente a mesma estrutura. Então, se eu der uma olhada aqui, talvez eu queira ajustar essas imagens para que eu possa selecioná-la e esta, e talvez eu possa selecionar duas imagens diferentes, arrastá-las e soltá-las dentro. E eu quero usar este, por exemplo, para que você tenha uma ideia de quão rápido ele é. Mas o que você também pode fazer é clicar aqui, e aqui temos todos esses elementos diferentes. Agora, os elementos são realmente úteis. Temos esse azul principal e eu quero clicar com o botão direito do mouse, clicar em Editar e talvez eu queira alterá-lo para vermelho. Portanto, observe como ela se aplica a todas as nossas diferentes mudanças e é simplesmente ajustada para leitura. Eu também posso usar o Control Z. para desfazer isso. Também podemos alterar os tamanhos e as opções de fonte. Podemos alterar os pesos das fontes. Podemos mudar todos esses elementos diferentes. Então, o que posso fazer é clicar em Editar e, por exemplo quero escolher outros telefones como Open Sans, por exemplo, pressionar Enter. E aplicará essa mudança em todo o nosso design. Então você pode ver como isso é fácil e simples. Além disso, podemos ter todos esses componentes diferentes que podemos alterar de forma independente. Então você pode ver, por exemplo que temos esses pontos que são pretos, aqui, aqui e aqui. Então, em todo o nosso design e em tudo mais, que é preto, queremos mudá-lo para algo selvagem, como ler mais uma vez, por exemplo, você possa ver o que tínhamos. Essa cor será aplicada em todo o design de arte. E isso se aplicará onde quer que o tivéssemos em primeiro lugar. É por isso que todos esses componentes são extremamente úteis. E no próximo exemplo e no próximo vídeo, mostrarei como você pode transformar seu design existente em UIKit porque você não comprará esses kits de interface do usuário para cada projeto. E acho que é uma abordagem muito melhor, embora eu esteja vendendo esses kits de interface do usuário, é uma abordagem muito, muito melhor começar com um kit de interface de usuário premium apenas para sua estrutura, apenas para esse elemento, apenas para alguns elementos chatos, que você pode reutilizar para seus próprios projetos e seguida, criar seu próprio kit de interface do usuário usando esses elementos, usando essas táticas e técnicas, o que funcionará para o seu caso de uso específico. Porque vou voltar ao nicho mais uma vez. Como você está, por exemplo em um nicho de viagens, elementos que funcionaram para você em seu projeto podem não funcionar para alguém que está em um nicho de blog, por exemplo, porque eles podem precisar de elementos diferentes. Então, no próximo vídeo, mostrarei como você pode transformar seu projeto existente em kits de interface do usuário. 112. Criação de kit de interface do usuário no Adobe Xd: Neste vídeo, mostrarei como você pode transformar seu projeto existente em UIKit e depois reutilizá-lo para seus projetos futuros. Essa abordagem pode ser usada para diferentes projetos , grandes e pequenos. E você pode usar certos elementos ou pode usar todos os elementos e simplesmente continuar a partir daí. Você pode usar um tipo de elemento, por exemplo , navegação, se for algo que está se repetindo o tempo todo em seu projeto, ou você pode usar diferentes tipos de itens, por exemplo , navegações, imagens de heróis, rodapés, blog, corações e todos esses tipos de itens. Então, vou mostrar neste exemplo de para os projetos existentes como você pode transformá-lo em um kit de interface do usuário. Este é o projeto que eu criei para um dos meus cursos anteriores. Vou deixar, deixar o link no PDF para que você possa dar uma olhada se estiver interessado. Então, todos esses elementos são criados nessa classe. Portanto, tem mais de 20 horas de duração. E mais uma vez, vou deixar o link no PDF para que você possa acessá-lo rapidamente. E o que temos aqui são componentes diferentes para as cores, estilos de personagens, todos esses componentes para todas essas cartas diferentes, temos ícones diferentes, temos estruturas diferentes, certo? aqui. Temos o logotipo, temos as setas, as cartas e muito, muito mais. Então, o que você pode fazer para isso é, se eu clicar aqui, mais uma vez, estamos em 120º em vez de 1.400, como fizemos da última vez. Então, o que eu posso fazer é clicar na minha prancheta para criar uma nova prancheta. Ou posso simplesmente duplicar o existente. Melhor ainda, o que eu posso fazer é ir direto aqui para o Arquivo. E então New, desculpe se está um pouco atrasado porque estou executando todos esses elementos na minha máquina. E esse arquivo é bem grande. Então, vou criar um novo arquivo e simplesmente reutilizar alguns desses diferentes elementos em meu projeto. Tudo bem, agora que criamos esse projeto, o que vou fazer é pular aqui mesmo para o design do site. E eu vou pular até aqui, apertar o Controle C. E então vou mudar para o projeto que acabamos de criar, apertar o Controle V, para que eu possa simplesmente colar dentro desse design. E o que eu também posso fazer é voltar para aqui. E talvez eu possa usar um outro. Vamos usar esse controle C. E eu vou entrar neste projeto, apertar o controle V. E então, uma vez lá vamos, só para economizar um pouco de tempo, o que eu vou fazer é Na verdade, desligue isso, então mate. E como você pode ver, alguns elementos já foram colados do nosso projeto anterior, como todos esses ícones diferentes. Mas não temos cores e estilos de personagens e podemos trabalhar com eles separadamente. O que eu queria te mostrar é isso. Então, vou ampliar isso. E digamos que eu queira usar essa navegação, mas antes de tudo, vamos usar a mesma grade. Então, se eu ligá-lo, temos, vamos ver, 12 colunas. Então 60, 82, e eu vou fazer o mesmo com isso. Então, temos 60, 82. Aí vamos nós. Então, é o mesmo que este. E vou diminuir a opacidade dessas linhas de grade dessa forma. Então, digamos que eu queira usar essa navegação para poder pressionar o Controle C e colá-la aqui. E o que eu posso fazer é posicioná-lo aqui. E digamos que essa seja nossa primeira navegação. Vamos às nossas camadas. Portanto, podemos usar, por exemplo, Nav one. E o que eu também posso fazer é desvinculá-lo. Então, vamos clicar com o botão direito. Deixe-me ver onde está. Componente não vinculado. Aí vamos nós. Então esse é o único fim. Podemos criá-lo para ser componentes locais. Podemos pressionar Control K se quisermos, e podemos criar estados diferentes a partir dele. Então, eu posso clicar aqui e digitar, por exemplo , botão grande, grande btn. E o que eu quero fazer aqui é clicar duas vezes dentro e estender esse botão para ouvir e talvez mover mais nossos itens de navegação. Digamos que eu queira alinhá-los aqui, ou talvez ainda melhor no centro, desta forma. Então, se dermos uma olhada nesse estado padrão e nesse estado, temos esses dois estados separados. Então, o que você pode fazer com este é simplesmente manter Alt em seu estado padrão, posicioná-lo aqui também, não sei, digamos 60 e, em seguida, usar esse estado. E você já tem dois tipos de navegações diferentes. Então, digamos que eu queira criar outro. Assim, podemos voltar ao estado padrão, que é esse, criar um novo estado. E, por exemplo, eu posso colocar algo como sem texto, algo assim. Então, nesse estado, o que vamos fazer é basicamente entrar e remover nosso texto, abrir, selecionar nosso texto e clicar em Excluir. Então, agora só nos resta nosso botão. E podemos expandir esse botão ou deixá-lo assim. Tudo depende realmente de você. Então, o que vou fazer é selecionar este, movê-lo para 60 e clicar sem textos. Então, lá vamos nós. Temos nossos três elementos diferentes e três elementos de navegação diferentes já criados. Você também pode organizá-los, e eu gosto muito de fazer isso. Então isso agora é um, agora são os dois. E essa será a terceira etapa. Deixe-me dar apenas mais um exemplo para que possamos voltar ao padrão e criar um sem um botão ou sem btn, para abreviar. Então, o que vamos fazer é basicamente criar um ponto de seleção. Então, a partir daqui, temos 40 anos e vou selecionar nosso botão excluído e selecionar todos os nossos itens de navegação. Assim. Posicionou-os no deslocamento de borda 1234. Então, estamos a 40 dessa borda, mesma forma que estamos com essa borda. E, basicamente, vou fazer isso mais uma vez. Então, vou manter meu Alt ou opção, selecione know btn. E aí vamos nós. Eu posso voltar ao estado padrão e você pode ver o quão rápido isso é, quão rápido isso é. E isso vai te poupar muito tempo. Vou mudar isso para um botão grande como este. Então, você economizará muito tempo depois para seus projetos futuros. E você já viu como é simples copiar e colar no vídeo anterior. Mas você também pode fazer imagens para esse herói, por exemplo, então vamos clicar em Control C. Eu vou para Controle V. E o que eu recomendo que você faça é renomear isso para navegação e criar separadamente rpart para essas imagens de heróis, por exemplo, neste caso, digamos que temos essas pessoas desse lado e vamos duplicá-las. Controle J, desculpe, Controle D, assim e posicione para 60. Então, mais uma vez, isso estará em uma prancheta separada, então vamos realmente criar isso. Então, vou remover esses dois. E você pode posicionar rodapés dentro da sua navegação, se quiser. Já depende de você como você deseja criá-los. E vou chamar isso de Herói, por exemplo porque essas imagens de heróis são algo em que você passará a maior parte do tempo. Então, digamos que, neste segundo exemplo, que será um herói para esse herói. Observe como eu não crio componentes a partir desses. Eu quero te mostrar essa segunda abordagem. Então, como eu já mostrei com esses, os componentes são obviamente extremamente simples de criar, mas você também pode usar componentes e pode simplesmente criar os elementos separados para si mesmo. Então, digamos que eu queira posicionar esse texto à direita. O que podemos fazer com esses é posicionar esses dois em um grupo, colocá-los em uma pilha e simplesmente inverter a ordem, assim. E agora o texto está desse lado, as pessoas estão desse lado. E o que também podemos fazer é usar esses elementos de fundo. Então, essa forma de herói, talvez eu queira girá-la assim, e eu queira posicioná-la assim. E todos esses elementos diferentes. Então, Hero Elements, vou posicioná-los aqui mesmo. Então você pode imaginar como isso é simples, n. Eu também tenho uma máscara aqui com meu círculo de heróis dentro. Então, vou posicioná-lo aqui. Então, lá vamos nós. Só temos alguns cliques. Temos duas opções diferentes que podemos mostrar aos nossos clientes. O que isso vai fazer por você mais uma vez, permitirá que você trabalhe muito mais rápido nesses projetos, especialmente com essas tarefas repetitivas, como mencionei. Então, navegação, imagens de rodapé e todos esses elementos diferentes que se repetirão o tempo todo, como tabelas de preços, por exemplo, então é muito mais fácil para você como designer, crie todas essas variações em seu estilo, usando seus componentes, usando sua linguagem de design, usando sua fonte preferida, usando suas cores preferidas e, em seguida, simplesmente reutilize-as componentes para seus projetos futuros. Isso é trapaça para seus clientes? Saiba, porque seus clientes só querem o resultado final. Eles não se importam com a forma como você chega a esse resultado final. Isso é algo que você reutilizou? Obviamente que é, mas certifique-se de não usar nenhum logotipo que você usou anteriormente em seus projetos e de não usar nenhuma marca, por exemplo, certas cores em seus livros de marca que você obtém com seu clientes, por exemplo, algumas cores são marcas registradas, algumas fontes são marcas registradas. Portanto, certifique-se de usar, por exemplo fontes gratuitas do Google ao começar a criá-las e, em seguida, simplesmente adaptá-las às especificações do seu cliente, por exemplo, para cores e fontes. Deixe-me mostrar mais uma coisa. Com o poder de x D, temos todos esses elementos diferentes. Então, imagine que queremos usar essa imagem. Então, Controle C, Controle V aqui. E digamos que essa seja nossa primeira carta. Então, vamos chamá-la de carta um, como pato. E aqui temos a pilha, como você pode ver. Então eu vou bater em Alt. O que fazer ainda melhor? Eu posso criá-lo como um componente. Então, Control K, temos esse estado padrão com a imagem à esquerda. Então, novo estado, imagem certa. E, em seguida, basta ajustá-lo para aqui. Assim. E o que vou fazer com este é basicamente invertê-los. Então, lá vamos nós. E eu vou ajustar esse cartão. Primeiro, vou me certificar de que minha imagem está aqui, e aí vamos nós. Então esse é o nosso estado padrão. Essa é a imagem certa. E mais uma vez, vou criar mais um. Então, centralize a imagem assim. E eu vou fazer uma mudança como essa. Então 123, então estamos em 60 assim. E, obviamente, para esta, vou usar a imagem central. Então, o que eu vou fazer é pular aqui. E eu vou mudar a posição da minha pilha. Então, o que vou fazer é colocá-los dentro de um grupo. Vou usar a pilha vertical da SEC assim. E, basicamente, basta expandir a imagem até as bordas, assim. Clique duas vezes no interior, posicionado, por exemplo, aqui. Aí vamos nós. O texto estará no centro em apenas um momento. Então, vamos para o estado padrão e vamos trabalhar na imagem central aqui. Porque esse é o nosso componente. O que eu quero fazer é basicamente ajustar esse texto. Então, vamos continuar, vamos ver a largura automática. Então, o que vou fazer é clicar duas vezes dentro e ajustar esse texto. Bingo um pouco lá fora. Mas você também pode criar uma altura automática e ajustá-la assim. E simplesmente traga o que você não precisa aqui assim. Então, temos apenas alguns cliques. Seremos capazes de ajustá-lo. E você pode fazer o peso automático, você pode fazer a altura automática, o que quiser. E vou me certificar de que isso esteja alinhado ao centro desta forma. E talvez eu posicione isso no centro e posicione meu botão no centro também. E certifique-se de que somos 40 de tudo isso. E apenas certifique-se de que estamos, porque estamos em uma pilha, por exemplo , 64, esta. E você também pode inseri-lo aqui. Então, se eu selecionar meu grupo aqui, selecione 60 e ele estará selecionado. Aí vamos com apenas alguns cliques. Você tem três cartas diferentes que você pode usar. Então, basicamente, temos imagem padrão, imagem direita, imagem central. Então você pode fazer o que quiser com eles. Assim, podemos ver como é simples criar esses elementos no Adobe XD. E mais uma vez, peço que você comece a pensar em seu projeto, comece a pensar em seu nicho, que são alguns elementos que estão se repetindo o tempo todo, que são procurados. Meus elementos que são extremamente chatos. Você pode comprar algo ou baixar algo gratuitamente que melhorará seu fluxo de trabalho, o que acelerará seu fluxo de trabalho? Ou você precisa criar tudo do zero, dependendo do novo córion, dependendo do seu estilo de design. Se for esse o caso, basta começar criando todos esses elementos regulares, como mostrei neste exemplo, por exemplo, navegação, rodapé, todos esses carros diferentes que são vai repetir o tempo todo e depois simplesmente expandir a partir daí ao longo do tempo. Por fim, o que quero mostrar é que, se voltarmos ao Adobe XD, você poderá ver que ele salvou esse arquivo na nuvem. Isso é extremamente importante, especialmente se você estiver compartilhando isso com seus colegas de design, com seus clientes ou se estiver trabalhando remotamente em empresas, por exemplo, você tem o escritório e você também funcionam no laptop. Mas o que eu também recomendo é salvar isso na sua área de trabalho. Para fazer isso, basta escrever aqui em Arquivo, Salvar como e escolher um documento tão seguro quanto o local em sua área de trabalho. O que isso permitirá que você faça é simplesmente ter esse arquivo, por exemplo, se a eletricidade acabar, você pode levá-lo ao seu laptop e levar seu laptop para onde quiser. Se você precisar ajustar e fazer algumas alterações rápidas, se a Internet desaparecer, que é realmente o principal benefício dos documentos locais, você pode simplesmente salvá-los localmente e simplesmente trabalhar ou não. Se você não tiver conexão com a Internet. 113. Sistemas de design da VS: Há também mais um tipo de modelo que está disponível on-line, chamado de sistema de design. E o sistema de design está basicamente morto. Envolve diferentes tipos de fontes, diferentes tipos de regras, diferentes tipos de grades em muitos outros projetos, especialmente se você estiver trabalhando com código. Então, você atribuirá trechos de código diferentes. Você atribuirá símbolos diferentes para cores, fontes e muito mais. Portanto, o sistema de design é muito mais complexo, melhor e um kit de interface de usuário. Então, dependendo dos projetos em que você está trabalhando, você pode criar um sistema de design que é menor se você estiver trabalhando em projetos pequenos ou se estiver trabalhando com projetos maiores, eu definitivamente recomendo trabalhando com o sistema de design. Mas a principal diferença entre o kit de interface do usuário e o sistema de design é que o UIkit já tem esses componentes pré-fabricados já criados. Então, como você viu no vídeo anterior, nós já criamos essa navegação. Então está pronto. Ele tem o logotipo dentro do qual você pode trocar com seu próximo projeto de cliente. Tem o tipo interno, então tudo já está posicionado. Você pode simplesmente renomear alguns desses tipos. Você pode alterar a fonte, os estilos, o tamanho e tudo mais. E ele já tinha esse botão instalado. Assim, você pode simplesmente ajustar a largura, a altura, a cor do botão, a sombra do fundo e todos esses elementos. E esse é o kit de interface do usuário em poucas palavras, enquanto com o sistema de design, você teria que recriar essa navegação do zero. E porque dentro do sistema de design você tem uma estrutura muito coerente. Então, mais uma vez, vou voltar ao projeto maior, especialmente no grande projeto que a maioria dos designers está trabalhando no mesmo projeto. Então, o sistema de design é realmente crucial porque você precisa ter um repositório central de elementos para ser usado por todos esses diferentes designers dentro de sua equipe. Já se você estiver trabalhando sozinho ou trabalhando com apenas um outro designer, ou se estiver trabalhando diretamente com o cliente, o kit de interface do usuário é uma solução muito melhor, na minha opinião, porque, mais uma vez, isso acelerará seu fluxo de trabalho enormemente porque você já tem todos esses elementos criados. Você não precisa criá-los do zero o tempo todo. Embora projetar sistemas seja extremamente importante, extremamente valioso e extremamente útil, na minha opinião, para esses projetos menores, você realmente não precisa criar esses sistemas de design porque tenha os componentes. Assim, podemos simplesmente ajustar os componentes. Você pode simplesmente ajustar o tamanho da fonte. Você pode simplesmente ajustar a família de fontes. Você pode ajustar a cor. Você pode ajustar todos esses elementos diferentes, por exemplo, ícones. Digamos que você esteja usando esses ícones de imagem em todo o seu design. E você só quer trocá-lo muito rapidamente enquanto pode criar um componente. E na próxima vez no próximo projeto, se quiser mudar isso, basta arrastar e soltar um ícone diferente dentro dele. Ele vai trocar esses componentes. E aí está. Você não precisa de um sistema de design para todos esses pequenos projetos. Então, mais uma vez, depende de você em que tipo de projeto você está trabalhando, em que tipo de nicho você está, especialmente para esses pequenos nichos, esses sistemas de design não são realmente úteis. Mais uma vez, tudo depende de você e vou deixar os links para alguns dos sistemas de design mais conhecidos em um PDF, você pode baixar a versão XD. Você pode abri-los no Adobe XD e simplesmente explorar o que são esses sistemas de design e o que você pode aprender com eles. Porque tudo isso é criado por grandes empresas. E mais uma vez, essas grandes empresas criaram esses sistemas de design porque têm vários designers trabalhando em uma equipe ao mesmo tempo. Então, eles precisam desse repositório central de elementos para ser usado por todos esses diferentes designers. Caso contrário, se você for apenas uma banda masculina, se estiver trabalhando em pequenos projetos, você pode simplesmente usar kits de interface de usuário e tudo ficará bem. 114. Kits de IU grátis do VS: É muito bom criar esses kits de interface do usuário sozinho. Mas às vezes pode ser mais fácil simplesmente baixar ou comprar esses diferentes kits de interface do usuário, que serão usados em seus projetos futuros, talvez para esses elementos chatos como falamos anteriormente, gostei da navegação, do rodapé, das tabelas de preços e assim por diante. Então, onde você pode encontrar esses kits de interface do usuário, mostrarei na próxima lição qual discutiremos a venda discutiremos a venda seus próprios kits de interface de usuário pessoais nesses sites. Mas basicamente o que eu queria compartilhar nesta lição é kits de interface de usuário premium são feitos apenas com uma marca idiota em mente. O que quero dizer com isso é que não há uma conexão certa entre esse kit de interface do usuário e uma determinada marca. Você pode imaginar que, se o iOS lançar seu kit de interface do usuário será específico para essas diretrizes de marca, para essas diretrizes de grade, para essas diretrizes de topografia e todas elas. elementos diferentes que compõem esse kit de interface de usuário específico e desse sistema operacional específico, nesse caso. Então é o mesmo. Se o Facebook, por exemplo, lançar seu próprio kit de interface de usuário, ele será reconhecido por essa cor azul, pela fonte da dívida e por todos esses elementos. Embora com esses kits de interface de usuário premium e gratuitos, que você pode encontrar on-line, não há uma marca específica em mente. Por que isso? Porque foi feito para ser usado por outros designers. Vai ser muito simples para você mudar as cores, alterar as fontes e todos esses elementos sobre os quais falamos antes. Então esse é o objetivo do kit de interface de usuário premium ou gratuito. Agora, qual é a diferença entre kit de interface de usuário gratuito e o premium? Obviamente, o número um está no preço. Os kits de interface de usuário gratuitos podem ser baixados gratuitamente, obviamente, e o premium pode ser comprado. E a principal diferença, na minha opinião, é o número de elementos. Normalmente, esses kits de interface de usuário gratuitos vêm com apenas dez ou 20 elementos diferentes. os kits de interface de usuário premium, como o kit de interface quântica, especialmente o que mostrei antes, vêm com, por exemplo, 1.000 elementos diferentes. Além disso, há diferenças nos tipos de arquivo, por exemplo, com kits de interface de usuário gratuitos, eles geralmente vêm com apenas um tipo de arquivo, por exemplo, Adobe XD ou Adobe Photoshop ou Sketch ou Figma ou qualquer outra coisa. Embora com os premium, os designers geralmente se esforçam para incluir todos esses diferentes tipos de arquivos. Portanto, não importa o que você esteja usando, você estará protegido. Além disso, há uma diferença na diferenciação dos elementos. Portanto, em kits de interface de usuário gratuitos, você simplesmente obterá, por exemplo, 23 categorias. Embora com kits de interface de usuário premium, você geralmente terá 102050 categorias diferentes. E, finalmente, quero mencionar o apoio. Se algo quebrar, se algo não funcionar com três kits de UI, basicamente, quem se importa, é gratuito e você não receberá nenhum apoio do designer. Já nos mercados premium, especialmente se você os estiver comprando diretamente no site deles, você basicamente terá direito ao suporte. E você será o primeiro na fila para obter ajuda desses designers que criaram esses kits de interface do usuário. Então, no próximo vídeo, vou falar sobre a venda de seus próprios kits de interface do usuário. E vamos basicamente navegar por esses sites diferentes. E vou mostrar onde você pode obter os kits de interface de usuário premium para si mesmo. E você também pode vender seus próprios kits de interface de usuário nesses sites específicos. 115. Como criar e vender seu kit de interface do usuário: Quando se trata de comprar kits de UI premium on-line ou quando se trata de vender seus próprios kits de UI on-line. Existem apenas alguns sites onde você pode fazer isso com sucesso. Existem muitos sites diferentes por aí. E meu conselho, como alguém que está nisso há seis anos é não tente vender em todos os lugares, porque você vai deixar para si mesmo dez, você vai gastar muito tempo com eles. sites que não vão gerar suas vendas. Segui esse conselho. Acompanhe este vídeo de alguém que faz isso há, como eu disse, há seis anos e tenho 100.000 vendas em todos os meus diferentes produtos. Então, eu deveria saber, penso em onde você deve vender e onde é lucrativo ou não. Então, neste vídeo, vou mostrar, como eu disse no vídeo anterior, esses sites onde você pode comprar kits de interface de usuário premium e onde você pode vender seus próprios kits de interface do usuário. Agora, primeiro de tudo, por que você deve vender seus próprios kits de interface do usuário em primeiro lugar. Na verdade, é um bom senso fazer isso e é apenas uma boa fonte de renda adicional para você. Se, por exemplo, você criou um kit de interface de usuário bonito para um de seus projetos anteriores. Você pode simplesmente expandi-lo usando as dicas e técnicas sobre as quais falamos anteriormente. Basta prepará-lo e vendê-lo em um desses sites diferentes. Você pode colocá-lo à venda pelo preço representado em todos esses sites diferentes. Você pode simplesmente ajustar o preço de mercado. Você pode explorar o que os outros estão fazendo. Basta se ajustar por si mesmo. Então, se você tiver, por exemplo 100 elementos em seus kits de UI e estiver oferecendo apenas um tipo de arquivo, que é o Adobe XD. Certifique-se de não cobrar muito porque você está competindo com outra pessoa que o está criando no Adobe XD sketch Figma Photoshop. Então, talvez seu filho venda muito melhor do que seu kit de interface porque eles estão oferecendo todos esses tipos de arquivos diferentes. Vamos entrar e vou mostrar todos esses sites diferentes e onde você pode vender seus produtos. E, antes de tudo, hospedagem própria. Então, basicamente, a hospedagem automática é onde você hospeda os produtos e é responsável por atrair seus clientes. Então você é responsável pela promoção, você é responsável pela venda, você é responsável pela entrega de todo o resto. E eles também são mercados onde você pode vender em todos esses mercados diferentes e eles estão fazendo todo o trabalho para você. Então, vamos começar com a hospedagem própria basicamente o site que estou usando há anos é o Gum Road. Você pode ajustar, você pode fazer o upload de todos esses produtos diferentes. Você pode criar links personalizados, descontos personalizados, cores personalizadas. Você pode criar esses diferentes botões de call to action, como está escrito aqui, começou a vender ou comprar agora ou comprar agora, o que quiser. E você pode basicamente combinar isso com a apresentação de faróis, com a apresentação de dribles, você pode simplesmente levar seus espectadores aqui e eles podem comprar em sua loja de câmeras. Ou você pode fazer o que eu fiz com minha equipe é criar um site. E neste site, você pode criar, por exemplo, kits de interface do usuário. E digamos que você possa ver o UIKit aqui, as crianças de UX aqui. Então, temos vários deles. E digamos que os usuários queiram comprar este, por exemplo, eles podem simplesmente clicar. Isso os levará para a página específica desse produto, que terá a descrição aqui, o que está incluído? Ele funciona em qual software e, quando você clica em Comprar agora, ele os leva para a página do Gum Road. Eles podem simplesmente clicar, eu nos quero e podem comprar este produto. E, como você pode ver, é muito mais simples ir do site para ouvir. O que você também pode fazer é a venda integrada. O que isso significa é que quando eles clicam em Comprar agora, uma janela se abrirá aqui e eles poderão comprar diretamente de lá. Mas certifique-se de entender se você está usando o Gum Road, especialmente se estiver usando algo como o Google Analytics, por exemplo, esses dois vão falhar. Então, basicamente, certifique-se, e é por isso que eu digo que ele redireciona você para uma página de compra segura. Então, quando eles vão aqui, como você pode ver, Gum Road é muito seguro, pois é o meu site, mas eu só quero ter essa camada adicional de segurança porque as pessoas estão deixando seus cartões de crédito números, seus endereços de e-mail do PayPal. Então, eu não quero que nada aconteça com isso. Então, basicamente, essa é minha opinião. Você também tem um site chamado sulfide, que é basicamente muito parecido com come road, mas na minha opinião, Gum Road existe desde o início deste jogo online e você pode, como eu disse, ajustado para se adequar ao que você está fazendo, qualquer que seja a aparência do seu produto, neste caso, UIKit, mas você pode vender todos os tipos de coisas diferentes. Agora vamos passar para os mercados. E vou mostrar quais são alguns dos principais mercados que existem. E, como eu disse, você pode explorar todos esses outros mercados, especialmente quando começa a vender, quando começa a ganhar força. Todas essas pessoas diferentes do mercado vão se aproximar de você e dizer que têm um novo site revolucionário que lhe trará muito dinheiro. Você não vai saber o que fazer com isso, mas simplesmente não os escute. Certifique-se de começar a vender nesses sites principais e depois expandir para esses sites menores. Mas apenas com um produto por vez. Se você tem 500 produtos como eu, é literalmente impossível fazer o upload de todos esses produtos para todos esses sites diferentes. E por que você deveria mesmo querer fazer isso? Se eles não tiverem, por exemplo 1 milhão de vendedores diferentes ou se não trouxerem vendas suficientes. Então, para começar, o que temos é mercado Envato e este site é o Graphic River. Dentro disso, você tem Web Elements e interfaces de usuário. Você pode pular para dentro de lá. Você pode ver a aparência de alguns desses produtos diferentes. Como eu disse anteriormente, você não precisa vender kits de interface do usuário. Você pode vender o que quiser. Mas essa aula tem tudo a ver com kits de interface do usuário. Em seguida, criamos um modelo e esses caras são destemidamente seletivos sobre o que pode ser acessado em seu site. E você pode ver que todos esses elementos são realmente de alta qualidade, muito excelentes, especialmente para esses kits de interface do usuário e, por exemplo se eu clicar aqui apenas para mostrar essas diferentes apresentações porque você está trabalhando com eles para criar essas apresentações. Você pode ver que eles são realmente em tela cheia, realmente parecem polidos. Eles realmente parecem profissionais. Eles realmente parecem sofisticados, e essa é a coisa mais importante sobre eles. E acho que você também pode adicionar animações diferentes ao criar com elas. Em seguida, temos o Creative Market e basicamente o Graphic River e o Creative Market, ou lá desde o início dos tempos. E você pode navegar por todos esses modelos diferentes. Então, vamos usar modelos da web, por exemplo, você pode ver quantos deles existem. Mas se eu escolher modelos e usar, deixe-me me lembrar onde estão todos eles. Então, elementos gráficos da web. E se eu clicar lá, podemos filtrar. Então, vamos usar o Adobe XD. E você pode ver todos esses elementos diferentes no Adobe XD. E podemos até mesmo filtrar isso ainda mais acessando modelos de sites de mídia social. E temos kits de wireframing, por exemplo, eu posso selecionar isso. E você pode ver crianças de wireframe, como elas se parecem, quanto existem? Aqui estão os meus. E você pode navegar por eles se estiver interessado. E é basicamente isso. Basta ir aqui e ver o que esses outros designers estão fazendo C, quais de suas categorias eles estão usando, C em qual software eles estão criando essas crianças de wireframe, UI kits e assim por diante. E, basicamente, comece a partir daí e explore o que funciona para você. Finalmente, o que também temos é que você tem oito anos, o que é bem conhecido no setor. Eles também são de alto padrão e de alta qualidade. E, na verdade, eles são quando se trata de selecionar quem pode vender em seu site para que você possa conferir. Eu realmente os recomendo. Finalmente, temos os elementos do Envato e criamos pacotes. Os elementos da Envato são apenas uma parte do mercado da Envato. Portanto, você precisa se inscrever separadamente para vender elementos da Envato. Mas uma vez que você faz isso, você é basicamente pago pelo valor que alguém baixa seus produtos. Então, se eu pesquisar o kit de interface do usuário, por exemplo você pode ver todos esses elementos diferentes. E, basicamente, a diferença entre esse mercado e todos esses outros mercados é, exceto, UH, porque eles têm todos os passes de acesso, mas têm limitações sobre como muitos itens que você pode baixar por semana, por mês, por dia e assim por diante. Embora o Envato elements não tenha nenhuma limitação, você pode baixar o que quiser, onde quiser, e está pagando uma assinatura anual em vez de três meses, seis meses, um mês, tanto faz. Todos esses outros são basicamente pagos conforme o uso. Então, se você optar por comprar este produto, por exemplo, você acabou de comprá-lo. Ou se você optar por comprar meus produtos, você pode simplesmente comprá-los. E a mesma história com todas essas outras, e a mesma história com Gum Road, mas com câmeras, você pode escolher criar pacotes separados. Então, se voltarmos aqui, se eu rolar para baixo, por exemplo, eu posso criar um pacote de kit de interface de usuário a partir de todos os meus produtos. E posso escolher criar um enorme pacote de wireframe, como fiz. E você pode fazer isso facilmente dentro das câmeras, mas não pode fazer isso em todos esses sites diferentes. Agora, voltando aos elementos da Envato, como eu disse, você não está ganhando dinheiro produtos separados que outra pessoa comprou, mas está ganhando dinheiro. Mas quantos de seus produtos alguém baixou e também quantos downloads você tem nessa categoria como bônus de colaborador? Então, por exemplo, quantos desses produtos diferentes você tem na maioria dessas outras coisas. E mais uma vez, se você estiver interessado, pode simplesmente navegar no site deles. E mais uma vez, aqui está meu produto Austria UI kit. E, finalmente, quero compartilhar pacotes de design com você, que é um dos sites mais novos do setor, mas vale a pena prosseguir porque aqui você também pode vender todos esses kits de interface do usuário, como mencionamos, mas eles também têm pacotes diferentes que são executados de tempos em tempos. E, basicamente, um pacote é uma espécie de pacote e você pode comprar um pacote, por exemplo, dez designers diferentes têm dez kits de interface de usuário diferentes. Eles usam todos esses kits de interface do usuário, os colocam dentro de um pacote chamado pacote, reduzem o preço com muita força e, em seguida, simplesmente são comercializados como loucos. E, basicamente, esse pacote trará alguns milhares de vendas e, em seguida, eles simplesmente dividem esse dinheiro desse pacote específico entre esses designers, geralmente o que acontece é que existem dois modelos diferentes. , 50, 50, 50 Nesse caso, 50, 50, 50 vão para os pacotes de design e 50 vão para todos os outros designers. E há também um modelo 50 e o resto, 50% vai para pacotes de design, e o resto vai para quem tem o maior kit de interface do usuário, recebe mais dinheiro. Quem tem a menor alegria, as crianças recebem a menor quantia de dinheiro. Então, basicamente, dependendo do site, dependendo do negócio, dependendo do pacote, você receberá uma certa porcentagem do dinheiro. Vou criar um curso separado no futuro. Explicando tudo isso, explicando como preparar etiquetas de apresentações, como preparar descrições, como escolher sua segmentação, como descrever melhor seu produto, como criá-las listas curtas, como você pode criar essas imagens de capa e todos esses elementos. Especialmente, vou falar sobre suporte. Por que o suporte é importante, como você pode contornar o fornecimento de suporte fornecendo uma boa descrição e fornecendo um bom produto em primeiro lugar, o que é um ótimo produto e muito mais. Se você estiver interessado nessa aula para o futuro, basta me seguir nas redes sociais ou pode me deixar uma mensagem. Você pode me seguir aqui onde quer que esteja assistindo esta aula e, basicamente, ficar atento ao futuro. E você também pode seguir meu canal no YouTube. Vou deixar o link para ele também no PDF, vou divulgar todos os tipos de conteúdo do Adobe XD. Então, se você estiver interessado, não deixe de me seguir até lá e eu vou anunciar essa aula no futuro. 116. SECÇÃO 14 ATRIBUIÇÃO: Sua tarefa para esta seção é usar o Adobe XD e criar seu próprio kit de interface do usuário. Não precisa ser nada enorme. Você pode simplesmente criar dois ou três elementos, como a navegação, pode ser um controle deslizante ou duas ou três seções diferentes como um formulário de contato, por exemplo, apenas alguns elementos que você pode reutilizar em todo o processo de design do site ou processo de design do seu aplicativo. Apenas tente praticar dessa forma , porque será muito mais simples quanto mais tarde você realmente passar para projetos reais. Ou, se você já tiver alguns projetos reais em andamento, será muito mais simples reutilizar esses componentes posteriormente nesse projeto. 117. SECÇÃO 15 Sistemas de design: Os sistemas de design são uma das ferramentas mais poderosas que os designers têm atualmente. Eles são incrivelmente importantes, incrivelmente poderosos quando você realmente começa a usá-los, porque na verdade você não perde mais tempo com os elementos que você já criou. Você começa a reutilizar alguns desses elementos, cores, tipografia, estilos e muito mais. Eles são especialmente importantes quando você os conecta com o código ativo. Quando você realmente cria um sistema de design em uma ferramenta de design, é ótimo tê-lo, mas quando você realmente o emparelha com elementos ativos em algo como o Webflow que vamos usar em essa aula. Vai ser incrivelmente fácil de trabalhar, incrivelmente rápido de trabalhar. E isso vai te poupar muito tempo. E seus clientes ganham muito dinheiro porque você não vai experimentar muito quando realmente tiver as principais funções básicas de um sistema de design. Então, vamos começar. 118. O que é um sistema de design: sistema de design, como o nome sugere, é uma abordagem sistemática para criar designs de UI e UX. O objetivo principal de todo sistema de design existente é acompanhar o que todos na equipe criaram. O objetivo principal do sistema de design é a escalabilidade. Seja essa a escalabilidade imediata ou a escalabilidade que virá no futuro. Mas o principal trabalho do sistema de design é manter essa escala consistente. O que isso significa é que cada mudança que você fizer refletirá no resto do seu design, será coerente e permanecerá na aparência do que é determinante em o início de um sistema de design. Todo bom sistema de design consiste em dois tanques, regras e padrões e bibliotecas de padrões. As regras e os padrões existem para que todos os colegas de equipe os sigam até o fim, porque essa é a única maneira de o sistema de design crescer uniformemente. Ela crescerá e será consistente ao longo de sua vida útil. Porque a vida útil do sistema de design é a vida útil da empresa. Nunca é feito, nunca está terminado. Então, enquanto a empresa ou o produto existirem, o sistema de design pode coexistir com esse produto ou empresa, enquanto a biblioteca de padrões por outro lado, está lá e vai crescer o tempo todo, dependendo, muitas vezes, das necessidades específicas e das necessidades futuras de cada projeto específico e de cada empresa em particular. O principal equívoco que existe é que os sistemas de design são apenas para as grandes empresas , o que não são. Você pode usar um sistema de design para empresas menores, você pode usar o sistema de design com menos componentes, com menos diretrizes e padrões numéricos. E essas diretrizes podem ser um pouco difíceis no começo. Mas à medida que o projeto avança, à medida que a empresa cresce, as regras e os padrões se tornarão mais rígidos e o sistema de design finalmente tomará sua forma e sua forma, a forma pretendida a partir do começando. E isso só vai crescer com a empresa. Os sistemas de design também podem ser para designers e desenvolvedores. E isso pode ser conseguido com o uso de algo chamado token. Falaremos sobre eles um pouco mais tarde nesta aula. Mas, basicamente, a colaboração entre designers e desenvolvedores é a chave para todo bom sistema de design existente. Assim que a mudança é feita ou propagada, designers e desenvolvedores precisam estar na mesma página para que seu sistema de design funcione e para a mudança seja implementada imediatamente. E é o mais fácil possível. Isso é extremamente importante para startups, mas também para empresas estabelecidas, porque você não quer quebrar o design e a funcionalidade do produto simplesmente alterando o design sistema demais com algo que não está alinhado com todos na equipe. Há algumas coisas que todo bom sistema de design deve ter. No próximo vídeo, falaremos exatamente sobre isso. Qual é a boa estrutura para todo bom sistema de design existente? 119. Estrutura de um sistema de design: Como mencionei na lição anterior, a estrutura de um bom sistema de design realmente consiste em duas coisas regras e padrões e bibliotecas de padrões. As regras e os padrões podem existir de várias formas diferentes. exemplo, cada regra deve coincidir com algo que você está fazendo dentro desse sistema de design. Digamos que a regra possa ser sobre grade, pode ser sobre tipografia. A regra pode ser sobre cor, espaçamento, ritmo horizontal ou vertical. Pode ser sobre qualquer coisa. E os papéis podem, é claro, ser quebrados, mas podem ser quebrados logo no início de um sistema de design, porque mais tarde, quando o projeto é desenvolvido, quando o projeto cresce, é muito É mais difícil quebrar uma regra do que quando você está apenas começando com um sistema de design. Os padrões podem ser algo parecido com os valores da empresa. Eles podem ser algo como uma língua, como um clima do projeto e fora do site do cliente ou da marca do cliente. E isso deve ser seguido até o final de um sistema de design, porque você não quer se desviar muito, especialmente no sistema de design que é realmente corporativo. Você não quer que eles mudem muito porque a multidão corporativa está realmente acostumada com esse tipo de tom, esse tipo de design, esses tipos de cores, essas topografias, hierarquias e muito mais. A segunda parte de um bom sistema de design são as bibliotecas de padrões. E você pode alterar essas bibliotecas de padrões à medida que cresce. A dica principal aqui é que, assim que você começar a criar bibliotecas de padrões de sistemas de design, não precisará criar elementos que não sejam necessários no momento. Por exemplo, se seu projeto não tiver um painel, você não criará elementos como gráficos e tabelas porque eles simplesmente não são relevantes no momento. Você não vai preencher seu sistema de design com todos esses componentes inúteis porque lembre-se de que você, como designer, está lá. Sua equipe de design está lá para criar esses designs, mas esses designs devem ser acessíveis e fáceis de entender para desenvolvedores que precisam desenvolver todos esses elementos para esse projeto específico. Então, basta criar elementos que são necessários naquele momento e deixar o sistema de design escalar ao longo do tempo , conforme o projeto exigir. Agora, como você pode dividir todos esses componentes na biblioteca de componentes? Basicamente, existem três categorias principais. Existem átomos, moléculas e organismos. E você pode, é claro, adicionar modelos. É claro que você pode expandir para quantas outras variações quiser, por exemplo, fluxogramas ou wireframes, wireframes de alta fidelidade. Mas, basicamente, átomos, moléculas e organismos estão presentes todo bom sistema de design e estão escalando qual é o projeto. E você sempre pode adicionar mais desses elementos, como eu disse mais tarde no projeto, alinhar. Agora, como o nome indica, os átomos são os menores do grupo e podem ser algo bastante fácil, por exemplo, cor ou tamanho de texto, largura de botão ou algo parecido. Em seguida, as moléculas são criadas a partir dos átomos. Quando dois átomos se combinam, basicamente você criará uma molécula, por exemplo, um menu suspenso ou algo parecido. E então os organismos são, digamos, um fórum criado a partir de vários elementos diferentes, por exemplo, campos de entrada e botões. E então você obterá uma forma que é um organismo criado para vários, a partir de vários átomos e moléculas diferentes combinados em um único organismo. Isso é chamado de estrutura atômica e, na verdade, é o padrão da nossa indústria há décadas. Mas você pode criar seu sistema de design como quiser. Mas se você estiver usando essa abordagem atômica, será muito mais simples criar seus elementos e reduzi-los no futuro. O ponto principal de todo sistema de design existente é a consistência. Então você tem que pensar em consistência o tempo todo. Onde quer que você esteja criando um botão simples, você precisa pensar em como esse botão vai ser dimensionado em vários tamanhos de tela diferentes , vai mudar, a largura vai mudar a altura. Será que vai mudar a cor será com cantos arredondados, sem cantos arredondados? Ter que pensar em todos esses elementos ao construir seu sistema de design, você tem que pensar sobre regras e padrões, que mencionamos no início desta lição. E você também precisa pensar outros elementos em sua biblioteca de padrões. Como eles vão coincidir um com o outro ou ficarão bem na página. Então, o que quer que você crie um novo elemento dentro da biblioteca de padrões, você tem que colocá-lo em uma página, você tem que testá-lo imediatamente, ver se ele funciona com o resto da sua biblioteca de padrões. E então, se isso acontecer, você pode mantê-lo e, se não, você sempre pode descartá-lo. Esse é o objetivo do nosso sistema de design. Sempre evoluirá, sempre mudará e nunca mais terá a mesma aparência de ontem. Na próxima lição, mostrarei alguns excelentes exemplos de sistemas de design dos líderes do setor e dos padrões do setor. Eu vou te mostrar o que procurar. Mais tarde, nesta aula, mostrarei como criar seu próprio sistema de design no Adobe XD e o que você pode conseguir com criação de sistemas de design no Adobe XD. Então eu vou te ver lá. 120. Exemplos do sistema de design: A melhor maneira de criar seu próprio sistema de design é aprender com os padrões do setor e com os gigantes do setor. E para fazer isso, vou mostrar alguns exemplos e você pode encontrar esses exemplos no PDF em anexo. Você pode simplesmente clicar nesses links para acessar todos esses exemplos que vou mostrar. Simplesmente aprende com eles o que estão criando. Mas o mais importante, antes de começarmos, é não se sentir obrigado a usar cada componente que essas empresas estão criando. Porque, como mencionei anteriormente nas lições anteriores, esses componentes existem por um motivo. Portanto, a menos que você esteja usando qualquer um desses componentes, não os crie. Quando você começa a criar um sistema de design, é muito importante começar aos poucos. Então, à medida que seu projeto evolui, você adicionará todos esses componentes diferentes. Porque qual é o objetivo de criar componentes? Se eles não forem necessários no momento, eles apenas diminuirão sua velocidade e você não otimizará seu tempo nesse projeto específico se estiver criando componentes que não são necessários para o seu projeto. Então, deixe-me mostrar todos esses exemplos. O primeiro exemplo que temos é o design de materiais do Google. Obviamente, esse design de material é usado em seu sistema operacional Android. A Apple tem suas próprias diretrizes , chamadas de diretrizes de interface humana, e você também pode encontrá-las. Vou vincular todos esses sistemas de design mencionados a mais alguns sistemas de design que não serão mencionados neste vídeo dentro do PDF. Mais uma vez, abra o PDF, clique nesses links para acessar e navegar por si mesmo. Então, o que temos aqui é apresentar material para você no momento da criação deste vídeo. Isso é novo e o padrão da indústria no mundo Android. Então, basicamente, continue usando o design de materiais. Você pode ver diretrizes, componentes, ícones, componentes para a web, diretrizes de acessibilidade e tutoriais para desenvolvedores. Você pode aprender mais no blog deles. E vamos analisar rapidamente esses elementos. E não vou entrar em muitos detalhes porque a maioria desses sistemas de design são basicamente os mesmos. Eles estão usando os mesmos padrões, estão usando as mesmas diretrizes, mas parecem diferentes porque, por exemplo com esse sistema de design de materiais, ele é para Android, então é para dispositivos móveis. Enquanto outros sistemas de design existem, existem quatro, por exemplo sites ou projetos web, ou para painéis ou elementos como esses. Então, é claro, todos esses elementos serão diferentes entre os sistemas de design móveis e de desktop. Mas a chave é a mesma, os padrões são os mesmos. Então, digamos que você tenha essas diretrizes, princípios, estilos e melhores práticas. O que isso significa é que, para cada elemento, é o melhor momento para usar esse elemento? Nesse caso, por exemplo, você não usará determinados seletores de data, digamos. Em alguns exemplos, você usará diferentes tipos de seletores de data nesses exemplos. É por isso que esses princípios e melhores práticas existem. Se você já assistiu a um projeto de marca ou à apresentação de uma marca, pode assisti-los nos finais de semana, por exemplo, pode pesquisar vídeos no YouTube. Basicamente, as melhores práticas existem. E esse é o principal motivo, por exemplo, por que você usa o logotipo nessa orientação em vez de desorientação. Por que você usa imagens brancas aqui e não aqui. É por isso que essas melhores práticas existem. Para alcançar essas melhores práticas e esses princípios e estilos, você precisa começar aos poucos. Você tem que começar do começo. Você precisa criar esses vários botões e experimentar. Veja o que funciona, o que não funciona, o que funciona? Certifique-se de atualizar a partir daí, adicione novos elementos, adicione novos estilos, novos componentes a partir desses elementos e veja o que funciona e o que fica, o que não funciona , jogue-o afaste-se e simplesmente siga em frente. Isso me leva muito bem aos componentes. Portanto, diretriz de design e documentação para desenvolvedores para componentes de interface de usuário interativos. E você pode vê-los aqui. São botões, imagens, fóruns, campos de entrada, ícones e muito mais. Esses componentes existem para facilitar as coisas para você. E vou mostrar isso em uma aula posterior desta aula , quando realmente chegarmos ao Adobe XD. Portanto, os componentes existem para acelerar muito as coisas porque os componentes podem ser usados em todo o sistema de design, em todo o projeto. E eles podem ser usados por vários designers diferentes em sua equipe porque, é claro, recurso de edição do Adobe XD, vários membros diferentes da equipe podem estar em vários lados diferentes do planetas. E todos eles podem usar o mesmo sistema de design e usar os mesmos componentes desse sistema de design específico. Obviamente, você sempre pode alterar os componentes. Você sempre pode atualizá-los. Você pode adicionar diferentes componentes, estilos e muito mais. Essa é a chave aqui para criar componentes que serão reutilizáveis em todo o seu sistema de design. Vamos explicar isso um pouco mais tarde, mas, por enquanto, vamos seguir em frente. Os ícones são um recurso fundamental para todo bom sistema de design existente. Obviamente, como se trata do Google, eles têm seus próprios ícones de material. Quando você estiver começando a usar seu sistema de design, provavelmente usará outros ícones em seu sistema de design. Mas à medida que esse sistema de design evolui, à medida que você encontra uma voz para uma marca, à medida que encontra a direção e as diretrizes para a marca, você também desenvolverá esses ícones. Então, se você não é um especialista em criação de ícones, talvez seu cliente possa. Contrate alguém que seja, e então você poderá usar esses ícones nesse sistema de design. Então, temos componentes para a web. Então, implementa e personaliza aplicativos web de materiais com nosso código e documentação. Obviamente, isso está se expandindo de dispositivos móveis até a web. Finalmente, temos diretrizes de acessibilidade que são extremamente importantes. Saiba como ajudar usuários com habilidades diversas a navegar, entender e usar sua interface de usuário, porque nem todo mundo tem a mesma visão. Algumas pessoas têm deficiência visual, por exemplo, algumas pessoas têm dificuldade em ler. Então você tem que pensar em todas essas pessoas porque existem muitos usuários. Infelizmente, teremos alguns desses problemas que precisam pensar neles o tempo todo quando você estiver criando seu sistema de design. Por fim, temos tutoriais para desenvolvedores. Então, implementei material com Java, Kotlin, Objective-C, Swift e web of water. Então, dependendo do sistema de design, dependendo dos desenvolvedores, você vai usar essa ou aquela tecnologia. Então, basicamente, não há resposta certa ou errada aqui, você precisa falar com seus desenvolvedores. Você precisa falar com seu cliente, mais uma vez, dependendo do que ele vai usar. Nesse caso, para material, é a maioria para dispositivos móveis, para Android. Então, é claro que eles usarão tecnologias diferentes do que se você estivesse, por exemplo , usando, eu não sei, PHP ou algo parecido para WordPress ou qualquer outra coisa. Então, essas tecnologias serão diferentes. E dependendo da tecnologia que seus desenvolvedores usarão, você formará seu sistema de design para esses propósitos de desenvolvimento. Então, basicamente, você pode pular aqui, você pode clicar no design. Você pode ver. Então, base, visão geral, layout do ambiente , navegação, cor, tipografia, som, iconografia, forma, movimento. Então, como eu disse, e vou continuar dizendo isso durante toda a aula. Não se deixe intimidar por todos esses elementos diferentes porque , mais uma vez, isso é o Google. Eles têm literalmente bilhões de usuários em seus dispositivos e em toda a empresa. Então, é claro que eles usarão todos esses elementos diferentes dos quais provavelmente nunca se ouviu falar, muito menos usar. Portanto, não se deixe intimidar muito com isso. Então, temos componentes. E são botões, cartões, caixas de seleção, chips, tabelas de dados e assim por diante. Em seguida, desenvolvemos para Android, para web flutter, iOS. Temos recursos e você pode ler tudo sobre esses recursos. Então, exagero, escala de tipos, ferramentas de personalização de formas do criador e assim por diante. Eles têm o blog. Portanto, não deixe de conferir. Mais uma vez, vou deixar os links para tudo o que mencionei neste vídeo e muito mais no arquivo PDF. Clique nesses links para acessá-lo. Então temos o sistema de design Atlassian. Então, linguagem de design de ponta a ponta para criar experiências simples, intuitivas e bonitas. Então, mais uma vez, você vai notar que temos componentes, temos padrões. Então, marca, eles têm missão, têm personalidade e prometeram, que é o que mencionei no vídeo anterior. Você não vai falar com as mesmas duas pessoas que estão usando isso de cueca em seus dispositivos móveis. E dois CEOs de grandes empresas que, por exemplo, estão em algum escritório caro. Então, o tom simplesmente não é o mesmo. Portanto, você precisa falar com seu usuário no idioma que ele entenderá. Então, temos as fundações. Então, cor, iconografia, tipografia. Mais uma vez, dependendo de quem é seu usuário, você usará cores diferentes, ícones diferentes e diferentes tipos, conteúdos, linguagem e gramática, vocabulário e estilo de escrita. Então, mais uma vez, estamos conversando com o usuário. Quem é seu usuário? Você precisa falar com seu usuário no idioma que ele entenderá. Então você pode explorar isso. E aqui temos o conteúdo básico da marca. Vamos clicar no conteúdo para que você possa ver linguagem, gramática e vocabulário inclusivos. Você pode clicar aqui, componentes. Então, temos nosso termo, grupo externo, distintivo e, imediatamente, você notará que isso parece muito diferente disso porque há duas coisas completamente diferentes. Então, se eu clicar no banner, por exemplo , aqui, você pode ver a aparência desse banner. E imediatamente podemos ver o código, podemos ver o erro, podemos ver o anúncio. Qual é a aparência? Como isso se expande? Como ele encolhe ou cresce? E você pode ver o uso. Então, como isso funciona? Então, anatomia, temos o ícone, temos a mensagem e temos as ações que são opcionais neste caso. Portanto, fique à vontade para navegar por todas essas categorias para saber mais sobre como elas são usadas e como são integradas. Aqui mesmo. Em seguida, temos Shopify, sistema de design Polaris, sal. Vamos começar com as fundações. Valores experimentados, que é o que eu mencionei. Então, a abordagem deles, o que considerar. Eles são empoderadores, elaborados, deficientes, confiáveis e familiares. Então, esses são todos os valores que eles buscam com sua marca, portanto, com seu sistema de design. Então temos o conteúdo. Então, voz e tom, Shopify é um reflexo de voz de quem eles são. Então, quem são eles simplesmente colocam aí a empresa construída por pessoas reais que entendem esse negócio e se preocupam em ajudar outras pessoas a ter sucesso. Então, esses são valores del. Nós temos o design. Então, mais uma vez, cores de design, princípios e comunicação são fundamentais. As cores têm significado. Carlos, siga as diretrizes de acessibilidade para que você possa ver as funções das cores. Então, superfície, basicamente elementos que estão por trás de outros elementos na superfície. Então, esses são os elementos como texto, por exemplo, primário, por exemplo , para os elementos, digamos, botão secundário para os elementos, que são, digamos, marcas de seleção ou ícones ou algo parecido, interativos . Talvez haja uma animação acontecendo. Então, todas essas cores existem por um motivo. Mais uma vez, estou voltando sempre que o argumento que mencionei anteriormente não cria elementos que não estão necessariamente em seu sistema de design. Assim, você pode ver as variantes de cores e essas cores implementadas aqui. Mais uma vez, encorajo você a conferir todos esses elementos e aprender mais sobre eles. Então você pode ver as ilustrações. Eles estão usando essas ilustrações. Mas por que, por que eles estão usando essa ilustração específica nesse estilo específico, usando essas cores específicas. Então, você pode aprender mais sobre tudo isso aqui nesta página. Em seguida, temos o sistema de design de carbono, criado pela IBM, que é uma grande corporação. E eu adoro esse sistema de design porque você pode clicar aqui e clicar nos kits de design e obter a versão em esboço, mas também pode obter a versão Adobe XD, que está em algum lugar por aqui. E você pode abrir no XD, aqui está. Mas é construído pela comunidade do carbono. Portanto, não está exatamente certo porque não foi criado inicialmente para o Adobe XD e não para o Sketch. Em seguida, eles migraram para o Figma, mas também oferecem suporte ao Adobe XD e ao Azure. Assim, você pode colocar as crianças ali mesmo, abri-lo e também pode fazer o mesmo com o Shopify que o sistema de design polaris. E tenho certeza de que você também pode adquirir o Atlassian. Assim, você pode abri-lo e aprender mais sobre sua aparência. Mas voltando ao carbono, basicamente, sistema de design de código aberto para produtos e experiências digitais. A linguagem de design é seu sistema básico consiste em código de trabalho, ferramentas e recursos de design, diretrizes de interface humana e uma comunidade vibrante de colaboradores. Aí vamos nós. Muitos designers diferentes estão contribuindo para esse sistema de design. É por isso que você pode baixar esses arquivos e explorá-los gratuitamente. Então comece a projetar. Você pode ver todos esses elementos diferentes, o que eles estão usando, mas estou mais preocupado com as diretrizes. Isso. Então, eles estão começando com a grade. A grade está no centro de todo bom sistema de design existente. Então, se eu apenas reproduzir este vídeo, dessa forma, você pode ver duas grades x e qual é a aparência dela? Basicamente, consiste em uma caixa e, em seguida, a caixa pode se expandir para outras caixas, que podem ser maiores ou menores. Mas, basicamente, está nos incrementos de dois. Tudo se encaixa perfeitamente nessas caixas. Basicamente, você pode ver o espaçamento aqui. Duas caixas separam o texto, as imagens, o layout e coisas assim. Então, certifique-se de explorar tudo isso e você poderá ver como o ritmo vertical funciona aqui e como a escala funciona aqui neste vídeo em particular. Então, eu realmente encorajo você a explorá-lo mais. Você pode ver ícones, pictogramas, movimentos, o que é muito importante. Então, como eles usaram a animação? Então, se eu clicar aqui para reproduzir este vídeo, você pode ver como eles estão usando o movimento dentro de seu sistema de design, como a animação funciona, como a transição funciona, como as coisas funcionam, por exemplo a facilidade na animação está fora da animação e muito mais. Então, explore-o, baixe-o e não deixe de conferir você mesmo. Finalmente, temos o Salesforce. Então você pode começar. Você pode ver quais plataformas são cenouras ou Lightning Visual para nós, heroku, Android e iOS. Então, visão geral, construtor, gráfico , entrada de dados, exibição de dados e muito mais acessibilidade, que é sobre o que falamos, projetos de componentes ou visão geral, digamos, acordeão, eu quero confira a seguir, qual é a sua aparência? Então, isso é ótimo. Posso clicar aqui e entender qual foi a intenção por trás desse acordeão. Então, nesse caso específico, você pode ver que esse acordeão está fechado, mas quando eu clico, toda a seção se expande para baixo. Então, quanto vai se expandir para baixo? Por exemplo, se você estiver usando isso para pixel grid, que você mencionou no sistema de design de carbono da IBM. Em seguida, ele se expandirá em incrementos de dois. E você pode usar essas regras, padrões e diretrizes em todo o seu sistema de design, seja o que for que estiver criando. Então, mais uma vez, você pode clicar no alerta, por exemplo, você pode clicar no avatar dos emblemas. Vamos clicar no carrinho e ver como estão os cartões deles. Então esse é o carro, esses são os carros novos, menores, os carros mais curtos, o porquê de suas cartas. Assim, você pode ver como todos esses elementos são implementados, como eles são colocados na página. E se eu clicar aqui, então temos a ação 12.3, temos a dica de ferramenta, todos esses elementos diferentes. Finalmente, temos isso que é utilitário, então texto de margem, dimensionamento, função, lista vertical. E, por último, temos tokens de design. Portanto, os tokens de design são uma coisa incrível sobre sistemas de design e falaremos sobre eles em uma das aulas posteriores, porque eles estão realmente no centro de todo bom sistema de design. E eles são realmente a ponte entre designers e desenvolvedores para conhecer o sistema de design, usá-lo ao máximo e continuar a usá-lo no futuro. E é por isso que estamos usando tokens de design em nossos sistemas de design. E vou mostrar isso também no Adobe XD na lição posterior. Mas, por enquanto, confira esses links. Como mencionei, eles estarão em um PDF. Certifique-se de explorar o máximo possível e aprender o máximo possível. Porque você pode ver que o sistema de design não é algo que você aprenderá em um ou dois dias. Realmente são necessários meses e anos para que um bom sistema de design se desenvolva. Mas não deixe que isso o impeça de criar seu próprio sistema de design, porque os benefícios são enormes: à medida que você projeta , enquanto constrói e desenvolve, expande seu próprio design sistema. Na próxima lição, falaremos sobre o Adobe XD. O que você pode criar no Adobe XD em termos de sistemas de design e como você pode escalar seu sistema de design no Adobe XD? Então, eu vou te ver lá. 121. Como criar um sistema de design no Adobe Xd: O Adobe XD é uma ferramenta incrível porque em uma única ferramenta você pode criar protótipos e compartilhar com seus clientes, desenvolvedores e partes interessadas. Isso é ótimo para criar sistemas de design, e é sobre isso que falaremos nesta lição da aula, como criar seus próprios sistemas de design no Adobe XD. Mais tarde, falaremos sobre escalar esses sistemas de design no Adobe XD. Então, vamos começar. Aqui estou no Adobe XD e abro até 12 quadros de arte de 80 por 800. Esse é apenas o quadro de arte básico que você encontra na tela inicial, aqui mesmo em um D Adobe XD. Então, como criar seu sistema de design? Bem, você tem que começar aos poucos, então vamos começar com a grade. Então, se eu me esconder para que você possa vê-lo, em vez de acionar esse layout, vou mudá-lo para quadrado n. É sobre isso que falamos anteriormente para o sistema de design da IBM. Eles estão usando essa iteração de dois. Então, serão quadrados muito pequenos aqui, mas vou usar o número oito, por exemplo, algo assim. E então eu vou ligar minha calculadora e vou trazê-la aqui. Portanto, temos o 12º AT, para a largura. Então 1280/8, é um sexto. Então, o que isso significa é que quando um zoom total aqui, você pode ver que esses quadrados têm oito pixels por oito pixels porque esse é o tamanho do quadrado. Se eu reduzi-los para dois, você pode ver que eles diminuíram de tamanho, mas vou aumentá-los de volta para oito porque oito pixels é uma espécie de padrão da indústria ou grade de oito pontos se você quiser. E é isso que vamos usar para nosso sistema de design imaginário aqui mesmo no Adobe XD. Então, para começar, o que podemos criar é algo pequeno, como um botão, por exemplo, então vamos começar com a topografia primeiro. Então, eu posso dizer algo como clicar aqui, talvez. E talvez usemos algo como o Open Sans, porque essa é uma fonte gratuita do Google e você pode encontrá-la on-line. E eu vou posicioná-lo aproximadamente por aqui. Vamos com 24, porque 24 é divisível por oito, é claro. E então eu vou criar meus botões. Então, vou criar algum espaçamento em torno dele. E vou clicar com o botão direito do mouse para enviá-lo para trás apenas para que possamos ver nossos textos. E agora eu posso começar a brincar e me posicionar na minha grade. Então, se eu segurar minha tecla Alt, você pode ver que tenho 16 deste lado, 16 deste lado por 7,8 deste lado, oito é bom, mas sete não é tanto. Então, o que você pode fazer aqui não é muita coisa, na verdade, porque o Adobe XD, essas ferramentas de texto não são realmente todas desenvolvidas, como o Adobe Illustrator, por exemplo, ou o Adobe Photoshop. Mas vai funcionar muito bem nesse caso porque estamos apenas criando nosso projeto de startup aqui. Então, a primeira coisa a considerar seu tipo é muito grande? Se for, você pode aumentar o espaçamento para 16 em cada lado, por exemplo, mas você ainda pode ver 15,15 aqui. Se começarmos assim, ainda serão 15, devido à forma como o Adobe XD trata o texto. Então, mais uma vez, o que você pode fazer se estiver trabalhando com uma marca, que exige esse idioma, o que falamos anteriormente, então você vai ajustar esse raio de canto para algo como oito, por exemplo, e agora temos os cantos arredondados. Então 64 é o tamanho do nosso botão, divisível por oito, é claro, 144 divisível por oito. Então, agora podemos prosseguir. Em seguida, vem a convenção de nomenclatura. Então, esse botão é bem grande. Então, por exemplo, você vai chamá-lo de btn. Btn traço BG, botão, fundo, traço grande. E você precisa fazer isso em todo o seu sistema de design para todos os seus elementos, porque dessa forma você saberá e os designers de sua equipe saberão, os desenvolvedores saberão, Isso é para o nosso site, tablet, relógio móvel ou qualquer tamanho que seja. Então, o próximo passo é agrupá-los. Então, a coisa a considerar é de onde vem esse texto . Nesse caso, ele vai da esquerda. Então, se eu passar o mouse aqui, você pode ver que está alinhado à esquerda e está fora dele. Então, ele escalará automaticamente o botão sem expansão para o lado direito. Ou você pode corrigi-lo, se quiser, clicar em sites fixos e isso não expandirá o botão. Então, dependendo da finalidade dos botões, digamos BTN, large e variables. Portanto, podemos usar VAR, por exemplo algo parecido, ou simplesmente chamá-lo de btn large. E então, se quisermos que seja corrigido, podemos chamá-lo de btn large fixed. Então, mais uma vez, acompanhe esse histórico de BTN. Grande, um pouco grande. Se você estiver usando fixo, por exemplo , será para o fundo do botão, btn, BG, large fixed ou BT e BG. Um fixo maior, como você quiser chamá-lo. Portanto, a convenção de nomenclatura é realmente crucial porque, assim que você começar a adicionar mais e mais desses elementos mais e mais desses elementos, será muito mais complicado para você acompanhar o que você criou a seguir. como queremos que esse botão se expanda, vou ativar o preenchimento. Então, da próxima vez que alguém disser algo assim, você pode ver que o botão vai se expandir. Mas, mais uma vez, por causa desse elemento gradual que criamos, se eu clicar aqui, você pode ver 16161516, ele se expandirá, mas você sempre pode substituí-lo. Então, se eu clicar aqui e estender isso ainda mais aqui, se eu clicar aqui e estender para 20, talvez ele se encaixe para migrar muito melhor. Portanto, você sempre pode fazer essas alterações para ter certeza de que somos 136,64. Então, tudo isso é divisível por oito. No nosso caso, se você está pensando grades e em como criar grades, você pode, é claro, usar essa grade de oito pixels para seu sólido de grade, digamos 12 colunas para esse tamanho grande, oito colunas para o tamanho do tablet, quatro colunas para o tamanho do celular. E dependendo dos tamanhos que você escolher, você escolherá o número de colunas e o tamanho dessas colunas. Claro, estamos apenas começando. Você pode ver como isso parece. E antes de prosseguirmos, vou clicar aqui, pular aqui mesmo para minhas bibliotecas e adicionar cor, porque essa é a cor do meu texto neste caso. E eu vou adicionar um estilo de personagem. Então, como você pode chamar isso? E isso é muito importante porque agora estamos entrando no território dos tokens de design. E vou explicar um pouco mais sobre os conceitos de design na próxima lição desta aula. Mas basicamente vou chamar isso de h quatro, por exemplo, porque esse é o tamanho desse texto. E aqui, para a cor, vou renomeá-la para algo como, sei lá, cinza normal ou qualquer outra coisa, traço normal e cinza, algo parecido. Então, todo mundo da minha equipe sabe que, ok, este é H, pois está aberto desde 24, e quando eles pairam, você pode ver opostos, espaçamento de 24 caracteres, tamanho 24 pontos. Então você vai ser capaz de perceber imediatamente. próximo é o botão com a borda ou sem borda. Como você vai tratar isso, como todos esses elementos vão se acumular. Tem, tem o traço ou não? Portanto, você precisa pensar em todas essas coisas, mas certifique-se de criar várias cópias desse botão. Veja o que funciona, veja o que não termina quando você começa a adicionar elementos a esse botão, certifique-se de começar com os componentes. Então, controle ou comando K em seu teclado para criar um componente. Esse é o estado padrão. Portanto, o primeiro componente a ser criado talvez seja o estado de flutuação. Então, vou chamá-lo de pairar. E da próxima vez que alguém passar o mouse sobre esse botão, talvez ele mude a cor. Então, em vez de branco, talvez você possa mudá-lo para algo claro como este. Clique aqui, pressione Control, Enter para visualizar o que estamos criando. E agora, quando eu passo o mouse sobre esse botão, você pode ver que ele tem estado de flutuação. Então, é assim que é fácil criar o início de um sistema de design. E agora vou mostrar a vocês o que eu criei nos últimos dois anos. E demorei seis meses para criar no Adobe XD. É chamado de sistema de design Inception. E aqui está. Este é o arquivo mestre do sistema de design inicial. Isso me levou seis meses de trabalho contínuo para criar. E você pode obter esse sistema de design, se quiser. Vou deixar o link em um PDF. Esta é a página de inception design system.co. E mais uma vez, vou deixar o link no PDF. Você pode clicar aqui e acessar meu canal no YouTube para assistir ao curso gratuito. Nele. Eu analiso cada elemento. Acho que é algo como uma hora duração ou algo parecido. Está no meu canal do YouTube e você pode assisti-lo lá para saber mais como funciona e o que está incluído. Você pode ver, você pode projetar mais rápido. Você pode ler algumas resenhas. Ele foi criado para ser dimensionado usando uma grade de oito pixels. Tem uma estrutura molecular como mencionamos. É o local e a nuvem que podem trabalhar tanto localmente quanto na nuvem com seus colegas de equipe. E tem fluxogramas, modelos e ícones Lottie, que são ícones animados. É feito usando os recursos mais recentes, como pilhas, componentes, estados e ácidos de documentos. Então, deixe-me voltar ao Adobe XD e mostrar a você. Então, primeiro de tudo, o que está incluído nesse sistema de design? Aqui temos algumas informações e diretrizes básicas sobre o sistema de design em si, como usá-lo e onde usá-lo. Então aqui temos as grades. Temos três tamanhos de tela diferentes, basicamente. Temos grandes, médios e pequenos, ou desktop, tablet e celular, independentemente do tamanho, temos vários números de colunas de cores diferentes. Então, para as grandes, temos 12 colunas. Para o médio, temos oito colunas e para o pequeno, quatro colunas. Aqui temos os guias e você pode facilmente copiá-los e colá-los em seus quadros de arte. Então temos a topografia e você pode ver que eu dividi a topografia em dois cabeçalhos e corpo. Os cabeçalhos vêm nesses tamanhos diferentes e o corpo nesses tamanhos diferentes. Em seguida, temos as cores, as cores principais e as cores de suporte. Você vai notar que eu não tenho nenhuma sombra aqui e isso é com um propósito porque quando você obtém esse sistema de design, você pode adicionar suas próprias sombras. E eles vão escalar com o próprio sistema de design. Em seguida, temos o logotipo que você pode substituir pelo logotipo de seus clientes. Temos esses logotipos diferentes que você pode usar em seus projetos. Temos ícones e imediatamente, você notará essas grades de oito pixels, então de tamanho quadrado. E se eu esconder isso aqui, só para que você possa ver o sistema de design em si um pouco melhor. Então temos ícones aqui, e esses são ícones estáticos. E, claro, o sistema de design também vem com ícones animados, que funcionam nativamente dentro do Adobe XD, o que é fantástico para prototipagem. Então, se eu ampliar um pouco, o que temos aqui são átomos e moléculas, e você pode encontrá-los aqui. Se você abrir isso, verá que temos grades, ícones, avatares, menus suspensos, modelos de imagens, paginação, linha de aplicação, pesquisa de acordeões e muito mais. Então, todos esses elementos aqui são átomos e moléculas. E se eu ampliar um pouco mais, você pode ver. Portanto, temos botões, entradas de texto, seletores, área de texto, caixas de seleção, seletores de data de rádio, seletores, seletores de conteúdo, guias, indicadores de progresso, entradas de números, acordeões, imagens que são extremamente importantes. Temos blobs, menus suspensos, temos vários dispositivos diferentes, notificações, paginação, Zapatero é modelo e, muito mais do que no lado esquerdo, temos fluxogramas, que estão localizados aqui. Então, se eu ampliar, temos fluxogramas de desktop, fluxogramas móveis e, em seguida, temos elementos de fluxo de tarefas. Obviamente, para fluxos de tarefas, temos elementos de fluxograma que são usados para conectar esses diferentes fluxogramas. E então o que temos aqui, temos esses tamanhos de papel. Então, aqui temos retrato em tamanho A4, paisagem, retrato com letra americana e paisagem. E cada um deles, se eu mudar para o painel Camadas aqui e clicar dentro, ele terá vários elementos diferentes que são usados para ajudá-lo a criar mais rapidamente usando esse sistema de design. Então, se eu selecioná-lo, você pode ver que o que temos aqui é uma grade de pontos. Então, se eu ativar essa grade de pontos, você pode ver como ela fica. Então, eu até tenho um vapor aqui, que vou mostrar agora, que foi usado em uma das minhas transmissões ao vivo recentemente e você pode encontrá-lo na minha página do YouTube. Então, se eu aproximar isso, esse artigo foi realmente criado dentro desse sistema de design. E na verdade foi impresso e depois desenhado usando a caneta normal. Assim, você pode ver como isso é versátil e útil ao criar elementos como esses em seu sistema de design. Então, voltando ao assunto, também temos nossos telefones. Então, mostrou que você pode usar esses telefones. Obviamente, imprima-os como eu lhe mostrei com este papel em particular. E você notará que eles serão posicionados aqui. E, obviamente, se o papel tiver uma paisagem como essa, eles serão posicionados de forma diferente e serão usados para moldura de papel, se você quiser. Em seguida, temos o navegador responsivo, o navegador para desktop e o navegador móvel, e é o mesmo para todos esses tamanhos. Em seguida, temos as informações do fluxograma. Temos o nome do projeto do cliente, o prazo, o número de páginas do site, o número de telas do aplicativo e, é claro, você pode combinar uma grade de pontos e o fluxograma para poder trocar de lugar, você pode posicioná-los, imprimi-los e criar basicamente componentes e fluxogramas neles. E, finalmente, o que temos, se eu mudar aqui, temos os modelos. Aqui temos modelos em três tamanhos diferentes, como acabei de mencionar anteriormente. Então, temos grandes, médios e pequenos, e esses estão aqui. Portanto, esses são modelos grandes em 15 categorias diferentes. Esses são modelos pequenos nessas mesmas categorias, mas ajustados apenas para o tamanho do tablet. E esses são modelos pequenos ou médios e pequenos para tamanhos de telefone. Então, como tudo isso funciona? Basicamente, se eu abrir isso, temos cores, então temos cores principais e cores de apoio, como eu disse. E esses são os componentes principais. Suma, se eu mudar a cor, esse azul do oceano aqui, por exemplo, eu posso simplesmente editar aqui e mudar a cor. Ele atualizará essa cor em tempo real em qualquer lugar onde essa cor esteja localizada nesse sistema de design. Então, partindo daqui e da amostra até aqui, por aqui e por aqui, ela será atualizada em tempo real e mudará e atualizará essa cor. Se você decidir adquirir esse sistema de design e começar a trabalhar em um projeto para seu cliente. Você pode simplesmente alterar essas cores para as cores de seus clientes , isso mudará em todo o sistema de design. A mesma história vale para os estilos dos personagens. Então, para títulos, por exemplo, se eu decidir mudar isso, é Proxima Nova neste momento. Mas, por exemplo, se você decidir mudá-la para ciência aberta, como eu disse, poderá atualizá-la em tempo real. Isso mudará em todo o seu design. A seguir, temos o que eu disse, átomos e moléculas, fluxogramas e modelos, e como você pode usá-los? É realmente muito simples. Então, deixe-me realmente usar essa grande gota aqui. E eu vou te mostrar. Então, se eu clicar aqui, digamos que eu queira ocultar essas colunas apenas para que você possa ver o que estou fazendo. E digamos que eu queira arrastar e soltar alguns elementos para que sejam bons para átomos e moléculas. E, na verdade, vamos ativar esse layout. Mas vamos usar o quadrado aqui, só para que você possa ver o que estou realmente fazendo. Então, vamos usar algo como menu suspenso, suspenso grande. Vamos arrastá-lo e soltá-lo para dentro. Você pode ver como fica para que eu possa posicioná-lo onde quiser. E então vamos trazer nossas colunas de volta. Clique em nosso menu suspenso, posicione-o aqui e você poderá ver que funciona imediatamente. E como esse é um componente com vários estados, vamos verificar o estado do foco, por exemplo, vamos fazer o check-out aberto. E, é claro, posso entrar e adaptar e mudar qualquer um desses estados. Então, em vez de dizer “grande” no menu suspenso, talvez possa dizer o tamanho ou a cor do sapato, ou o que quer que seu projeto exija que seja a beleza desse sistema de design. Então, esses são átomos e moléculas. Resumindo. Basicamente, você pode adaptá-los e usá-los como quiser. E deixe-me mostrar rapidamente os modelos. Então, aqui temos os modelos e vamos usar grandes. Então, o que precisamos é de navegação. Então, arraste e solte meu arquivo de navegação, por exemplo, vou encaixá-lo na posição. Feche isso. Vamos usar a seção de heróis. Vamos continuar aqui no número quatro, por exemplo, vamos posicioná-lo aqui e aqui. Talvez faça algo assim. Então, o que podemos fazer é usar a chamada à ação, então vamos usar a chamada à ação cinco. Fotografe, certifique-se de que esteja na posição central, aqui, até que se encontre com nossa seção de heróis e você entenda. Você só vai arrastar e soltar esses elementos dentro. Você vai construí-los. O melhor de todos os modelos e fluxogramas é que eles vêm em dois modos diferentes. Estado padrão, que é o modo claro e o modo escuro. Então, se eu clicar na minha navegação, voltar para o modo escuro, clicar aqui, mudar para escuro, clicar aqui, mudar para escuro com apenas alguns cliques. E se eu esconder minha grade só para que você possa ver que temos isso. Então, se eu visualizá-lo muito rapidamente, você pode ver como fica em tempo real. Ele ainda tem esses efeitos de flutuação. E, claro, quando você altera e adapta todos esses componentes, por exemplo, esse logotipo e o altera para o logotipo de um cliente. Você pode adicionar ícones diferentes, você pode adicionar imagens diferentes. Ele vai se adaptar em tempo real. E esse é o objetivo de um sistema de design, é economizar milhares e milhares de horas criando essas tarefas chatas porque não há nada no mundo que eu mais odeie. E para criar rodapés, e eu tenho meu rodapé aqui. Então clique aqui, arraste e solte a posição do rodapé ali, por exemplo , snap, é um modo muito escuro assim. Posicione-o aqui. Clique na pré-visualização mais uma vez. E aqui eu tenho meu rodapé no lugar. Essa é a beleza desses sistemas de design, é criar com velocidade, criar uma escala de largura. E isso é o que você pode ver com esse sistema de design inicial em particular, que eu criei nos últimos seis meses, é que eu criei todos esses elementos. Então, deixe-me deletar isso. Eu criei todos esses elementos, mas posso escalá-los facilmente. Posso adicionar mais elementos aqui usando elementos existentes, posso reposicioná-los, reorganizá-los, mudar suas cores, alterar o raio dos cantos. Porque se eu ampliar bem perto um desses botões, você pode ver que o raio do canto é quatro se eu te mostrar aqui, mas talvez eu queira mudar o raio do canto em este botão principal para algo um pouco maior. Deixe-me ampliar para que você possa ver todos os estados um pouco maiores até algo como 20. Pressione Enter. E você pode ver em tempo real que isso mudará onde quer que esse botão esteja localizado, onde quer que esse botão seja usado, não apenas aqui, mas também em todos os meus modelos. Então, ele será atualizado em tempo real. Essa é a principal coisa sobre sistemas de design. No Adobe XD. Você precisa alterá-los nos componentes padrão e em todos esses componentes que você arrasta e solta, quais mostrarei aos nossos componentes secundários. Assim, você pode mudar e se adaptar lá e usar essas mudanças locais, por exemplo, na seção de heróis que acabei de mostrar anteriormente, você atualizará o texto. Você quer adicionar seu próprio texto, seus clientes tributam o que quer que seja, então isso mudará no componente da dívida. Mas se quisermos fazer mais mudanças globais, como a cor do plano de fundo , a fonte e qualquer outra coisa, você fará essas alterações aqui dentro dos componentes principais, O sistema de design inicial vem com dois arquivos, arquivo mestre e arquivo light. Basicamente, a única diferença está dentro do arquivo mestre, que estou apenas mostrando, você pode ver todos os elementos aqui em um só lugar, dentro do arquivo light. Você não pode fazer isso porque eu propositalmente apaguei todos eles da tela para manter o máximo possível da tela livre, para que possamos projetar sem distrações como olhar para eles aqui. Então, talvez sejam divisores começar com o arquivo mestre para aprender todos esses componentes. É claro que forneci imagens de todos esses componentes , que podem ver rapidamente a aparência do componente e a aparência do modelo antes de começar a trabalhar com eles. A última coisa que eu queria te mostrar sobre isso são esses fluxogramas. Então, deixe-me abri-los aqui. Então, vamos fechar os modelos, abrir os fluxogramas. Vamos usar fluxogramas de desktop. Vamos usar o cabeçalho, por exemplo, e arrastá-lo e soltá-lo aqui. Vamos usar o conteúdo. Talvez eu queira posicioná-lo aqui. Vamos usar outra coisa, como uma posição de controle deslizante aqui. Então, o que é ótimo sobre esses componentes é que você pode simplesmente duplicar o posicionamento deles aqui. E como esses são os componentes, como eu disse, você pode simplesmente clicar em arrastar e ele substituirá esse componente em tempo real. Então, faça o portfólio, arraste e solte aqui. Talvez eu queira usar o formulário número cinco. Meu cliente diz que não gosto da aparência da fórmula Phi. Talvez você possa tentar outra coisa, ok, para o número três, aí está. Você pode ver como é super simples criá-los. Quando você quiser conectar todos esses elementos, vamos fechar isso. Então, vamos usar os elementos do fluxograma. Vamos usar, por exemplo, números. Então, vamos com o número um. Talvez esta seja a primeira página, por exemplo, vamos fechá-la. Vamos usar flechas. Então, vou usar essa seta, arrastá-la e soltá-la no lugar certo. Talvez quando os usuários clicarem nesse botão aqui, eles acessem essa página. Então, vou simplesmente estender isso e selecionar minha linha e laticínios, mas isso é muito simples usar e criar n, por exemplo se você deixou isso cair, digamos que árabe por engano, Eu quero substituí-lo. Eu quero fazer isso com este. Aí está. Este é o erro que eu queria, por exemplo deste par, desse controle deslizante aqui, quero que eles acessem esta peça do portfólio. Você pode ver como isso é super simples de criar. Então essa é a beleza desses sistemas de design. Obviamente, isso é um extremo, como eu disse, demorei mais de seis meses para criar tudo isso. Levei dois ou mais de dois anos de pesquisa. E se eu mostrar alguns desses modelos, você pode ver como eles se parecem. Então, temos aqui um apelo à ação do futuro. Então, fiz minha pesquisa sobre o que é mais usado na indústria. Quais são alguns padrões do setor e quais são os mais usados? Então, grades de conteúdo, preços, temos o blog, temos o login e temos fóruns, entre em contato conosco. E muito mais. E tudo isso é responsivo , como mostro aqui. E tudo isso está usando x, esses recursos mais recentes. Então, se eu clicar aqui e pular dentro dessas imagens, você pode ver que temos a pilha, temos o emparelhamento. Então, se eu escolher mudar essa tag, por exemplo, eu posso clicar aqui e ela mudará a direção dessa pilha para essa direção. E você notará que vou reduzir esse conteúdo e escalá-lo uniformemente para tudo o que eu estiver criando no meu sistema de design. Mais uma vez, se você estiver interessado, sistema de design é inception design system.co. Existe um curso no YouTube para isso. Tudo é explicado com muito mais detalhes. Você pode conferir esta página para ver o futuro. Como mencionei, átomos ou moléculas, organismos, fluxogramas, modelos, modo escuro, ícones animados, curso incluído. Então, tudo isso está dentro do sistema de design inicial. Se você quiser criar seu próprio sistema de design, preste atenção a duas coisas. Certifique-se de que, ao começar a escalar, escale com um propósito. Não escale apenas por uma questão de dimensionamento e certifique-se de usar somente os elementos necessários em seu sistema de design. Para o meu sistema de design aqui, usei elementos da minha pesquisa que a maioria dos designers está usando. Mas para o seu sistema de design, talvez você não use esses elementos. Talvez você use outra coisa, outra coisa. Mas basicamente comece com pequenos elementos, como botões, como eu mostrei, e depois expanda a partir daí, adicione componentes, mas certifique-se de adicionar apenas os componentes que são realmente necessários em seu sistema de design. No próximo vídeo, falaremos sobre tokens de design, o que eles são elaborados, um pouco mais sobre eles e como usá-los em seu sistema de design. Então, eu vou te ver lá. 122. Os tokens de design: tokens de design estão no centro de todo bom sistema de design existente porque são uma ótima ferramenta para colaboração entre designers, desenvolvedores e partes interessadas. Neste vídeo, vou mostrar como eu faço isso e como algumas grandes empresas fazem isso, e quais são algumas das melhores práticas em relação aos tokens de design? Então, vamos começar. Então, aqui estamos de volta no Adobe XD e mais uma vez no meu arquivo mestre do sistema de design inicial, que mostrei no vídeo anterior. E os tokens de design estão localizados aqui à esquerda. Basicamente, o que mencionei anteriormente na lição anterior, eles têm o nome. Então, esse nome é muito útil porque quando você está colaborando com outros designers, digamos que eu queira usar essa cor do oceano para, digamos, a cor de fundo do nosso modelo ou algo parecido. E então eu tenho que dizer isso ao meu colaborador de design em meus colegas de equipe de design, digamos que use essa cor azul dentro do plano de fundo do modelo. Mas temos várias cores azuis, qual colarinho azul? Use. Um B8, F9. Mais uma vez, vai ser muito difícil para as pessoas, especialmente se você estiver trabalhando com elas distantes. Se você estiver trabalhando em casa com seus colegas de equipe, será difícil para eles implementarem essa mudança. E vai ser difícil para todos na equipe se lembrarem desse código hexadecimal, por exemplo, é por isso que estamos usando nomes. Nesse caso, posso simplesmente dizer a eles, use o azul do mar como fundo do modelo e todos estarão na mesma página. O oceano é muito mais fácil de lembrar do que, por exemplo, a. Hashtag um, B8, f e, f nove ou qualquer outra coisa. Assim, os desenvolvedores podem usar a mesma função e eu vou mostrar isso em apenas um segundo em um grande sistema de design existente. Mas, basicamente, esse é o objetivo do design. Os tokens os usam com sabedoria e os usam à medida que seu sistema de design se expande. Claro, você pode usá-los para texto. Nesse caso, eu só tenho título e corpo, mas, por exemplo você pode usar o tamanho de caractere específico para elementos específicos, por exemplo, se o personagem estiver logo abaixo, digamos, animações ou ilustrações melhor, então você pode usá-los em conjunto com essas ilustrações, por exemplo, ilustração de título, grande, ilustração de título pequena ou qualquer outra coisa. E então, quando você disse aos seus desenvolvedores, certifique-se de mudar o título, uma grande ferramenta de ilustração, digamos 64 pontos. Todos na equipe conseguirão entender isso muito melhor do que, se não, o que mencionei anteriormente sobre os componentes e os diferentes nomes dos componentes. Então, se ampliarmos aqui os meus botões, por exemplo, alternar, o painel de camadas, clique aqui. Você pode ver que temos botões grandes por padrão, porque são botões grandes. Em seguida, temos o botão padrão, médio, botão padrão pequeno. Então, esses são botões padrão, mas se eu mudar para outra coisa, por exemplo, aqui temos seletores. Seletores no valor da linha, seletores grandes no valor da linha, seletores médios no valor da linha, digamos um pequeno ou qualquer outra coisa. Portanto, você deve prestar atenção a todos esses detalhes. E temos imagens. Então, temos uma imagem grande e quantas colunas sua imagem ocupa? Então, neste caso, imagem grande para coluna imagem grande, imagem de nove colunas maior que 12, largura total, tela cheia média, a mesma história, pequena, a mesma história. Então temos dispositivos, por exemplo, dispositivo, painel, navegador ou qualquer outra coisa. Portanto, você precisa usar esses tokens de design para explicar o que você está criando em seu sistema de design e o que cada token de design foi projetado para fazer em primeiro lugar. Agora vou mostrar isso de design do Salesforce Lightning tokens de design do Salesforce Lightning Design System já mostram isso na lição anterior, onde falamos sobre todos esses sistemas de design incríveis. forma como eles o usam é basicamente a mesma. Portanto, temos uma variante escura e acessível à marca que pode ser acessada com branco. Então, eles estão usando combinações e estão usando esse suporte. Assim, você pode ver o acesso global disponível para uso na plataforma. Ou se não, posso passar o mouse aqui, interno, portanto, disponível apenas para desenvolvedores internos do Salesforce , sujeito a alterações. Então, eles têm todas essas regras implementadas quando elas são lançadas. Então, versão número 1234 e assim por diante, T-Mobile. Então, eles estão usando isso com uma equipe? Você o usa com um aplicativo? Você o usa para front-end ou back-end? Você o usa para o que os visitantes estão vendo, ou para um painel interno ou para o painel de visitantes, você precisa rotular todos esses elementos. E aqui você pode ver outra coisa. Então, eles estão usando primeiro RGB e valores hexadecimais. Segundo, a maioria das marcas está usando o contrário, então elas estão usando o valor hexadecimal primeiro, o valor RGB em segundo lugar. Portanto, você deve considerar todos esses elementos em relação ao seu próprio sistema de design. É por isso que criei essa estrutura simples no sistema de design Inception, porque a maioria das pessoas é capaz de entender que temos foco. Então, é só para desfocar, mas se eu estiver criando uma variação no foco, por exemplo, diferentes tons de foco. Talvez eu diga algo como focar 80 por cento ou botão de foco ou foco. Não sei, seção de heróis ou qualquer outra coisa. Você vai contar isso dentro do próprio token de design. Então, todos na equipe serão capazes de entender isso. E se eu te mostrar aqui mais uma vez, se rolarmos um pouco mais para baixo, você pode ver quantas cores diferentes elas têm. Então, vamos escolher um aleatoriamente, por exemplo , este, pallet cloud blue, 15. Portanto, eles têm 15 variações diferentes dessa paleta. Cor azul nublado. Não, não é um T-Mobile e aqui eles o estão usando internamente. Esta é a versão 2.14, 0.0. E você pode ver uma nuvem azul educada, então como eles a estão usando e como funcionam. Então, basicamente, como eu continuo mencionando, tudo depende do seu projeto, da sua necessidade, você não terá todas essas cores diferentes se seus clientes não precisarem delas. Então, por que se preocupar em criar e gastar tanto tempo criando todas essas cores, tonalidades, variações e muito mais quando você pode se safar de algo assim, por exemplo, apenas algumas cores aqui e aí e depois, e isso é crucial e Keating, quando custa o projeto, você sempre pode adicionar mais cores. Então, por exemplo, deixe-me mostrar isso também. Vamos clicar em selecionar isso. Vamos mudar isso para, eu não sei nada, seja o que for aqui. E se quisermos adicionar essa cor, posso simplesmente clicar aqui. E eu posso dizer algo como renomear, talvez chamá-lo de bolha roxa, algo assim. Essa é minha cor principal no meu cartão secundário? Chame isso de cores principais. Então coloque isso aqui, bolha roxa. E então, quando eu selecionar meu blog, da próxima vez que eu puder clicar em sangue, o roxo será aplicado ao mesmo tempo. Por exemplo, se tivermos esses blobs na seção de heróis do seu site, por exemplo, ou no seu aplicativo, você pode diferenciar seu design. Companheiros de equipe, mudem a bolha número cinco para bolha, cor roxa. Clique, clique em Concluído. É por isso que os tokens de design são incríveis. É por isso que eles são úteis, porque você pode usá-los para criar todos esses elementos em seu sistema de design. É muito mais rápido e todos sua equipe podem estar na mesma página e entender o que você está criando muito mais rápido do que se não estivesse usando esses tokens de design em primeiro lugar. Na próxima lição, falaremos sobre escalar seu sistema de design. Quando você deve fazer isso e como deve fazer isso? Te vejo lá. 123. Como aumentar seu sistema de design: Ao escalar seu sistema de design, você deve sempre fazer isso apenas com um propósito e deve sempre fazê-lo passo a passo. Por que você está escalando isso? Para onde você está escalando isso? Para quais páginas, para quais tamanhos, para quais dispositivos você precisa pensar todas essas coisas à medida que avança. Então, vamos entrar no Adobe XD e eu mostrarei e darei algumas dicas sobre quando e como escalar seus sistemas de design. Então, aqui estamos no Adobe XD, mais uma vez, dentro do meu arquivo mestre do sistema de design inicial. Se você quiser conferir este sistema de design, certifique-se de clicar no link do PDF e pronto Você pode conferir se estiver interessado. Nesse caso, digamos que você acabou de criar esses botões e escolheu esses três tamanhos. Tão grande, médio e pequeno. E a partir daqui, talvez você queira adicionar um tamanho extra grande. O que você deve fazer? Você precisa primeiro consultar seus desenvolvedores Devo criar botões diferentes para esse tamanho extra grande ou você pode escalá-los e reposicioná-los? Codifique, por exemplo, talvez o tamanho extra grande do botão em si não seja realmente necessário. Talvez o espaçamento deva ser ajustado e caiba em um tamanho maior. É por isso que a comunicação entre designers e desenvolvedores é fundamental. Portanto, você não está investindo seu tempo nessas mudanças que não são realmente necessárias e obrigatórias. Então, se eles não forem obrigatórios e necessários, você vai acabar com uma aparência limpa como essa. Mas se forem, talvez você tenha 20 tamanhos de botões diferentes. E mais tarde, você decidirá que, por exemplo tamanho número sete não é realmente necessário. Quais tamanhos usar. Isso é bem simples. Você precisa falar com seu cliente e com a empresa para a qual está trabalhando. Quais tamanhos seus usuários usam? Se eles estiverem usando, por exemplo, apenas um tamanho, a maioria deles. Certifique-se de concentrar toda a sua atenção nesse tamanho único. E então, quando você está trazendo mais usuários para o futuro, por exemplo, esses usuários estão chegando, maioria deles está chegando ao tamanho de um desktop é, digamos que a maioria deles esteja usando laptops e, de repente, um grande fluxo de novos usuários está usando o iPhone. Então, como adaptar esse tamanho de desktop ao tamanho do iPhone? Então você tem que falar com seus clientes, seus desenvolvedores, você tem que fazer sua pesquisa o tempo todo. E quando você está escalando, não faz muito sentido escalar para tablets se seus usuários não usarem tamanhos de tablet. Então, pense em todas essas coisas, mas pense sobre essas coisas à medida que avança e cria seu sistema de design, porque não há ponto de escala. Por uma questão de escala, há um ponto por trás disso: escalar com um propósito, ou seja, atrair novos usuários, acomodar novos usuários, acomodar as necessidades e desejos de novos usuários, e, portanto, você deve escalar com isso em mente. Além disso, como continuo mencionando ao longo desta aula, não crie elementos que não sejam necessários. Por exemplo, se você não está suportando avatares, porque talvez você tenha perfis em seu projeto, em seu produto, em seu painel ou qualquer outra coisa. Talvez você não tenha a opção de eles fazerem login e criarem suas contas, então por que você criaria avatares? Realmente não faz muito sentido. Não os crie apenas para estar aqui, criando porque eles são desnecessários para o seu projeto. E não tenha muito medo. Se você, por exemplo, acabou de criar uma dica de ferramenta e não criou 50 dicas de ferramentas diferentes. Talvez não sejam necessariamente. E o Tooltip, como o nome sugere, é realmente simples porque é apenas um pouco de informação. Portanto, não preste muita atenção a todas essas pequenas coisas. Certifique-se de acertar as coisas mais importantes, como layout , grades, grade de espaçamento e horizontal e vertical. Livre-se de todas essas coisas antes de se preocupar com dicas de ferramentas. E uma última coisa que quero dizer sobre escalar seu sistema de design é com esses modelos. Então, se aumentarmos o zoom aqui e mostrarmos, o que temos aqui são equipes de apelo à ação do futuro. Então, talvez tenhamos notas de conteúdo, talvez tenhamos portfólio, tenhamos preços e, por exemplo você esteja criando um painel. Dentro desse painel, você terá uma única página que é apenas uma visão geral, por exemplo, dentro dessa visão geral, você vai dar a eles a capacidade de ver, não sei, deixar digamos despesas mensais ou algo parecido. Não entre em muitos detalhes. Ao adaptar novos componentes para trabalhar com isso, talvez você possa usar componentes existentes e depois deixar os desenvolvedores integrem a solução que não é nativa. Se for nativo, como, por exemplo , gráficos, você precisa criar um design para um único gráfico e não se preocupar em criar vários gráficos, fazendo várias coisas apenas por ter em todos esses gráficos, certifique-se de se concentrar no que é necessário para esse projeto. E, à medida que novos recursos forem adicionados posteriormente, certifique-se de escalar junto com esses novos recursos e seu sistema de design. Não se preocupe em criar elementos que não são necessários ou não necessariamente, porque isso só vai bagunçar seu sistema de design e, na verdade, retardar seu progresso esse projeto em particular e o progresso de seus desenvolvedores. Porque lembre-se de que tudo o que você está projetando, projetando dentro de seu sistema de design , os desenvolvedores precisam dos desenvolvedores, então não use seu valioso tempo se esses elementos não estiverem necessariamente no momento. E você pode criar uma lista de pendências. Então, por exemplo, esses elementos , digamos, são necessários no momento. Esses elementos são necessários em três meses, esses elementos são necessários em seis meses. Assim, você pode criar backlogs de elementos. E à medida que o projeto avança, à medida que você avança , você pode abordar esses elementos um pouco mais tarde porque eles não são necessários no momento. Então, mais uma vez, e finalmente, a escala, pois precisa ser dimensionada, não escale apenas por uma questão de escalabilidade. 124. SECÇÃO 15 ATRIBUIÇÃO: Sua tarefa para esta seção é apenas usar dois ou três elementos diferentes no Adobe XD e tentar praticar a criação de seu próprio sistema de design. Porque a partir desses elementos básicos, você pode realmente se ramificar, como viu nesta seção da classe, e criar alguns sistemas de design massivos que você pode usar em todos os seus projetos. Não tente investir muito tempo agora nessa abordagem, mas certifique-se de ter essa abordagem em mente, especialmente se você está apenas começando e parece um pouco confuso para você, Parece um pouco difícil, você. Não tente se sobrecarregar demais com isso. Você pode usar elementos como eu mencionei na seção anterior. Com os kits de interface do usuário, você pode usar um desses elementos, por exemplo , e substituí-los aqui e ali apenas para acelerar um pouco o processo. Mas esse é o objetivo de acelerar seu processo. Porque onde quer que você esteja trabalhando, você sempre tenta ser mais rápido. Você sempre tenta ser mais preciso. Você sempre tenta entregar aos seus clientes um pouco mais rápido e sem nenhuma revisão, se possível. Então, os sistemas de design vão permitir que você simplesmente morra. Então, como eu disse, eles são incrivelmente importantes, mas se você está apenas começando e tudo parece um pouco demais, não se preocupe com isso. Você sempre pode voltar a isso em fases posteriores de sua carreira. 125. SEÇÃO 16 Design de sites no Adobe Xd: Tudo bem, então aqui estamos. Depois de todo esse tempo, finalmente começaremos com o design. E nesta seção do curso, vamos realmente começar a trabalhar em nosso design, que será para uma concessionária exclusiva de carros. Eles vão vender carros usados. E vamos abordá-lo usando algumas dessas metodologias que mencionamos no curso até agora. E depois de criarmos o design, depois de criarmos diferentes interações em nosso design, depois de escolhermos as cores, escolhemos a tipografia, escolhemos as imagens certas, escolhemos o layout certo e testamos, praticamos com isso e entendemos, e na verdade obtemos a autorização final de nosso cliente. Em seguida, vamos movê-lo para o fluxo de trabalho. Então, vamos começar com esta seção. 126. Resumo sobre design: Tudo bem, vamos direto ao assunto e vamos começar com nosso resumo de design. E o que eu abri aqui são os modelos do resumo de design do Adobe XD, que eu já mostrei em uma das lições anteriores sobre o resumo de design em si. E você pode obter esse modelo e usá-lo. Compartilharei o original e também compartilharei este, que é preenchido com as informações do projeto que abordaremos. E como você pode ver, é completamente igual ao que eu já mostrei antes. Sem mais delongas, vamos conhecer nosso cliente para este projeto. Então, esse será um cliente imaginário e, na verdade, será baseado em um cliente real que eu tive alguns anos atrás. Então, tomei os ensinamentos, as etapas e as abordagens desse projeto em particular. E eu coloquei isso diretamente neste projeto. Eu sempre gosto de usar isso e fazer isso nos meus cursos. Sempre gosto de usar projetos reais, o que realmente fiz antes, e transformá-los em conhecimento e no que aprendi eles enquanto trabalhava neles, transformá-los em cursos reais e mostrei alguns das minhas abordagens e algumas das minhas metodologias. Então, é a mesma história com esta, mas porque é extremamente difícil, porque estamos lidando com carros, encontrar imagens de carros que você possa realmente usar em vários ângulos diferentes que chegaremos em apenas um segundo em que falaremos sobre imagens diferentes que usaremos neste curso. É muito difícil fazer isso. É por isso que eu o escolhi para ser um cliente imaginário porque, como eu disse, carros reais com todos esses ângulos diferentes , são muito difíceis de encontrar. Então, vamos direto para o XD. E deixe-me mostrar este resumo do design e o que está incluído nele. Claro, você pode ler isso por si mesmo porque, como eu disse, vou dar para você. Mas vou analisar isso rapidamente e explicar como chego a essas informações e por que escolhi essas informações. Como eu disse, com base na experiência anterior de metodologistas anteriores, expiramos um site de carros exclusivos para aranhas, que é o projeto que mencionei. Temos o prazo do projeto aqui, que é de três meses para fazer tudo. Então, para fazer pesquisas, projetar e construir o Webflow , temos o perfil da empresa. Portanto, é uma concessionária de carros usados localizada em Belgrado, Sérvia. Eles são o carro de luxo e o nicho. Então, isso é muito importante porque o revendedor de carros usados pode ser basicamente qualquer coisa que você possa vender carros usados, que são, por exemplo , $1.000 ou $2.000 ou $100.000 ou $500.000 porque carros usados são carros usados não importa onde eles estejam no espectro do preço. Eles ainda serão carros usados, mas neste caso eles estão vendendo 50000-500 mil. Por que isso é importante? Porque você quer saber como estruturar as informações. Com quem você está falando. Então, obviamente, essas pessoas como clientes serão diferentes do que se você estivesse criando um site para carros de $1.000, por exemplo, algumas imagens obviamente serão tipos diferentes de carros que você usará ligado, pois as imagens serão diferentes. Talvez. A iconografia será diferente porque você deseja atrair esse público mais amplo. Eles vendem principalmente sedans, SUVs e superclasses. Então você pode ver que às vezes eles têm um hatchback quente em estoque. São hedge backs que são extremamente fortes ou poderosos em potência, por exemplo, então temos algo como um Mercedes, um 45, ANG ou Audi RS três, por exemplo, ou algo parecido. Então, às vezes eles têm isso como troca parcial. O que significa troca de peças é que, se eu for até você comprar um carro de você, eu já tenho meus próprios carboidratos, então vou dar para você. Você vai colocar um preço e me cobrar com base nesse preço. Então, se você precificar meu carro, digamos $20.000, por exemplo, você vai deduzir esses $20.000 do preço original do carro que você está vendendo. Então, isso é o que chamamos de troca de peças. Então, como eu disse, às vezes eles fazem com que essas partes troquem carro em troca de realmente venderem suas próprias ações. Então, como eu disse, isso se baseia na experiência real que tive com o cliente há alguns anos, e é assim que eles fazem seus negócios. E a maioria desses vendedores de carros está fazendo isso. mesma coisa. E uma vez que eu entendo, isso é importante porque queremos saber o que vamos colocar no próprio site. Portanto, são diferentes da concorrência porque todos os carros ou carros de demonstração do revendedor e a maioria dos carros são da Alemanha. O motivo pelo qual isso é importante é que esses carros não são usados por pessoas comuns, vamos chamá-los de pessoas comuns. Eles são usados principalmente por jornalistas que vão às concessionárias e testarão esses carros. E isso é muito importante porque eles estão comprando esses carros usados dos revendedores oficiais da Alemanha. Sua missão é ser transparente, honesta e oferecer garantia completa do histórico do carro, dependendo do carro, e de um ótimo suporte pós-venda. Marco é a pessoa-chave em uma empresa que tem outros cinco funcionários, o que é fundamental apenas seis pessoas nesta empresa. Então, eles são uma empresa muito pequena. Eles estão usando fornecedores externos para transferências de carros da Alemanha e têm parceiros para empréstimos e alfândegas. Então, eles não estão fazendo todas essas coisas sozinhos. É por isso que eles podem ser tão enxutos com apenas seis pessoas na equipe. Eles estão usando todos esses parceiros externos para ajudá-los. Seu concorrente direto é o DSD, e vou mostrar o site deles um pouco mais tarde. E os concorrentes indiretos estão chocados comigo, automóveis, o que basicamente se traduz em carros usados, mas em uma escala muito maior porque eles vendem carros de todas as faixas de preço. Imagine a Amazon, mas para carros, e eu vou realmente mostrar esse site um pouco mais tarde. Então temos o Projeto ou você? Atualmente, eles têm uma página no Instagram onde exibem seu estoque, então não têm um site no momento, que era a mesma história com o cliente I mencionei anteriormente que fizeram algum trabalho para eles. Mas eles querem ter um site porque podem mostrar imagens mais rápido e com mais rapidez, o Instagram os limita a seus próprios tamanhos, seu próprio layout. Eles querem mostrar imagens enormes. Eles querem mostrar imagens detalhadas dos interiores, por exemplo, coisas assim. E eles não podem colocar mais de dez imagens na linha da grade do Instagram. É por isso que eles escolheram criar um site e ter um ponto de contato direto por meio do formulário de contato e mostrar alguns de seus recursos em um só lugar. Você pode ter tudo isso no site, no Instagram, desculpe, você pode ter imagens. Quando você clica fora das imagens, por exemplo , histórias ou qualquer outra coisa , você pode ler a descrição, mas só pode clicar e entrar contato com a pessoa de seu interesse, descarte que você está visitando o site do botão, você pode fazer tudo isso em uma única página. É por isso que eles querem um site em primeiro lugar. Eles querem que ele seja responsivo e possa adicionar rapidamente novos materiais ao site e não entrar em contato comigo como designer para saber cada pequeno detalhe, mas gostariam do meu apoio se ficarem presos. É aí que usaremos o Webflow CMS posteriormente, porque poderemos facilmente adicionar carros novos ao estoque. Ou, se os carros tiverem sido vendidos, podemos facilmente removê-los do estoque. E vou mostrar que, no Webflow, construa um pouco mais tarde e como é muito fácil quando você realmente o configura, o processo de configuração real, que leva um pouco de tempo, é um pouco complicado. Mas uma vez que você realmente o configure, trabalhar com ele para seus clientes será muito simples e direto. Eles têm as imagens de seu estoque, mas não têm nenhuma outra imagem de ícones. É aí que entramos, como designers, para encontrar imagens que atendam às suas necessidades e a esse projeto em particular, bem como os ícones que mostrarei em apenas um segundo quando mudarmos para Com design no XD, eles querem ser reconhecidos como revendedores de luxo, mas não gostam de sites obscuros e imagens enormes. Isso é o que realmente fiz com meu cliente anterior, que mencionei. Fui em frente e conversei com eles, gosto dessas cores, gosto dessas imagens, que tipo de site eu gosto de inspiração, por exemplo, e depois indiquei todos esses sites sem cores escuras. Então eu fui em frente e perguntei eles, vocês gostariam de cores escuras? Porque as cores escuras geralmente estão associadas a algo luxuoso e caro. Eles disseram que não gostamos disso porque eu simplesmente não sou fã disso. Como o minimalismo. Gostamos que as coisas sejam simples, organizadas, fáceis de usar e que não sobrecarreguem seus olhos, porque maioria desses sites on-line que você vê como luxuosos, geralmente são de cor preta para o fundo, imagens muito escuras e, em seguida, texto branco ou dourado. Então, eu realmente não gostei disso. Eles acham que é muito, é muito antiquado. Mas eles gostam da cor azul e da simplicidade. E o site ideal deles é car wow, que também mostrará em apenas um segundo o que é e por que eles gostam tanto, porque eu fiz todas essas perguntas. O principal problema que eles estão tentando resolver é apresentar seu estoque e ter um ponto de contato em um só lugar, em vez de se comunicarem por meio de DMs do Instagram, que você acabou de mencionar, e por que eles precisam um site em primeiro lugar. Metas e objetivos. Portanto, seu principal objetivo é apresentar que a marca de luxo é uma concessionária de carros de luxo e se diferenciar de outras concessionárias que vendem carros familiares baratos. Então, imagine isso. Quando você escolhe três sites e os reúne, você quer notar que esses caras estão vendendo coisas caras e não apenas cores normais. Então essa é toda a ideia aqui. O objetivo principal deste projeto é enviar pessoas de sua página do Instagram para este novo site e aumentar as reservas de test drives, que é quando você realmente liga para o showroom e reserva um test drive para um determinado carro em dez por cento nos primeiros dois meses após o lançamento. Então, eles querem que lancemos o site, configuremos o SEO, por exemplo e nos próximos dois meses após o lançamento, eles querem poder aumentar as reservas para os test drives dez por cento nos primeiros dois meses após o lançamento. Em seguida, passamos para o público-alvo. É muito simples porque eles foram abertos para negócios nos últimos três anos. E um tipo de pessoa continua voltando com uma pequena exceção de vez em quando, mas geralmente, é apenas um tipo de cliente que continua voltando para ela. É um homem de 45 a 65 anos da Sérvia, geralmente mora em Belgrado, é proprietário de uma empresa, tem seu próprio negócio na verdade porque esses carros são muito caros. Então, esses são os tipos de pessoas que podem realmente comprar esses tipos de carros. Hábitos de consumo de mídia, Instagram e LinkedIn o dia todo, YouTube para cuidadores e exploração, hábito diário. Então, Jim, um estilo de vida saudável gosta de postar conteúdo no Instagram. Como sabemos todas essas coisas? Como perguntamos aos nossos clientes e eles realmente nos disseram, lembre-se de que estão trabalhando no Instagram. Todos os seus clientes vêm do Instagram, então eles podem ver quem são essas pessoas. Porque quando você realmente envia uma mensagem, você pode clicar no perfil. Você pode explorar o perfil e ver quem é essa pessoa. Como você sabe sobre a idade? Quando você realmente compra um carro? Você tem que dar a eles sua carteira de motorista, você tem que dar a eles seu cartão de emissão do governo, por exemplo, passaporte ou algo parecido para verificar sua identidade a partir dessas informações. Podemos saber que eles são 45-65. Eles geralmente são do sexo masculino porque esses tipos de pessoas estão chegando. Você também pode saber a residência deles e a cidade dos residentes a partir desses documentos oficiais emitidos pelo governo, porque eles precisam assinar papéis lá. Portanto, você não está pedindo esse tipo de informação apenas para seu próprio bem ou para que elas sejam mais informadas, mas para criar uma persona de usuário que chegará em apenas um segundo. Então, a partir dessas informações, você pode saber quem são essas pessoas. Além disso, você pode pesquisar essas pessoas no Instagram porque seus clientes disseram que as encontraram no Instagram e contato com elas pelo Instagram para entraram em contato com elas pelo Instagram para começar e testar todas as esses veículos e, eventualmente, comprá-los. Então é assim que sabemos quem eles são e como são. Como percorremos seus feeds do Instagram, os encontramos no LinkedIn. É assim que sabemos que existem empresários porque vemos que eles montaram seus negócios. Vemos por quanto tempo eles trabalharam nisso. Essa empresa, que são os principais pontos de contato dessa empresa, é onde as empresas estão localizadas. Há quanto tempo está aberto? Quantas pessoas trabalham lá? Você pode ver todas essas informações ali mesmo no LinkedIn e no YouTube porque eles disseram ao nosso cliente que assistiram a muitos vídeos e avaliações do YouTube porque são carros caros. A Sérvia é um lugar muito pequeno e um país muito pequeno. E, portanto, eles não são muitos desses carros circulando por aí, como na Inglaterra, por exemplo, ou em LA ou qualquer outra coisa. Portanto, você precisa se informar por meio de outros meios. E esse meio, nesse caso, é o YouTube para avaliações de carros. E só para explorar esses carros e entendê-los um pouco mais. Hábitos diários. Mais uma vez, para não me repetir muito no Instagram, porque você pode ver o que eles fazem, onde viajam, o que estão fazendo. Assim, você pode descobrir onde eles estão diariamente. E você também pode ver quando eles postaram essas imagens. Então, você pode entender facilmente com que frequência eles posam para algo parecido no Instagram? E, mais uma vez, tudo isso é muito importante porque você pode facilmente segmentar seus anúncios um pouco mais tarde depois de realmente lançar um site diretamente pelo Instagram, porque mais uma vez, todo o público deles está na grama dele de qualquer maneira. Assim, podemos segmentar o Instagram, agora podemos obter o LinkedIn porque sabemos quem são essas pessoas , do que gostam, quantos anos têm onde moram e assim por diante. Finalmente, chegamos a essas duas coisas. Portanto, temos requisitos de design. Portanto, como estamos usando o Webflow, apenas uma dimensão é necessária antes da construção. E eu vou realmente mostrar como criar um design responsivo no Adobe XD em apenas um segundo. Mas não vamos falar sobre design responsivo porque é uma perda de tempo quando você trabalha sozinho diretamente do XD para o Webflow, nós, as dimensões como soluções, vamos ter uma prancheta de 40,40 pixels. Então o formato de arquivo XD é nosso principal formato de arquivo. Teremos JPEG, PNG e SVG para conteúdo de imagens e ícones. É necessário criar paletas de cores para que elas não tenham uma. Temos que criar um. As imagens devem ser incluídas. Seu estoque está incluído, meio que economize. Então, vou explicar isso um pouco mais tarde. Outras imagens são de elementos da Envato. No nosso caso, todas as imagens são dos elementos do meu lema, mas vou acessá-las em apenas um segundo. Como eu disse, documentos de cópia associados a serem criados. Então, o que isso significa é, por exemplo, guia de estilo. Vamos criar isso. E vamos exportar todas essas outras opções, como preços e este resumo do design, neste caso, orçamento e cronograma. Portanto, o cronograma é dividido em duas partes. Um para pesquisa e design, os outros quatro, desenvolvimento de Webflow. E sempre tenha isso em mente. Sempre reserve um pouco mais de tempo para o desenvolvimento do Rockfall, porque às vezes pode haver alguns bugs. Então, quando você tiver tempo para descobrir todos esses bugs e resolvê-los, é muito melhor ter um pouco mais de tempo para o seu criador de fluxo de trabalho. Então, para esse tipo de projeto, cinco K para a pesquisa e design, cinco K para o Webflow construído. E, como eu disse, três meses para concluí-lo neste caso. Então, não parece muito, mas eu só quero criar algo que seja adequado para iniciantes. Normalmente, esses tipos de projetos duram cerca de um mês e eu cobro um pouco mais do que você vê aqui por esses tipos de projetos. Então, duas semanas para a pesquisa, um mês para o design, um mês e meio para a construção. Então você pode ver o que eu disse. Eu só deixo um pouco mais de tempo para o cinto real. Em seguida, temos a apresentação de planejamento, pesquisa e design de público construída e entregue. Você pode navegar por todas essas datas apenas para entendê-las um pouco mais estruturadas. Finalmente, coloquei meu nome aqui, meu e-mail aqui. Só para ter uma ideia, porque mais tarde talvez eu queira enviar isso para meus clientes para que eu possa selecioná-lo, pressionar Control ou Command E para exportá-lo. E a partir daqui, vou escolher o PDF, clicar em Exportar, exportar este PDF para que eu possa compartilhá-lo facilmente com eles para que eles possam vê-lo, eles possam entendê-lo um pouco mais e eles são capazes de ver todas as minhas intenções com esse design e o que eu queria fazer. Então, para resumir o design, fique à vontade para explorá-lo um pouco mais. Vou incluí-lo, como eu disse, o modelo original e este, você pode adicioná-lo o que quiser . Eles são basicamente os mesmos. Este acabou de ser preenchido, o outro está apenas em branco. E agora vamos passar para as propostas de projetos. E vou explicar para você como enviar essas propostas de projetos e como ser mais eficaz com elas. Então eu vou te ver lá. 127. Proposta de projeto: Agora que sabemos quem é nosso cliente, vamos direto às propostas de projetos pois queremos enviar a elas o preço real. Queremos que eles verifiquem o preço. E queremos definir alguns termos e condições. Portanto, não se confunda um pouco mais tarde. Então, vamos direto para z. E aqui está o modelo de proposta de projeto. Você pode obter esse modelo. Vou deixar o link porque é o modelo premium que, na verdade, estou vendendo e não é muito caro. Acho que é algo como cinco a $6, algo assim. E também tem uma página adicional aqui que foi removida propositalmente para este projeto, que é a página sobre mim e acredito em ir em frente e dar um desconto. Portanto, certifique-se de clicar no link do PDF para obtê-lo. Então, o que temos aqui é a capa. Em seguida, temos os detalhes do projeto, os preços do projeto e os termos e condições. E você se lembra disso da lição anterior. Portanto, você pode obtê-lo lá ou pode obtê-lo neste link. No entanto, é mais fácil para você se quiser realmente usá-lo. Se não, eu disse o que já disse nessa parte do curso, você mesmo pode criar essas coisas. Mas se o tempo for dinheiro, você pode ir em frente e comprar este. Então, temos a cor dos carros exclusivos da Pilar. Esse é o endereço deles. Este é meu site aqui e minhas informações. Em seguida, temos os detalhes do projeto. Então, visão geral do projeto, com o que concordamos durante nossa conversa por e-mail e ligação. Às vezes, você vai conhecer seus clientes diretamente pessoalmente. Então você vai colocar isso aqui, mas na maioria das vezes você vai lidar com e-mails, você vai lidar com chamadas telefônicas, por exemplo, videochamadas e algo parecido. Então, certifique-se de colocá-lo lá. Descrição do projeto. Então, nós já conversamos sobre isso. Temos um site para ser projetado e desenvolvido, pré-vendas oferecem carros exclusivos. Ele deve ser projetado no XD, desenvolvido e hospedado no Webflow para facilitar a criação de páginas de manutenção. Portanto, temos aproximadamente a página principal, que é nossa página principal, que apresentará os valores da marca , a missão e parte do estoque. Depois, temos os carros onde todos os carros serão apresentados. Temos empréstimos para explicar os empréstimos, bem como a página de contato onde as pessoas podem realmente contatá-los. E acabamos de conversar sobre todas essas coisas com nosso cliente e perguntamos a eles: quais são algumas partes principais do seu negócio? Então, eles nos disseram que estão vendendo carros, geralmente por meio de empréstimos, ou seja, por meio de seus parceiros. Então, já temos que criar essas duas páginas. Normalmente, temos que criar uma página inicial porque precisamos estruturar essas informações e mostrar às pessoas que são novas no site. Na verdade, eles não sabem o que esse negócio está fazendo. Portanto, queremos convertê-los com bastante facilidade e enviá-los imediatamente para a seção de carros da página. Em seguida, temos a página Fale conosco porque queremos que as pessoas possam entrar em contato facilmente com essa empresa, mas também incluiremos fonte de contato em todo o nosso site. E eu sempre gosto de fazer isso porque força as pessoas a rolarem para cima, por exemplo, para clicar no contato quando você pode ter um formulário de contato em cada página, se isso for exigido pelo seu cliente. Finalmente, teremos todas essas páginas, como mencionei, quais apresentaremos um carro individual do estoque. Então você pode querer ver quantos quilômetros o carro tem a identificação, qual é a cor e qual a engenharia? Não conheço todas essas outras imagens adicionais, então falaremos sobre tudo isso em profundidade um pouco mais tarde. Todas as páginas devem ser projetadas de forma responsiva, o que já mencionamos. O cronograma do projeto precisa ser concluído em 90 dias, o que já mencionamos em nosso resumo de design. Então, finalmente, isso é muito importante. Portanto, temos pesquisa de projeto, pesquisa de concorrência, resumo e inspiração do design, artigo, wireframe, pesquisa conceitual, mapa do site e fluxogramas. Tudo isso vai levar 14 dias neste caso. Depois, temos quadros de humor, seleção de cores, estilo de ícone, comparação e exploração. O Adobe XD foi projetado para fornecer um link compartilhável para feedback, além de duas rodadas de revisões e feedback a serem feitos em 15 dias. Em seguida, temos um design de interface de usuário com imagens, cores , sombras e ícones em um estilo determinado, além de duas rodadas de feedback. Também temos 15 dias, mas lembre-se de que estamos fazendo esses dois ao mesmo tempo. Então, isso é meio enganador daqui a pouco, mas você ainda quer apresentar aos seus clientes quanto tempo isso realmente leva para criar? Finalmente, temos Asset Export, desenvolvimento de sites no Webflow, conexão de um domínio a uma hospedagem Webflow. Obviamente, eles fornecerão todas essas coisas, além de uma sessão de consulta de 1 h sobre como usar o Webflow para adicionar carros novos ao site, o que é muito importante. Você quer ser capaz de se comunicar com seus clientes, explicá-los, tudo o que puder. Então, eles vão te incomodar menos no futuro. Você sempre quer fazer isso. Você sempre quer configurar seus projetos adequadamente. Você sempre quer iniciar sua conversa com seus clientes adequadamente. Então, eles não estão ligando para você todos os dias. Eles não estão lhe enviando e-mails a cada 2 horas. Você quer explicá-los completamente. Como usar o Webflow, como usar o design, como usar o resumo do design, o que você está criando para eles. Apenas certifique-se de explicar e dedicar um pouco de tempo a esse projeto. Obviamente, você pode construir esse tempo, construí-lo dentro do seu projeto. Mas não diga a eles que você está realmente construindo isso, porque sempre construa seu trabalho. Certifique-se de cobrar seus e-mails, seus telefonemas. Este eu acabei de mencionar, se você estiver criando vídeos. Tudo o que você está fazendo pelo seu cliente faz parte do trabalho. Não apenas design, não apenas Workflow Build. Portanto, sempre certifique-se de criar tudo o que você está fazendo dentro da sua proposta de projeto. Então temos a parte divertida, temos o preço. Então, aqui temos as taxas do projeto. Então, pesquisa, competição, design de pesquisa, resumo e inspiração. Tudo isso vai nos levar muito. Eu não somei os números aqui, mas não me importe com isso. Portanto, temos pesquisas de projetos, temos pesquisas conceituais de estrutura de papel, temos quadros de humor, seleção de custos. Isso custou tanto, isso custa tanto, isso custa tanto. E o objetivo aqui é chegar ao total de $10.000. Eu não incluí o Webflow aqui, então vamos construí-lo aqui. Então, Webflow. criação do Webflow ou site responsivo do Webflow construído com um CMS incluído, que é um sistema de gerenciamento de conteúdo, que permite que eles possam adicionar todos esses carros novos ao estoque. Então, temos as opções de pagamento. Portanto, temos dois pagamentos iguais. Então cinco k Agora cinco k no final, três pagamentos iguais são 3333 cada. Então, o primeiro agora, segundo depois de terminarmos o design e turbo e depois que a construção do Webflow for concluída, temos dois pagamentos, cinco K Agora cinco k no final. Então, o que você quiser, você pode adicionar um pagamento, você pode alterar todas essas informações. Então, temos os termos e condições. Como eu disse, há também uma página que é sobre mim, que eu removi propositalmente porque os clientes entraram em contato comigo. Portanto, eles não precisam saber sobre mim. Eles já sabem sobre mim nas minhas páginas do meu site, por exemplo, portanto, temos recursos do projeto, se não acordados de outra forma, que devem ser fornecidos pelas revisões do projeto do cliente. Quantas revisões eles podem ter antes de avançarmos na edição, então você não pode adicionar seu design gráfico a isso. Isso é apenas para design de UI UX, uma pesquisa e um Webflow criados a partir do seu site. Não me adicione itens adicionais, como design de banners ou design de mandarim ou cartão de visita, design de folhetos, qualquer coisa, que não esteja incluído neste preço. Se você, como designer, sabe fazer todas essas coisas, com mais poder para você, eu realmente encorajo você a criar ainda mais para seu cliente, ingeri-las, tirar ainda mais dinheiro delas, construir relacionamento ainda melhor com eles. Mas para mim, eu realmente não gosto de fazer essas coisas. Eu sei como fazê-las. Eu simplesmente não gosto de fazê-las. Para mim. Pesquise UI, UX e construa. Isso é o que eu faço e é isso que eu gosto dos dias de trabalho. Então, se você estiver trabalhando de segunda a sexta-feira, eles estão trabalhando nos finais de semana. Eles podem enviar um e-mail para você, mas seja sincero com eles. Eu não trabalho nos finais de semana. Assim, você pode enviar seu e-mail. Receberei seu e-mail, mas responderei na segunda-feira. Portanto, certifique-se de ser direto com seus clientes ou de onde e quando. Se eu trabalhar das 9 às 5, certifique-se de incluir o fuso horário. Isso é fácil para este projeto em particular porque eu e meus clientes estamos no mesmo fuso horário. Então, isso é bem simples, mas se você estiver trabalhando em qualquer outro fuso horário, é muito importante fazer isso. Além disso, quais são seus feriados públicos? Se você estiver trabalhando no fim de semana? Você cobra ainda mais por hora ou qual é a sua tarifa no fim de semana? Formatos de arquivo. Então, normalmente, se você estiver trabalhando em ASD, eles querem arquivos Figma e, em seguida, certifique-se de especificar que você entregará apenas arquivos XD. Se você estiver trabalhando no Photoshop, por exemplo, para edição de imagens, como eu estou fazendo, sempre gosto de declarar esses direitos de uso. Então, quem obtém os direitos sobre esse design e construção e, quando o projeto é cancelado, se eles decidirem cancelar no meio do projeto, o que você faz? Você vai reembolsar o dinheiro para eles? Quanto você vai reembolsá-los, quando vai refiná-los ou se não vai reembolsá-los de jeito nenhum. Portanto, certifique-se de pensar todas essas coisas ao começar e abordá-las de uma forma lógica O que você faria nessa situação se estivesse trabalhando com alguém em algumas, Você acabou de decidir cancelar Você quer seu dinheiro de volta? Você se sentiria mal com isso? Portanto, certifique-se de descobrir todas essas coisas. Como eu disse na parte anterior do curso, onde falamos sobre propostas de projetos. E agora, neste, você pode obter esse modelo com o desconto. Vou te dar um código de cupom. E basicamente é isso. Você vai exportar isso como um PDF, selecionar este e selecionar todos eles, na verdade. Então, vamos fazer isso. Assim, segurando Shift Control ou Command E, exporte como PDF e ele será exportado como um único PDF, mas juntará todos esses diferentes PDFs. Então, na verdade, você vai ter isso como a primeira página. Esta é a segunda página e assim por diante, que é o que queremos no final. Assim, você pode exportar isso, pode imprimi-lo se quiser que seja entregue diretamente ao seu cliente. Se o seu cliente for local, caso contrário, como eu disse, você pode exportá-lo como PDF e simplesmente enviá-lo por e-mail. Então, isso é tudo para este vídeo. Vamos para o próximo, onde falaremos sobre nossa personalidade. E vou mostrar aquele modelo que abordamos anteriormente, como preenchê-lo para esse projeto em particular. Então eu vou te ver lá. 128. Persona de usuário: Nesta lição, falaremos sobre a personalidade do usuário e o que aprendemos até agora com o resumo do design e nossa conversa com nosso cliente, a pesquisa que fizemos no Instagram, em LinkedIn, no YouTube. Mas entendemos pelo que nossos clientes nos disseram e pelo que vimos diretamente on-line. E você pode ir ainda mais longe e simplesmente ligar para essas pessoas que já compraram carros de seu cliente e , em seguida, simplesmente agendar uma reunião com elas e fazer algumas perguntas simples. Faça um questionário sobre algumas noções básicas de UX, como, o que você gostou de experimentar? O que você acha que poderia ser melhorado na experiência de compra? Você pegou um empréstimo? Você deu adeus ao dinheiro? Você usou outros métodos para comprar este carro da empresa? Como a empresa tratou você? Você recebeu uma escritura de garantia que considerou seguro obter uma garantia. E por quanto tempo você usou o carro? Você revendeu o carro para poder fazer todas essas perguntas e simplesmente dizer a eles que ele será anônimo. Você só vai fazer pesquisas para futuros compradores para poder criar este site da maneira certa se essa pessoa quiser voltar e comprar ainda mais núcleos ou para futuros compradores que vão vir. Você pode fazer isso com, por exemplo cinco de seus clientes, se eles estiverem interessados, você pode dizer que isso será completamente anônimo. Ninguém vai saber sobre você, só vai querer saber informações sobre por que você decidiu comprar com esta empresa? O que o atraiu para essa empresa? E como você encontrou sua experiência? É isso que você quer aprender sobre seus clientes. E então, quando você avançar, isso é o que você obterá para uma nova persona de usuário. Então, como mencionei anteriormente, sabemos que essas pessoas têm 45 anos, sabemos que são homens, sabemos que o dono da empresa, o que mencionamos até agora e descobrimos no LinkedIn, que descobrimos no Instagram eles ganham mais de 100 K. Você pode ver isso facilmente pegando o que fazer, colocando dentro das calculadoras do governo para que você possa entender quanto dinheiro eles estão ganhando. Ou ainda melhor. Este país, que é a Sérvia. Mas você pode conseguir isso em praticamente todos os outros países. Você pode ir ao órgão governamental que realmente emite licenças para que as empresas estejam operacionais. Portanto, se você deseja abrir um negócio, primeiro precisa obter uma licença do governo e, basicamente, dar luz verde para que você possa abrir um negócio e, portanto, você pode acompanhe nossos negócios de forma real, se eles ainda estão operacionais ou se o extinto RT fecha que você possa rastrear todas essas informações em sites e receitas do governo. Você pode ver a renda, que é um dado disponível publicamente porque você pode ver quanto dinheiro eles ganharam nos últimos 12 meses, por exemplo, eles têm algum empréstimo permanente? Assim, você pode entender um pouco com quanto dinheiro está lidando nesta empresa. E, portanto, você pode deduzir quanto dinheiro um CEO pode ganhar ou um empreendedor? E como eu disse, você pode encontrar no LinkedIn, você pode encontrar possíveis salários para esses cargos. Então você pode realmente chegar a esse número. Ou ainda melhor, se seu cliente souber quanto dinheiro seus clientes ganham e quanto dinheiro estão dispostos a gastar ainda melhor e mais energia para você. Você pode parar de deduzir isso facilmente e inserir isso. Mais uma vez, isso é muito importante porque o tom geral e o idioma do site querem ser direcionados a essas pessoas e não a todos os outros. É por isso que queremos formatar isso dessa forma. Status, casado. Por que sabemos disso? Por causa do Instagram, mais uma vez, localização em Belgrado, Sérvia, foi o que nossos clientes nos disseram. Stefan é o empresário de Belgrado, Sérvia. Ele gosta de jantar com seus amigos e assistir programas no YouTube sobre autoajuda e aperfeiçoamento. Tudo isso pode ser visto em seu feed do Instagram e em suas histórias. Ele é pai de dois filhos e apaixonado por arquitetura nos finais de semana, gosta de explorar e sair da vida marinha. O que ele mais ama em nossos carros e gosta de carros esportivos de luxo, principalmente por causa de sua aparência e som. E então temos uma maneira melhor de pesquisar um carro usado on-line. Maneira mais fácil de entender o carro. Ele procura uma abordagem mais fácil para perguntar sobre o veículo. Todas essas coisas que mencionamos e todas essas coisas são o que nossos clientes nos disseram, que seus clientes lhes disseram. E, portanto, entendemos o que queremos construir aqui. Frustrações, os sites estão muito lotados e confusos, que vou mostrar na análise competitiva, que virá um pouco mais tarde. Os sites não são compatíveis com dispositivos móveis, o que, mais uma vez, é uma grande proibição nos dias de hoje. Ei, postagem única sem preço, eu vou até o que estou comprando uma luz para ver o preço imediatamente. Porque qual é o objetivo de vendê-lo? Se você não quiser me mostrar o preço, como posso comprá-lo? Queremos que você entre em contato com eles e que eles o enganem em alguma outra compra. Você não quer isso, você quer transparência total. Então, temos o uso da mídia social aqui. Então, a maioria é Instagram e LinkedIn. Talvez eu pudesse colocar o YouTube aqui, mas o Facebook e o Twitter estão em algum lugar intermediário. Depois temos a citação e temos as marcas favoritas, que na verdade não mudei do modelo que já mostrei. Mas, fundamentalmente, aqui temos isso porque nosso cliente nos disse que gosta do site Cardboard. Na verdade, pego a cor do site da Cowell, que vou mostrar em apenas um segundo e colocá-la lá. Me inspirou muito. Então, eu entendo que eles gostam de azul e quero incentivar ainda mais essa cor azul. E eu vou te mostrar em um dos vídeos futuros como fazer isso e por que isso é importante? Em seguida, passamos para a análise competitiva. E eu vou te mostrar uma análise competitiva para esse negócio. Vamos comparar esses concorrentes, tanto os concorrentes diretos quanto os indiretos. E para entender um pouco melhor, qual é a data? Ótimo, o que eles fizeram de tão bom para que possamos seguir frente e corrigir esses erros em nosso design futuro. Então, eu vou te ver lá. 129. Análise competitiva: Vamos agora passar para a análise competitiva e vou mostrar alguns concorrentes diretos e indiretos da nossa marca. E vou apontar algumas coisas boas e algumas ruins que ambas nos fizeram chorar. E aqui temos dois sites e eu vou mostrar primeiro como este e depois vamos ampliá-lo um pouco porque primeiro de tudo, esse concorrente direto não responde. Você pode ver isso aqui. Então, se eu restringir ainda mais este site, você pode ver todo o problema aqui. Então, você pode imaginar que, quando você acessa seu dispositivo móvel e rola para a esquerda e para a direita, você realmente precisa beliscar, ampliar e se mover, como em meados dos anos 2000. Portanto, este texto não está centralizado dessa forma. Então, temos um problema muito grande. Então, vamos analisar isso primeiro porque essa é a plataforma real que eu lhe disse, que é um concorrente indireto. E eles estão vendendo na plataforma. Eles não estão vendendo em seu próprio site, mas essa empresa tem seu próprio site. Então, primeiro de tudo, eles têm uma obrigação, nós vamos nos livrar dela porque a maioria dessas pessoas, especialmente porque são proprietários de empresas, têm experiência com negócios on-line. Eles não vão clicar no logotipo para voltar para casa. Então, temos ofertas. Deixe-me tentar traduzir isso para o inglês. Então, vai ser um pouco mais fácil para você entender. Aí vamos nós. Então, temos uma casa, como mencionei, temos oferta de veículos. Portanto, existem veículos atuais, veículos na chegada. Então, esses são reais que Cusco acabou de comprar e estão em transporte, por exemplo acabou de comprar e estão em transporte, por exemplo, financiamento, que precisamos de uma galeria, da qual não precisamos porque a oferta de veículos vai oferecer isso para nós e nós vamos para poder ver todas as imagens lá. Em seguida, temos a página de contato da qual precisaremos. Então, eles têm essa bela seção de heróis que não é sobre marca, é sobre desempenho. Mas não sabemos se, por exemplo você sabe, sobre carros, você saberá imediatamente que este é um cluster de bitola Porsche 911 Turbo. E você vende apenas empurrões ou vende outras marcas? Você diz que não se trata de marca, mas por que me vende uma marca específica em segundo plano? E você vai ver isso em apenas um segundo. Eles têm muito dessa marca em sua página do Instagram e neste site. Então, eu realmente não entendo isso. Então temos veículos de chegada e temos oferta de veículos. E você pode ver que essas duas caixas não estão alinhadas e não vemos nenhuma imagem por trás. Não vemos nenhuma opção de capa disponível. Então, temos as melhores ofertas. Então, temos Porsche, Porsche, Porsche, que acabamos de mencionar. Portanto, não se trata de marca, mas vamos mostrar a eles todas as porções que temos. Então, vamos descobrir por que este showroom. Portanto, temos veículos certificados, testes de direção e entrega gratuita. Então, você precisa de financiamento? Estamos aqui para ajudar vocês, nossos parceiros. Ok. Então temos essa imagem por qualquer motivo, visite-nos e dirija seu carro novo. Então, eles têm endereço de e-mail e número de telefone. Então eles têm o mapa, o que é ótimo. E eles têm esse rodapé simples no final. Então, é muito simples, e eu realmente gosto disso, mas eu simplesmente não entendo todas essas seções diferentes. Mas não importa. Vamos ver todos os carros. Então, temos um monte de Porsches e temos BMWs. Então, vamos pegar alguma coisa, vamos pegar um Porsche. Portanto, temos pontos de vista. Então, se eu clicar lá, ele vai me levar e, na verdade, vamos para a página anterior. Então, temos visitantes e eles não têm um contato aqui. Gostei que não estava na página inicial. Então, isso não importa. Vamos seguir em frente. Então, o que temos aqui é que reservamos um carro, temos o mesmo. Mas qual é o objetivo de, tipo, se eu não tiver um perfil onde eu possa ver todos esses lagos, é bom que eu possa acho que é bom que eu possa realmente entrar em contato com você por meio dessas redes. Então, se eu compartilhar isso no Twitter, isso abrirá o compartilhamento. Sim, então abrirá um widget de compartilhamento. Ok, em vez do widget de contato. Então eu gosto desse carro, vou entrar em contato com você pelo Twitter e clicar aqui. E, na verdade, vai ser compartilhado como um tweet. Ok, provavelmente o mesmo para o WhatsApp e o Pinterest. Então temos essa galeria. Então, se eu clicar na galeria, ela abre muito bem. Então temos todos esses pontos na parte inferior, o que é bom. Mas, mais uma vez, esse layout está meio confuso. Portanto, temos 2467 imagens aqui. Talvez não seja o melhor layout, mas vamos explorá-lo um pouco mais tarde. Então, temos apenas um monte de textos. Temos uma descrição geral das informações. Portanto, está muito bem dividido, de uma forma muito fácil de entender, mas não é muito visual. Talvez. No nosso caso, podemos dividi-lo em seções diferentes. E você verá isso no segundo site. E em qual vantagem do TRB, que vou mostrar, que não existe, mas sim o site de inspiração para nosso cliente. E então temos todas essas informações. E, finalmente, temos as mesmas duas seções aqui na parte inferior. Então essa é a nossa atual. E se você for para o financiamento, o que vemos são as melhores tarifas simples e rápidas, de onde vêm mais informações, então eles nem têm essa página. Tudo bem, então esse é o concorrente direto. Vamos agora verificar o concorrente indireto. Se eu rolar um pouco mais para esconder isso ainda mais, vamos lá. Então, temos a plataforma, como mencionei. Portanto, este não é o site deles. Então, eles estão nos dando todas essas informações. Então, deixe-me tentar traduzir isso para o inglês também. Aí vamos nós. Então, dois anos de negócios, marcas de veículos Sara, veículos da Sérvia. Então, eles não são importadores, eles são diretamente da Sérvia. Possibilidade de comprar a crédito ou empréstimo, o que eles podem lhe oferecer. Então, mais uma vez entenda que isso é uma plataforma e eu vou mostrar isso. Então é chamado de carros usados ou Paulownia Toby Lia, se eu traduzir para o inglês, aí está. Então, você pode ver que tudo isso vem de vários vendedores comerciais diferentes. Então, todos esses vendedores, e depois temos mais vendedores e Marcellus, imaginem a Amazon para carros. Esse concorrente está lá apenas nesta plataforma, então esse não é o site deles, eles estão apenas vendendo aqui. Você pode navegar por diferentes categorias, o que é ótimo, mas nosso cliente não tem muitos carros. Eles têm apenas, por exemplo, seis ou oito carros, então não precisamos de nenhuma opção de pesquisa. Só precisamos de uma página em que possamos apresentar todos os seus carros, porque eles geralmente vendem muito rápido. E você pode ver no site deste concorrente, se rolarmos aqui, então os veículos oferecem 2467 carros. Portanto, você não precisa de uma opção de pesquisa para sete carros, mas precisa de uma opção de pesquisa, por exemplo , se você tiver 20 marcas diferentes se tiver 100 cartões, se tiver todas essas coisas, para que é onde você precisa. Mais uma vez, isso é de uma plataforma, então vou abrir apenas um carro. Eles têm muitas fotos diferentes aqui, o que é ótimo. E primeiro de tudo, primeiro, de relance, você pode ver o ano em que o carro foi produzido. Que tipo de carro é esse? Quantos quilômetros você percorreu? A transmissão? Então, temos o tipo de motor. Temos quantas polegadas cúbicas ele tem? Então temos potência e temos que tipo de veículo é esse? Tem duas portas para essas fibras? Então, todas essas informações são realmente úteis aqui. Não temos nenhum desses. E, na verdade, esta seção parece que eu estava pensando por um segundo, talvez seja responsiva, mas na verdade não seja apenas da esquerda para a direita. Então, vamos passar para aqui. E aqui podemos ver o seguro. Deixe-me traduzir este também para que seja mais fácil para você descobrir. Então, temos o preço do registro, depois temos a calculadora de seguro, temos o contrato de compra, todas essas coisas que são fornecidas pela plataforma. Mais uma vez, não posso enfatizar isso o suficiente. E eu gostei muito desse layout. Eu acho que é muito bom. E quando eu clico, ela vai me mostrar a imagem em tela cheia, o que é totalmente bom. Temos o x, então, apenas o layout típico, e então temos informações gerais. Então, considerando isso em comparação com isso, acho que parece muito melhor porque vai dividir isso em certas seções, porque essa plataforma está no mercado há 20 anos, por exemplo, eles sabem o que fazer porque estão coletando dados há mais de 20 anos. Eles entendem seus clientes e sabem que tipo de informação é realmente importante colocar na página de vendas. Então você tem mais informações sobre o modelo. Talvez possa haver vídeos no YouTube, talvez. Então temos segurança, temos equipamentos. Observe como isso permanece sempre fixado na parte superior, o que eu realmente gosto enquanto estou neste site Se eu ampliá-lo, se rolarmos para baixo, não temos nenhum botão, eles simplesmente saem da página. Se você voltar para aqui, e se eu conseguir escalar isso agora sem quebrar meu computador, vamos tentar desenhar isso assim. Porque estou executando todo esse software de gravação, é por isso que você vê essa falha preta e preta. Temos equipamentos, temos o estado. Então, a novidade atual é o carro usado? Onde está localizado como histórico de serviço, o que é extremamente importante para carros caros. Então temos a descrição. Então, talvez o que, que tipo de equipamento o carro tenha? E talvez algum equipamento adicional. Você pode ver que há muita coisa aqui e é sempre o caso dos veículos Mercedes. E então eles têm toda essa descrição na parte inferior. Alguns, na minha opinião, precisamos de algo assim, mas em um estilo mais minimalista, porque, mais uma vez, não precisamos de todas essas informações porque teríamos uma página separada para os empréstimos de carro e eles poderão ver essa informação. E só queremos que eles possam entrar em contato conosco com bastante facilidade para perguntar sobre esse carro específico, entender mais sobre ele, ver mais informações sobre ele e agendar um test drive. Porque lembre-se, esse é nosso objetivo aumentar as reservas de test drives em 10% nos próximos dois meses. É isso que queremos e é por isso que queremos criar um layout bonito e bonito, talvez com um cartão como esse, mas talvez ele possa ficar à medida que descemos. Você pode ver aqui que está lá. E se eu começar a me mudar para baixo, temos essa informação aqui, mas não temos essa informação. Então clique para ver o número e enviar uma mensagem para o vendedor. Só temos essas informações que compartilham nas redes sociais, denunciam o anúncio e depois as adicionam às curtidas e temos o preço. Mas, na minha opinião, isso, mesmo para esse site enorme, minha opinião é que isso é muito mais importante. Então essa informação. Então, tenha isso em mente. Quero ver o preço, mas por que não consigo ver o preço aqui? Por que não consigo entrar em contato com você via, não posso enviar uma mensagem ou ligar diretamente daqui, especialmente em dispositivos móveis. Você pode imaginar, vamos escalar isso um pouco rapidamente. Aí vamos nós. E então deixe-me escalá-lo deste lado e pensar, sim, você pode ver como essas seções podem ficar lotadas. E então temos essas guias que não abrem por algum motivo, seja o que for. Mas você pode imaginar que, se eles funcionarem, quando abrirem todas essas informações, basta ver isso. E todo esse tempo, quando você está navegando no seu dispositivo móvel, você só tem essas informações. Ok, estou bem. Eu quero comprar este veículo. Eu adoro isso. Está tudo bem. Deixe-me ligar para eles. Você terá que rolar até o topo só para poder vê-lo. Gostei de como eles fizeram o responsivo porque sua navegação é enorme, porque esse site é muito grande, como eles disseram. Então, vamos colocá-lo aqui e seguir em frente aqui. Então você pode ver quantos desses eles têm? Então, eles têm muita coisa lá dentro. Agora, só precisamos de algo assim. Então, com bastante facilidade, muito simples, porque nossa marca é muito fácil. Finalmente, depois de todas essas informações e de entendermos o que queremos, entendemos um pouco melhor o que precisamos agora. Então vemos bem o carro, que é o site que inspirou nosso cliente. E foi aqui que eu tirei essa cor azul e como fiz isso. Basta clicar com o botão direito do mouse, chamar um pico dos estilos de página. Clique e aí está. Então, se quiser, você pode navegar por esse pico de cores. É o que é conhecido como seletor de cores ou escolha de cores qualquer coisa. E aqui você vai ver todas as cores que são usadas no site, mas eu não vou fazer isso aqui. Eu vou para os carros usados, por exemplo, mas na verdade, não, vamos para os carros novos. E vamos ver algo que é popular. Seja o que for. Vamos aceitar essas ofertas da Hyundai Tucson. Aí vamos nós. E aqui está o layout do cartão, que eu estava mencionando. Aí está. Mas o que eu realmente quero mostrar é isso, acho que está aqui, lá vamos nós. Resenhas aprofundadas tão populares. Então, quando comecei a rolar, você pode ver que esta seção da página me segue com informações extremamente importantes, que é o que eu disse. Então você pode ver quanta informação eu tenho aqui à esquerda da página. Mas nessa barra lateral direita continua no topo, não importa onde eu esteja na página, todas essas informações são facilmente acessíveis para mim. Eu posso entender isso facilmente enquanto estou aqui, se eu começar a rolar para baixo, ele desapareceu. Especialmente em dispositivos móveis. É a mesma história aqui. Então, se rolarmos até o fim, ela simplesmente pára aqui onde as informações , que você pode ver, estão clicando e desaparecendo, porque agora estamos migrando para outras partes do site. Então, eu realmente gostei disso. E em termos de cor, mais uma vez, você pode clicar com o botão direito do mouse para escolher cores nos estilos de página. E isso é totalmente gratuito, a propósito, você pode instalá-lo como uma extensão do Chrome. E aqui você pode ver que ele nos mostra estilos RGB, mas queremos tecidos porque são muito mais fáceis de trabalhar. Você pode simplesmente selecionar essa cor azul, copiá-la e colá-la diretamente no Adobe XD. E aí está. Agora você tem e agora você pode ver super facilmente, isso é para funcionar. Então, agora que sabemos todas essas informações, agora que sabemos o que queremos, o que não queremos, do que gostamos, do que não gostamos. Sabemos do que eles gostam como clientes, sabemos que tipo de cor podemos buscar. Agora que podemos começar a focar nos fluxos de usuários? E agora podemos começar a estruturar talvez os caminhos que nossos usuários seguirão estruturar talvez os caminhos que quando acessarem nosso site e o que farão a seguir. Então, vamos passar para o Adobe XD e trabalhar com alguns fluxos de usuário. 130. Fluxos de usuários: Nesta lição, trabalharemos com fluxos de usuários porque esse site será bem simples em termos de navegação, em termos de páginas. Eles não serão muitos deles. Então, vamos resolver isso um pouco mais rápido do que se fôssemos fazer isso em uma página um pouco mais complexa. Então, vamos entrar no XD e você está familiarizado com esse modelo se tiver assistido às partes anteriores do curso. Porque eu já mostrei esse modelo e te dei esse modelo. Agressão. Temos o ponto de entrada, temos o branco, temos os degraus, temos todos esses elementos diferentes. E se eu selecionar isso, temos Open Sans como fonte. Mas, na verdade, vou usar Poppins como fonte, por exemplo então vamos ver, talvez possamos. Vamos até aqui. Então, deixe-me selecionar se esses elementos estão pressionando Control C ou Command C em um Mac. Deixe-me mudar para um documento em branco do XD, que é este Control ou Command V para colá-lo. E eu vou selecioná-los aqui e clicar na verdade não, vamos, vamos ver, ir para onde é o componente principal. Agora, vamos voltar para esse arquivo e fechá-lo. E agora vamos salvá-lo na minha área de trabalho, por exemplo, então vamos dar o nome de nosso fluxo de usuários. Aí vamos nós. Então, primeiro de tudo, vamos realmente adicionar o componente principal aqui. E aqui, eu quero pegar aquela cor azul que escolhemos. Então, vamos selecioná-lo para o preenchimento, atingir essa cor. E eu vou chamar essa cor, por exemplo , principal, azul. E eu também gosto disso. Vamos nos livrar disso. Também gostei dessas outras cores. Então, para o carro, enquanto sites, se eu levar você até lá, lá vamos nós. Então, quando eu passo o mouse, temos essa cor mais clara. Então, o que eu posso fazer é talvez mouse e clicar com o botão direito aqui e colorir o bico e retirá-lo daí, se possível. Ou se não, talvez possamos ir para outro lugar porque eles provavelmente o usam em outro lugar. Você pode ver aqui a cor do link, que parece bem parecida. Então, talvez possamos encontrá-lo. Aqui está no logotipo deles. Então você pode pegar o logotipo, clicar com o botão direito do mouse em algum lugar por aqui e vamos ver. Clique fora do pico de cores. Agora só me dá essa cor. Então eu já usei essa cor, mas você pode navegar por ela. Você pode abrir em um novo documento. Você pode até mesmo entrar no CSS, se quiser. Pegue essa cor. E eu vou continuar e vou clicar aqui, clicar aqui e depois clicar aqui para colar essa cor. Agora você pode ver que é uma pequena diferença, mas ainda assim vamos chamá-la cor flutuante porque eu quero usar essa cor para nossos links, por exemplo, e para a cor do mouse do botão um pouco mais tarde. Então, temos o ponto de entrada, temos a ação, temos o processo. Talvez possamos deixar isso, mas na verdade vou tomar uma decisão, aplicar a cor principal ao plano de fundo. Aí vamos nós. E tudo isso, eu vou realmente usar a cor do mouse. Aí vamos nós. E para tudo isso, vamos ver, essa é a fronteira, a fronteira e a fronteira. Vamos aplicar isso como uma cor de borda. Vamos selecionar isso, aplicar isso à nossa cor principal desta forma, e essa será a cor do mouse. Aí vamos nós. Selecione essa para ser nossa cor de borda, depois essa e essa para ser nossa cor. Além disso, clique com o botão direito do mouse em aquarela. Isso também será pairar. E vamos nos livrar da caldeira aplicando a cor da borda aqui. Então você pode ver como é super simples mudar isso. Então, o que vamos fazer é entrar ou ficar por aqui e não nos entrar ou ficar por aqui preocupar com o tamanho do quadro de arte. Vou me livrar dele em apenas um segundo e reduzi-lo um pouco. Então, se eu levar você de volta aqui e me certificar de que estamos centrados e 20, por exemplo temos o ponto de entrada, que é o que o usuário acessa nosso site. E vamos alinhar isso um pouco. Então, vamos apertar Shift e as setas. Então, talvez 40,40 só para ser um pouco mais preciso. Então, mais uma vez, temos a entrada e então teremos, vamos ver, vamos ver, vamos ver. Talvez processe. Então, vamos chamar isso, digamos que procure carros. E em vez disso, deixe-me limitá-lo a este lado. Então, quando eu digito aqui, procuro carros, lá vamos nós. Na página inicial, então teremos a ação. Então, assim, lá vamos nós. Eu ainda tinha 40 anos, sabemos que 20. Aí vamos nós. Adorável. Então, vamos ver. Talvez cliques para ver todos os carros, procurar carros ou talvez um Vieux Carre. Vieux Carre, que é o carro em questão. Então, talvez eles só queiram ver as informações gerais sobre o carro em si. Então, temos o Vieux Carre. Então vou duplicar isso mais uma vez posicionado aqui, Vieux Carre. E talvez eles tomem uma decisão. A partir daqui, entraremos em duas maneiras diferentes. Então, um vai estar aqui, então aqui, então, o turno 12 e depois o Shift Control D, comando D, à direita, os dois, então temos uma decisão, então temos a ação. E vamos ver o que podemos fazer. Procure carros. Talvez possamos apertar o controle D desta vez. Aí está. Contatos, revendedor. Aí está. A partir de contatos de dívidas, podemos, por exemplo , pressionar o Controle D aqui e inverter isso. Aí vamos nós. Certifique-se de que esteja no centro. Mudar. Uma das ações é desses contatos. Aqui mesmo. Vamos ver, agende um test drive. Eu acredito. Então. É isso que queremos. Queremos que eles possam reservar um test drive ou que possamos fazer outra coisa. Então, essa é uma opção quando eles entraram em contato com o revendedor. Ou eles podem ver uma decisão. Talvez, na verdade, possamos mover tudo isso para baixo e eu te mostre o porquê em apenas um segundo. Então, Vieux Carre, porque teremos informações adicionais aqui. Então, vamos duplicar isso. Caso contrário, vire-o, certifique-se de que estamos no centro. Certifique-se de que somos 20. Aí vamos nós. A partir daqui. Na verdade, vamos mudar tudo isso ainda mais agora para que possamos ouvi-lo mais. Espaço. O controle D garante que estamos em um centro. Aí vamos nós. A partir daqui, o que faremos é selar empréstimos, por exemplo, ver empréstimos. Aí vamos nós. Então, a partir de empréstimos, eles podem seguir em frente e controlar D. Talvez possamos alternar isso para aproximadamente aqui, aqui, no centro. Aí vamos nós. Então, vamos posicionar isso para estar aqui. 20. Vou pegar uma extensão do solo para que ele se encontre aqui. Aí vamos nós. E então aperte o controle D ou reduza-o ou gire-o. Assim, garante que eu esteja por aqui. Adorável. Vou pegar este girado lateralmente para posicioná-lo aproximadamente no centro. Não precisa ser tudo perfeito, talvez mais ou menos por aqui. Ou ainda melhor. Podemos pegar isso e pegar uma linha de grade se quisermos ser perfeitamente precisos. Bem, eu realmente pego essa flecha, ela está no centro. Aí está. Posicione isso, posicione isso até que se encontre e posicione isso aqui. Vamos ver, não estamos aqui. Aí vamos nós. E se eu diminuir o zoom um pouco, amplie aqui, estamos lá. Então, o que fizemos aqui foi livrar desse guia para que ele não nos incomode muito. Então, Wendy procura carros, eles podem clicar para ver um carro individual. Isso é Vieux Carre, aqui mesmo. Vieux Carre, eles podem clicar em ver empréstimos, que pode ser um botão, por exemplo, que pode levá-los ao discurso do empréstimo e eles têm uma decisão a tomar. Então, talvez possamos mover isso aqui, na verdade. Então, eles têm uma decisão. Vamos ver, 21 a dois a quatro, talvez 20. Aí vamos nós. E isso vai realmente estar aqui. Aí vamos nós. E isso pode ser reduzido um pouco para aproximadamente por aqui. Vamos mover isso para cá. Então 14, vá e uma vez dentro, pronto. Então, mais uma vez, uma vez que eles realmente veem o carro, eles têm uma decisão a tomar. Eles entrarão em contato com o revendedor sobre esse carro específico ou verão os empréstimos. Portanto, quando o revendedor de quantidades, ele pode reservar um test drive ou ver os pulmões entrar em contato com o revendedor e, em seguida, agendar um test drive. E eu concordo com os termos e condições do empréstimo imediatamente, ou eles podem tomar uma decisão. Eles podem dizer, por exemplo, ver outros carros. E então essa pode ser a decisão deles nesta página específica. E eles podem ir aqui para procurar outros carros ou acessar a página específica sobre vistas ou carros. Então, podemos estruturar isso de muitas maneiras diferentes. Portanto, essa página do Vieux Carre realmente será criada no CMS, no Webflow. Então, vamos criar uma única página e depois duplicá-la repetidamente e preenchida com o conteúdo desse carro específico. Mas, nesse caso, o que podemos fazer talvez seja levá-los para ver outros carros para que possam procurar carros. Então, talvez possamos até mesmo combinar os dois e criar algum tipo de widget na parte inferior da página, onde eles não precisem ir até a página específica e carregar uma página específica toda vez. Talvez eles possam ver carros relacionados na parte inferior da página. Então, podemos ver aqui. Então C, carros relacionados na parte inferior dessa página. Aí vamos nós. E a partir daí, podemos clicar para ver um carro. Então, mais uma vez, não os levarei a esta página e desperdiçarei a velocidade de carregamento e muito tempo. Vamos apenas levá-los para a mesma página exata, mas para um cartão diferente. Assim. Vamos duplicar sexualmente esta, talvez garanta que estejamos em um centro aqui. Aí vamos nós. E 20 iguais. Então, tudo bem, então vou selecionar essa seta, abrir os elementos a partir dela, selecionar essa seta, colar os elementos no site. E então eu vou deletar este. Exclua este e certifique-se de que esses dois se encontrem por aqui. Este se encontra por aqui. Eu acho. Apenas cutuque mais. Aí vamos nós. E agora que fiz isso, deixe-me esconder isso. Clique neste e mostre este para que você possa ver o que eu fiz. Eu apenas dupliquei e posicionei aqui. E, na verdade, não temos um não neste caso. Mas se o fizermos, vamos apenas levá-los para uma dessas páginas diferentes. Então, na verdade, reservar um test drive é nosso destino final. Mas o revendedor de contatos pode ser, pode ser isso. Então, vamos realmente usar um livro, um test drive para ser nosso destino final. Então, controle D aqui. Vamos chamar isso de saída. Assim. Vou me livrar dessas flechas porque não preciso delas neste caso, Controle D, e me certifico de que estamos em um centro aqui. Aí vamos nós. Por alguma razão, não estamos neste. Ok. Vamos selecionar esses dois. Aí vamos nós. Dois, lá vamos nós. Adorável. Certifique-se de que estejam bem posicionados e que tenhamos 20 anos. E, finalmente, esse é o nosso fluxo de usuários. Então é assim que nossos usuários fluirão pela nossa página. Então, vamos colocar isso em 40. E eu vou me livrar do espaçamento, por exemplo, 40, 05:00 da manhã, vou empurrá-lo até aqui para que você possa ver que você não precisa usar tamanhos específicos para seus quadros de arte. Você pode ver como ajustá-los facilmente e aplicá-los em tamanhos diferentes. Mas temos 40 ao redor, como você pode ver aqui, esse é o nosso fluxo de usuários. Então, vamos analisá-lo rapidamente mais uma vez. Vamos nos livrar disso. Mais uma vez. Teremos me deixado ver o que fiz. Faça a duplicação de todas elas. Então, vamos ver isso mais uma vez. Portanto, temos o ponto de entrada, que é a página inicial em que nossos usuários vão se endividar. Eles podem procurar carros. Isso pode ser em uma página inicial ou em uma página separada. A partir daí, eles podem clicar no carro e ver esse carro para obter mais informações. E a partir daí, eles podem tomar uma decisão. Eles podem ver um empréstimo e ver algumas opções para os pulmões que têm, por exemplo , qual empresa concede empréstimos e outros termos e condições de pesquisa , e inserir todas essas informações. De lá. Eles podem entrar em contato com o revendedor ou podem entrar em contato com você diretamente, querem ver o carro e gostam. Então, talvez eles queiram saber mais informações se ainda estão disponíveis para venda. Está disponível para um test drive? Se estiver, quando estará disponível para test drive e tudo diferente. Ou eles poderiam ver carros relacionados. Se eles não gostarem de um cartão específico da dívida, eles podem clicar nesse cartão ou em vários cartões. Vamos abordar o layout daqui a pouco. E então, Vieux Carre, para obter mais informações sobre essa carta, das quais eles realmente gostam se entrarem em contato com o revendedor. Mais uma vez, nosso principal objetivo aqui é fazer com que eles façam um test drive. E essa será nossa estratégia de saída porque o test drive, na verdade será a etapa final desse processo em que eles realmente reservarão um test drive. E nós realmente sabemos que eles reservaram um test drive e isso é o que realmente queríamos fazer. Então, aqui temos todos esses componentes à medida que construímos esta página ao longo deste curso. Na verdade, vou salvar um arquivo, um arquivo. E quando você realmente conseguir, será concluído, obviamente, porque estou gravando este curso agora. Mas você poderá seguir passo a passo. Eu vou te dar uma informação completa. Então você pode usar isso como referência. Mas eu realmente encorajo você a construir o seu próprio ao meu lado ao longo deste curso. Então, como eu disse, essa é apenas a primeira parte. Você pode ver que temos esse fluxo de usuários. Agora, passaremos aos wireframes de papel na próxima lição. E vou digitalizá-los e colocá-los aqui para facilitar a referência. Então, como mencionei, os wireframes de papel são o que está por vir. Vou usar aquele pedaço de papel preto, que eu já mencionei no curso. Mas não se preocupe com isso. Se você não tiver, pode usar qualquer pedaço de papel antigo. Então eu vou te ver lá. 131. Mapa do Site Arquitetura de conteúdo: No último vídeo, eu disse que vamos passar para wireframes de papel e, na verdade, passaremos para wireframes de papel no próximo vídeo. Mas neste vídeo, quero mostrar outra abordagem chamada Arquitetura de conteúdo, você realmente planeja qual tipo de conteúdo vai para cada página, é a importância e como fazer nós o posicionamos na página para colocá-lo no topo, para colocá-lo na parte inferior. Vamos lidar com isso neste vídeo. E você realmente não precisa fazer isso especificamente nessa ordem específica. Você pode passar direto para os wireframes de papel se já tiver um plano de arquitetura de conteúdo em mente. Mas se você não fizer isso, eu ainda queria mostrar esse método porque acho que pode ser benéfico de tempos em tempos dependendo do projeto em questão. Especialmente em projetos maiores em que você tem vários conteúdos e blocos de conteúdo. Portanto, é muito mais fácil e importante abordar isso dessa forma quando você realmente planeja a arquitetura de conteúdo do que não. Se seu cliente não tiver contato com a palestra , você também pode cobrar por isso. Mas a maioria deles terá pelo menos alguma ideia de qual tipo de conteúdo será colocado nas páginas e onde o que eles gostariam de apresentar? Qual é sua oferta principal, qual é sua oferta secundária, oferta terciária e assim por diante. O que é mais importante, o que é menos importante. Assim, você pode estruturar tudo isso usando a arquitetura de conteúdo. Então, aqui estamos no Adobe XD e isso vai ser bem simples. Então, eu vou realmente tocar um no meu teclado, por exemplo, para um desses aeroportos. E vamos pegar 13, 66, seja o que for. E vamos chamar isso de arquitetura de conteúdo. Na verdade, vamos chamá-la de arquitetura Sitemap Slash Content porque ela conterá ambas partes internas e , opa, eu não queria fazer isso. Vamos nos livrar desse. E para este, o que eu realmente quero é substituí-lo por Poppins. Então, vamos escolher Poppins. Ali. Vamos lá, porque eu gosto muito de Poppins ultimamente. E frequentemente é uma fonte. Funciona no Webflow, na revista Works Seen, são fontes do Google, então funciona bem na web. Eu gosto da aparência, então vamos substituí-lo aqui. Aí vamos nós. E isso será muito mais simples se eu criasse componentes separados para eles, em vez de apenas usar componentes existentes, mas não importa se vamos lidar com isso. Então Poppins, onde estamos. Então aqui, Poppins, lá vamos nós. Poppins agende um test drive. Poppins e pinos de saída. Ok, então o que eu vou fazer é pegar um desses. Então escolha nesta carta, por exemplo pressione Control C para copiá-la e, em seguida, pulando aqui, controle V para colá-la. Fui desagrupar o componente e pressionei Control G ou Command G para agrupá-lo novamente, chamá-lo de pilha, chamá-lo de emparelhamento para que existisse exatamente os mesmos detalhes. Portanto, terá algo como uma página inicial para que você possa ver como ela se expande bem. Então, aqui vamos aplicar um pouco de cor escura. Eu não sei. Talvez possamos pegar algo que seja quase preto. Talvez. Aí está, eu gosto. E se pegarmos Q aqui e realmente me escondermos da página, você pode ver que é de 2122 a quatro, que é quase preto. E acho que essa cor pode funcionar bem para, digamos, títulos. Então, vamos dar uma cor escura sombreada porque é bem escura e talvez usemos uma cor mais clara mais tarde. E vamos ver, isso é branco puro, então vamos dar isso. Então, vamos chamá-lo de brancos puros. E estou usando traços na minha estratégia de convenção de nomenclatura. Você pode usar sublinhados, pode usar dois traços, pode fazer o que quiser. E, finalmente, temos Poppins como fonte aqui. Eu não vou adicioná-lo aqui imediatamente. Vou adicioná-lo mais tarde, quando começarmos a trabalhar com nosso design. Então, vamos chamar isso, por exemplo , home, nosso item de navegação, item de navegação. Aí vamos nós. E então, na página inicial, o que podemos fazer é duplicar isso porque lembre-se de que temos empréstimos ou, melhor ainda, temos carros primeiro. Aí vamos nós. E dentro dos carros, vamos agrupá-los. Então controle G e chame-os de itens de navegação e coloque-os em uma pilha assim. E agora eu posso pular para dentro e posso mover isso e me posicionar mais alto, eu quiser, ou posso selecionar isso e dar a ele 150, por exemplo. Então, mais uma vez, temos uma página inicial onde todas as nossas informações serão estruturadas, depois temos carros onde todos os carros serão apresentados. Então, se for uma dívida duplicada, o que podemos fazer é colocar um empréstimo dentro, onde mostraremos todos os diferentes empréstimos disponíveis. E, finalmente, quando duplicarmos isso, vamos dar, por exemplo, contato. Como essa será nossa página de contato. E como eu realmente não gosto do espaçamento, ele é muito grande. Vamos reduzi-lo para centenas, e talvez isso funcione por enquanto. Então, vamos pegar o texto daqui, controlar C, controlar V para colá-lo do lado de fora. E porque você não a vê, deixe-me transformá-la aqui para que você possa ver como essa cor é boa diretamente daqui. Então, o que vamos fazer aqui é obviamente, que todas as nossas páginas precisam de navegação. Localização de So Navi. Aí vamos nós. E eu vou pressionar o Controle G para agrupar isso. E eu vou chamá-lo de texto ou seções. Seções ainda melhores porque cada site tem seções diferentes. Vou colocar 40 e clicar em pilha aqui nessa direção porque quero duplicar esse texto algumas vezes para ter mais opções. Então, controle D, e eu vou dar isso para ser, vamos ver, 20. Sim, acho que funciona muito bem. Imediatamente, o que precisamos no topo é quem é essa empresa? Porque quando você está visitando como um novo visitante, você quer entender quem é essa empresa? O que você faz em uma fração de segundo antes de sair do site? Então, queremos ser inteligentes com nossa cópia. Diga a eles que esses são carros exclusivos. Eles estão vendendo carros, mas cartas exclusivas. Então, se você não é desse tipo de comprador, digamos que talvez isso não seja certo, o site para você. Ou se você é esse tipo de comprador que sabe que está no lugar certo. Então, talvez possamos escrever quem somos, quem somos assim, como um título. Então, abaixo disso, queremos dizer a eles talvez o que fazemos. Então, o que fazemos, vendemos carros exclusivos e luxação. Estamos lidando com essas marcas, talvez algo assim. Então, o que oferecemos pode estar na seção com cartões diferentes na página, por exemplo onde podemos mostrar carros diferentes de sua oferta e da oferta original que eles têm no momento. Talvez possamos oferecer alguns benefícios. Talvez nossos benefícios. Talvez possamos obter detalhes gratuitos ou uma lavagem de carros ou talvez proteção corporal completa ou um conjunto extra de rodas ou pneus de inverno. Todas essas coisas podem ser benéficas quando você compra um carro de lá. Talvez, como vimos no site do concorrente, talvez possamos oferecer transporte gratuito do showroom de automóveis até seu local de residência real. Então, talvez isso possa ser um benefício. E finalmente, talvez onde estamos, onde estamos. Coloque isso como um mapa, assim. E, abaixo disso, talvez entre em contato conosco. Porque, mais uma vez, é muito importante ter um formulário de contato. E, finalmente, teremos um rodapé na parte inferior da página. Então, vamos analisar tudo isso rapidamente mais uma vez. Então, temos navegação porque precisamos navegação, obviamente em cada página, quem somos, queremos nos apresentar e dizer a eles o que fazemos. Porque queremos apresentar nossos serviços e não apenas dizer que vendemos carros exclusivos, mas talvez de que forma fazemos isso? Talvez estabeleça um pouco de confiança. Este é o exemplo perfeito em que você usará ou depoimentos podem ser coisas assim, o que oferecemos. Então, sim, oferecemos esses carros exclusivos, mas talvez mostremos a eles alguns recursos adicionais, como talvez tenhamos garantia, talvez tenhamos, como mencionei, esse serviço de polimento e coisas assim, nossos benefícios . Então, por que eles escolheriam você ou seus concorrentes? Talvez vocês estejam oferecendo garantia adicional, vamos ver, por mais um ano. Isso é bom. Tranquilidade de ter isso, porque talvez eu tenha que pagar o serviço e os custos. Então, onde estamos? O que mais uma vez é muito importante. E podemos mostrar um mapa, entre em contato conosco e rodapé. E talvez possamos duplicar essas seções em nossas páginas e navegação, obviamente, elas irão para todas as páginas. Então, vamos ver, essas serão as seções iniciais e, em seguida, o Controle D para duplicá-las. Vou movê-lo para mais ou menos aqui. Ou melhor ainda, posso desagrupá-los. Então, eu posso facilmente alinhá-los aqui e, em seguida, podemos corrigir isso daqui a pouco. Mba pode mover isso aqui. Talvez eu possa mover isso aqui para nos dar um pouco de espaço. Vamos ver, 100 pixels. Aí vamos nós. Então, sobre isso, o que queremos é nos livrar de todas essas informações. Assim, teremos informações que reutilizaremos em nossas páginas. Vamos criar componentes no XD e no Webflow. Criaremos esses símbolos para reutilizar exatamente a mesma metodologia e estrutura, como no XD, figma, como em qualquer outra ferramenta que você possa reutilizar e não precisa basicamente recriá-los o tempo todo. Então, o que teremos aqui é que talvez possamos ter as informações promocionais no topo. Vamos ver algo como errado para o baile de formatura quando para algo assim. Vamos ver. Melhor promoção em um formato em que talvez possamos adicionar um slogan ou algo parecido. Então, o que podemos fazer é criar estoque. E talvez possamos colocar oito carros. Talvez apenas para mostrar que eles têm oito carros no momento, digamos que possamos ter um apelo à ação claro. Ou, na verdade, não temos porque temos o estoque. Talvez possamos colocar esse cartão para cada carro. Eles podem clicar no cartão para acessar a página inteira, que mostrará todos os carros, que é a decisão de quando você, quando você realmente vê o carro. Então, estamos aqui procurando carros, que são os carros em nossa navegação, que é este aqui. Então, ao clicar em Procurar carros, você verá Exibir carros. Então, de cada um desses oito, ao clicar em cada um deles, você verá essa página de visualização do carrinho e, a partir daí, o processo de decisão ocorre. Então, vamos ver, essas são as seções de carros. Então temos empréstimos. Então, vamos clicar em Control D. Duplique isso. Posição, aqui até aqui. Oh, desculpe. Vamos ver onde estamos. Somos vistos como vender, não importa. Então, mais uma vez, vou me livrar desse. Vou me livrar dessa porque essas são as seções que estamos mantendo e repetindo. Então, aqui teremos, por exemplo, principais informações promocionais. Mas diferente porque o anterior era para carros, este é para empréstimos. Então, obviamente, será um pouco diferente do que podemos fazer é mostrar a eles nossa oferta. Porque todos esses outros concorrentes têm sua própria oferta. Esta é a nossa oferta e o motivo pelo qual somos um pouco diferentes e talvez mostramos a eles nossos parceiros. Porque, como mencionamos, resumidamente inexplorado, essa empresa não faz isso sozinha. E então eles têm esses parceiros externos que os ajudam com o transporte da Alemanha. Se você se lembra, os carros estão vindo da Alemanha para a Sérvia, então temos esses parceiros para empréstimos, porque isso pode ser que os bancos as empresas de empréstimo, sejam celulares e papais, que está acontecendo com o pulmões. têm companhias de seguros e todos são parceiros externos. Portanto, temos empréstimos e parceiros específicos para empréstimos. Então, podemos ter onde estamos, entre em contato conosco e no rodapé, acho que está tudo bem. E vamos chamar isso de seções de empréstimos e empréstimos. Por que temos dois espaços aqui e ali vamos. E, finalmente, vamos pressionar Control D mais uma vez. Duplique isso e navegue até aqui, talvez, e entre em contato conosco. Então aqui teremos, vamos ver, eu vou me livrar disso e disso. E em vez de ser premium, pois talvez eu tenha a imagem superior, a imagem do melhor herói, por exemplo, porque lembre-se de que as seções do herói estão localizadas em todas as suas páginas, não apenas na página inicial, apenas as primeira página, primeira seção na página acima, padrão. Então, vamos chamá-la de seção Fale conosco. Aí vamos nós. Agora vamos agrupar tudo isso. Então, vou pressionar Shift Control G. Vou ligar para esta página inicial. Aí vamos nós. Esta será a nossa página de carros e carros. Esta será nossa página de empréstimos. Animado. E, finalmente, Fale conosco, página de contato conosco. Aí vamos nós. Vou agrupar todos eles na pilha de sucessos aqui. E eu vou chamar isso de nosso mapa do site. Arquitetura de conteúdo. Um tablet adorável. Então, se eu posicioná-lo como fizemos anteriormente com 40, e aqui estamos em 40. Posso clicar duas vezes, posso adicionar isso aqui. Talvez não precise ser perfeito. Eu sou um pouco adepto desses detalhes. Então, às vezes você vai ter que ter paciência comigo. Então, vamos realmente deixar as coisas assim. Então, o que temos é que temos um fluxo de usuários com base no qual criamos nossa arquitetura de conteúdo. E agora , com base nisso, vamos finalmente passar para os wireframes de papel. Agora, isso é muito mais simples, porque todas essas ideias vêm de nossa cabeça colocadas no mapa do site e a arquitetura de conteúdo será muito mais simples de projetar esses elementos do que se acabamos de começar com wireframes de papel. Mais uma vez, esse método não é realmente necessário, mas é bom tê-lo. E é bom que você tenha todas essas ideias em mente para simplesmente colocá-las na página de arquitetura de conteúdo, especialmente se você tiver várias seções diferentes para um grande site, como um blog, por exemplo. portanto, é muito mais simples fazer isso dessa maneira do que simplesmente começar diretamente com wireframes de papel. Então, na próxima seção, finalmente, passaremos aos wireframes de papel. Então, eu vou te ver lá. 132. Molduras de papel: Agora que conhecemos nossa arquitetura de conteúdo, vamos passar rapidamente para ela e nos lembrar um pouco. Então, aqui temos a página inicial de carros, empréstimos, entre em contato conosco, e facilmente poderemos distinguir todas essas páginas por causa do que falamos na arquitetura do quadrante até agora. Então, o que vamos fazer a seguir é passar para os wireframes de papel. E o que eu tenho aqui é apenas aquele pedaço de papel preto. Como mencionei anteriormente, você não precisa usar esse tipo de papel. Você pode usar apenas um pedaço de papel branco velho ou um bloco de notas, pode usar o que quiser no que tiver. Gosto de usá-los, especialmente para esses cursos, porque é um papel preto com pontos brancos. E quando eu comecei a escrever com essas canetas de gel brancas, isso vai se traduzir muito bem para vocês e vocês poderão ver isso muito bem. Então, vamos seguir em frente aqui. O que vou fazer primeiro é criar um esboço rápido no centro da minha página ou um fluido, porque lembre-se de que, mais tarde, vou digitalizá-lo que, mais tarde, vou digitalizá-lo e colocá-lo no Adobe XD. Então desça até aqui aproximadamente. Portanto, isso não precisa ser perfeito, como mencionei algumas vezes. E eu vou deixar isso assim. Então, o que vou fazer primeiro é que já tenho algumas manchas, mas, mais uma vez, isso realmente não importa. O que eu vou fazer. A primeira é que, se eu te levar de volta aqui, temos navegação e temos quem somos diretamente daqui. Então é nisso que vamos nos concentrar aqui. Então, vamos bloquear uma seção rápida aqui. Vamos dar a ele o nome de um logotipo e usar um menor. Então, vamos chamar isso de empréstimo de carros e entrar em contato conosco. Aí vamos nós. E se eu continuar e ampliar um pouco, você poderá ver isso um pouco melhor. Aí vamos nós. Então, carros, empréstimos, entre em contato conosco. E agora deixe-me ampliar apenas um toque para que você possa ver um pouco melhor. Então, o que vamos ter aqui é uma espécie de seção de heróis. Então, vamos bloquear peças menores para que possamos tê-las todas em nossa página, assim. Então, aqui teremos talvez um título, talvez um subtítulo. E então talvez tenhamos um botão. Então, vamos dar n. E então aqui teremos algum tipo de carro. Porque, mais uma vez, é um site de carros e basta conferir minhas habilidades de desenho. Louco. Mas isso realmente não importa, como mencionei algumas vezes ao longo disso porque isso é só para nós. Queremos ser capazes de apresentar aos nossos clientes algo que seja atraente e queremos ser capazes de atraente e queremos ser capazes entendê-lo com bastante facilidade. É por isso que estamos usando esses wireframes de papel para colocar rapidamente algumas ideias em uma página. Então, talvez eu possa ter alguns ícones aqui. Então eu vejo, lá vamos nós. Abaixo disso. Talvez possamos ter nossa seção. Vamos ver o que temos aqui. Então, temos quem somos. Então, talvez possamos seguir em frente e criar algum tipo de imagem. Talvez mais ou menos por aqui deste lado. Aí vamos nós. E eu posso digitar quem somos e talvez alguns parágrafos de textos. Então, se tomarmos aqui, temos o que fazemos. O que fazemos. Talvez possa ser uma seção com os carros diretamente. Então, talvez possamos ter as cartas que mencionamos e depois ver todos os carros porque é isso que fazemos, afinal de contas. Então, o que podemos ter aqui talvez sejam três cartas. Vamos usar um layout como esse. Como eu disse, não importa se eu não sou tão preciso, porque estou tentando apressar esta seção porque temos várias páginas. Mas eu só quero mostrar a você kernel do meu processo de pensamento. Então, teremos aqui o nome, talvez o preço e talvez algumas informações aqui. Então, nome do carro, preço do carro e algumas informações básicas. E discutiremos essas informações básicas em apenas um segundo e, obviamente, teremos imagens de carros aqui. E então vamos fechar esses cartões aqui. Conecte essas linhas muito rapidamente. E, abaixo disso, talvez possamos ter C todos os carros. Talvez. Veja todos os carros. Aí vamos nós. Botão no centro. Eu acho que isso vai funcionar muito bem. Então. Talvez possamos ter uma seção aqui desse lado, talvez aqui. Então eu posso ter um pouco mais de espaço na parte inferior. Então, isso pode ser imaginado e podemos chamá-lo do que oferecemos. Então, talvez possamos ter três Nikons diferentes , algo assim. Então, eu POSSO, talvez possamos ter texto, texto e texto abaixo, algo assim para que possamos preencher esta seção. Então talvez possamos bloqueá-lo. Porque se eu nos levar aqui, teremos nossos benefícios. Então, o que oferecemos e talvez nossos benefícios possam estar na seção abaixo. Então, talvez algo assim. Talvez possamos ter, eu vejo, eu vejo, e para o ícone, eu vejo N, então talvez tenha um título para cada um desses benefícios. E pode haver um parágrafo de texto ou algo parecido. Então você pode ver que estou analisando isso muito rapidamente, porque esse é o objetivo principal. Talvez tenha duas, cinco ou dez ideias diferentes. Quero pegar um pedaço de papel o mais rápido possível. E como temos essa arquitetura de conteúdo clara e agradável, é muito mais simples implementá-la dessa forma. Então, o que queremos é entrar em contato conosco. Então, entre em contato conosco. Aí vamos nós. E talvez possamos ter isso apenas como uma forma regular como essa. Aí vamos nós. E então talvez um no centro para preencher tudo. Aí vamos nós. Botão aqui, btn. E então, abaixo disso, o que eu quero é ter talvez um mapa. Tudo bem, por aqui. Aí vamos nós. Isso pode ser um mapa. Aí está. E então onde estamos, talvez onde estamos. E talvez possamos usar o mesmo layout, basta reutilizá-lo, pode ser ícone, ícone, textos de ícones, textos. Lá vamos nós e talvez coloquemos alguns, sei lá, endereço, número de telefone, e-mail, qualquer coisa. E, finalmente, vamos fechar esta página inicial. Você pode colocar um logotipo no centro. Então eu posso usar o menor. Talvez possamos usar o FB para o Facebook, o TW para o Twitter, o IgE para o Instagram e o L e para o LinkedIn ou qualquer outra coisa. E aqui podemos ter a mesma navegação. Então, deste lado, vamos chamá-lo de carros. Empréstimos, entre em contato conosco. Aí vamos nós. Então, se eu continuar e ampliar apenas para tocar, para que você possa ver um pouco melhor. Aí vamos nós. Então, primeiro de tudo, temos navegação aqui no topo. Depois, temos aquela seção de heróis com o conteúdo ao lado. E temos a imagem do outro lado, quem somos. Então, temos todas essas cartas prontas que você pode ver aqui. Abaixo disso, temos o que oferecemos , e abaixo disso temos nossos benefícios. Então, talvez possamos colocar uma flecha aqui ou simplesmente ser benefícios. Benefícios. Aí vamos nós. Então, esses são nossos benefícios abaixo disso. Temos entre em contato conosco. Em seguida, temos o mapa com as informações de cada lado, que é o mesmo desta seção. E, finalmente, temos o rodapé na parte inferior da página. Então, o que acabamos de fazer foi colocar algumas informações que temos aqui dentro da arquitetura de conteúdo, em um pedaço de papel e é muito mais simples visualizá-las. Agora, o que precisamos é criar carros. Então, vamos lidar com a dívida agora. Em primeiro lugar, vamos pegar esse que é o número dez. Vou chamá-lo de lar. Agora vamos criar carros. Então, vou usar esse mesmo layout que fiz aqui aproximadamente. Então, vamos começar daqui para talvez. Vamos ver que aqui não precise ser preciso. Então, vamos ver, eu estou usando qual deles é esse número dez. Então, talvez eu não use esse idealmente, mas, mais uma vez, isso não importa. Basta colocar a estrutura áspera no lugar. Lá vamos muito bem. Vamos fechar este. Vamos usar o número oito. Então, mais uma vez, se levarmos você de volta para aqui, dentro dos carros, o que temos é a navegação. Temos essas três repetições mais negação. Portanto, temos quatro seções se repetindo. Temos as principais informações promocionais e temos estoque oito vezes. Então, como podemos fazer isso? Muito simples, vamos simplesmente copiar nossa navegação. Então, vamos escrever um logotipo, escrever carros. Aí vamos nós. E vamos escrever, vamos ver as leis e entrar em contato conosco. Aí vamos nós. E aqui, para obter as informações promocionais, o que eu posso fazer talvez seja fazer algo um pouco diferente. Então, ainda vamos ter essas informações sobre o problema aqui. Mas talvez tenhamos um carro do perfil. Mais uma vez, minhas habilidades épicas de desenho estão prontas. Aí vamos nós. Então, de perfil, talvez possamos ter um círculo de fundo e talvez possamos ter algum tipo de título na parte superior. Algo assim com um círculo de fundo ao redor do carro. Acho que isso vai funcionar muito bem. Distinguiu esta seção, além de todas as outras. Talvez. Talvez você possa escrever algo como nossa coleção exclusiva. Aí vamos nós. E vamos usar esses cartões que acabamos de criar e colocá-los aqui. Porque lembre-se, se eu levar você aqui, esta é a seção de carros que terá todos os carros exibidos na página. E é isso que vamos criar. Agora. Vamos criar um a partir daqui. Então, vamos medir essa altura, talvez. Comece aqui, posicione aqui e depois aqui. Aí vamos nós. E vamos ver, eu não sei se isso não vai ficar muito bom, mas não importa o que eu mencionei, isso é apenas um esboço. E confie em mim, se eu não estou falando, estou fazendo isso dez vezes mais rápido do que estou fazendo aqui. Então, vamos fechar essas cartas assim, assim, assim. Aí vamos nós. Vamos dar a eles a mesma imagem superior aqui. Aí vamos nós. Vamos fechá-lo assim, só para que saibamos que é uma imagem. Nós tínhamos um nome em cada um deles. Nome, então tivemos um preço. E então tínhamos essas informações no canto inferior direito aqui. Então, o que faremos, em vez de eu desenhar tudo isso, vou digitá-los vezes oito, assim. E, abaixo disso, o que faremos é simplesmente criar, entrar em contato conosco. Entre em contato conosco. Porque se você levar você aqui, você pode ver que na seção de carros temos o estoque, que é esse aqui que acabamos de desenhar. E então temos nosso Fale conosco e rodapé. Então, talvez entre em contato conosco, possa ir lá. E então onde estamos. Estamos com a imagem de um mapa aqui. Mapa. E, finalmente, podemos ter um rodapé na parte inferior. Então, algo assim. Então, isso pode ser um logotipo. Isso pode ser, vamos ver, carros, empréstimos, contatos. Aí vamos nós. Esses podem ser esses ícones, adoráveis. E agora que a seção do carro foi criada, vamos nos mover rapidamente para os pulmões. E se nos lembrarmos, temos mais uma vez as principais informações promocionais de navegação, temos nossos parceiros de ofertas e, em seguida, essas mesmas seções. Então, se o trocarmos de volta aqui, vamos criar outro. Então, mais uma vez, isso não precisa ser perfeito. Talvez eu nem mesmo os escaneie porque eles são muito, muito difíceis. Então, talvez algo assim só para nos dar um pouco de espaço. Um erro adorável. Vamos ver. Deixe-me pegar o número dez porque é bem grosso e eu posso escrever em algo como logotipo. E depois carros, empréstimos, contatos. Eu vivi. E só para esses. Então, o que podemos fazer é talvez ter um título no centro. Aí vamos nós. E então talvez possamos ter dois carros. Um carro pode estar aqui. Aí vamos nós. E um carro pode estar aqui. Algo parecido com isso. Aí vamos nós. Então, talvez possamos pensar na seção de animação porque esses dois carros podem pular do local. O título pode deslizar de baixo para cima ou para baixo. Assim, você pode começar a pensar nessas coisas imediatamente, sem nunca criá-las. Então, aqui temos essa opção. Então, abaixo disso, o que podemos fazer é talvez ter, vamos nos lembrar. Temos nossas principais informações promocionais, que são essas aqui. Então temos nossa oferta e depois nossos parceiros. Então, vamos ver nossa oferta. Nossa oferta. Talvez possamos criar o mesmo layout que fizemos na página inicial. Então, talvez algo assim para obter benefícios e talvez possamos fazer o mesmo. Então, talvez possamos digitar. Eu vejo, eu vejo, eu vejo. Arredonde em círculos. Em seguida, temos o título e, em seguida, os textos dos parágrafos logo abaixo. Então, o que temos são nossos parceiros. Então, vamos chamá-los de algo como Na verdade, não, vamos dar a eles o layout que fizemos anteriormente na página inicial, logo neste lado. Então, o que vou fazer é ter minha imagem aqui. Aí vamos nós. E talvez faça algo um pouco diferente desta vez. Então, talvez coloque um logotipo aqui. Então, deixe-me escolher o número dez. Então, logotipo. E então, talvez deste lado, talvez eu possa colocar um cartão e chamá-lo de logotipo para os parceiros. E talvez possamos chamá-los de nossos parceiros. Parceiros. Aí vamos nós. E então talvez possamos colocar o mesmo layout que fizemos na página inicial aqui para quem somos, mas apenas para nossos parceiros e não perder muito tempo apenas para nos lembrar de onde estamos. Entre em contato conosco no rodapé para que eu possa pegar o número dez, então entre em contato onde estamos com a imagem. E, finalmente, rodapé que possamos nos mover rapidamente. O que temos a seguir é entrar em contato conosco. Então, vamos fazer isso em 2 s porque vai ser muito simples. Não precisarei criar nenhuma linha adicional aqui. Talvez eu possa colocá-lo aqui. Eu fui logotipo. Aí vamos nós. E, em vez de escrever, já sabemos o que são. Portanto, se nos lembrarmos da página Fale conosco, temos apenas navegação e, em seguida, todas essas coisas. Então, a melhor imagem do herói e onde estamos. Então, tudo isso está restante. Então, talvez possamos colocar uma boa imagem grande para um herói. E então podemos escrever em contato conosco onde estamos com a imagem de um mapa. E, finalmente, por um período. E agora o que precisamos fazer é realmente criar a página em que forneceremos informações adicionais sobre o carro. Então, se eu levar você para uma dessas páginas que acabamos de fazer, então esta, por exemplo, temos todas essas seções diferentes. Temos o carro, temos as imagens. Vamos filtrar todas essas informações daqui a pouco. Mas agora, na verdade, teremos que criar algo assim. Então, como podemos fazer isso? Na verdade, é muito simples quando você sabe o que precisa colocar, mas vou colocar alguns blocos dentro. E mais tarde, no XD, falaremos sobre as diferentes seções que podemos criar. Por que criamos coisas assim? Então, aqui temos a página do carro. Deixe-me chamá-lo de carro na página de detalhes. E deixe-me, deixe-me realmente criar um esboço rápido por aqui, aproximadamente por aqui. E lembre-se de que esta página será criada usando Webflow, CMS. Então, ele criará apenas um. E então, quando inserimos todas as informações, o CMS realmente fará todo o trabalho árduo. Assim, nossos clientes poderão incluir imagens adicionais e incluir informações separadas para cada carro. Então, a cor do ano, a produção, a quilometragem, todas essas informações. Poderão incluí-lo todos os outros carros que eles colocarem. Mas a estrutura geral e o layout serão exatamente os mesmos. Então, se eu levar você aqui, temos a barra de navegação aqui, então o logotipo e não temos itens. Então, o que faremos é talvez dividir isso em duas seções, como eu mostrei naquele site em particular. Temos uma seção com as imagens e as informações e a segunda seção com o cartão que talvez venha a seguir e o layout que mostrei a você. Então, o que podemos fazer aqui é talvez criar um layout parecido com este. E, claro, você sempre pode brincar com isso e ajustar essas seções. Então, vou colocar uma imagem gigante e talvez para imagens menores. Em seguida, coloque um banner com um ícone ou o texto interno, que, ao clicar nele, ampliará a imagem. Então eu coloquei isso aqui, isso aqui. E então, desse lado, criaremos esse cartão, talvez do mesmo tamanho desse. Isso realmente não importa por enquanto, mas quando entrarmos no design, isso importará. Então, o que podemos fazer aqui é realmente colocar a informação que você mencionou, o sal, talvez possamos colocar no nome do carro, preço do carro. Talvez uma pequena descrição aqui. E então talvez possamos colocar dois botões. Uma é para talvez reservar um carro, que quando você clica nele, você será direcionado ao formulário de contato. E a outra pode ser talvez opções individuais ou opções empréstimo C. Opções. Aí vamos nós. E isso talvez exija um discurso muito longo, empréstimos, formulário ou página de contato ou qualquer outra coisa. Então, esse será um layout para essa seção. E então, basicamente, o que faremos é eu fazer essa mão livre e vou girá-la aqui. Talvez ouça algo assim. Então, visão geral ou revisão. Há um monte de informações diferentes lá dentro. Em seguida, teremos as especificações do carro. E essa seção pode ser longa. Somos uma informação interessante. E então o que podemos fazer é talvez colocar o desempenho e depois colocar todas as informações dentro do desempenho. Segurança, como vimos naquele site. Porque a segurança é muito importante. Obviamente. Talvez ajudas ao motorista ou algo assim por conveniência. Então, talvez possamos colocar o exterior e quais tipos de detalhes externos têm exterior. Podem ser quartos coloridos e coisas assim. Interior. Talvez você tenha assentos de couro ou controle de temperatura lateral ou algo parecido. Então talvez possamos colocar dimensões. Dimensões. Aí vamos nós. E isso pode ser isso. Esta seção pode ser fechada aqui. E esse cartão pode seguir esta seção. Aí está. Conforme você rola para baixo, ele vai se mover para baixo. Então talvez tenhamos alguma opção para, digamos, explorar carros semelhantes. Então, talvez eu possa escrever isso. Explore carros semelhantes. E aqui teremos apenas os três cartões que tínhamos em todas as outras páginas. Então, cartão um, cartão para cartão três. Mas, nesse caso, ele apenas carregará outros carros dessa coleção, que serão criados no CMS. Então, se você está vendo a classe S da Mercedes aqui, ela não vai aparecer como classe aqui porque estamos assistindo a classe S aqui nesta página. Em vez disso, ele extrairá as informações da próxima placa para que as definamos no Webflow. Então, estou pensando em todos esses processos de antemão. Então, quando realmente mudarmos para o Webflow , será muito mais simples criar isso. Portanto, não estamos vendo a classe S aqui. E aqui, você está apenas vendo isso aqui. Mas aqui vão estar carros diferentes. Então, nome, preço e informações, nome, preço, informações, nome, preço e informações. E então teremos todas as mesmas informações. Então, entraremos em contato conosco onde estamos. E, finalmente, período integral. E como estamos fazendo isso no CMS, essas informações serão as mesmas. Então, finalmente, esta página que acabamos de criar, então a página de detalhes do carro será exatamente a mesma para cada cartão que criarmos. E os clientes poderão atualizar facilmente esta página e adicionar imagens adicionais ao carro existente ou criar carros novos e criar essas páginas dinâmicas cheias de conteúdo. É aí que o Webflow, CMS , será útil. Então, finalmente, vamos revisar o que fizemos até agora. Então começamos com a página inicial, que eu mostrei aqui. Portanto, temos empréstimos para automóveis. Entre em contato conosco. Então, finalmente, página de detalhes do cartão. Então começamos com uma página inicial. Em seguida, passamos para a página de carros. Vamos criar todas as oito cartas de carros diferentes. E essas seções na parte inferior vão se repetir. Em seguida, mudamos para empréstimos, onde exibiremos duas imagens diferentes de carros. Mostraremos a eles nossa oferta para os pulmões. Mostraremos a eles nossos parceiros os pulmões para estabelecer confiança. E então essas seções serão as mesmas. Por fim, para a página Fale conosco, que talvez eu possa marcar aqui, entre em contato conosco. Teremos apenas a imagem do herói aqui no topo. Você terá o formulário de contato que vimos em todo o site em que estamos para a localização e o rodapé. E, finalmente, o argumento mais importante em termos de convergência será a página de detalhes do cartão, que é esta página. E isso só vai mostrar a eles os detalhes sobre o carro em que clicaram. Qualquer uma dessas páginas anteriores, seja nos cartões, está na seção de carros da página. E, como mencionei, ele terá imagens aqui no topo. Em seguida, terá uma visão geral. Então, talvez eu possa ampliar com apenas um toque para poder mostrar isso com um pouco mais de detalhes. Então, como eu disse, teremos imagens aqui com quatro imagens diferentes e o ícone para ampliar as imagens e entrar em tela cheia, talvez aqui para ver mais detalhes. Teremos nosso veículo de teste em quatro com desempenho, segurança, auxílio ao motorista, dimensões externas e internas. E, finalmente, exploraremos carros semelhantes da mesma coleção de carros , que serão criados no Webflow posteriormente. E, finalmente, as mesmas seções, como entre em contato conosco onde estamos e o rodapé logo abaixo. E, finalmente, e crucialmente, o descarte os seguirá onde quer que eles rolem para cima e para baixo nesta seção específica. Então, sabemos que chegamos ao fim de nossos wireframes de papel. Eu realmente espero que você tenha gostado e eu realmente espero que você tenha entendido por que é importante criar essa arquitetura de conteúdo e mapa do site junto com esses wireframes de papel. E que é muito mais simples criar conteúdos como esse, porque você está planejando com antecedência, pensando onde criar algo e como criar algo que você precisa para sua site. Na próxima lição, falaremos sobre imagens, onde as comprei para esse projeto em particular. Onde você pode explicá-los como vou estruturar as imagens para este projeto e quais são os termos e condições de onde e como você pode usar essas imagens em seu próprio projeto se você quero usá-los em seu portfólio, por exemplo, então eu vou te ver lá. 133. Imagens do projeto: Nesta lição, falaremos sobre imagens em que encontrei minhas imagens para esse projeto específico. Como você pode usar essas mesmas imagens e licenciá-las posteriormente se quiser usá-las em seu portfólio. Caso contrário, você pode usar algumas outras imagens, mas deixe-me mostrar a abordagem que adotei porque é muito complicada. Então, se eu for aqui, usei todas as minhas imagens dos elementos do Envato, como faço em todos os meus tutoriais do YouTube, em todos os meus cursos. E eu uso esse site há anos e acho que é fantástico. Então, o principal problema aqui é encontrar um carro e tirar fotos de todos os ângulos possíveis, como você pode ver aqui. Possivelmente no mesmo local. E então você faz o mesmo com o interior. Então, eu não fiz interiores porque é muito complicado encontrar interiores 3D on-line e tirar imagens de alta qualidade. Você pode fazer isso online nos sites da empresa. Mas para mostrar aos seus clientes quem realmente terá essas imagens porque eles têm estoque desses carros em seu showroom. Assim, eles podem tirar imagens de todos esses ângulos diferentes, incluindo o interior. O objetivo aqui é mostrar a eles como o site funcionará para que eles possam substituir as imagens que você inseriu no modelo do Webflow que forneceremos e criaremos posteriormente. Então, para criar algo assim, o que eu faço, o que ele fez foi ir para a Envato Elements. E eu baixei esse logotipo e substituí o nome por uma aranha, que é o nome da nossa empresa imaginária. Pegou esse software 3D, pegou essa planta 3D e pegou esse piso de calcário e painel de parede, coloque-os no Photoshop e criei algo assim. Então, se eu pressionar Control H para ocultar esses guias, o que eu tenho aqui é a textura do plano de fundo, que é um plano de fundo aqui. Eu tenho o chão. Eu tenho a planta com um pouco de borrão. E eu tenho o sofá aqui, e eu tenho o logotipo aqui em cima. E se levarmos você de volta aqui, quais são as necessidades deles? São os carros. Então, se eu pegar esse pedaço da Guiné, por exemplo, aquele tem meu carro. Essa é a renderização 3D que você verá nos elementos do Envato. Então, o que eu fiz foi ativar a visão 3D para que você possa girar este carro como quiser. Então, digamos que eu queira pegar esse ângulo, e depois esse ângulo e então talvez esse ângulo do que esse, do que isso, para imitar o que vemos aqui na vida real, o que farei é selecione este e, em seguida, baixe esse ângulo como PNG, o que eu fiz. Selecione esse ângulo para baixar como PNG, selecione Baixar como PNG. E eu fiz isso para todos esses oito carros que você pode ver aqui. E eu até adicionei, acho que alguns adicionais como este , que usaremos na seção de heróis. E deixe-me ver. Acho que é isso. Provavelmente, sim, porque temos nove aqui e depois esses carros são maquetes. E eu simplesmente fui em frente e os abri no Photoshop. E acabei de remover todas essas seções diferentes com o design e simplesmente exporto para elas como PNG. E eu fiz o mesmo com este. Se bem me lembro, acho que na página de carros haverá um carro olhando do lado do círculo ao fundo com os textos principais, o que é mais ou menos assim. Então eu tirei essa imagem e pintei todos os carros preto por causa daquela equipe de luxo. Então eu fui em frente e encontrei todas essas imagens premium nos elementos da Envato, que são milhões delas. E você pode usar todos os tipos de imagens diferentes. Então, aqui está um para os vendedores de carros. Aqui está um vendedor de carros mostrando o carro para as pessoas e aqui está aquele em que eles talvez estejam firmando um contrato ou algo parecido. Então, eu uso todas essas imagens no design. E você verá isso à medida que avançarmos. E eu vou te fornecer todas essas imagens para usar. Dependendo de onde você está assistindo este site, talvez seja como um link do Dropbox para que você possa baixá-lo dessa forma. Ou vou colocá-lo na seção desta seção de design que você terá em parte onde poderá baixar imagens, basta clicar e baixá-las. Se você quiser usar essas imagens é muito importante. Você mesmo precisa licenciá-los a partir dos elementos do Envato porque todos eles estão sob uma licença e você precisa pagar por essa licença se quiser usar essas imagens existentes em seu projeto, que vamos mostrar. Se você os estiver usando para fins de aprendizado, tudo bem. Você pode simplesmente baixá-los, mas não pode usá-los em qualquer lugar, nem em seu portfólio, loucos para mostrar no Instagram, não para trabalhar com clientes, porque você é responsável por eles imagens abaixo de muitas. Portanto, se você não tiver uma licença para essas imagens, todas essas empresas que estão postando essas imagens nos elementos da Envato, incluindo os próprios elementos da Envato, podem facilmente processá-lo porque você não tenha uma licença correta. Mas se você os estiver usando para fins de aprendizado, apenas para você, apenas no seu computador, apenas para aprender, apenas para colocar as coisas aqui. Então, não há problema em usá-las assim porque, mais uma vez, é extremamente difícil encontrar imagens como essas. Ou, se quiser, em vez de carros exclusivos, você pode substituir essas imagens por suas imagens do seu carro ou do carro do seu vizinho, ou do seu carro ou qualquer outra coisa. E então você pode simplesmente duplicar essas imagens e colocá-las no lugar em vez de usá-las. Então, como eu disse, eu fiz isso. E então, quando eu entrar no Photoshop, o que vou fazer é simplesmente pegar as imagens que acabaram de baixar, arrastá-las e soltá-las no Photoshop. E vai colocá-los como objetos inteligentes colocados por célula. E então deixe-me organizá-los de forma um pouco diferente. Deixe-me clicar. Ok, então número um, número dois, número três, número quatro. Então, essas são todas as posições. E se eu trouxer o Control H Back Control T, para que eu possa redimensioná-los sem peso. Então, controle T mais uma vez, apenas com um elevador e uma mudança, talvez algo assim. Aí está. Eu vou escondê-los. Vou trabalhar com o número um agora, desse jeito. Então, talvez eu possa posicioná-lo apenas para ficar no centro, mais ou menos por aqui, talvez onde as rodas estejam se tocando, talvez ali mesmo. Então eu vou fazer o mesmo com o número dois, então onde as rodas estão se tocando e talvez eu as posicione aproximadamente por aqui. Então, para o número três, você entendeu a ideia. Então, basta posicioná-lo aproximadamente por aqui e quer ter a ilusão de ser um carro real em um showroom real, como aqueles que acabam de ser mostrados aqui. Mas agora estamos lidando com a imagem e a renderização do Photoshop. Então, como é isso quando você realmente o renderizou? Parece algo parecido com isso. Então, essa é a renderização real que vamos usar neste curso. Então, aqui está o único. E então deixe-me clicar para que eu possa alterá-las ou abri-las mais uma vez. Vamos tentar agora. Eu não sei o que está acontecendo aqui. Então, vamos cancelar isso. Vamos abri-lo. Mais uma vez. Espero que desta vez funcione porque estou usando todos esses softwares em segundo plano. Às vezes, isso vai causar algumas falhas no meu computador. Então, deixe-me fechar o Photoshop bem rápido, porque você já viu isso. E vamos tentar agora. Então, aqui está essa imagem. Então, agora, quando eu mudo para a esquerda e para a direita, você pode ver 12345678. Então, estamos mostrando o carro de todos os ângulos, exceto no interior. Porque, como mencionei, é muito difícil encontrar interiores on-line que sejam bons. Mas esse será um bom ponto de partida, porque eu fiz isso, se me lembro, de oito carros diferentes. Então, se eu lançar o Cadillac escalate, por exemplo e mostrar isso, você pode ver que é completamente o mesmo no mesmo interior. Vamos lançar este Maclaurin , por exemplo , para que você possa ver como fica neste interior. E, finalmente, deixe-me mostrar e desenhar a Vogue. Aí está. Então você pode ver que eles são exatamente iguais em todos os interiores e todos eles foram retirados dos elementos da Envato desta coleção. E, como eu disse, para não me repetir demais. Você pode usar essas imagens para fins de aprendizado em sua máquina, mas não tem permissão para publicá-las em nenhum outro lugar. Se quiser, você pode juntar os dois elementos e simplesmente baixá-los e mostrar como isso é super simples. Então, digamos que eu vou abrir este. E eu vou rolar um pouco para baixo. Talvez eu queira usar esse carro por qualquer motivo ou isso seremos ainda melhores. Digamos que eu escolha essa renderização. Para que seja renderizado. Talvez eu queira girá-lo assim. Talvez eu queira usar esse ângulo, B e G. Baixe esse ângulo e você pode ver aqui. Então, site exclusivo de showroom de automóveis, que é a coleção que já foi criada para discourse. Clique aqui, adicione-o agora, carregue e, portanto, eu tenho uma licença. Agora, para esse ângulo desta imagem. Se eu o mudar para um ânodo, esse download angular foi adicionado à mesma coleção como não permitido. Agora tenho uma licença para esta e posso usá-la em um número ilimitado de projetos. Eu posso criar um número ilimitado dessas coleções. Posso adicioná-los, criar essas coleções para certos tipos de sites ou aplicativos móveis, ele possa fazer o que eu quiser. E uma última coisa que eu queria mostrar a vocês é essas imagens. Então, se eu pegar isso e talvez um vendedor de carros tire isso, e essa é uma imagem, você pode ver imagens adicionais dessa pessoa que imagens gratuitas não podem fornecer. Muito simplesmente. Você pode ver mais fotos semelhantes, que mostrarão fotos desse fotógrafo em particular e de outros fotógrafos. Assim, você pode ver diferentes tipos de vendedor de carros, diferentes tipos de showrooms de automóveis e assim por diante. Mas se você quiser dessa pessoa, que é Ross Helen neste caso, clique aqui, baseado em vendedor de carros, digitando Enter ou Return. E aí está. Você tem centenas de imagens diferentes desse mesmo vendedor de carros no mesmo showroom de carros, observando carros, explorando carros, testando carros, vendendo carros, posicionando lugares diferentes, todos os tipos de coisas diferentes. Porque esse fotógrafo tirou essas imagens com a mesma iluminação, usando os mesmos modelos, usando o mesmo showroom, na mesma condição. Portanto, será muito mais profissional se você usá-lo a partir daqui. Então, se você usar uma imagem daqui, uma imagem de lá, 1 “deste fotógrafo, uma neutra neste fotógrafo n, é claro, você pode filtrar todas essas diferentes filtros incríveis para encontrar suas imagens ainda melhores dessa forma. Então, isso é tudo para imagens. Lembre-se de que, se você quiser usá-los novamente, precisará licenciá-los da Envato Elements em qualquer lugar do seu portfólio, no trabalho do cliente ou compartilhá-los no Instagram, nos finais de semana, O que quer que você esteja fazendo, você tem que licenciar essas imagens. Caso contrário, você está violando as leis deles quando corre o risco de uma possível ação judicial. Mas se você quiser usar essas imagens para fins de aprendizagem, que são a essência deste curso , você pode usá-las gratuitamente. Simplesmente não envie seu trabalho em nenhum lugar on-line. Na próxima seção, ou desculpe, na próxima lição, passaremos para o Adobe XD e finalmente, começaremos a desenhar esse projeto. Então, vamos começar. 134. Criação da placa de humor: Então, agora que fizemos wireframes de papel, é hora de seguir em frente com nosso design para realmente começar a explorar imagens diferentes, diferentes opções de estilo e abordagens diferentes. E para melhor nos ajudar a fazer isso, vamos usar alguns quadros de humor. Você não vai entrar em muitos detalhes. Obviamente, já criei esse projeto. Obviamente, nosso cliente imaginário sabe do que gosta, mas existe apenas para nos deixar de bom humor de qualquer maneira. Então eu ainda vou te mostrar. Mas antes disso, deixe-me levá-lo ao nosso arquivo Adobe XD, onde vou mostrar que eu limpo esse wireframe um pouco. Então você pode ver que eu simplesmente continuei mais uma vez e criá-los ainda com algumas bordas ásperas, mas isso não importa porque afinal, esse é o wireframe. E só precisamos fazer referência a isso quando começamos a projetar, apenas para nos lembrarmos de como as coisas funcionavam e como imaginávamos isso. Então, mais uma vez, não considere esse wireframe como a decisão final de design. Será neste caso porque, como eu disse, já projetei isso porque ficaremos aqui por, sei lá, semanas para eu projetar isso. Mas quando você está criando seu próprio projeto, você sempre pode mudar isso. Isso é apenas para algumas ideias básicas. E você verá que ainda mudaremos alguns layouts aqui e ali neste wireframe, embora eu já tenha criado esse design antes. Mas isso não importa. Ainda vamos seguir em frente e fazer isso. Deixe-me mover essa imagem porque é uma imagem aqui. Porque vou pressionar a no meu teclado e criar algo como 1920 por 1080. Deixe-me chamar isso de humor. Quadro de humor. Aí está. Eu já tenho esse logotipo, que você receberá neste arquivo mais uma vez, porque, como criativo, você o receberá quando chegar ao curso e quando realmente começar a trabalhar comigo, posicione-o aproximadamente no centro, em algum lugar por aqui. Acho que vai funcionar muito bem. E, como eu disse, isso existe apenas para nos ajudar a navegar um pouco mais. Então você verá que essas fontes ausentes ficaram pretas porque esse logotipo tem essa fonte dentro, mas não se preocupe com isso. Não vamos instalá-lo apenas para que possamos ter uma fonte. Então, vamos criar um retângulo e deixar eu realmente usar uma grade de repetição aqui. Então, algo assim. E vamos expandi-lo um pouco. E vamos desagrupar a grade. E o que eu posso fazer é talvez estender isso um toque, talvez estender isso. Um layout de toque aqui realmente não importa, porque eu só quero poder arrastar e soltar algumas imagens rápidas para dentro. Deixe-me colocar um aqui também. Vamos ampliar isso. Analytics deve duplicar esse e posicioná-lo aproximadamente por aqui. Aí vamos nós. Agora que temos esse layout, o que posso fazer é aumentá-lo com apenas um toque. Mais uma vez, você pode explorar com as cores. Basta consultar esta seção sobre painéis de humor. Não vou me preocupar muito porque, como eu disse, já tenho um design preparado. Eu só queria mostrar como eu faria isso se tivesse que criá-lo do zero mais uma vez. Então, o que você pode fazer é criar esses quadros de humor da maneira que quiser. Mas não vamos, como já disse, não vamos lidar com muitos detalhes desnecessariamente. Algo parecido com isso. Acho que vai funcionar muito bem. Vamos nos livrar dos analistas de fronteira, dar a eles uma cor cinza claro para que possamos ver onde podemos colocar nossas imagens. E para imagens, podemos ir ao Dribbble para nos inspirar. Na verdade, os analistas fazem isso antes de passarmos para o carro, uau, talvez algo assim funcione bem. Lembre-se de que nosso cliente realmente não gosta de layouts escuros. Então, eles gostam desses layouts mais leves. E talvez possamos usar algo assim. Talvez, não sei, você possa navegar e ver o que funciona. Não sei, talvez algo assim. Esses cartões parecem lindos. Então, o que podemos fazer nesse caso é porque eu gosto desses cartões. O que eu posso fazer é ter uma ferramenta para uma captura de tela e vou capturar a região. E talvez eu não saiba nada por aqui. Realmente não importa, porque eu só queria usar essa imagem como inspiração. Não vamos necessariamente copiar nada desse design, como você verá quando realmente começarmos a projetar. Mas vamos realmente criar outro aqui. E eu estou usando algo chamado green shot. Você pode usar o que quiser. Na verdade, não, vamos, vamos fechar isso. E eu vou realmente capturar essa região. Porque acho que algo assim pode funcionar um pouco melhor para o nosso design. Vamos fechar isso. E talvez eu goste dessa área com o texto dentro. Então, vamos capturar dívidas. Aí está, porque esse é um layout meio agradável e elegante. E talvez esse cartão com o lado atual. Mais uma vez, você pode usar o layout que quiser para o seu projeto e o que o inspira para este projeto. Então, talvez algo assim, salvo diretamente. E vamos ver, talvez possamos usar a partir daqui e nada, na verdade. Então, vamos encerrar o dia com o drible. E vamos capturar o descarte porque eles acham que realmente vamos usar nosso layout dessa forma. Assim, posso arrastá-lo e salvá-lo diretamente daqui. Aí está. E o que eu também gosto é descartar aqui. Então você pode ver como isso é simples. Estou apenas dando uma volta e capturando o que eu gosto. Não vamos necessariamente usar tudo isso. Só vamos nos inspirar. Como eu disse, eu realmente não gosto disso. Acho que está muito cheio. Então, o que você pode fazer é simplesmente rolar para encontrar os detalhes que você gosta. Talvez esses cartões, e eles funcionem muito bem. Então, vamos capturar isso. Região de captura. Aí vamos nós. Então, algo assim porque ainda queremos que os botões estejam lá embaixo. E talvez esses layouts pareçam ótimos. Mas acho que é o suficiente por enquanto. Vamos deixar o site da Carla aberto l. Na verdade , ele começou a arrastar nossas imagens para dentro. Então você pode ver o que estou fazendo aqui. Estou apenas posicionando-os para a esquerda, para direita e para o centro onde eu puder, basicamente. Então, vamos fazer algo assim, talvez aqui em cima. E então posicione isso aqui. Aí está. Então, talvez eu possa empurrá-lo aqui porque é um pouco mais largo. Para este cartão, talvez eu possa usar esse layout e esteja interessado nesse layout inferior com o preço e talvez os botões. E então vamos ver, talvez possamos posicionar isso de forma aproximada por aqui e talvez até ampliar um pouco. Então, podemos recortar essa imagem, talvez aqui, porque, mais uma vez, estou interessado nos cartões, não necessariamente no layout do painel em si. E mais uma vez, estou usando isso apenas para uma referência rápida. Aqui podemos usar kill this porque eu me preocupei com essa cor preta no fundo. Aumente isso com apenas um toque. Lá vamos nós, só para que possamos ver um botão e um carro. O que posso fazer aqui é arrastar isso, o que é pelo meu preço. E talvez eu possa dar uma olhada mais ou menos aqui só para saber que essa é aquela seção. Mais uma vez, podemos recriar isso e movê-lo aqui para o lado, mas eu realmente não me importo muito com isso neste momento. Eu só quero me inspirar com esses designs. Aí vamos nós. Então, eu gosto desses com as cartas. E eu não sei, talvez mais uma vez , talvez possamos voltar para o carro. Bem, vamos ver. Vamos voltar para a página inicial e ver o que temos aqui. Aí está. Eu gosto dessas seções, então vamos destacá-las. É a região de captura. Derek, vá salvar diretamente e deixe-me voltar para x D e arrastá-los e soltá-los dentro. Aí vamos nós. Então, o que eu posso fazer é talvez até mesmo escalá-los porque é um fundo branco. Então, vamos fazer isso. Algo parecido com isso. Aí vamos nós. Aí está. Esse é o nosso quadro de humor. Mais uma vez, você pode usar o que quiser. Você pode fazer isso de maneiras diferentes, mas acho que será por enquanto. Mais uma vez, são apenas fragmentos aqui e ali, só para nos inspirar. Acho que isso é suficiente para este projeto porque já temos nosso fluxo de usuários. Temos um mapa do site e uma arquitetura de conteúdo. Já criamos nossos wireframes de papel. Agora temos nossos painéis de humor. Sabemos quais cores e estilos nosso cliente realmente gosta. Então, não gostei muito, mais uma vez, desses sites obscuros. Eles gostam de sites mais leves e gostam de sites com cor azul, como sites esculpidos, que é este aqui. Eles são como esses cartões, layout , design e estilo minimalistas. Então eu acho que estamos prontos para ir. No próximo vídeo, passaremos ao design. E, na verdade, vamos começar a criar alguns aeroportos e começar a definir alguns elementos, como grades. Então eu vou te ver lá. 135. Grelha, tipografia e cores: Agora vamos começar com o design e a primeira coisa que vamos fazer é voltar para o Adobe XD e começar com alguns aeroportos. Então aqui estou em nosso arquivo e vamos fazer um pouco de zoom, algo assim, e pressionar a no meu teclado. E deixe-me criar um aeroporto. Realmente não importa qual. Então, vamos usar 1920 por 1080, eu posso salvar rapidamente esse design. O que vou fazer é renomeá-lo para página inicial. Então x D vai latir de vez em quando. Então, tenha paciência comigo neste caso. Então, a página inicial está aí. O que eu vou fazer, na verdade, é mudar o tamanho. Então aqui vou eu com 14, 40. E por que estou fazendo isso? Porque no Webflow, esse é o ponto de partida e natural deles , porque no Webflow você começa do tamanho da área de trabalho e está projetando para baixo. Então você está migrando do desktop para o tablet e para o celular. Ou se você quiser criar pontos de interrupção ainda maiores, que são basicamente esses tamanhos de tela, você começará com esse tipo de tamanho e depois subirá, como, sei lá, 1619220003000 e assim por diante e assim por diante. Mas neste caso, vamos usar apenas 14, 40 porque é isso que eles vão nos dar lá. Em seguida, teremos um layout de 12 colunas. E vamos ver aqui que o que podemos fazer é talvez usar 39 para a largura. Aí vamos nós. E vamos usar 6044 larguras de coluna. E o que eu pretendo aqui é ter um para um para minhas margens esquerda e direita. Vamos ver. Então, um a um. Eu posso fazer isso? Não, vamos tentar de novo. Um para um se tornou uma célula para que você possa ver o que estou realmente fazendo. Então, estou apenas tentando fazer com que o XD trabalhe comigo aqui. Então, vamos com 39 aqui. Vamos com 61 aqui, 64 talvez. Então, um a um. Aí está. Então 386051 para um. E o que eu queria fazer aqui é obter exatamente o mesmo layout aqui no lado esquerdo e direito. Então, quando eu desenho uma caixa dentro das minhas colunas dessa forma, você pode ver que é 11 98 e não se preocupe, porque XD está um pouco cheio de bugs com esses layouts. Mas teremos um layout de 12 colunas com a largura máxima de 1.200 pixels dentro do Webflow. Então, vamos nos livrar desse. Então, deixe-me voltar às minhas colunas e diminuir o layout e o ec2, algo como cinco, talvez. Vamos ver algo assim. Aí está. Então vocês podem ver o que estou fazendo um pouco melhor. O que eu também vou fazer talvez seja começar com alguma topografia. Então, vamos fazer isso. Vamos pressionar T no teclado digitando. Vamos ver o título, o título um. E eu vou escolher Poppins aqui mesmo, o que é ótimo. Vamos ver, talvez eu possa usar 64, 64 parafusos. Acho que vai funcionar muito bem. E vamos usar, sei lá, talvez 86 para a altura da linha. Aí vamos nós. Então, o que estou fazendo aqui é tentar determinar minha escala de tipo. Então, normalmente, o que funciona melhor é usar incrementos de oito. Então, neste caso, temos o título um, que é 64. Então, vamos duplicar isso. O que vai acontecer agora está indo para a rubrica dois, que será 32. Talvez. Aí está. Acho que vai funcionar muito bem. E vamos ver. O que podemos fazer a seguir é talvez poder elevá-lo para 53, algo assim. Acho que vai funcionar muito bem. Ok. E o que podemos fazer é pressionar Control D mais uma vez digitando o título três. E para o título três, o que podemos fazer é escolher 24. Então você pode ver o que estou fazendo aqui. 24, 30 a 64, talvez você possa usar 40 em algum lugar, talvez 48, talvez 56. Mas basicamente passe para incrementos de oito. É uma espécie de pequeno truque agradável. Então, vamos com 40 aqui também. E somos 24, 30, 32, somos 64. Então esse é o nosso título três. E no Webflow existe algo chamado textblock. E, em geral, em web design, esses são apenas alguns textos básicos que você vai usar quando começar a escrever. Então é isso que vamos fazer aqui. Então, vamos usar o bloco de texto. Aí está. E para o bloco de texto, talvez possamos escolher algo um pouco diferente. Então, vamos com, sei lá, talvez 20. Aí está. Em vez de ousado, vamos usar o normal. Eu acho que isso funciona muito bem. E vamos com controle e D Mais uma vez. Vamos digitar um parágrafo. Para um parágrafo, talvez possamos usar 16. E para os 16, vamos ver, talvez 26 funcionem aqui. Então 26, aí está. Então esse é o nosso parágrafo. E, finalmente, teremos mais um texto chamado rótulo. Deixe-me mostrar para onde isso vai acontecer. Então, se eu ampliar aqui nesta página, então esta é a página de detalhes do carro. Quando você clica em um desses cartões, em qualquer uma dessas páginas. Então, aqui ou aqui, ou mesmo aqui, você acessará esta página e, em seguida, essa etiqueta virá logo acima da etiqueta com o nome mostrará o tipo de carro. Então, se você se lembra, eles estão vendendo SUVs, eles estão vendendo essas limusines, eles estão vendendo sedans. Eles estão vendendo supercarros. Basicamente, não precisaríamos dividir esses carros em três categorias apenas para mostrar que tipo de carro é esse, e é para isso que vamos usar o texto do rótulo. Então, se eu voltar para minha gravadora aqui, o que vamos fazer com a etiqueta é ficar ainda menor e não precisaremos seguir necessariamente as regras de oito aqui. Então, talvez eu possa ir com 12. Aí está. Podemos escolher o normal e talvez 19 aqui. Então, vamos ver. Na verdade, esse é o espaçamento entre linhas, que é basicamente o espaçamento entre suas duas linhas. Então, se eu copiar esse texto e posicioná-lo para baixo e depois para baixo, o espaçamento entre cada um deles é 12. Então é isso que estamos tentando alcançar aqui, porque teremos que colocar esses valores posteriormente no Webflow. Então, ele sabe quando começa a escalar o que fazer e para onde ir a partir daqui. Então, lá vamos nós. Agora concluímos isso. O que podemos fazer talvez seja brincar com algumas cores. Então, vamos esconder o layout por enquanto. O que eu posso fazer é simplesmente desenhar um retângulo e me deixar pintá-lo de cinza, talvez algo assim. Então, o que eu faria é usar a cor do corpo como plano de fundo. Então, se você se lembra, o site do carro, uau , não tinha um fundo totalmente branco, mas um pouco de fundo cinza. O que eu posso fazer talvez seja usar uma cor como essa. Deixe-me me esconder para que você possa ver um pouco melhor, que é F6, F5, F5. E você pode ver que está um pouco esbranquiçado. E posso adicioná-lo aqui às minhas amostras de cores. Vamos movê-lo um pouco para baixo e chamá-lo de cor do corpo. Porque em HTML, o elemento principal em que você coloca seus elementos em uma página é chamado de corpo. E esse corpo é para onde tudo vai e é isso que vamos colorir. Então, basicamente, em softwares de design como XD ou Figma, a cor do seu quadro de arte ou da sua moldura será a cor do corpo quando você realmente o mover para HTML, porque essa é a tag HTML, que é a tag principal no desenvolvimento. Não se preocupe com isso. Não escreveremos nenhum código. Estou apenas tentando explicar a você como pensar sobre essas coisas quando você começa a projetar e depois entra no desenvolvimento. Então, essa será a cor do nosso corpo. seguir, precisaremos algum tipo de cor cinza claro, me diga , posicione esta aqui para que você possa ver D2, D2, D2. Aí vamos nós. E deixe-me adicioná-lo como um cinza claro, assim. E você pode ver que ainda estou usando traços para distinguir o que estou tentando criar aqui. Então, vamos posicioná-lo aqui. E o que precisamos agora é cor cinza mais escura para distingui-la um pouco melhor. Algo assim geralmente funciona bem. Então, vamos adicioná-lo aqui. Vamos chamá-lo de cinza escuro, algo assim. E, finalmente, o que precisaremos é distinguir entre H1 e H2. O H1 geralmente está no topo de cada página. E então, ao descer a página, você terá H2, H3 e blocos de texto e parágrafos. E você terá que dizer em seu SEO, você terá que explicar isso em sua estrutura. Então, quando você começar a desenvolver isso no Webflow, mais tarde, você terá que começar a usar esses nomes. Porque, mais tarde, quando o Google indexa seu site, ele precisa entender que tipo de texto ele é, onde está localizado na página e quão importante é. E sabe o quanto é importante porque você mandou, porque você usa esses H1, H2, H3 P é para o bloco de texto do parágrafo e assim por diante. Você verá isso no Webflow. Mas eu só estou tentando explicar isso para você aqui. Enquanto estamos no XD, quando você começa a criar, precisa pensar nessas coisas o tempo todo. Então, vamos agora passar para essa cor, como eu disse, para o H2, talvez até h3. Então, vamos copiar essa cor e eu vou ver em apenas um segundo como obtive essas cores. Então, deixe-me adicioná-lo aqui. Então, vamos com H3 e talvez com o parágrafo. Porque ainda precisamos que esses parágrafos sejam legíveis porque são bem pequenos. Você pode vê-los aqui. Então, vamos adicionar isso. Então, este vai ter uma cor de título escura porque é um H1. Vamos ver. Oh dois, talvez possamos usar, vamos ver. Então, 2122 para quatro. O que foi isso? Então, talvez possamos usar a mesma cor. Então, este para cabelos escuros e para os três anos de idade, talvez possamos mudá-lo para algo como, talvez, resultado em cinza escuro. Vamos ver. Então, H três, deixe-me mudar para essa cor que é, eu acho, cinza escuro. Agora. Essa. É isso? Não. Sim, vamos usá-lo para isso. Então, essa será nossa cor h3 para nosso bloco de texto. Vamos ver o que podemos fazer. Podemos usar esse. Então, cinza escuro para o parágrafo. Já explicamos que vamos usar esse apenas para diferenciá-lo um pouco. E para o rótulo, o que podemos usar sou eu com esse cinza claro ou até mesmo com a cor do corpo. Deixe-me verificar no meu design original o que eu usei para D a E, três zeros. Deixe-me ver qual cor está morta. Então é esse. Então, como o texto rotulado é muito pequeno, eu ainda uso este. E agora que fizemos, o que podemos fazer é ir em frente e adicioná-los. Então, vou selecionar meu rótulo. E vamos ver, clique em Estilos de Caracteres. Vou chamar esse rótulo. Então eu vou para o parágrafo, digite o parágrafo. Em seguida, vá para o bloco de texto. Aí está. E esse será nosso h3h3. Esse será o nosso H2. E, finalmente, esse será o nosso H1. Aí está. Agora que temos tudo isso, deixe-me explicar rapidamente como chego a essas cores. Então, geralmente, sempre que estou projetando, o que quer que eu esteja projetando, eu sempre tento ter vários tons de cinza. As cores cinza mais escuras geralmente são para maior topografia da página. Então, para H1 ou H2, você pode ficar um pouco mais leve nessa escuridão. Nunca usei a cor preta completa porque é muito difícil de ler para algumas pessoas. Assim, você sempre pode combiná-lo como um tom de dois, de cor completamente preta, em cinza. E então eu sempre gosto de criar um oposto completo. Cores semelhantes, digamos, cinza muito claro. Então, sempre um pouco esbranquiçado. Você pode usar branco sempre, mas tente se certificar de que você tem uma cor esbranquiçada. Como neste caso, temos essa cor corporal que usaremos para nosso corpo mais tarde. Mas esse é o ponto principal aqui em termos de uma cor azul. Mas você pode ver aqui que usamos apenas a cor que encontramos no site deles. Ajuste-o apenas para tocar para que não seja completamente o mesmo, porque você nunca quer usar exatamente a mesma cor outra pessoa ou apenas um pouco dessa cor, então temos a cor do mouse, que é igual a essa cor, então apenas azul, mas em uma perspectiva diferente. E em termos de tamanhos para as fontes. Como eu disse, gosto de usar essa escala de oito pixels para minha tipografia. Assim, você pode começar com oito, que geralmente são bem pequenos, mas bons o suficiente para, digamos, aplicativos móveis. Então você pode ir com 16, 24, 30 a 40, 48, 56, o que for. Assim, você pode ir até o Latino 90 ou qualquer tipo de tamanho que você queira fazer. Mas no nosso caso, 64 é onde vamos parar para o H1. E essa é basicamente nossa escala de tipos. Então, o que vou fazer agora é ir em frente e me livrar deles. Porque, mais uma vez, esta é nossa página inicial e a trataremos assim. Então, vamos voltar à nossa grade. E nesses casos, deixe-me voltar às minhas colunas e reduzi-las para zero. Para a opacidade. Vamos reduzir isso para zero, ou talvez 2%, só para que possamos ver o que estamos fazendo aqui. Então, vamos voltar aqui para 2%, e vamos voltar aqui também para apresentar, só para não nos distrair quando começarmos a projetar. E, na verdade, vamos usá-los. E, finalmente, para o final deste vídeo, deixe-me estender isso porque é isso que vamos usar no próximo vídeo. Finalmente vamos abordar esta página inicial. E, na verdade, vou começar a definir alguns elementos e mostrar como criei meu design original. Então, vamos começar. 136. Design da página inicial: Vamos continuar de onde paramos no vídeo anterior e começar a trabalhar em nossa página inicial. Então, aqui vou colar meu logotipo aqui mesmo. E deixe-me posicioná-lo de forma que fique alinhado aqui. Em seguida, vou usar meu atalho de ferramenta de retângulo é r e vou dar a ele uma altura de 80, por exemplo, porque você sempre quer dar alturas aos seus elementos porque será muito mais fácil de definir eles mais tarde no Webflow. Posicione-o aqui e deixe-me me livrar da fronteira. E esses serão meus Nav e B G, e você terá que nomear suas camadas. É muito importante. Vamos pressionar Control K para transformar esse logotipo em um componente. E você pode ver que podemos usá-lo diretamente aqui. E em termos de convenções de nomenclatura, você precisa nomear suas camadas mais tarde, porque mais tarde no Webflow, isso será muito importante porque usaremos todas essas classes. Então, se você não nomear suas camadas, seus designs vão desmoronar. Então comece a nomear suas camadas o mais rápido possível. Você facilitará sua vida ao acessar o Webflow mais tarde. Então, vamos digitar dívida e navegar. Então, vamos usar carros. E para isso, o que podemos usar talvez seja, vamos ver, talvez o bloco de texto. Sim, isso funciona muito bem. E se você se lembrar que daqui só temos carros é entrar em contato conosco. Então, apenas três deles. Então, o que podemos fazer é colocar isso em um grupo e chamá-lo de itens de navegação, assim. E vamos ver, talvez a distância entre todos esses elementos possa ser 24. Então, vamos ativar a pilha e duplicá-la mais duas vezes. Vamos voltar e voltar para 24, assim. E vamos dar a isso um empréstimo e dar esse nome de carros. Desculpe, não, não. Entre em contato conosco. Aí está. E, finalmente, deixe-me movê-los aqui e posicioná-los no centro desse elemento. Aí está. E para a página inicial, vamos mudar essa cor para a cor do corpo. E você pode ver imediatamente o que aconteceu. Então, por aqui, vamos usar também a cor do corpo. Aí está. Então, parece meio transparente. Então, o que vamos fazer é transformar cada um deles em seus próprios componentes. Então aperte Control K, Control K, Control K. Este vai ser carros. Este vai ser um empréstimo, e este vai ser Fale Conosco. Aí está. E por que estou fazendo isso simplesmente porque quero criar estados de terror. Então, para fazer isso, clique aqui para criar uma flor. Harvard. Aí está . Para passar o mouse. Tudo o que eu quero fazer é simplesmente transformar isso em uma cor flutuante. Aí está. Porque se você se lembra, essa é a nossa cor flutuante. Portanto, tudo deve estar na cor do mouse quando estiver passando o mouse. Então, este, vamos transformar isso em um estado de horror. Vamos mudar a cor. Vamos dar esse estado de horror também. Vamos mudar a cor. Vamos trazer isso de volta. Vamos trazer isso de volta e trazê-lo de volta ao controle de estado padrão, entrar para pré-visualizar e você pode ver como isso fica. Então, estamos começando a entender o layout e a ideia que queremos criar. E acho que isso vai funcionar muito bem. Então, vamos agora seguir em frente e agrupá-los. Então, temos os itens de navegação do logotipo e f, b, g. Então, vamos controlar G para agrupar isso em um grupo, chame-o de nav. Aí está. E como reutilizaremos essa navegação em todo o nosso design, e agora, como já temos esses itens, o que realmente quero fazer é selecionar meus elementos mais uma vez e adicionar um novo estado, que será selecionado. Estado. Na verdade, copie esse texto para que eu não precise escrever mais uma vez. Então, selecionar o estado e desmarcar o estado nos mostrará que estamos nessa página. Então, vamos usar o azul principal para esse azul principal e o loop principal. Então, o que acontecerá é quando o usuário clicar e visitar essa página e, enquanto estiver nessa página, você verá a cor visitada. Então, vamos pressionar Control K para transformar nossa navegação em um componente, como eu disse, porque começaremos a usá-la mais tarde. Então, vamos usar T para nossa ferramenta de texto. E aqui digite seu parceiro para seu parceiro, para carros exclusivos. E esses textos serão H1. Vamos dividi-lo em duas linhas, algo assim. Vamos levá-lo até aqui. Controle D para duplicar isso, deixe-me realmente selecionar o texto do meu InDesign original. E vamos transformar isso em bloco de texto e colar meu texto M. Então, carros usados certificados com baixa quilometragem e histórico documentado é o que falamos com nossos clientes. E eles estão lhe dando carros de baixa quilometragem porque os estão retirando dessas concessionárias oficiais na Alemanha. E a história documentada porque , obviamente, os carros são retirados diretamente dos revendedores, então é muito mais simples rastreá-los dessa forma. Então, o que você faz é duplicar isso mais uma vez. E vou usar algo como explorar nossos carros. E esse será o texto do nosso botão. E em termos do botão, vamos usar algo assim. Talvez clique com o botão direito do mouse em enviar para trás e traga essa cena aqui. Vou centralizá-lo aqui. Você pode ver isso. Então, vamos centralizar isso aqui. E vamos dar a ela uma cor azul principal e nos livrar da borda. Selecione meu texto e deixe-o branco. E para isso, o que podemos fazer é talvez usar oito para o raio da esquina aqui. Algo assim para que possamos obter aquela aparência arredondada. Então, vamos ver, talvez eu possa cutucar um pouco para ouvir. Posicione isso no centro. E mais uma vez, dê nomes a eles. Então, este será o nosso BTN BG, então o fundo do botão, e esse será o nosso texto. Então, vamos dar a isso o nome de main, btn. Então, botão principal. E eu vou imediatamente transformar isso em um componente pressionando a tecla Control. Clique em Mais e passe o mouse, chame isso de pairar. Dentro do nosso estado de Horace. Tudo o que eu quero fazer é mudar isso para uma cor flutuante. Então feche isso, volte ao estado padrão e clique em pré-visualizar. E quando eu pré-visualizo, você pode ver como isso fica. Agora, passamos o mouse sobre nossos itens de navegação e também sobre nosso botão, que está funcionando muito bem. O que eu quero fazer é obter algum espaçamento aqui. Então, vamos virar isso, movê-los para a esquerda e agrupá-los e chamá-lo, por exemplo, herói. Conteúdo. Assim, coloque isso em uma pilha e dê a ele uma distância de 32. Portanto, as pilhas são úteis, como você pode ver aqui. Para você também. Dê um espaçamento rápido para organizar seu conteúdo um pouco melhor e, em geral, para melhorar sua velocidade ao começar a trabalhar com ele. Então, vamos ver o que podemos fazer aqui. Talvez eu possa usar a imagem. Então, deixe-me ver o que eu posso fazer. Eu tenho minha imagem de herói preparada aqui, que é mais uma vez da Envato elements. Deixe-me usá-lo aproximadamente por aqui. Talvez. Algo assim vai funcionar muito bem. Eu acho. O que eu preciso neste caso é usar algum tipo de círculo para que ele saia do círculo. Porque se você se lembrar daqui, teremos esses dois círculos ao redor. E talvez fique bem se o carro estiver vindo desse círculo de algum tipo ou algo assim, conheça. Então, deixe-me realmente fazer isso muito rápido. Então, o que eu posso fazer nesse caso é usar meu círculo, algo assim. E vamos dar algumas dimensões aproximadas, como 38 por 388. Então, vai ser um círculo. Posicione-o aqui, depois empurre-o para segundo plano, envie para trás e posicione meu carro ou aproximadamente por aqui. Isso vai ser, vamos ver como podemos chamá-lo. Talvez um círculo de imagem de herói, algo assim. E traga um pouco de volta nossa imagem de herói. Controle um D, vamos chamar essa máscara de imagem de herói da mesquita. Posicione-o em cima e, em seguida, simplesmente pressione Shift Control, Shift Command M. Vamos chamar esse herói de IMG, então imagem de herói. E deixe-me estender essa máscara para este site, ou talvez até para este lado, algo assim. Ele vai trabalhar muito bem. Tudo o que eu quero fazer é ter meu círculo à vista. Talvez eu possa ampliá-lo para este lado. Vamos ver o que podemos fazer aqui. Então, acho que algo assim vai funcionar bem. E aí está. Então, talvez assim, você também possa usar um retângulo. Você pode fazer o que quiser. Mas, neste caso, vou usar meu círculo. Não, melhor ainda, vamos usar um retângulo. Então, máscara não grupal. Vamos nos livrar desse. E vamos usar um retângulo porque temos uma grade. E vai fazer um pouco mais de sentido para nós realmente usarmos o retângulo nesse caso, desse jeito. E vamos chamá-lo de máscara e controle de turno. Mude o Comando M, e vamos chamá-lo de imagem de herói. E acho que estamos bem lá. Tudo o que eu quero fazer é simplesmente selecionar meu círculo de fundo, me livrar da minha borda. Então, parece mais ou menos assim. E estou muito feliz com a aparência disso. Então, vamos ver. Estamos lá no centro, talvez estejamos mais ou menos por aqui nas bordas. E talvez mova nosso círculo um pouco para que não seja cortado pela máscara. E aí vamos nós. Agora que temos dívidas. Talvez possamos até centralizar nossa máscara, apenas uma pequena licitação para mais ou menos por aqui. E isso é importante porque você desejará que suas medições posteriores sejam exatas e precisas ao realmente migrar para o Webflow. Então, posicione isso e reduza um pouco todo o meu conteúdo. E o que eu vou fazer nesse caso é, vamos ver, eu quero usar um círculo. Então, vamos usar um círculo aqui porque vou posicioná-lo como se o criássemos aqui. Então você pode ver que teremos dois ícones e dois círculos. Então, para este top, vamos chamá-lo de Vamos ver o melhor círculo de heróis”. Círculo de ícones do herói superior ou algo parecido. E para a cor, podemos usar nosso azul principal. E eu tenho meu ícone aqui. Mais uma vez, você terá todos esses ícones já preparados. E eu os mostrarei no final da parte de design da aula. Você pode simplesmente usá-los. Talvez eu possa criar um guia de estilo aqui para que você possa simplesmente copiar e colar todos esses ícones que estou usando agora e usá-los para acompanhar. Agora que posicionamos isso, vamos aos boxes, vamos chamá-lo de herói superior, círculo. Assim. E talvez possamos empurrá-lo mais ou menos por aqui. Vamos duplicá-lo. Mova-o talvez para aqui, talvez reduza um pouco o tamanho para algo assim. Então esse vai ser o nosso fundo. Aqui embaixo, um círculo, e embaixo aqui, um círculo. Aí está. E para isso, deixe-me usar outro ícone, que estará neste. Agora vamos dar uma olhada aqui. E eu estou apenas usando um ícone de chave para mostrar a chave do carro. Você vai pegar seu carro, algo assim. E aqui estamos usando o lote para a garantia. Então, vamos transformar isso em um componente, e vamos transformar isso em componentes também. Então, no futuro, será muito mais fácil para mim criar esses guias de estilo e para vocês usá-los neste arquivo. Então, para este, o que eu posso fazer é até mesmo empurrá-lo para aqui ou talvez eu possa empurrá-lo para talvez 20, algo assim. Sim, vamos deixar isso aí. E vamos usar um pouco de cinza escuro, talvez algo assim. E eu acho que isso funciona muito bem. Então, finalmente, o que posso fazer é agrupar tudo isso e chamá-lo de imagem de herói, algo assim. E a posição em que esses dois estão aproximadamente por aqui. Então, o que faremos talvez seja mover esse conteúdo para baixo, digamos, 100 pixels daqui, o que eu acho que funcionará muito bem. Aí vamos nós. E agora vamos realmente agrupá-los e chamar isso de Herói. Aí está. Vamos fazer outro. Antes de prosseguirmos com uma pequena pausa, vamos criar a próxima seção, que será quem somos. E teremos uma imagem ao lado. Teremos linhas de texto e quem somos no topo. Então, como usamos H1 aqui, será natural usarmos H2 aqui na parte inferior. Então, primeiro de tudo, vamos começar com nossa imagem. Então, o que vou fazer é criar um retângulo rápido, algo assim. E vamos ver, talvez possamos usar 246 colunas como essa. E quanto às dimensões, vamos usar, sei lá, talvez cinco, três ou três de altura. E vamos ver, talvez você possa apimentar um pouco para poder abrir esse painel aqui. E isso vai te dar um raio de canto para cada canto individual. O que vou fazer é arredondar esse canto aqui para talvez 24 pixels, algo assim. Livre-se da fronteira porque eu não preciso dela. E vamos dar um nome a ele. Talvez seja quem somos, quem somos ou algo parecido. Deixe-me fazer a imagem de quem somos. Aí vamos nós. Então é aquele cara da Envato Elements, se você se lembra. E talvez possamos escalá-lo com apenas um toque, posicioná-los no centro, talvez mais ou menos por aqui. Talvez um pouco mais. E eu gosto de como isso parece. Eu acho que está tudo bem. E agora vamos adicionar esse texto ao lado. Então, como eu disse, vamos usar a idade de três anos. Então, vamos digitar um carro exclusivo de aranha, espécie de H2. Aí está. E vamos alinhá-lo para este caso. Agora vamos posicioná-lo talvez por aqui, Controle D. E o que eu posso fazer lá talvez seja criar algum tipo de slogan ou algo parecido. Então, vamos usar o textblock para isso. E vamos colar alguns textos de paixão e dedicação. Você pode usar algo assim ou algo diferente. Só para dar aos seus parágrafos um pouco mais de vida, um pouco mais de significado, um pouco mais de estilo. Então você não está usando apenas alguns textos em branco que você encontra on-line. Este último, como você viu, eu o transformei em um parágrafo assim e vou colar em um parágrafo. Então, é só sobre eles quando começaram, quando criaram seus negócios, quantos clientes tinham. Talvez alguns fatos e números importantes , como em quantos locais eles estão lidando e talvez onde a sede está localizada, quantos funcionários eles têm? Então, coisas assim. Vai funcionar muito bem na seção Sobre nós. Finalmente, vamos posicionar isso onde eles deveriam estar, eles deveriam estar no topo. Isso deveria estar aqui. Vamos agrupá-los. Então, Controle ou Comando G, posicionando aqui. E vamos chamá-lo de algo como, vamos ver, textContent é apenas texto. E vamos dar a ela uma pilha de 24, assim. E vamos agrupar esses dois. Mas antes disso, basta posicionar isso no centro. Acho que vai funcionar muito bem. Então, vamos ver. Sim. E agrupe esses Control G e digite algo como quem somos. Aí vamos nós. Antes de prosseguirmos, o que posso fazer é simplesmente movê-lo porque tínhamos 100 aqui. Quero manter o espaçamento consistente em todo o meu design e construção do Webflow. Então, vamos usar, digamos, 101, 50 ou 200, dependendo da seção em questão. Então, aqui o que podemos fazer é ter um e vinte, talvez possamos reduzi-lo até 200 porque acho que temos espaço suficiente. Aí está. Se eu pressionar Control ou Command Enter para entrar no modo de visualização, temos nosso botão que está funcionando muito bem. Então temos carros, empréstimos, entre em contato conosco. Temos nossa bela seção de heróis com essa imagem meio que vinda desse círculo. E se você tivesse algumas cores adicionais, como talvez cores de destaque, você pode transformar um círculo nessa cor de destaque para dar um pouco mais de vida. Então temos esta seção, talvez seja Marco, nosso presidente principal dentro da empresa. Talvez seja ele quem possa nos ajudar a comprar um carro ou qualquer outra coisa. E então temos uma sinopse sobre a empresa. Então, na próxima seção, vamos passar para isso, que são cartas para nossos carros. E será uma seção muito importante porque, como você pode ver, esses carrinhos se repetirão em todo o nosso design. Nos vemos no próximo vídeo quando criaremos exatamente isso. 137. Parte 2 do projeto da página inicial: Agora vamos continuar de onde paramos e criar essas seções de cartões. Então, o que eu posso fazer é talvez usar outra idade de três anos e colar algumas são seleções exclusivas, talvez tenha certeza de que está no centro, assim. E talvez eu possa afastá-lo 200 vezes desta seção também, algo assim. Então você pode ver que estamos posicionando isso lá. Então, o que eu posso fazer é talvez usar minha grade para criar minhas três cartas. Então, vamos primeiro criar um e depois vamos criar outros. Então, primeiro de tudo , para o nosso cartão, o que usaremos é, vamos ver. Talvez possamos dar um nome a ele imediatamente e chamá-lo de talvez estoque. Item B, G, ou você pode dar a ele o nome do item do carro BG ou qualquer outra coisa. Mas como esse é o estoque deles e o que eles têm em estoque, usaremos exatamente isso. Então, o que podemos fazer agora é ver, talvez eu possa usar uma cor de borda aqui imediatamente. Então, 2D, talvez este aqui, aplicou a cor da borda. Vamos usar apenas um. Então, leve a cor da borda, porque a usaremos para fazer o efeito de passar o mouse um pouco mais tarde. Então, o que eu posso fazer aqui é talvez estender isso. Vamos ver. Talvez eu possa até mesmo arredondar as esquinas para oito para ter aquela aparência e sensação consistentes. E primeiro de tudo, vou me livrar da borda aqui, mas vou diminuir a opacidade, assim. E então o que eu posso fazer é pressionar Control D e usar isso como minha imagem. Então, vamos ver. Talvez eu possa dizer que ocorreu porque esse será o nome do nosso carro ou da imagem do carro. Aí está. Vamos ver. Em primeiro lugar, para o tamanho do cartão, talvez você possa usar uma altura de 450 ou algo parecido. Então, vamos optar por 50 neste caso. E para a imagem do meu carro, eu posso escolher algo como, vamos ver 250. Então essa é a imagem do meu cartão. Mas quanto à altura, aí está. Vou me livrar de alguns desses cantos arredondados na parte inferior. Então, se você passar o mouse, será o canto superior esquerdo, o canto superior direito, canto inferior direito que não queremos e o canto inferior esquerdo que também não queremos. Então, o que eu posso fazer é pular imediatamente e adicionar minha imagem. Então, deixe-me ir ao furacão Lamborghini. E mais uma vez, você pode ver como eles se parecem. E vou adicionar o número três para tudo isso porque ele mostra apenas o carro em três quartos. Por isso, fornece detalhes suficientes para que você saiba o que é. Então, basta arrastá-lo e soltá-lo dentro do ego deles. E o que ele pode fazer aqui é começar com algumas informações. Então, o que vou fazer aqui é digitar alarme de dor ou Heaney, que se repete? Mas em vez de 32, vamos usar algo menor, como 24. Aí está, verifique se está alinhado à esquerda. Médico adorável, mais ou menos por aqui. E vamos ver o espaçamento, o que podemos fazer é talvez usar 24 ao redor. Então 12, 123-412-1234. E aí está. Esse será o nosso espaçamento. E então talvez eu possa duplicar isso mais uma vez, controlar D. E vamos ver aonde eu possa ir, talvez com 16 desta vez. Então 20123416, esse será o nosso preço. Então, deixe-me pegar o preço do nosso design original e vamos transformá-lo em azul. E, finalmente, daremos algumas informações na parte inferior. E usaremos essas informações para basicamente dizer ao nosso público em que ano o carro está, que tipo de quilometragem o carro tem ou algo parecido? Apenas algumas informações visíveis antes de passarem para as informações principais. Então, vamos duplicar isso e dar a ele o bloco de texto e vamos dar 2021, talvez a idade da cor. E vamos posicionar isso em um grupo de controle G, como você pode ver aqui. E talvez possamos chamar isso de algo como ano, quilômetros. Você pode ver. E vamos fazer uma pilha e duplicar nossa camada de texto. E vamos posicionar isso para ser 24. E isso pode ser quantos quilômetros o carro tem? Você pode usar a quilometragem. Estou usando quilômetros porque é mais fácil para mim. Mas o que quer que funcione para você, você também pode fazer isso. Então, vamos colocar isso logo abaixo da nossa imagem. Vamos ver aqui o que temos. Temos 16, aqui temos 16, 24. Então, é natural que saibamos 24 de baixo, eu acho. Então. Vamos imaginar isso com mais 2042 pixels. Vamos ampliar com apenas um toque e você verá por que isso é útil. Agora que temos nosso layout, o que posso fazer é agrupar esses elementos e chamá-los de cartão de carro, texto. Em seguida, agrupe tudo e chame talvez de cartão de carro ou algo parecido. E vamos duplicá-lo. Controle D. E Controle D. Deixe-me trocar rapidamente alguns desses elementos. Então aqui vou fazer meu Cadillac escalar. E então aqui vou ter meu preço. O ano será 2020. E os quilômetros serão algo parecido com isso. There Go, funciona bem. E então vamos com algo um pouco diferente. Desta vez, o carro será advogado elétrico. E vamos com a quilometragem. Quilômetros. O ano será 2020. 2 km terão que ser 6.000 e talvez até 40. Então, todos eles têm uma baixa quilometragem e vamos reduzi-los. Isso vai ficar no centro. Aí vamos nós. E vamos ver, talvez possamos usar algum espaçamento imediatamente. Então, em vez de 113, talvez possamos escolher algo bonito e redondo como 64. Então, mais uma vez, estamos mantendo esse espaçamento de oito. Eu acho que isso funciona muito bem. E o que eu vou fazer nesse caso é talvez apertar e dizer uma dessas cartas. Eu não sei. Deixe-me usá-lo. Então aperte o Controle C ou o Controle D e clique aqui mesmo. Então, deixe-me selecionar essa imagem e usar cinza claro assim. E deixe-me selecioná-lo aqui. O cartão do carro funciona muito bem. Vamos deixar isso aí porque eu vou dar nomes a esses cartões. Então isso vai ser hurrah car. Isso pode ser agravado. Veja se tem o ano, e isso pode ser lúcido, só para que eu saiba o que é tudo. E em termos de imagens, vamos voltar e simplesmente encontrar o Cadillac Escalade número três. E vamos voltar para Lucy lá. Número três, arraste e solte. E mais uma vez, você obterá essas imagens para poder brincar com elas também. Então, agora vamos transformá-los em componentes. que esse efeito de foco não funcionará muito bem aqui, Acho que esse efeito de foco não funcionará muito bem aqui, porque temos uma borda de um pixel e ela será coberta apenas pela imagem. Então, o que eu posso fazer neste caso é simplesmente reduzir a largura da imagem para talvez 372. Então, apenas dois pixels em cada lado e posicione seu centro. Faça o mesmo aqui. Então, 372, porque estou pensando em como fazer isso mais tarde no Webflow. E acho que esse tipo de abordagem funcionará muito bem porque, no estado padrão, você terá sem fronteiras. E no estado de flutuação, teremos uma borda de um pixel, C37, para garantir que esteja no centro. E mais uma vez, esse é nosso estado padrão. Então selecione o controle de furacões, K escalate a tecla Control K Lucid Air Control. E agora vamos fazê-los pairar. Selecione esse texto e selecione o estado de horror. Aí está. Selecione o estado ferroso, lindo. E em vez do estado de horror, selecione o plano de fundo e leve a opacidade da borda para 100. Faça o mesmo com este. E faça o mesmo com este. Aí está. Feche todos os seus componentes volte ao estado padrão. E acho que devemos estar prontos para ir aqui. Sim. Então, vamos fazer uma prévia rápida só para ver o que temos. Então, ainda temos todos esses elementos que projetamos no vídeo anterior, mas agora temos esse cartão. Então, quando eu passo o mouse, você pode ver como fica. Tem apenas um pequeno efeito de flutuação em nossas fronteiras. E acho que isso só aumenta um pouco essa usabilidade, porque você está mostrando aos usuários que eles realmente pairaram e podem realmente fazer algo a respeito. O que vamos fazer a seguir é usar nosso botão principal. Basta arrastá-lo e soltá-lo dentro. Vou adicionar o tipo de edição aos componentes principais. Não sei por que está trocado aqui, então vamos nos livrar desse. Alice acabou de adicionar este primeiro. Então, o que vou fazer é talvez, vamos ver, eu possa ativar uma pilha no meu botão, que ativará o emparelhamento. E eu vou me livrar da pilha porque ela ainda vai manter nosso preenchimento. E agora eu posso arrastar meu botão principal e arrastá-lo até aqui, posicioná-lo no centro. E você pode ver que agora temos esse lápis e esse diamante, o que indica que esse é o componente filho desses componentes principais. Então, em termos simples, quaisquer que sejam as mudanças que fizermos aqui, elas serão traduzidas aqui. Mas quaisquer mudanças que fizermos aqui não serão traduzidas aqui porque essa é a original. Então, nesse caso, o que eu quero fazer é mudar o texto para ver todos os carros e você pode ver como o botão responde. Selecione o texto, alterne para o estado de passar o mouse para alterá-lo aqui também. Aí está. Porque temos dois estados. Lembre-se de que se você tiver mais, terá que mudar mais. Então, aqui, quando eu passar o mouse, vai dizer “explore nossos carros”. Mas aqui, quando eu passar o mouse, ele dirá: Veja todos os carros e o tamanho vai mudar. Então. O que eu posso fazer é talvez empurrá-lo para 64 também, algo assim. Certifique-se de que esteja no centro. Aí está. E vamos chamar essa seção de seleção exclusiva ou nossa seleção. Aí vamos nós. Bom. E o próximo será o que oferecemos. Se eu te levar de volta aqui, vamos ver onde estamos com o tempo. Então, o que oferecemos, é isso que vamos projetar e fazer uma pequena pausa de vez em quando. Então, aqui vou digitar o que oferecemos. E para isso, vamos ver, vamos usar o H3 mais uma vez. Então h três, estamos no H2, desculpe, estamos em uma posição central, seu centro, e vamos dar a ela a distância de 200 mais uma vez. Então, vamos ver 213. Faça meu mais uma vez. Vamos ver 200. Seu ego e um covil. O que podemos fazer é simplesmente usar outra dessas imagens. Então, deixe-me criar isso muito rapidamente. E talvez possamos usar apenas o outro canto arredondado, como fizemos anteriormente. Então, vamos ver 246, talvez sete colunas agora, algo assim. Então 2467, termos de altura, vamos com cinco ou sete. E em termos de raio coordenado, vamos usar o raio no canto inferior esquerdo de 24. Livre-se da borda e deixe-me arrastar e soltar minha imagem para dentro, que estará nesta, de acordo com o que oferecemos. Aí está. Eu posso clicar duas vezes e talvez ampliá-lo um pouco. Mas eu não acho que seja necessário porque está mostrando a chave. E vou mover essas duas seções um pouco para baixo. Mais uma vez, estamos a 200 daqui. E aqui vamos realmente começar a usar alguns elementos. Então, vamos ver. Talvez eu possa usar esse distintivo mais uma vez. Então, um crachá de garantia como esse. E talvez eu possa pintá-lo de azul. E talvez eu possa dar a ele algumas dimensões diferentes. Então, vamos ver, talvez a direita realmente seja boa. O que vou digitar aqui é garantia estendida, porque é isso que eles estão oferecendo. E vamos usar talvez H3 para este. Porque acho que vai funcionar muito melhor do que o A12. Vamos ver a distância, talvez possamos posicioná-lo. Primeiro, selecione-os para ter certeza de que estão no centro e empurre para talvez 16, algo assim para que possamos manter nosso espaçamento e organizá-los um pouco melhor. Então, eu vou fazer é empurrá-lo até aqui, Controle G. E eu tenho a garantia de transformar isso em uma pilha. E talvez o que possamos fazer abaixo seja talvez usar texto. Então, digite T e vamos selecionar isso e colá-lo. E o que vou fazer é transformar isso em um bloco de texto. Certifique-se de que seja do lado, do lado esquerdo. Aqui, para saber a distância entre uma barragem, vamos usar s104. Então você pode ver que ainda estamos mantendo essa consistência, então algo assim. E vamos empurrar isso um pouco mais para baixo. Então, vamos solicitar uma garantia de disco mais uma vez. Então, podemos dar isso, ver como podemos estruturar isso. Podemos chamar esse ícone de garantia ou algo assim. Vamos ver o ícone ou o título. Agora vamos dar 1,2. E então, basta agrupar esses dois e chamá-los de garantia também. Vai ser muito simples para nós fazer isso. E vamos nos preocupar nomear um pouco mais tarde no Webflow. Então, o que vou fazer com eles talvez seja estruturá-los de tal forma que talvez tenhamos uma distância de 40 entre eles, algo assim. Então, isso vai acontecer até o fim. Isso vai estar no topo. Na próxima, chamaremos de manutenção. E o último chamaremos de empréstimos. E para a manutenção, deixe-me usar o ícone de manutenção para meu design original. Vou entrar aqui e posicioná-lo aqui. Certifique-se de que estou no centro do meu design porque é uma pilha. Basta clicar em excluir e ele o posicionará de volta no lugar. E como você pode ver, ainda estamos no centro com esses dois elementos. Então, se eu continuar e selecioná-los, clique aqui. Aí está. Então, deixe-me realmente copiar o texto de manutenção. Aí está. Só vamos ver. Leve isso para aqui. Ótimo, porque não viramos isso da linha central para o alinhado à esquerda. Vamos fazer isso. Vamos fazer isso por aqui. Vamos fazer isso por aqui. Vamos ver aqui estamos, aqui estamos e quem somos também. Então, ilegalmente, vamos copiar os textos de manutenção e vamos copiar. Então, vamos ver, isso também vai ser manutenção. Aí está. E isso também será um empréstimo. Então, vamos digitar alarmes. E em termos do ícone, vou copiar o ícone também e fazer a mesma coisa que fiz anteriormente. Então, entrando aqui, Controle ou o Comando V garante que esteja no centro da mistura pouco antes dos empréstimos chegarem a esse lote, remova-o e pronto. Agora temos esses dois na posição que queríamos que eles estivessem. Então, deixe-me copiar o texto do empréstimo. Aí está. E esta seção basicamente mostra aos usuários o que eles realmente oferecem. Eles oferecem garantia estendida. Então você tem essa tranquilidade adicional. Eles oferecem manutenção de acordo com seus parceiros porque eles mesmos não fornecem a manutenção. E, finalmente, eles concedem empréstimos mais uma vez por meio de seus parceiros , para que você possa fazer parceria com eles apenas para cuidar deles. Então, mais uma vez, finalmente, temos um espaçamento de 40 entre todos os nossos itens. E vamos ver, talvez possamos chamar esse grupo de controle G e chamá-lo de, digamos, oferecer informações. E certifique-se de que esses dois estejam no centro e que estamos a 64 daqui. Algo parecido. Acho que vai funcionar muito bem. E o que podemos fazer é agrupá-los e chamá-los do que oferecemos. Nossa oferta é ainda melhor. Aí está. Se fizermos uma prévia rápida, o que fizemos até agora explorar nossos carros. Temos esses três, temos esse herói, temos nesta seção Sobre, temos essas cartas com efeitos de flutuação. Também temos nosso novo botão com nosso efeito, o que oferecemos. Então, temos todos esses elementos dentro. E agora vamos ver o que vem a seguir. O próximo são os benefícios, então entre em contato conosco onde estamos. E, finalmente, o rodapé estará lá embaixo. vez, um design avançará muito mais rapidamente porque criaremos uma seção de contato conosco onde estamos, rodapé e seção de heróis, uma espécie de seção de navegação, desculpe. E vamos apenas copiá-los e colá-los em nossos designs. Então, apenas essa primeira, quando começarmos a dividi-los e posicionar esses elementos na página, será muito, muito mais simples mais tarde, quando realmente seguirmos em frente e criarmos isso. Então, isso é tudo para este. E deixe-me ver você no próximo vídeo em que continuaremos. 138. Parte 3 do projeto da página inicial: Vamos agora passar para a próxima seção , que será sobre benefícios. Então, o que vou fazer é selecionar esse controle de texto C, posicioná-lo fora do Controle V e digitar nossos benefícios. Assim, certifique-se de que esteja no centro e empurre-o até o fim. Então, o que vou fazer é usar uma ferramenta rápida de retângulo para criar uma espécie de seção quebrada aqui. E deixe-me dar uma altura de talvez, vamos ver 469, eu acho. Vamos ver 200 aqui. Então, o mesmo que todos esses outros. E vamos dar um nome a ela, como a seção de benefícios BGN. O que vou fazer nesse caso é dar essa cor escura e transformar esse texto em textos brancos puros e empurrá-lo aproximadamente por aqui. Agora que fizemos isso, o que vou fazer é usar alguma imagem que também encontro nos elementos do Envato. E eu vou deixá-lo em uma coleção também. Posicione-o aproximadamente por aqui para que vejamos essa luz traseira, algo parecido. E vamos ver em termos de obesidade, talvez eu consiga tocar uma no meu teclado, mas não em tudo, só nesta imagem. Opa, desculpa. Vamos fazer isso de novo. Então faça isso, mas em vez de BG, vamos chamar isso de benefícios da imagem IMG. E então, dentro dessa, vamos arrastar e soltar essa imagem. Clique duas vezes posicionado mantendo pressionada a tecla Shift e clique com o botão esquerdo do mouse. E então, quando terminar, pressione um no teclado para diminuí-lo para um a dez por cento de opacidade. E se colocarmos esse navegador aqui, você pode ver como fica. Então, temos esse belo efeito fantasma. E essa talvez seja uma das partes mais sombrias do nosso site ou função. Porque, se você se lembra, nossos clientes nos disseram que não gostam muito desses layouts escuros. Então, aqui o que faremos é talvez, em vez de 32, talvez possamos usar H3 e usar brancos mais uma vez. E vamos digitar a entrega gratuita. Aí está. E com isso, vamos pressionar o Controle D para duplicá-lo. E aqui talvez possamos usar o texto do parágrafo. Então, parágrafo, e vamos usar a cor do corpo desta vez, em vez do branco puro. Aí está. E digite pin this text. E em termos de espaçamento, talvez possamos usar 24. Então, vamos 123424 e nos certificar de que estamos no centro. E eu vou simplesmente copiar o ícone que eu estava usando aqui. E posicione-o aproximadamente ao redor. Aqui. Aí vamos nós. E isso também pode ser 24. Para um espaçamento agradável e uniforme. Este será o ícone de entrega gratuita e eu vou pressionar o Control K para transformá-lo em componentes, entrega gratuita e em todo o país onde está. Aí vamos nós. Então, teremos esses três loops. Então, entrega gratuita, entrega gratuita, controle nacional, G, para agrupá-lo. E chamaremos isso de entrega gratuita assim. E para ter certeza de que estamos posicionados uniformemente, o que vou fazer para espaçar é arrastar um retângulo em torno dessas quatro colunas. Em seguida, selecione meu conteúdo e clique aqui para ter certeza de que ele está centralizado. Agora que fiz isso, o que posso fazer é controlar D e simplesmente colocar isso no Centro de Controle D e simplesmente posicioná-lo aqui. Use meu truque de retângulo mais uma vez. Mas antes disso, porque vamos mudar o texto aqui. Então, vamos primeiro fazer isso. Assim. E isso será uma troca parcial. E vamos chamar isso de troca de fazendas. E agora que fizemos isso, podemos posicioná-lo uniformemente porque os textos dos parágrafos são a parte mais larga da seção. Para a troca de peças, deixe-me usar o ícone do design original do zoom com apenas um toque. Posicione isso aqui. E vamos adicionar esses dois aqui. Até o fim. Aí está. Pressione Control K para transformar isso em um componente. E agora, no centro, o que teremos é polimento de três estágios. Então, você estará seguro ao receber o refrão do destilador, porque eles vão polir seu carro e, basicamente, não permitirão que ele fique sujo ou seja por pintura. estar contaminado ou algo parecido. Então, neste caso, vamos posicionar isso aqui. Vamos empurrá-lo até aqui. Aí está. Livre-se disso. Pressione Control K sobre isso. Certifique-se de que todos estejam centralizados. Assim. Em seguida, certifique-se de que o texto esteja centralizado. Esses dois já são porque já fizemos isso. E como você pode ver, em apenas alguns passos, nós os obtivemos. Agora, em termos desses ícones, de onde eu os obtive é obviamente que você os colocará dentro do design, como eu disse, mas eu os comprei dos exploradores de ícones. E o que eu fiz aqui foi criar minha coleção. E você pode ver todos esses ícones diferentes que usaremos em todo o nosso design. E usar um desses, é bem simples. Clique para copiá-lo e, em seguida, você pode colá-lo basicamente onde quiser em seu design. Você pode escalá-lo, você pode alterá-lo para o que ele quiser. Portanto, é muito simples de fazer. O que eu vou recomendar para você é acessar seus plug-ins, que é essa área aqui. Clique no Plus, localize o explorador de ícones e, em seguida, simplesmente acesse site deles se quiser criar esta coleção. Ou, ao baixar algo, você pode acessar meus downloads e localizar seus downloads posteriormente no site e clicar no ícone de coração para entregá-los às minhas coleções. E então você pode posicioná-los todos em suas coleções. Então é muito simples usar esses ícones e foi aí que encontrei todos esses ícones incríveis. Então, eu poderia ter usado os elementos do Envato, mas eu não queria, para os ícones, eu propositalmente quero usar o ícone Scott, só para mostrar como é fácil usar n, que você pode encontrar todos eles ótimos ícones lá. Então, vamos aqui com o polonês de três estágios. Vamos ver. E vamos ver o que podemos fazer. Nossos benefícios os posicionam no topo. Vamos ver daqui até aqui, talvez possamos dar isso para 64, assim. Em seguida, selecione todo o nosso conteúdo e coloque-o no centro desta forma. Aí vamos nós. E eu posso agrupar tudo isso e chamar isso de benefícios como esses. E agora vamos direto para o nosso formulário de contato. Se eu levar você de volta para aqui, se você se lembrar, temos Fale conosco e então o que faremos talvez seja ter, vamos ver quantos campos, onde podemos ter cinco campos no total. Então, talvez este possa passar aqui e dar um nome a ele. Então, podemos ter dois deles para e-mail, número de telefone e, em seguida, um para a mensagem e, finalmente, um botão para mensagem de areia ou algo parecido. Então, vamos fazer exatamente isso. Então, primeiro de tudo, vamos selecionar essa e colá-la aqui, empurrá-la aqui, posicioná-la aqui e garantir que somos 200. Adoro como o XD oferece essas opções de posicionamento imediatamente. Portanto, é bem simples de fazer. E para nossos campos, o que faremos é simplesmente usar um retângulo como esse. E vamos chamar esse campo de entrada assim. E para os próprios campos de entrada, o que podemos fazer talvez seja usar uma cor branca, que acho que já está usando. Sim. Então, cor branca. E vamos ver se há demências com 60, acho que vai funcionar muito bem. Livre-se da borda e não do raio. Então, vamos usar os quadrados e apertar T e digitar, por exemplo, nome completo. Nome completo. E para esse texto usará o bloco de texto. Certifique-se de que está aqui. E em termos de espaçamento, talvez possamos usar 16. Acho que vai funcionar muito bem. Então, algo como este Controle D para posicioná-lo aproximadamente por aqui. E então vamos ver que talvez para esse texto possamos usar textos de parágrafos. Aí está. E digite seu nome completo. E certifique-se de que estamos alinhados à esquerda aqui. Ficamos com o pulmão esquerdo aqui. E a partir daqui, o que podemos fazer é posicionar no centro. E então, para a distância, podemos ir com 16. Então, vamos com o turno 121234. Então, se eu segurar minha tecla Alt ou Option em cada lado, você poderá ver as distâncias. Então, se eu passar o mouse aqui, você pode ver que somos 17 de cima e de baixo, e aqui estamos 16 deste lado. Então, o que eu posso fazer aqui é selecionar isso e isso, e vamos ver, talvez eu possa chamá-lo de entradas. Vamos ver o controle G para agrupá-los, chamá-los de entradas. E então mova o nome completo logo abaixo aqui. E isso pode ser nomeado, talvez nome. Aí está. O que eu posso fazer é pressionar Control D para duplicá-lo. E vamos ver o posicionamento, talvez eu possa ter 32 distâncias aqui. Então, algo assim. Em vez de FullName, o que temos aqui é e-mail. E aqui vou digitar digite seu e-mail. Então, já temos o conteúdo, temos a estrutura, temos tudo, mas vamos apenas renomear esses elementos. Então, isso vai ser um e-mail. E em termos de largura não será a largura total. Terá seis colunas de largura porque lembre-se de que temos 12 colunas de largura total. Então 123456, aí está. Então esse é o nosso e-mail. E o que eu posso fazer nesse caso é colocar esses dois em grupo. Talvez apenas mostre um pouco como o design responsivo funcionará mais tarde. Então, isso pode ser e-mail e telefone, assim. E vamos duplicar esse. Controle D e posicione-o aqui. Então, ele toca a borda. Aí vamos nós. E isso pode ser telefone. Selecione o tipo de telefone, livros. E em vez de digitar seu e-mail, talvez digite seu número de telefone dessa forma. E, finalmente, o que precisamos é de um maior. Então, vou usar essa posição aos 30 para movê-la para baixo. Isso vai ser uma mensagem. E vamos dar algo como uma mensagem. E digite. Escreva sua mensagem aqui. Algo parecido. Em termos de altura, será um pouco mais alto do que esses dois, só porque queremos dar espaço suficiente para nossos usuários escrevam a mensagem que quiserem. Então, vamos dar algo como 171. Acho que vai ser muito bom. Por fim, vamos adicionar nosso componente ao botão principal. Arraste e solte para dentro, verifique se temos 32 anos. Aí vamos nós. E aqui, mais uma vez, temos todo aquele diamante preto, o que significa que estamos usando componentes secundários. E aqui vamos escrever Enviar, mensagem. Aí está. Posicione-o aqui. Você pode ver que não temos um tamanho fixo para o botão. Isso é o que eu queria, na verdade. Então, vamos para o nosso estado de horror. Arraste e solte morto dentro do estado padrão. Aí está. Então 32. E agora acho que tudo está bem posicionado. E vamos agrupar todos eles pressionando Control ou Command G. Vamos chamá-lo de contatos ou simplesmente formulário, porque é assim que também é chamado no Webflow. Finalmente, para o distanciamento, o que podemos fazer é usar 64 porque é isso que usamos em todo o nosso desejo. Assim. Aí está. Agora que temos nosso formulário, vamos, em vez do que oferecemos, digitar Fale conosco. Esta seção está concluída. Vamos agrupá-lo, chamá-lo de fórum. E imediatamente pressione Control K para transformá-lo em componente. Porque lembre-se de que vamos usá-lo em todo o nosso design, inclusive na próxima seção chamada onde estamos e o rodapé. E é isso que vamos abordar a seguir, porque já estamos a 13 minutos deste vídeo. Então, vamos fazer uma pausa aqui e nos vemos no próximo vídeo, onde criaremos essas duas seções. 139. Parte 4 do projeto da página inicial.: Vamos agora continuar com a próxima seção, que será para o mapa. E primeiro de tudo , deixe-me desenhar um retângulo rápido aqui, algo assim. Vamos ver, 246, talvez sete. Então, algo assim, 2467. Aí está. Em termos de altura, talvez possamos escolher cinco ou sete. Deixe-me me livrar da cor da borda para mapear assim. E deixe-me desenhar um rápido mapa interno, que é o mapa do local que eu escolhi. E, claro, você pode escolher um local diferente. Você pode fazer o que quiser aqui. Mas eu só vou usar esse. Agora, em termos do texto interno, o que vou fazer é usar este. Então, controle C, controle V, e simplesmente posicione-o aqui, certifique-se de que esteja alinhado à esquerda assim e mova-o até aqui. E aqui vou digitar onde estamos. Controle D. E este vai cair. E também será um bloco de texto, porque queremos dar a eles um pouco mais de informações aqui sobre onde estamos e o que eles podem esperar. Então, o que fiz foi visitar nosso showroom para trazer seu carro para uma oferta de avaliação gratuita. Então, se eles quiserem fazer essa troca de peças entre os mencionados , eles podem fazer isso aqui. Vamos colar isso em 24. Posicione-o aproximadamente por aqui. Aí está. E agora, talvez eu duplique essa posição do texto aqui embaixo. Vou usar, vamos ver, o endereço do parágrafo e das palavras-chave. Essa será nossa primeira seção. E empurre isso aqui mesmo. Deixe-me selecionar meu ícone e colá-lo aqui. E imediatamente antes de prosseguir, deixe-me selecioná-lo, pressionar Control K para transformá-lo em um componente. E vamos fazer com que seja, digamos, 16. Sim, acho que vai funcionar muito bem. Aí está. Certifique-se de agrupá-los , certifique-se de colocar a pilha e fornecer um nome de endereço. Algo parecido. Vamos ver, tudo bem. Mova isso para aqui. E a partir daqui, o que podemos fazer é, em vez de 24, ir mais longe e ir com 32. E o endereço, usaremos esse texto mais uma vez. Então Controle C, Controle V, posicione-o aqui, certifique-se de que esteja alinhado à esquerda. Está logo abaixo do nosso endereço. E deixe-me clicar duas vezes, copiar e colar o endereço. Claro que você pode usar o seu. isso é imaginar um fundo fiduciário para Obviamente, isso é imaginar um fundo fiduciário para os propósitos deste curso, mas você pode usar o que quiser. Então aqui vou eu com 16, e vamos com o endereço. Agora, neste caso, vou ativar a pilha, que será vertical e será 16. Então, vai ser muito mais fácil para mim ajustar tudo isso. Então vamos com o Controle D aqui até 24, controle a largura 24. E isso vai acontecer até o fim. Isso vai ficar no centro. Este último será o horário de funcionamento. E esse segundo será encontrado. Agora, deixe-me copiar o conteúdo do design original muito rapidamente. Podemos avançar um pouco mais rápido e aí está. Número de telefone, apenas um número de telefone aleatório que você pode escolher. Mais uma vez, o que mais lhe convier, depois o horário de funcionamento. Ok, e finalmente, vamos mostrar isso porque você quer que seus usuários saibam quando você abre, reabre nos feriados ou abre no sábado ou abre no domingo. Você talvez trabalhe em um fuso horário diferente ou qualquer outra coisa. Portanto, você sempre precisa dizer isso a eles e fornecer essas informações valiosas. Então, livre-se desse controle K para transformá-lo em um componente. E eu vou dar a isso o nome de horário de funcionamento. Aí está. E, finalmente, ficamos com o número de telefone. Então, vamos usar o estrangeiro aqui. Então, Controle C, Controle V e selecione isso. E deixe-me selecionar o ícone do meu telefone. Aí está. Onde está. Aí está. Certifique-se de que esteja no centro, acima do meu texto. Vou apertar o Control K. Ele vai posicioná-lo bem por lá. Mas eu também posso transformar esse texto em uma pilha. Então selecione todos os meus textos, Controle G. E o que eu posso fazer talvez seja chamado de conteúdo de deslocamento. Conteúdo de localização, centralize-o com meu mapa assim. E o conteúdo de localização será transformado em uma pilha como essa. Vai ter valores diferentes porque 24 aqui, 32 aqui, não importa. O importante é transformá-lo em uma pilha. E vamos agrupar isso e chamá-lo. Vamos ver onde estamos. E, finalmente, clique em Control K. Porque, mais uma vez, reutilizaremos esse conteúdo em todo o nosso design. Certifique-se de que estamos a 200 daqui. Aí está a partir deste botão. E, finalmente, a última seção que resta é para criarmos esse rodapé. Então, vamos fazer exatamente isso. Vou pegar meu navegador, usar meu logotipo Control C e ampliar um pouco aqui, pressionar Control V. Aí está. Certifique-se de que esteja no centro, entalhe até o fim. Porque será lembrado, logotipo está no centro. No lado esquerdo, temos ícones de mídia social. No lado direito, teremos nossa navegação. Em termos de navegação, clique em Control C. de itens de navegação . Portanto, esse é o objetivo do Adobe XD. Com todas essas ferramentas, você quer poder reutilizar todos os seus elementos porque qual é o ponto de vista? Selecionando-os repetidamente. Deixe-me usar esses ícones sociais que já foram criados no meu InDesign anterior. E também vai colar os componentes, que eu não quero necessariamente, mas vamos continuar assim. Portanto, temos ícones sociais e temos o estado padrão, que é essa cor cinza escuro. Temos o estado de flutuação, que obviamente é o efeito de obviamente é o efeito nossa cor de foco do nosso design. Então, o que podemos fazer é, a cada passo, garantir que estamos aplicando a mesma cor aqui. Nosso paira sobre o mouse. Então, vamos usar a cor do mouse. Certifique-se de selecioná-lo. Vamos ver. Por que não está selecionando isso, então esse retângulo, seja ele qual for, e vamos ver, mouse, usar essa cor, usar essa cor, usar essa cor. E, finalmente, para esse uso, descolorido. Aí está. Então, tudo funciona como deveria. Mais uma vez, pego esses ícones desse plug-in chamado Icon scout. E se eu rolar um pouco para baixo até meus downloads, eu acho. E o papai é. Então, aqui você pode ver todos esses ícones. Então, deixe-me voltar para o meu painel de camadas e trazer tudo isso para seus estados padrão, assim, assim. E assim. Finalmente, vamos posicionar isso aqui. E o que eu quero fazer é talvez empurrá-los para 64 do nosso logotipo. Algo parecido com isso. 64, aí está. Abaixo do logotipo. E uma última coisa que eu quero fazer é virar o texto na parte inferior. Então, vamos digitar algo como área de texto. E usaremos para isso, usaremos o texto do parágrafo e deixarei que eu copie e cole o texto, que serão apenas algumas informações básicas sobre a empresa. E você pode ver, tudo bem, reservar como parte carros exclusivos 2023 e teremos o mesmo espaçamento. Então, a partir daqui, vamos ver, eu estou segurando a Alt três. Vamos ver o que podemos fazer aqui. Vamos ver, talvez possamos fazer com que seja 64. Aí está. Agora que isso está feito, mova-o para baixo e agrupe tudo, chame-o de rodapé. Rodapé. Aí vamos nós. E vamos mover o rodapé para 200 a partir daqui. E, finalmente, uma última coisa que eu quero fazer. E uma coisa irritante no XD é porque não consigo fechar meus quadros de arte no final. Então eu tenho que clicar duas vezes aqui, clicar e arrastar e simplesmente medir assim. Então, é um pouco de perda de tempo, mas o que você pode fazer? É apenas uma pequena unção de todas as partes do hábito do software. E esse é o do XD para mim. Então, se eu selecionar 64, lá vamos nós. Então, antes de passar para a próxima página, quero pré-visualizar esta e abordar o que fizemos até agora nesta parte do curso. Portanto, temos nossa navegação no topo, temos os cartões, os empréstimos, entre em contato conosco. Temos nossa seção de heróis, sua parceira para carros exclusivos que lhes diz imediatamente o que você é, o que está fazendo e para quem se destina a certificar carros usados com baixa quilometragem e histórico documentado. Então, estamos falando a eles sobre nossos carros, o que eles são, explore nossos carros para que eles possam clicar lá e acessar a página do curso, como já mencionamos. Então, um pouco sobre nós, pessoas felizes do Smiley. E no local exclusivo, temos nossa seleção exclusiva com alguns cartões com a mesma aparência. Temos C todos os carros, então temos elementos e informações visíveis aqui, como nome, preço, ano de produção e quantos quilômetros o carro tem. Seal cars, mais uma vez, leva você à seção de cursos, que oferecemos garantia estendida, manutenção e empréstimos. Eu poderia ter paz de espírito ou benefícios. Então, se você comprar um carro através de nós, o que você vai conseguir. Então, você receberá entrega gratuita, troca de festas polonesas em três estágios, para que você possa vender seu cartão antigo para eles e eles receberem uma parte da troca. Depois temos o Fale Conosco, que é muito importante. Temos a mensagem de envio onde estamos, então nossa localização e, mais uma vez, informações importantes incluídas aqui, então endereçadas por número, horário de funcionamento. E, finalmente, temos o rodapé com todos esses links de trabalho. E então temos nesses ícones, esse ícone do YouTube está me incomodando e não funciona por algum motivo, mas não importa. Vamos corrigir isso mais tarde no Webflow. E é basicamente isso. Isso é tudo para a parte de design da página inicial. No próximo vídeo, vamos passar para a página de carros e nos aprofundar um pouco mais nesses cartões. Vamos ter oito deles e vamos posicioná-los um pouco uniformemente. E vou mostrar a você o poder de reutilizar todos esses componentes da mesma forma. Navegação, como um formulário de contato Sobre nós e um mapa e o rodapé na parte inferior. Então, nos vemos no próximo vídeo, quando continuaremos com nosso design. 140. Design de página de carros: Vamos agora passar para a página do curso e continuar de onde paramos e mostrarei como você pode reutilizar alguns desses elementos que mencionamos. Então, aqui estamos em nosso design e o que vou fazer é bem simples. Basta selecionar todo o meu quadro de arte, pressionar Control D e vir aqui. E em vez de digitar a página inicial em carros. Agora, por enquanto, o que queremos é essa página esteja selecionada, se você se lembrar. Então, se eu selecionar meus carros, selecionamos apenas para mostrar a um usuário que estamos nessa página. Então, se eu clicar aqui, você verá que não consigo mais passar o mouse, mas posso passar o mouse aqui e aqui. Isso apenas indica que estamos na mesma página. Então, o que faremos para esta seção é nos livrar disso, nos livrar disso e nos livrar dessas seções, algo assim. E o que eu vou fazer é talvez empurrar isso um pouco para baixo aqui porque temos todos os carros apresentados. Não precisamos ver o botão de todos os carros e vamos nos livrar dele. Agora, primeiro de tudo, deixe-me selecionar esse texto, pressionar Control C e reutilizar esse conteúdo aqui. Em vez de alinhado à esquerda, vamos garantir que o centro esteja alinhado assim. E deixe-me selecionar os textos. Seu parceiro para um carro exclusivo. Então, é exatamente o mesmo texto que está aqui. E em termos de espaçamento, o que podemos fazer talvez seja posicioná-lo 40 a partir do topo. Então, mude 1234 porque queremos que fique bem perto do topo, desse jeito. E é claro que você quer que esteja logo abaixo da nossa navegação. Tudo bem? Então, aqui o que vou fazer é arrastar um belo círculo no fundo. Então, para fazer isso, é claro que você pode usar seu círculo assim e posicioná-lo no centro , eliminar a borda em termos de cores, vamos usar o azul principal porque essa é a nossa empresa cor neste caso. Vamos usar as dimensões de 300 por 300. Talvez. Certifique-se de que esteja no centro e mova-o para baixo do nosso texto. Talvez possamos até mesmo empurrá-lo até aqui. Então, logo abaixo de nossos textos, certifique-se de que esteja no centro. Algo não está muito bom com esse texto. Então, se eu posicioná-lo aqui, não. Ok, talvez seja um dólar XD. Então, vamos seguir em frente e vou arrastar e soltar minha imagem do meu carro aqui. Mais uma vez, usei o Envato Elements para este. É aquela maquete que eu mencionei. E esse carro é basicamente recortado dessa maquete. Então, o que eu posso fazer neste caso é talvez posicionado para ser um pouco mais alto, talvez 300 ou algo parecido, para que tenhamos um bom número par. E a partir daqui, o que eu posso fazer é talvez empurrá-lo um pouco para aqui, talvez em algum lugar por aqui. E eu realmente não quero poder ver o círculo na parte inferior, citar que o posicionamento disso funciona muito bem, como você pode ver, porque isso é transparente ainda vai mostrar o círculo no fundo, mas não teremos o círculo aqui, só vai nos dar esse bom efeito, se quisermos. E, finalmente, para esta seção, o que eu quero é talvez aumentá-la em 100. Então, vamos ver algo como 100 porque ainda queremos poder ver essa seção acima da falha. Então, quando uma prévia, mais uma vez, você pode ver acima da dobra, ainda podemos ver esta seção. E dentro desta seção o que queremos é usar essa carta, carta, apertar o Controle C, pular aqui e abrir nossa seleção e digitar Controle V, algo parecido. Posicione-o para baixo. E o que ele pode fazer o espaçamento é que eu posso dar talvez 32. Então 32, 32, aí está. E o que você pode fazer é selecionar esses três, Controlar G e colocá-los na primeira linha. Aí está. Aqui, dentro deste , porque esse não é um componente e essa é a parte crucial aqui, porque se fosse um componente , terei que recriar o que fiz com esses três componentes. Eu crio o estado original, crio o estado de horror e, em seguida, altero o texto de cada um deles dentro de cada um desses estados. É por isso que é útil ter essa placa e o modo de espera sem nenhum componente esteja sentado nela , para que você possa trocar facilmente seus elementos pela esquerda, direita e pelo centro sem interromper. E então você pode criar componentes além da dívida. Então, se voltarmos aqui e deixarmos eu simplesmente duplicar isso, então Control D ou ainda melhor, eu posso ir aqui. Algo não está certo com meu XD no momento. Sinto muito por isso. Aí vamos nós. Então, essa será nossa primeira linha. Mais uma vez. Essa será nossa fila do meio. Aí está. E eu vou ativar minha pilha. Eu posso ativar a pilha aqui também de 38. Então, vamos duplicar esses dois. E vamos colocar 38 porque essa é a distância entre nossas colunas. Controle D Mais uma vez e posicione isso de forma que fique na parte inferior. Lembre-se de que temos oito carros, então teremos 32 anos e nos livraremos desse último. Então, essa será a nossa última fila. Aí está. E, finalmente, agora é hora de adicionarmos todas essas informações. Então, em termos de informação, o que eu quero fazer é que isso será Tesla, e vamos chamá-lo de imortal imediatamente. Mas primeiro, vamos realmente copiar as informações, será muito mais fácil dessa forma. Então, o ano do carro será 2021, tudo bem. E a quilometragem será de 40.000 km. Então, vamos chamá-lo de Tesla. O próximo será o Porsche. E esta última será a McLaren. Então, para o Porsche, o que eu posso fazer é selecionar e estou pressionando. Esse será o preço. Obviamente. Ao fazer um design como esse, você quer ter certeza de posicionar seus preços forma uniforme, porque obviamente a McLaren será muito mais cara do que a Porsche, por exemplo, e a Tesla. Portanto, você quer ter certeza de que está selecionando esses preços e todos esses elementos de acordo com a dívida. Portanto, será uma quilometragem bastante baixa. 2020 é o ano. Aí está. O que eu posso fazer imediatamente é usar minhas imagens. Então, McLaren número três. E lembre-se, estou usando o número três para todos eles. Porsche número três. Então, este será o Porsche Cayenne e, finalmente, o Tesla Model X. Aí vamos. Antes de passar para esses, vamos pressionar Control K, Control K, Control K para transformá-los em componentes. E vamos continuar com nosso estado, chamá-lo de pairar, selecionar Controle C. E eu vou fazer o mesmo por aqui, então passe o mouse, passe o mouse sobre este também. O que vou fazer dentro da propriedade dela é simplesmente selecionar minha aquarela e aumentá-la até 100. Faça o mesmo aqui. Aumente para 100 e faça o mesmo aqui. Então, aumente para 100. E agora, quando eu mudar para padrão, padrão, padrão, ele voltará. Finalmente, vamos lidar com essas duas últimas cartas, e esta última será Cadillac. Vamos chamá-lo assim. Então, Cadillac ou melhor ainda, veja TSV porque já temos um Cadillac no topo. Este vai ser um pouco mais barato. Talvez, como parte da troca de peças que mencionei, o ano seja 2019. 2019. Aí vamos nós. E a quilometragem será bem alta. A quilometragem por causa do ano de produção será 2021 e será um Range Rover evoke. E, finalmente, vamos trazer isso para aqui e a quilometragem estará nesta. Aí está. Então, vamos dar o nome a isso. Digamos que a cidade seja três. Esse vai ser um intervalo como esse. E vamos finalmente trazer as imagens. Quais são os Range Rover USA Number Three, visão de arrastar e soltar e, para a Cadillac, vamos com o número três, arrastar e soltar para dentro. Então, lá vamos nós. Agora que fizemos tudo isso, o que podemos fazer é usar as seções restantes sobre as quais falamos anteriormente e simplesmente trazê-las à tona. Então, selecione todas as nossas seções restantes, empurre-as até aqui e certifique-se de que estamos a 200 daqui. Algo parecido com isso. Acho que vai funcionar muito bem. Sim. E é basicamente isso. Tudo o que precisamos fazer é simplesmente fechar isso. E se você se lembra, eu simplesmente odeio essa função de x dy. Mas o que você pode fazer? Como eu tenho que fazer isso manualmente, você não precisa. Você pode simplesmente deixá-los como estão , porque isso realmente não importa. Dentro do Webflow, definiremos o limite para o espaçamento na parte inferior da margem. E respeitará essa margem em cada página. Portanto, é muito, muito mais simples no desenvolvimento do que o InDesign, mas, no entanto, alguns. Aqui temos nossa ponte. Então, se eu selecionar a página do meu curso, atualize-o. Mais uma vez, selecionamos carros aqui, empréstimos e entre em contato conosco. Ainda podemos passar o mouse sobre o botão para carros exclusivos. Aí está. Agora temos essa imagem com um belo círculo azul no fundo direto de nossos carros. Assim, podemos passar o mouse sobre cada um desses carros. Você pode ver que o efeito de foco funciona muito bem , exceto nesses dois. E vamos mudar para que a tarefa de contato funcione, funcione, funcione, tudo funcione. Então, esquecemos de fazer isso desta vez. Então, vamos voltar. Controle K, controle K. Vamos transformar isso em estados flutuantes como este. E vamos transformar esse CSV no estado de Horace também, ao passar o mouse. Vou trazer essa cor da borda traseira até 100. E no Range Rover, vamos ver, aquarela até 100. Aí vamos nós. Vamos devolvê-los ao padrão. Para o padrão. E vamos pré-visualizar nossa página mais uma vez. Então, vamos ver carros, empréstimos, entre em contato conosco. Tudo isso funciona bem. Aí vamos nós. E agora vamos passar o mouse sobre isso. Tem um pouco de atraso para passar o mouse, mas não se preocupe com isso. Vamos corrigir isso no Webflow, então não vamos perder muito tempo com o design em si. Finalmente, o que eu quero fazer é simplesmente aumentar isso. Então, vamos chamar o círculo VG desse carro. E eu vou posicionar isso aqui. E talvez dê a isso um nome de seção promocional ou carros para quase uma seção, algo assim. Então, temos nossa seleção e todos os nossos outros elementos. Então, lá vamos nós. Essa é a nossa página para este vídeo. No próximo, criaremos uma página de detalhes do cartão de débito quando seus usuários realmente clicarem em um desses cartões para abri-lo e saber mais sobre o carro em questão. E é isso que abordaremos no próximo vídeo. Então, eu vou te ver lá. 141. Página de detalhes do carro: Vamos agora criar a página detalhada desse carro ou o carro selecionado, você quiser chamá-lo. Vamos voltar ao XD. E aqui o que vou fazer imediatamente é, em vez de duplicar esta, vou duplicar o herói que classificou a página inicial porque vou reutilizar esta seção. Então, vamos chamá-lo, por exemplo, carro selecionado. Aí está. Dentro do cartão selecionado, o que vou fazer é me livrar de algumas dessas seções mais uma vez, então clique em Excluir e excluir. Vou manter essa, excluir, excluir e vou manter todas essas seções. O que eu quero fazer a seguir é talvez, vamos ver, talvez possamos estender isso um pouco até talvez cobrir uma distância de 200. Aí está. E o que vou fazer é simplesmente estender meu quadro de arte para baixo, porque teremos um pouco mais de espaço para trabalhar aqui. Então, o que vou fazer agora é escolher um carro. Talvez eu possa escolher um Range Rover ou algo parecido. Então, o que podemos fazer nesse caso é porque criaremos o layout de duas colunas. Uma coluna terá todo o conteúdo. Então, ele terá imagens, terá uma visão geral, descrição e informações de especificação do veículo. Todas essas coisas estarão à esquerda e à direita, teremos aquele cartão que terá um layout fixo, que seguirá de cima para baixo. Quando começarmos a rolar no desktop, no celular, ela mudará e chegará ao final da página. E é isso que vamos criar agora. Então, se voltarmos para aqui, o que temos é o layout de duas colunas. Então, vamos começar a trabalhar com isso. Selecionado agora. Bem, deixe-me realmente começar a criar algumas dessas imagens. Posicionando algo assim. Porque se a pegarmos aqui, você pode ver que temos uma imagem e, abaixo dela, temos quatro imagens diferentes. E então temos o cartão rolando para cima e para baixo, e ele será posicionado dentro do Webflow um pouco mais tarde. Então, vamos nos endividar. Vamos criar isso muito rapidamente. Então, para essa primeira imagem, o que posso fazer é dar a ela um nome de imagem, uma ou imagem principal ou algo parecido. E vamos ver, talvez possamos dar a ela 8,4 larguras de coluna. Então, algo assim. Portanto, podemos ter um layout de quatro colunas de largura aqui. Aí está. E em termos de altura, vamos usar, sei lá, 437, algo assim. Vamos nos livrar da borda e deixar eu entrar e posicionar minha imagem imediatamente. Então, essa será a imagem número um. Então, deixe-me arrastá-lo e soltá-lo dentro. Aí está. E em termos de espaçamento do topo, podemos ir com 40, talvez mais uma vez, então algo assim. E agora vamos focar nossa atenção nessas imagens porque temos oito colunas. Agora. Quatro das imagens, cada uma delas poderia ter duas colunas de largura. Então, vamos fazer isso. Vamos duplicar esse. Em termos de espaçamento, podemos usar 24. Acho que vai ficar muito bem. E vamos levá-lo até aqui. E essa será a imagem número dois. Vamos posicioná-lo dentro de um grupo e chamá-lo de imagens de carros. Vamos dar uma pilha. Podemos organizá-lo um pouco melhor. E vamos ver em termos de distâncias, vamos ver o que podemos ter. Então, talvez aqui, ou o que temos aqui, seja se eu rolar para baixo e me esconder apenas um toque, você pode ver que a largura da calha, que é a distância entre essas colunas, é 38. Então, esse espaço vazio entre as colunas azuis. E é isso que vamos atacar aqui. Então digite 38. E, como você pode ver, ele se alinhará com a próxima coluna disponível. Então, esta será a imagem número três, Controle D. Haverá um número de imagem para n controle dy dt será a imagem número cinco. Aí está. Agora, deixe-me trazer rapidamente essas imagens. Então, isso vai ser dois, isso vai ser três, isso vai ser quatro. E, finalmente, serão cinco. E, claro, quando quiser, você pode clicar neste botão aqui, que acho que não criamos. Agora, haverá um botão aqui que dirá que você veja todas as imagens, por exemplo , se você clicar nele, ele será ampliado e mostrará um layout de caixa de luz, qual criaremos um XD. E isso vem como padrão no Webflow. Portanto, não prestaremos muita atenção a isso. Em termos dessa imagem de herói. O que vou fazer é clicar aqui e digitar, por exemplo, ver. Todas as imagens. Transforme esse texto em um bloco de texto. Aí está. Posição e mais ou menos por aqui. E em termos do retângulo que vamos usar aqui, algo assim. Livre-se da caldeira. E vamos ver. Chame isso de talvez todas as imagens de fundo ou luz do sol. Experiência de amadores. Aí está. Veja todas as imagens. E então, em termos de distâncias e tamanhos, talvez possamos usar 50145145 e depois 50. Algo parecido. E vamos agrupar esses dois. Não, isso não funciona bem para mim. Então, talvez eu possa restringir isso e reduzi-lo para um parágrafo. Aí está. Agora funciona muito melhor. Então, se eu me certificar de que eles estão no centro, controle G e digite, por exemplo veja todas as imagens. E em termos de espaçamento, talvez possamos usar 24. Então 12, 123-412-1234. Então, somos 24 em cada lado. Se eu segurar minha tecla Alt ou Option, você pode ver como fica. Então, podemos agrupá-las para chamá-las de imagem um, imagem um, e podemos chamá-las de imagens de carros, por exemplo, e agora vamos chamar nossa atenção para este site para o cartão em si. Então, o que vou fazer é usar nossa ferramenta de retângulo mais uma vez e desenhar um retângulo rápido, algo assim. Ele vai ter uma cor de fundo branca. E vamos ver, talvez possamos arredondar os cantos para oito, algo assim. Livre-se dessa fronteira. Nós não precisamos disso. E aqui o que podemos fazer é chamá-la, por exemplo, barra lateral do carro e dar a ela um nome, é claro, filmes PG na barra lateral aqui. E aqui o que podemos fazer é criar isso, aquele rótulo que mencionamos. Então, vou criar o texto. Vamos nos livrar desse. E digite Saloon, que será um tipo de carro. E eu vou aplicá-lo, o texto do rótulo. Aí está. E anexaremos o plano de fundo rotulado. Então, vamos criar um retângulo rápido. Mais uma vez, dê um nome a ele. Etiqueta, BG. Aí está. Abaixo do texto. Vou me livrar da borda e, para a cor, vou realmente usar a cor do corpo. Então, se eu clicar em pré-visualização mais uma vez, você pode ver que ela tem a cor do corpo e essa tem a cor branca, que só vai diferenciá-la e fazer com que ela se destaque um pouco mais. E você pode ver nossas imagens como elas são bonitas. Então, em termos do tamanho dos fundos rotulados de dívidas, o que eu posso fazer é talvez usar o tamanho 3034 para a altura. Certifique-se de que esteja centralizado. Aí vamos nós. E eu tenho uma boa visão sobre carros, então vou colá-la. E esse é o ícone do salão. Vou transformá-lo em componentes imediatamente. Certifique-se de que essa é uma posição como essa. E em termos de espaçamento, o que eu posso fazer é talvez posicioná-lo a 16 deste lado. 16. Em termos do plano de fundo rotulado, o que eu posso fazer talvez seja colocar quatro para o raio do canto. Então, não oito porque esse elemento é muito pequeno, então as distâncias aqui podem ser oito, talvez. Então, vamos continuar com isso. Isso pode ser rótulo, ícone, rótulo que eu posso empilhar e virar oito assim. E, finalmente, em termos dessas distâncias, talvez eu possa trazer esses dois aqui e dar a eles uma distância de 16. Assim, aí vamos nós. E agora temos nosso plano de fundo e o conteúdo do rótulo. Então eu vou chamar esse rótulo, e vamos chamá-lo de rótulo de salão. E vamos ver o que podemos fazer. Então, no salão, eu posso pressionar Control K. Então esse será nosso estado padrão em termos do posicionamento desta etiqueta, talvez possa ser 24 em cada lado. Então, vamos com 24 e depois 24 assim. Vamos transformá-la em uma pilha que permitirá o preenchimento da dívida que precisaremos criar amanhã. Então, precisarei criar o SUV e precisarei criar os ícones de supercarros. Então, o que eu posso fazer é simplesmente arrastar esses ícones para dentro. Então, vamos ver solu, super carro, que não é aquele supercarro. Vou arrastá-lo até aqui. E SUV, vou arrastá-lo até aqui. Aí está. Então, o que eu posso fazer é usar esses ícones. Pressione Control K, pressione Control K. Aí está. E simplesmente remova-os daqui. Então, aqui, temos o salão como o estado padrão. O que vou fazer a seguir é clicar aqui para estado do SUV dentro da etiqueta frontal e movê-lo para cá. Então, dentro do estado do SUV, o que vou fazer é abrir o ícone da minha etiqueta, selecionar meu ícone de soluto e localizar o ícone do meu SUV, que é este. Basta arrastá-lo e soltá-lo até ficar azul assim, eu solto, ele vai se preencher. E então aqui, digite SUV. E como temos essa seção de conteúdo, o que vou fazer é transformá-la em uma seção alinhada à esquerda. Na verdade, volte ao estado padrão aqui, selecione meus textos, certifique-se de que estejam alinhados à esquerda para que se estendam para o lado direito e não para todos os sites. Aí está. Agora SUV, aí está. Então, estado padrão, vamos ver, 24, 24, está tudo bem. Então, vamos continuar assim. E, finalmente, vamos criar um para o supercarro. Dentro deste, vamos digitar, vamos ver, supercarro. Aí está. E em vez do Saloon, basta localizar o ícone do supercarro arrastá-lo para cima até que fique azul. Solte. E agora temos um ícone de supercarro que muda entre o sedã e o supercarro. Parece bom, mas o SUV é movido um pouco. Então, vamos ver onde estamos com isso. Então, 24, vamos ver se estamos bem agora que não estamos, então ainda temos que ter certeza de que estamos aqui. Então, 24 dentro do SUV. Isso está alinhado à esquerda, então teremos que corrigir isso manualmente. Mas não se preocupe, porque dentro do Webflow usaremos apenas esse. Então, dentro do SUV, vou empurrá-lo aqui mesmo. Então, como o Range Rover é o SUV, como você pode ver, temos 24 anos e agora vamos começar a adicionar nossos elementos de texto. Então, primeiro de tudo, vamos começar com o nome. Então, um Range Rover, Voc. E esse texto será H três. Então 24, algo assim. E vamos ver onde está. Então, rotulado aqui mesmo. Não entendo por que não está aparecendo, mas não importa. Vamos posicioná-lo dessa forma. Aí está. E as distâncias também serão 24. Então, 24 aí está, Controle D para duplicá-lo. E esse será o nosso preço. E o preço será apenas o azul principal. E mais uma vez, 24 a partir daqui, o Control D foi lubrificado. Este último será o texto do nosso parágrafo, assim. E dentro disso, podemos colocar informações adicionais , como as disponíveis para coleta. Agora, se não estiver, se estiver no transporte, talvez possamos colocar essa informação lá, se quisermos. Mas está disponível para retirada. Agora, o que podemos fazer é simplesmente arrastar nosso componente onde está o botão principal. Aí está. Então arraste-o. E o que podemos fazer é ter certeza de que temos 24 anos. Assim como todos esses outros elementos. Aqui. Eu posso digitar algo como reservar este carro. Aí está. E ao passar o mouse, vou simplesmente digitar a reserva deste carro também. Aí está. E agora o que posso fazer é duplicar esse botão. Certifique-se de que eu tenho 24 anos. Clique duas vezes aqui. Opa, só um. E certifique-se de que estamos a 24 daqui também. Como mais um. Aí está. E neste botão, na verdade, vou desagrupar o componente Desagrupar. E isso será o fundo do botão Outline. Dentro do fundo do botão de contorno, o que vou fazer é simplesmente selecionar meu texto, que é esse texto aqui. E eu vou digitar somente as opções de C. Aí está. E para isso, o que eu posso fazer é agrupá-lo, chamá-lo de outline ou BTN, outline. Assim. E somente as opções C terão uma cor de disco. Então, talvez esse cinza escuro ou algo assim. Sim, vamos usar cinza escuro. E o botão não terá a cor de preenchimento, mas terá a cor da caldeira de cinza escuro, algo parecido. Aí está. Pressione Control K para transformá-lo em um componente. Agora, crie um estado de flutuação para ele. Dentro da capa, alteraremos essa cor para talvez um parágrafo h3 e também alteraremos a borda do nosso botão para o parágrafo HD. Então, vai se diferenciar um pouco mais. Então, se eu pré-visualizar isso muito rapidamente, você pode ver que isso funciona e também funciona. Então, agora temos esses dois. Mais uma vez, o descarte vai ficar no topo da página e vai rolar um pouco para baixo. Então é isso que vamos fazer. Vamos agrupar rapidamente todos os nossos elementos. Então, vamos selecionar o rótulo. Range Rover evoca abaixo do preço da etiqueta disponível para retirada do que temos nosso botão principal. Temos o contorno do botão. Aí está, barra lateral do carrinho, selecione tudo, Controle G ou Comando G. E vamos chamar esse carro de barra lateral. Aí está. E coloque-o logo atrás daqui. Agora temos nossas imagens e podemos colocá-las, por exemplo em um grupo, um grupo principal. Então, vamos pressionar Control G e chamá-lo, por exemplo, de conteúdo do carro. Conteúdo do carro ou detalhes do cartão de inflamação do carro. Você pode chamá-lo do que quiser. Vou chamá-lo de conteúdo de carro. E vamos ver 24 de cada lado. Talvez eu possa até estender esse botão. Então, o que eu posso fazer neste caso talvez seja estendido para B24. Mas para fazer isso, terei que desagrupar esse componente. Então, vamos primeiro lidar com isso. Vamos ver onde estamos. 22, 24, aí está. E se eu passar o mouse, isso mudou porque eu queria usar toda a largura desse elemento, porque é assim que ele ficará mais tarde no Webflow. E para este, o que podemos fazer é ver, desagrupar, agrupar, chamá-lo de main btn, chamá-lo de main btn, e talvez dar a ele uma classe de grande ou algo assim, pressionar Control K. Em seguida, estenda isso para caber isso e crie um belo pequeno estado de Horace. Chame isso de pairar dentro do estado de terror. Ou precisamos mudar a cor do mouse e voltar para a cabra leiteira principal. E agora, quando eu pré-visualizo, temos um pouco mais de espaço aqui dentro do nosso cartão. Então, quando eu passo o mouse, você pode ver que as informações parecem um pouco mais legíveis do que antes. Então, vou parar o vídeo aqui. E no próximo vídeo, continuaremos construindo essa seção porque teremos muitos conteúdos aqui. Então, como já estamos há 17 minutos neste vídeo, vamos continuar lá. Então, eu vou te ver lá. 142. Design da Lightbox: Ao clicar nessa imagem grande, você quer poder ver todas as imagens e simplesmente rolar para a esquerda e para a direita entre elas. E é isso que o light box permitirá que você faça no Webflow. É super simples de fazer. será um pouco complicado Mais tarde, será um pouco complicado conectá-lo ao CMS. Mas em termos de layout, é simples porque o componente já está lá. Mas para mostrar algo assim no XD, você precisa criá-lo. Então, vamos entrar no XD e ver exatamente isso. Então, aqui estamos no Adobe XD. E o que vou fazer com esta é criar uma página completamente diferente. Então, pressione o Controle D aqui para duplicar este e chamá-lo de caixa de luz. Se quiser criar, se quiser trabalhar comigo. Então, vamos tentar isso de novo. Vá lá. Caixa de luz. Aí vamos nós. Adorável. E vou reutilizar essas imagens. Então, a partir daqui, vou desagrupar isso. Coloque as imagens em cima assim e livre-se de tudo o mais assim. Em seguida, vou limitá-lo ao tamanho original, que é esse. Então, basta clicar duas vezes e reduzir o tamanho para algo assim. Aí vamos nós. Então, talvez 1080 ou algo parecido. Então, se eu clicar em pré-visualização, você pode ver como fica. Vamos fazer um loop. E então o que eu vou fazer é me livrar disso, ver todas as imagens como esta. E talvez eu possa até me livrar desse para desagrupar. E agora o que eu posso fazer é talvez posicioná-los de forma um pouco diferente. Então, nesse caso, o que podemos fazer é talvez, vamos ver, talvez possamos criar um bom plano de fundo aqui. Então, crie o plano de fundo e vamos desagrupá-lo também. Então, desagrupe, isso vai ser uma caixa de luz. Bg. Aí vamos nós. E vou posicioná-lo para ter a largura total do nosso quadro de arte, dessa forma. Lá vamos nós e nos livramos da fronteira. E em termos de cor, vamos usar, sei lá, algo assim. Talvez tenha reduzido a opacidade para talvez 80% ou algo parecido. Então, é um pouco transparente assim. Então, finalmente, o que eu posso fazer é talvez experimentar o tamanho disso. Talvez até aqui. Vamos ver. Portanto, a altura pode ser talvez 6609. Aqui, funciona bem. Certifique-se de que esteja em um centro. Isso parece bom. E aqui o que vou fazer é porque temos 12345, vou criar mais. Então, Controle D 67.8. Então, vou localizar minhas imagens do Range Rover. Então, imagens de carros, vamos localizar o Range Rover. Então, aqui temos 12345. Então, agora precisamos de seis. Aí vamos nós. Então precisamos de sete. Aí vamos nós. E, finalmente , precisamos do número oito. Adorável. Uma última coisa que quero fazer é selecionar meu x ou minhas roupas daqui e posicioná-las aproximadamente por aqui. Então, vamos ver, somos 56, 49. Então, vamos apenas empurrá-lo para ficar no centro, aproximadamente, para que isso realmente não importe para esse caso em particular. Porque, mais uma vez, a light box tem seu próprio estoque ou layout, que segue dentro do Webflow. E para esse layout, o que precisamos talvez seja posicioná-lo no centro desta forma, que acho que funciona neste caso. O que também podemos fazer é talvez reduzi-lo para 64, assim. E talvez coloque isso em um centro entre nossas roupas e essas imagens, aqui vamos. Uma última coisa que vamos querer fazer com esse layout agora é simplesmente nos conectarmos. Então, vamos verificar isso rapidamente. Aí vamos nós. Então, o que vou fazer agora é quando alguém clicar nessa imagem, por exemplo, na imagem principal. Aí está. Vou mudar para o modo de protótipo. Clique e arraste essa alça azul para minha nova caixa de luz, nossa porta. E o que vou fazer em vez da transição, vou escolher Overlay, que só vai sobrepor isso em cima do nosso quadro de arte. Animação. Talvez possamos deslizar para cima ou para baixo ou simplesmente pressionar Nenhum. Não importa. Ou podemos escolher dissolver talvez ou algo parecido, mas vamos usar nenhuma. E quando você clica em algum lugar fora desse quadro de arte, você obterá esse efeito deslizante e ele simplesmente desaparecerá. Então, vamos testá-lo. Então, quando eu seleciono este quadro de arte e clico em Pré-visualizar, não conseguimos ver nada, então podemos rolar para baixo, podemos explorar todas essas coisas. Mas quando eu clico aqui, você pode ver que a caixa de luz simplesmente se encaixa. E é claro que você pode ajustar esse componente, mas não vamos perder muito tempo com este vídeo. Obviamente, você pode adicionar que, quando eu clicar nesta imagem, ela será substituída por essa imagem. Quando eu clico, essa imagem vai ser substituída por esta imagem, mas eu tenho que criar um componente gigante com oito estados diferentes. Então, o estado um será a imagem número um, o estado dois será o número da imagem para ficar três e assim por diante. Mas eu não quero aborrecer muito vocês. O que é importante aqui é que quando eu clico aqui, ele simplesmente vai desaparecer. Então, a qualquer momento, eu posso voltar e clicar aqui, ele vai mostrar isso. Mas quando eu clico aqui, ele vai desaparecer e vai me levar de volta para lá. Então, é muito simples criar esse componente de caixa de luz. Vamos clicar em Salvar em nosso design e no que podemos criar. A próxima talvez seja a página de nossos empréstimos. Como os empréstimos são muito importantes, ainda vamos reutilizar alguns desses elementos. E teremos essa seção, essa seção e essa seção que será diferente e todas essas outras seções serão iguais. Então, nos vemos no próximo vídeo, onde começaremos com a seção de empréstimos. 143. Página de empréstimos: Vamos agora criar a página dos empréstimos porque, como mencionei anteriormente, eles têm esses parceiros externos com quem trabalham para os pulmões, bem como para o transporte do carros e agentes alfandegários e coisas assim. Então, vamos agora para o XD e trabalhar na página de empréstimos. Então, aqui estamos de volta no Adobe XD. Vamos duplicar uma dessas páginas mais uma vez. Então, talvez possamos usar esse Controle D. E eu posso chamar isso de empréstimo. E se você quiser uma consistência um pouco melhor, você pode tirar isso do caminho para aqui. E, claro, a animação ainda funcionará corretamente porque se eu a mudar de volta para o protótipo, você pode ver que ela ainda está conectada. Portanto, não importa para onde você o esteja movendo, ele ainda funcionará bem. Então, nesse caso, o que faremos é escolher nossos carros. Nesse caso, vá para o estado padrão, vá para os empréstimos selecionados porque esta é a página selecionada. Afinal de contas. Aí está. E agora o que vou fazer é fazer alguns ajustes aqui. Então, eu não preciso dessa seção superior, mas na verdade vamos usá-la. Mas eu vou me livrar dessas imagens, ainda vou ter que verificar isso. E isso vai acontecer sozinho. Na verdade, não, vamos voltar um pouco. Então, algo está acontecendo. Então, vamos nos livrar desse. Então, em vez da seção de promessas de carros, será a seção de promessas de empréstimos. Aí vamos nós. E aqui vamos usar o mesmo texto, a mesma posição, empréstimos para o carro dos seus sonhos. Livre-se dessa seção porque não precisamos dela. E teremos essas seções na parte inferior. Mas vamos estender nosso quadro de arte apenas para tocar e mover essas três seções um pouco para baixo, algo assim. E então nos preocuparemos com o posicionamento um pouco mais tarde. Aqui, o que faremos é usar essas duas imagens, que mencionei. Então, vou usar esse do Range Rover e vou usar esse do Audi RS cinco. E eu vou inverter isso clicando aqui. E eu vou posicioná-los assim. E vamos ver onde estamos. Então, talvez possamos ir para o centro da nossa página e manter pressionada a tecla Shift Alt e clicar com o botão esquerdo para que possamos reduzi-las uniformemente. Agora, o que podemos fazer é posicioná-los um pouco melhor. Então isso vai estar aqui. Isso vai estar aqui. E, obviamente, precisamos reduzir o tamanho, ainda mais deles, até alcançarmos a aparência que queremos, talvez por aqui, acho que vai funcionar muito bem. Sim, talvez eu possa medir isso com apenas um toque. Então, para se divertir com a Audi, tudo bem. Basta movê-los para cá. E em termos de espaçamento, o que eu posso fazer é simplesmente empurrá-los até que eles toquem a linha do texto aqui. Em termos do texto em si, ele ainda é mantido em 40, o que achamos que vai funcionar muito bem, mas eu realmente não estou satisfeito com o Audi, então talvez eu possa ajustá-lo um pouco. Aí vamos nós. Eu acho que isso funciona muito bem. Então, vamos ver. Até AD 5, talvez eu pudesse aumentar isso. Só um toque. Na verdade, não, vamos deixar as coisas assim e não perder muito tempo porque acho que parece muito bom. Então, a próxima seção aqui será essa seção aqui. Então, nossas ofertas e abaixo disso teremos nossos parceiros. Então, vamos lidar com nossas ofertas primeiro, e vamos fazer isso primeiro. Então, vamos primeiro pegar os textos. Então, vou pegar o T aqui e digitar algo como empréstimos líderes de mercado de nossos parceiros. Aí vamos nós. Vou posicioná-lo no centro e me certificar de que estamos no H2. Encaixe no centro. Aí vamos nós. E aqui o que vou fazer a seguir é me certificar de que estou no centro. E, finalmente, certifique-se de que eu não sou 200, mas talvez 150 dessas imagens. Porque, mais uma vez, quero poder ver todas essas informações logo acima da falha, o que eu acho muito importante por causa dos propósitos de SEO e porque você deseja que suas informações seja sempre legível, se possível. Então, aqui o que faremos é fazer isso mais uma vez. Então, vamos passar para o controle do painel Layers D. Isso. E vou digitar algo simples e conveniente, mas transformar isso no H3 Control D nele. Mova-o para o centro e talvez escolha algo como várias opções de pagamento, controle D mais uma vez. E isso pode ser uma paz de espírito. Então, estamos fazendo basicamente exatamente o mesmo layout que fizemos. Onde fazemos isso? Como fizemos aqui mesmo. Então, podemos pegar isso e colorir novamente se quisermos, mas vou recriá-lo diretamente do topo. Então, aqui vou pressionar o Controle D, escolha os textos dos parágrafos aqui. E para os textos dos parágrafos, o que posso fazer é escolher isso aqui e talvez eu possa alterá-lo para cinza escuro apenas para fazer uma pequena alteração. Portanto, não tem exatamente a mesma aparência do texto na parte superior. Controle C, controle V. Aí vamos. E agora, o que posso fazer antes de continuar com mais conteúdo e informações, quero poder colar esses ícones no lugar, tudo bem, aqui e aqui vou escolher este, colá-lo aqui mesmo. E, finalmente, vou escolher este, colá-lo aqui mesmo. Então, agora vamos lidar com nossas camadas. Então, primeiro de tudo, teremos 24 distâncias entre cada um deles. Então, aqui, aqui e aqui, podemos ver que somos 24 de cada um desses, o que é bom. Vamos lidar com esses ícones. Verifique se eles estão alinhados na parte inferior. E vamos ver 24. Aí vamos nós. Então, agora o que posso fazer é simplesmente agrupá-los. Então, vamos agrupá-los. Vamos agrupar esses grupos de analistas neste. E eu posso transformá-los em uma pilha, o que só vai organizá-los um pouco bem para mim. Portanto, não preciso perder muito tempo lidando com meu layout e outras coisas. Então, primeiro de tudo, vamos posicioná-lo para ficar no centro e fazer o mesmo com este. Portanto, selecione tudo, verifique se está no centro. E selecione tudo aqui. Vá lá. Aí vamos nós. E certifique-se de que seja só esse. E certifique-se de que também esteja no centro. Aí vamos nós. Agora que isso está feito. O segundo vai para o centro e o segundo vai ter várias opções de pagamento. Aí vamos nós. O primeiro será simples e conveniente. E a última será paz de espírito. Então, estou apenas pegando o texto para que ele possa ser um pouco mais rápido. E, finalmente, porque a central sempre estará no centro, clique aqui. Mas esses outros, vamos usar esse truque de retângulo. Então, vou apenas posicioná-lo aqui. Clique aqui, verifique se está no centro. Aí vamos nós. E mova isso aqui até que se encaixe com a nossa grade, mais parecido. Então. Selecione os dois. Vamos lá e nos livramos desse retângulo porque não precisamos mais dele. Em termos de espaçamento, o que podemos fazer talvez seja escolher 64. Acho que vai funcionar muito bem. Vamos ver onde estamos. Então, assim, 64, estamos lá. E como usaremos a grade dentro do Webflow, o que podemos fazer é pressionar o Controle G aqui e talvez chamá-los de grade de empréstimos. Aí vamos nós. E pressione Control G nesta seção mais uma vez. Então lembre-se de que somos 150 porque você quer ser visto acima da falha. Mova-o aqui mesmo. E vamos chamar essa seção de líderes de mercado. Em seguida, vamos passar para a próxima seção. E para economizar um pouco de tempo, vou reutilizar esta sessão da página inicial Control C, Control V e sugerir que ela seja igual a esta. Na verdade, não, vamos mantê-lo em 200 por causa desse espaçamento dos outros. Então, aqui o que eu vou fazer é que essa imagem vai ficar sozinha. E isso pode ser, vamos ver, nossos parceiros. Nossos parceiros. Porque esse layout é exatamente o mesmo da tela inicial. A propósito, você também pode fazer isso no Webflow . Então, em vez de recriar isso repetidamente, basta clicar duas vezes em copiar e simplesmente colar na cópia diretamente do software de design de sua escolha, neste caso, o Adobe XD imagem de empréstimos. Deixe-me localizar aqui e arraste-o e solte-o para dentro. Aí vamos nós. Talvez, talvez o leve até aqui. E agora que isso está feito, deixe-me escolher meus logotipos, arrastá-los e soltá-los dentro. Em primeiro lugar, vamos talvez reduzi-las a algo assim ou, melhor ainda, vamos criar algumas caixas que contornarão nossos logotipos. Então, vamos usar algo assim e dar as dimensões de 270 por 60. E em termos de raio de canto, eu posso me livrar da borda, mas em termos do raio do canto, eu quero ser capaz de, Vamos ver o pino oito aqui e oito aqui, o que lhe dará o canto superior direito e canto inferior esquerdo de oito. Aí vamos nós. Eu posso empurrá-lo para o centro da minha imagem. Vamos ver, talvez 20 ou 24 ou até melhor em cada lado. E isso vai ser para o bronzeado, o logotipo deles. Então, esse será o suporte do logotipo, algo parecido. E vamos duplicar esse porque precisaremos posicioná-lo aqui. 24 deste lado , como você pode ver. E vamos empurrá-los abaixo para aqui. Use o bronzeador, o logotipo deles, reduza a escala, apenas uma mistura de toque. Estamos no centro do nosso titular do logotipo, clique em Control G. Este será o logotipo do nosso principal parceiro. Mais uma vez, ele não renomeará isso por algum motivo. Eu não sei por quê. Então, vamos tentar isso de novo. Melhor parceiro, logotipo. Conheça um tópico, mas o melhor. Aí vamos nós. E, finalmente, vamos lidar com a próxima, que obviamente será a última. Então, vamos primeiro alinhá-lo ao centro e ao centro e pressionar Control G, neste caso. E em vez de cobrir, vou lhe dar uma garrafa. Logotipo do parceiro inferior. Ousamos continuar bem. Então você pode ver que agora também temos esta página. Finalmente, o que nos resta fazer é selecionar essas seções na parte inferior. Então, vamos selecioná-los. Agora vamos realmente organizar isso um pouco melhor. Então, teremos nossos parceiros logo abaixo de nossos pulmões. Portanto, teremos heróis, depois empréstimos, seção promocional e, em seguida, empréstimos para compensação de mercado são parceiros, que não são 170 e deveriam estar em 200. Isso porque colocamos logotipos no lugar. Aí vamos nós. E agora deixe-me selecionar esses três e colocá-los no lugar até que completem 200. Aí vamos nós. E, finalmente, uma última coisa a fazer é cortar isso para B64. Opa, quase lá. 64, lá vamos nós. Então, agora que essa página está concluída, finalmente, o que nos resta fazer é criar a página Fale conosco, que obviamente será muito simples. Vamos apenas reutilizar essas informações e simplesmente colar na imagem interna. Então, nos vemos no próximo vídeo. Realmente não há necessidade de eu criar o próximo vídeo, mas ainda assim vou criar isso com certeza e explicar algumas informações adicionais que não abordamos aqui. Então, eu vou te ver lá. 144. Página “Entre em contato conosco”: Vamos prosseguir e criar a página Fale conosco. Como eu disse, vai ser super simples. Isso será feito em apenas alguns segundos porque salvamos todos esses componentes. Então, vamos direto para o XD e criamos. Então, aqui estamos no XD, mas eu vou selecionar este, Control D mais uma vez. E vamos levar isso um pouco mais longe porque isso está nos distraindo por algum motivo. Aí vamos e o colocamos no lugar certo. Agora temos todos eles. Então, vamos dar um nome a isso se ele quiser renomear. Aí vamos nós. Entre em contato conosco. Aí vamos nós. E aqui, o que faremos imediatamente é selecionar o estado padrão do empréstimo, selecione, Entre em contato, conosco, selecione selecionado porque afinal, é isso que selecionaremos. E se livre desse. Então isso, isso e isso eliminarão todas essas informações. E, finalmente, o que precisamos é arrastar e soltar uma imagem dentro dela. Vamos ver algo assim. Aí vamos nós. Mais uma vez, é uma imagem muito grande da Envato Elements e da cobrança de dívidas, que eu já falei e mostrei. Então, podemos cutucar isso aqui. Na verdade, sei que o que vamos fazer é cortá-lo. Então, vamos usar um retângulo com uma altura de, digamos, 600. Vamos nos livrar da fronteira. Agora vamos empurrá-lo direto para o topo. Quero dizer, a parte inferior da nossa navegação. E vamos chamá-lo de showroom de aranhas, talvez porque digamos que esse seja o showroom dessa empresa. E agora, dentro desse espaço reservado, vamos arrastar e soltar essa imagem, clicar duas vezes e ajustá-la para caber talvez mais ou menos aqui ou algo assim. Sim, basta cortar os sapatos dele e acho que vai funcionar muito bem. Finalmente, a única coisa que precisamos fazer agora é aumentar isso e dar uma distância de 100, por exemplo, porque não precisamos que seja 200. Mais uma vez, para que tudo esteja logo acima da dobra. Corte para 64, talvez 63, 65. Aí vamos nós. Então, finalmente, é isso. Este é o nosso projeto concluído e é aqui que começamos. Então, começamos com uma página inicial. Em seguida, passamos para a página do curso, onde nossos usuários poderão selecionar os carros que desejam quando forem levados a este relatório, chamado de carro selecionado, onde poderão ver informações adicionais. Eles podem até mesmo clicar nesta imagem para serem recebidos com esta caixa de luz. E então, se eles mudarem para pulmões, serão fornecidas as informações sobre empréstimos aqui nesta página. E, finalmente, Fale conosco, que é apenas uma simples página de contato. Então aí está. Isso é tudo para a parte de design, basicamente mais ou menos. Na próxima lição, mostrarei como conectar algumas interações básicas e algumas animações básicas entre essas páginas. Então, quando você compartilhar isso com seus clientes, poderemos desfrutar pelo menos algumas transições antes de você realmente migrar para o Webflow, quando adicionaremos algumas animações finais e, na verdade vai fazer com que este site se destaque. Então, eu vou te ver lá. 145. Como animar o design: Tudo bem, vamos agora trabalhar em nossa animação. Não vamos fazer algo louco porque, como mencionei, faremos isso no Webflow com todas as seções chegando em carga e coisas assim. Mas você ainda precisa mostrar ao seu cliente algo na parte do design. Então, vamos agora seguir em frente e fazer isso. Então, aqui no XD, o que vou fazer é primeiro mudar para o modo de protótipo, como eu fiz anteriormente. E selecione meus empréstimos aqui. Então, pesquise itens, empréstimos. E aqui o que vou fazer é clicar nesse plus e simplesmente arrastá-lo para empréstimos. E em vez da fórmula, porque essa foi a última interação, vou usar a transição. Vamos usar, sei lá, pertence à animação. Talvez possamos usar dissolver, talvez esteja fora do ponto zero, digamos 4 s e fazer o mesmo para entrar em contato conosco. Então clique em arrastar até aqui manterá as mesmas configurações. Agora, dentro desta página, o que vou fazer, como você pode ver, ela já está conectada porque estamos usando o componente filho desse componente mestre. É por isso que eu disse desde o início que os componentes são extremamente importantes no XD. Então, aqui nesta segunda página, porque não a conectamos aos itens de navegação dos carros. Vou arrastá-lo até aqui e vamos dar uma olhada aqui. Ainda não o conectou aqui porque esse é o componente secundário. Não podemos conectá-lo aqui porque ele já está nessa página. Então, o que teremos que fazer é conectar cada um desses itens. Carros, arraste-o para aqui, selecione-o daqui, itens de navegação e carros o arrastam para aqui. E, finalmente, faça o mesmo com este. Se você quiser economizar um pouco de tempo , o que você pode fazer é fazer isso quando realmente começar com a próxima página. Então, no nosso caso, quando realmente começamos com esta página do curso, deveríamos fazer isso nesse estágio que tenhamos a liberdade de fazer todas essas coisas. Então, o que faremos a seguir são apenas algumas coisas super básicas. Então explore nossos carros. O que podemos fazer aqui é clicar e arrastar até esta seção e fazer a transição. Sim, vamos fazer a sobreposição. Então, apenas algumas transições básicas. Veja todos os carros, vamos fazer a mesma coisa. Então, ele só vai fazer a transição para esta página. E finalmente iremos para o Range Rover. E quando eu seleciono o intervalo, ele clica e arrasta até aqui. E vamos ver o que podemos fazer. Então toque em transição. Sim, vamos com, vamos com algo diferente. Então, vamos continuar, em vez da transição, podemos usar a animação automática e o destino do cartão selecionado está disponível, talvez seja fácil. Agora, vamos com facilidade , reserve este carro. O que ele pode fazer é talvez levá-los a esta página. Em vez da animação automática, vamos usar apenas a transição Dissolve, então a animação será dissolvida. E, finalmente, nesta página, somente as opções C , você será direcionado para a página de pulmões aqui. E a quantidade enviará o formulário de contato. Obviamente, podemos animar esses ícones ao passar o mouse e coisas assim. Mas, como eu disse, não vamos nos preocupar muito porque já trabalhamos muito. Então, se eu fizer uma prévia rápida do teste, clicar nos empréstimos nos levará à página de lançamento. Clique em Fale conosco. Vai nos levar para a página Fale conosco. Clique nos carros. E o que precisamos aqui é conectar isso não à página inicial, mas à página do curso. Então esse foi meu erro. Então, vamos ver. Os carros estão realmente conectados aqui. Então, simplesmente não aqui. Então, aqui vamos apenas movê-lo para esta página. Aqui. Vamos movê-lo para esta página. E aqui vamos movê-lo para esta página. Aí vamos nós. E agora deve funcionar. Então, agora estamos em contato conosco. Então, quando eu clico em dois carros, eu vou mudar para carros. Empréstimos, volte para os carros. Aí vamos, os empréstimos chegam. E a tarefa de contato mudará para entrar em contato conosco. Uma última coisa que queremos é conectar um logotipo para voltar para casa. Então clique aqui , estamos dissolvendo. Isso é bom. Selecione uma dissolução de logotipo. Selecione um logotipo e dissolva. Aí vamos selecionar o logotipo e você pode fazer a mesma coisa no rodapé. Então aqui, aqui, porque o componente original obviamente está na própria página inicial, então não funcionará dessa forma. E finalmente, aqui, lá vamos nós. Então, agora, quando o trocamos, digamos que estamos visitando ou não a página de empréstimos. Clique para alterá-lo. E quando eu clico no logotipo, ele me leva de volta para casa. Então, explorar nossos carros vai nos levar até aqui. Isso vai nos levar de volta para casa. Veja todos os carros. Vai nos levar até aqui e vamos dar uma olhada no Range Rover. Então, quando eu clico aqui, opa, isso vai nos levar até aqui. Então isso não é bom. Então, vamos mudar isso muito rapidamente. Então, se eu selecionar isso, em vez de animações automáticas, vou escolher transição e destino é a mesma animação que a dissolução foi lançada. O analista esclarece isso. Então, se eu clicar aqui, localize meu Range Rover, clique em “Aí vamos”. Agora estamos no topo da página, reserve este carro nos levará para a página Fale conosco. Então, carros mais uma vez, mudem para o Range Rover mais uma vez. Somente opções C. Vai levar um discurso muito longo. Então, se eu descer até o rodapé, se clicarmos no logotipo, isso nos levará à página inicial. Então aí está. É apenas uma pequena transição rápida e um pequeno curso intensivo de animação no Adobe XD. Obviamente, vamos lidar com isso com muito mais detalhes no fluxo de tubos, onde vamos animar cada uma dessas seções, cada uma dessas cartas, vamos animar um pouco ou passe o mouse sobre as imagens. Vamos animar todos esses ícones voando para o lugar certo. Isso serve apenas para mostrar o que é possível no Adobe XD. Obviamente, se você não estiver trabalhando em algo como o Webflow posteriormente, você está apenas fazendo design. Talvez passe muito mais tempo no Adobe XD e anime, como eu disse, essa caixa de luz, por exemplo ou esse tipo de formulário, talvez você possa criar um estado de componente separado, algo parecido, apenas para fornecer ao seu cliente dê um pouco mais de valor às suas animações. No próximo vídeo, falaremos sobre como exportar todos esses ativos para o Webflow. Então eu vou te ver lá. 146. Exportando os ativos: Agora vamos falar sobre como exportar nossos ativos para um desenvolvimento posterior no Webflow. E vou mostrar alguns formatos de arquivo, para que eles podem ser usados e como realmente estruturar seus arquivos para um melhor caso de uso para você , porque é você quem vai fazer o fluxo de trabalho de desenvolvimento. Mas ainda mais importante, se você estiver configurando isso para outro desenvolvedor ou equipe de desenvolvimento, para que eles possam usá-lo facilmente. Então, vamos mudar você para o XD e mostrar como fazer isso. Então, aqui estamos no Adobe XD e o que vou fazer é exportar alguns desses itens. Então, primeiro de tudo, o que posso fazer é selecionar isso porque vou exportar isso, isso e isso como itens separados. Então, vou selecionar todos eles, pressione Control ou Command E. E aqui o que eu posso fazer é selecionar PNG, mas eu não vou realmente fazer isso. O que vou fazer aqui é selecionar esses dois. Então, esses círculos atingem o Controle E. E vamos mudar rapidamente aqui. Deixe-me configurar a pasta aqui mesmo na minha área de trabalho, por exemplo, e vou fazer, digamos, um ponto sobre ativos. Aí vamos nós. Deixe-me realmente mostrar a você esta que eu vou fazer. Então, aqui dentro dessa pasta, vou criar outra pasta e chamá-la de imagens. E outro polar chama isso de ícones. E como podem ser imagens ou ícones, tudo depende de você, mas neste caso, vou colocar duas imagens para elas. Agora, vamos mantê-los também. Selecione a pasta de seleção de ícones e certifique-se de selecionar o SVG, pois isso manterá a capacidade de edição posteriormente para desenvolvedores e, para você, você experimentará um pouco em Webflow, animações, atrasos, animações de caminhos e coisas assim. Mas se não for simplesmente exportar , ele manterá a mesma consistência de qualidade que você tinha aqui. Porque nomeamos todas as nossas camadas corretamente. É muito simples para nós exportar todos esses ativos. Então, vamos seguir em frente e exportar alguns desses ícones. Então, aqui temos nossos ícones, então vamos selecioná-los aqui. Então, aqui temos garantia, manutenção, empréstimos. Abra todas essas pastas. Selecione isso. Opa, eu não criei o componente para isso. E isso. Aí está. Então, agora, porque eles estão na pilha, vamos ver. Sim, porque esta é a pilha, não consigo selecionar esta e esta é apenas selecionar tudo. Pressione Control E, SVG nos ícones. Aí está. Selecione este também com os ícones. E selecione este também com os ícones. Você notará que estou pulando essas imagens por enquanto, mas isso não faz diferença. Então, pressione Control E para exportar este. Em seguida, pressione Control E para exportar este. Todos eles como SVG e, finalmente, este como SVG. Aí está. Agora vamos descer até aqui. Então, aqui está como você se dirige? Então aperte Control E, exporta, selecione o telefone e este é o ícone do telefone. Então, é íntimo. Controle K, Controle E. Exportações. Aí vamos nós. E o horário de funcionamento, vamos clicar em renomeá-lo para ver, o telefone. Eu cometi um erro. Deixe-me mostrar isso. Telefone com ícones. Deixe-me me livrar disso porque eu transformo todo esse texto com o ícone em um componente e não quero fazer isso. Então, o que eu vou fazer na verdade é voltar aqui, Controle Z para desfazer isso e apenas selecionar o ícone do telefone, pressionar Control E. Agora exporte-o. Isso é bom. E faça o mesmo com o horário de funcionamento. Então, em vez de tudo, vou selecionar o ícone do relógio, Control-V. Vamos lá, e o ícone do relógio foi exportado. Agora, deixe-me fechar isso e vamos selecionar esses ícones na parte inferior. Então, nós temos esses, vou selecionar todos eles que controlam E SVG. E a última coisa que eu quero fazer é exportar meu logotipo como SVG também. Porque eu quero manter esse retentor. O mapa é algo que vamos atualizar posteriormente e integrar diretamente no Webflow. Os sólidos lidam com imagens. Então, primeiro de tudo, nossos benefícios no controle de imagem E. E, em vez de SVG, vou escolher JPEG desta vez por causa da melhor taxa de compressão. Então, vamos voltar às imagens. Selecione Pasta e clique em Exportar. Faça o mesmo com isso. Então, o que oferecemos, e eu não vou exportá-los porque eu já os tenho em pastas separadas. Eu vou selecionar este. Julie, lá vamos nós. E, finalmente, selecione este. Mas em vez de JPEG, porque tem fundo transparente, vou selecioná-la como exportação para PNG. Aí vamos nós. Agora, o que nos resta fazer é fazer o mesmo com todas essas páginas diferentes. Aqui. Basicamente, não precisamos fazer nada porque selecionamos tudo. Mas aqui. Na verdade, vamos selecionar isso, transformá-lo em. Agora vamos primeiro selecionar a imagem porque estamos nessa pasta. Exporte PNG mais uma vez porque é um plano de fundo transparente. Aqui. Vamos mudar para SVG e mudar a pasta. Vamos aos ícones. Aí vamos nós. Selecione Exportação de pasta. Eu não vou tocar nessas imagens. Todo o resto aqui está bem, exceto isso. Então, vamos lidar com isso um pouco. Então, o ícone do SUV clique em SVG. Aí vamos nós. Vou trocar meu rótulo porque lembre-se de que temos três desses ícones. Então, vamos com a exportação de supercarros. Vamos mudá-lo para o estado padrão de um salão. Ícone do salão. Aí vamos nós. Aqui, vou trocá-lo de volta para o SUV e simplesmente alinhá-lo com o resto do conteúdo aqui. Se quiser estalar. Aí vamos nós. Então, tudo parece muito bom. Eu não vou lidar com essas imagens. E vamos lidar rapidamente com esses ícones porque há vários deles aqui. Mas eu posso fazer para acelerar um pouco meu processo talvez tente selecionar todos eles, mas remover a pilha de cada um deles. Se tentarmos fazer isso, lá vamos nós. Então, isso removerá a pilha de cada um deles, o que me permitirá selecionar vários ícones ao mesmo tempo. Então, se eu os abrir, posso selecionar, selecionar, selecionar, selecionar. Na verdade, não, vamos abrir tudo isso. Então, selecione, selecione, selecione, selecione e, a propósito, mantenho a tecla Control enquanto faço isso. E ele controlaria os ícones E SVG. Aí vamos nós. Agora você pode colocá-los de volta em pilhas se achar necessário. Mas eu não vou me preocupar muito com isso. Tudo isso é exportado, tudo bem. Vamos ver se temos outros ícones que temos. Então, vamos tentar exportar esses. Então a tecla Control nesta, Control K nesta e controle K nesta. Vamos ver, porque eles estão em uma pilha, eu acho. Por alguma razão, sim, isso está em uma pilha. Então, não importa, vamos exportar um por um. Não quero perder muito do seu tempo e do meu tempo também. Já estamos quase 8 minutos neste vídeo. E você pode ver que esse processo está se repetindo novamente. Então, vamos ver se eu tenho outros ícones. Não aceito o ícone de fechar aqui. Mas não vou exportá-lo porque, como eu disse, Webflow tem seu próprio componente lightbox dentro dele. Então, vamos agora lidar com as imagens. Então, a última exportação de imagem foi essa. Não vou exportar isso porque já os temos em pastas. Então, vamos lidar com eles. Então selecione esses dois controles E. Transforme isso em PNG porque ele tem fundo transparente mais uma vez. E vamos passar para nossas imagens. Selecione, clique em Exportar e selecione esses três. Assim. Em vez de PNG, vou escolher JPEG porque todos eles têm seus próprios planos de fundo, como este, Control E, JPEG. E aí está. Exportamos tudo o que precisamos exportar do nosso arquivo para que possamos criá-lo no Webflow. Então você pode ver como isso é simples, especialmente se você está acompanhando o que está fazendo, onde está fazendo. E se você estiver posicionando esses elementos corretamente, nomeados incorretamente. Portanto, é rápido exportá-lo para nosso desktop e começar a se preparar para o Webflow. Então aí está o design. A última lição, que eu quero abordar um pouco, é o design responsivo. Nesta seção do curso, não vamos fazer design responsivo no Adobe XD, como mencionei, porque seria apenas uma perda de tempo. Mesmo assim, quero mostrar como trabalhar com design responsivo usando esses elementos de pilhas e como planejar melhor o responsivo posteriormente no Webflow. Então, eu vou te ver lá. 147. Projetar para ser responsivo: Por fim, vamos abordar um pouco nosso design responsivo. O design responsivo é basicamente como o design se adapta a diferentes tamanhos de tela , também chamados de pontos de interrupção. E geralmente em suas ferramentas como o Webflow, você tem algo como três ou quatro pontos de interrupção principais e, em seguida, você pode adicionar pontos de interrupção adicionais e, entre esses pontos de interrupção principais, você tem mais pontos de interrupção. Então, por exemplo, para o tablet, esse é o principal ponto de interrupção, mas você tem tamanhos adicionais de tablet, como, por exemplo iPad é uma superfície é uma, fatalidades da Samsung é uma. Então, todos eles têm pontos de interrupção diferentes. Em tamanhos de tela diferentes. Então, deixe-me mostrar como trabalhar com isso no XD. Aqui estamos no Adobe XD, aqui está nosso design concluído. É assim que você vai separá-lo desta seção onde eu realmente vou criar todos esses ícones, todas essas cores, estilos, estilos de tipografia, só para fazer sua vida é um pouco mais fácil quando você chega a este arquivo. Mesmo assim, eu ainda queria mostrar a vocês como trabalhar com design responsivo aqui. Então, vamos, por exemplo eu não sei, duplicar esta página. Então, controle D ali mesmo, pressione a no teclado para ver o quadro de arte e vamos usar tablets. Vamos usar esse tamanho de tablet, por exemplo, e o que podemos fazer é selecioná-lo. E vamos escolher todas as oito colunas, por exemplo, vamos escolher algo como 60 em cada lado para torná-la um pouco mais larga. Então, o que podemos fazer aqui é selecionar nossa navegação, com base aqui. E se o tamanho da tela permitir, podemos simplesmente ajustar e mover isso um pouco. E então talvez possamos mover esse anexo para aqui. É assim que é fácil ajustar isso, mas preciso ajustá-lo desse lado, assim. Em seguida, clique duas vezes dentro e posicione. Essas seções, obviamente, serão muito simples porque estão apenas sendo dimensionadas por dentro. Então, posicione-o aproximadamente por aqui. Porque agora temos um pouco menos de tamanho. Talvez possamos escolher 32 aqui. Aí vamos nós. E agora, em termos de imagem, vamos mover a imagem um pouco para algo assim. círculo pode ficar. Ou talvez possamos mover a imagem um pouco para baixo para que ela possa cobrir o círculo. Agora, vamos mudar nossas posições e deixar que isso seja cinco por cento na obesidade, só para que você possa ver isso um pouco melhor. Então, em termos da próxima seção, o que podemos fazer é simplesmente copiá-la, colá-la aqui e pronto. Agora, como temos essa seção, vou me certificar de que ela esteja no centro do nosso quadro de arte, assim. Mas agora você pode ver o que temos. Então, temos que ajustar cada um deles. Então, em termos disso, vou desagrupá-lo. E vou posicionar esses dois últimos na parte inferior, bem aqui. E isso vai acontecer aqui. Então, vamos mover esses dois para baixo. Isso vai ficar aqui, isso vai ficar aqui. Aí vamos nós. Agora, o que podemos fazer, porque temos oito colunas, cada uma dessas cartas pode ocupar quatro colunas, então vamos incentivá-las a ouvir. Imagine que eles ouçam e incentive-os a ouvir. E, claro, todos eles podem ocupar algo como 32 de distância. Então, vamos selecioná-los e talvez empurrar e 32. E isso também pode ser 32, assim. Agora, finalmente, quanto à largura, o que posso fazer é simplesmente selecionar todas as minhas cartas em um lado, assim. E apenas certifique-se de que a largura o cubra dessa forma. E faça o mesmo com esses. Mas como eles têm o efeito de flutuação, não precisamos do efeito de flutuação aqui. Então, o que você pode fazer é desagrupá-los ou, se estiver com preguiça, pode mudar para o efeito de focagem. Você pode ver que ele vai, que voltou ao estado original. E você pode simplesmente estender o mesmo que eu fiz aqui. Mas, melhor ainda, é simplesmente seguir em frente e se livrar do efeito de flutuação simplesmente desagrupando-os como um componente. Então, porque temos esse formulário de contato, por exemplo, eu posso copiá-lo e colá-lo aqui. E como precisamos ter a cor original para este site, vamos dar a ele uma cor da cor do corpo. Aí vamos nós. Agora, tudo está bem como deveria. Então, aqui o que eu posso fazer é fazer a mesma coisa. Portanto, verifique se isso está no centro. Certifique-se de posicionar esse botão aqui. Certifique-se de apontar isso aqui. Certifique-se de apontar isso aqui. E agora temos esses dois. Isso é o responsivo em poucas palavras. Então você está apenas alinhando esses campos conforme o espaço permite. E eles vão se empilhar bem e preencher o espaço disponível onde quer que o espaço ocorra. Então, vamos recolher esse formulário e ver o que mais temos. Então, temos neste campo, então copie e cole. Mas o que podemos fazer aqui é transformá-lo imediatamente em uma pilha. Mas primeiro, desagrupe-o porque eram os componentes originais. Então desagrupe o Controle G e transforme-o em uma pilha. E isso pode ser, por exemplo , onde estamos, então opa. xícaras parecem onde estamos. E como temos a pilha, posso simplesmente mudar a posição da pilha e mudar a distância para 64. Talvez. Lá vai. E o que eu posso fazer aqui é simplesmente alinhá-lo. Então venha aqui, venha aqui, estenda isso para preencher toda a largura. Talvez reduza um pouco a altura para algo assim. E então isso talvez possa ir para os centros. Então, talvez eu possa posicionar isso no centro e colocar tudo em uma linha de texto onde estamos pode estar no centro. Aí vamos nós. E agora talvez eu possa localizar o conteúdo. Eu posso movê-lo para o centro da minha página assim. Mas agora eu tenho esses três. Então, o que eu posso fazer com eles é colocá-los em um grupo, colocá-los em uma pilha nessa direção. Aí vamos nós. E agora basta fazê-los ouvir assim, desagrupe minha pilha, venha aqui, posicione-a aqui e certifique-se de que esteja no centro. Aí está. Agora você tem um layout completamente diferente. O que eu posso fazer é empurrar isso para o centro. E tudo isso parece realmente lindo. Alguns, o que eu posso fazer a seguir é apenas ajustar meu rodapé. Então controle C, controle V para o rodapé. Certifique-se de que esteja no centro. Aí vamos nós. E apenas ajuste o que eu tenho aqui. Eu não sei por quê. Por algum motivo, esqueci de adicionar o rodapé como um componente. Não sei por que fiz isso, mas não importa. Porque ainda o mantivemos em todo o nosso design, mas vamos mantê-lo por uma questão de consistência. Vamos dar mais controle C, controle V. Vamos ver onde estamos com isso. 200. E o rodapé será exibido aqui. Na verdade. Para não perder muito tempo. Deixe-me fazer isso um pouco mais tarde. Agora vamos nos concentrar nisso. Então, vamos clicar duas vezes aqui e mover esses ícones de mídia social para aqui. Assim, mova isso no centro, desse jeito, e mova isso aqui e aí está. Isso é o quão fácil é criar um design responsivo e ajustado, obviamente querendo e não fiz é não fazer a navegação porque, mais uma vez, eu não queria perder muito tempo. Então, vamos usar esse logotipo por algum motivo. Isso meio que desabou sobre mim aqui mesmo. Não sei por que, mas isso realmente não importa. Então, se eu clicar na pré-visualização rapidamente, você pode ver como isso fica. Então, em vez do layout de três colunas, agora temos um layout de duas colunas. E como estamos no tablet, talvez a melhor ideia seja desagrupar esses componentes porque você não pode passar o mouse sobre o tablet porque está usando o dedo e não o mouse. E a mesma história aqui. Então, é assim que você está fazendo os designs responsivos para basicamente organizar esses elementos de cima para baixo, para a esquerda e para a direita e simplesmente movê-los para baixo. Mova este para cima, mova este para baixo, escale-os de acordo com a largura da tela. Porque a largura é o que importa. A altura realmente não importa porque a altura pode ser infinita. Então é aí que vou terminar esta lição sobre design responsivo. Porque, mais uma vez, vamos abordar isso com muito mais detalhes no Webflow. Portanto, não há realmente nenhuma necessidade de eu explicar isso mais detalhadamente aqui, mas eu só queria explicar a você o que você pode fazer no Adobe XD e que você pode obter um pouco dessa capacidade de resposta em suas páginas. No próximo vídeo, começaremos com o Webflow porque já exportamos todos os nossos itens incríveis. E vou mostrar como começar a usar o Webflow, o que é e como navegar por ele, caso você nunca o tenha usado antes. Então eu vou te ver lá. 148. Futuro do Adobe Xd: Nesta última lição, antes de passarmos para o Webflow, eu só queria abordar o futuro do Adobe XD porque, com as recentes notícias de comprar o Figma do lado da Adobe, eu só queria te dar meus $0,02 porque também sou embaixador do Adobe XD e estou trabalhando em estreita colaboração com a equipe da Adobe nos bastidores em tudo isso à medida que ele se desenrola. Então, basicamente, o que você precisa saber é se você sabe como projetar, se você conhece a estrutura do design, se você sabe como estruturar o design do início ao fim para que ele os problemas certos e ajudar o público certo. Você realmente não se importa com o software que vai usar. Porque se você é um bom designer, pode até usar o Microsoft Paint, se quiser, e ainda criará bons designs. Portanto, não importa realmente qual tipo de software você vai fazer e usar para atingir as metas que você tem no projeto em que está trabalhando. Basicamente, o que vai acontecer é no momento da gravação deste curso, as palestras ainda estão em andamento. Portanto, esse byte ainda não é definitivo. Eles ainda terão que finalizar, basicamente. Então, eles ainda precisam conversar com as pessoas que realmente possuem a Figma porque não é apenas um proprietário, são vários proprietários diferentes. Todos precisam estar na mesma página para que esse buy-in seja aprovado. Além disso, as equipes jurídicas precisam residir umas com as outras. Eles têm que assinar vários papéis diferentes. E então, se realmente acontecer que a Figma se torne parte da Adobe Creative Cloud, como todos os outros produtos da Adobe, é necessário que haja algumas mudanças e essas mudanças precisam acontecer dentro de Figma. Então, basicamente, as fontes da Adobe precisam ser incorporadas. Melhor otimização de imagem e melhor inclusão de imagens devem ser incluídas no interior. Algumas funcionalidades 3D precisam ser incluídas e o vídeo precisa ser aprimorado, bem como o suporte nativo de baixo nível de T, tudo o que o Adobe XD já tem, mas o Figma não. Então, no momento da gravação deste vídeo da Figma, acabei de introduzir a possibilidade de vídeo, e o Adobe XD já tinha essa possibilidade há mais de um ano. Então, para que tudo isso aconteça e eles encerrem o XD, levará cerca de um ano e meio. E em um ano e meio, você poderá fazer a transição facilmente para o Figma porque o Figma parecerá muito com XDR em um ano e meio, uma vez que se torne parte do pacote Adobe Creative Cloud . Em termos de XD e de desligá-lo, eles não o desligarão da noite para o dia. E estou falando com a equipe do Adobe XD sobre isso o tempo todo porque tenho todos esses cursos, tenho todos esses vídeos do YouTube. E preciso saber porque muitos dos meus alunos estão me perguntando qual será o futuro do Adobe XD. aparência é que, quando a transição começar a acontecer, eles lentamente eliminarão as atualizações para o Adobe XD. Mais uma vez, eles não o desligarão da noite para o dia. E nos próximos dois anos, XD ainda existirá como está. E ainda receberá algumas atualizações básicas de tempos em tempos. E como eles têm muitos usuários diferentes usando o Adobe XD, acho que é algo mais do 1 milhão ou 2 milhões de usuários usando o Adobe XD no dia a dia. Você pode imaginar que todas essas pessoas ficarão muito irritadas se você simplesmente desligar sua ferramenta favorita da noite para o dia. Então, eles farão a transição lenta para Figma. Uma vez que o Figma se torne parte da Adobe Creative Cloud, se tudo passar do lado legal, obviamente. E então, quando eles desligarem o XD, a ideia por trás disso é que ele se parecerá muito com o Adobe XD. Então, os dois basicamente parecerão quase idênticos. Apenas as ferramentas com as quais você está acostumado no XD ou no Figma serão pequenas, um pouco diferentes. Por exemplo, o posicionamento de alguns desses elementos será aqui em vez de aqui. Então, nada muito importante. E a última coisa que quero abordar é a compatibilidade de arquivos, porque você ainda terá todos esses arquivos do XD. Por exemplo, eu criei um sistema de design chamado inception. E você pode conferir isso no meu site, Alex, em design.co. E esse sistema de design Inception foi criado exclusivamente para o Adobe XD. Mas quando o Figma se tornar parte da Adobe Creative Cloud, espero que você tenha a opção de usar arquivos XD nativamente diretamente no figma devido a toda essa compatibilidade cruzada de arquivos que A Adobe Creative Cloud tem. Porque atualmente, você pode abrir, por exemplo arquivo do Adobe Illustrator no XD. Você pode abrir arquivos do Photoshop no XD. Você pode abrir conjuntos de ícones e imagens de ícones diferentes, digamos que no InDesign, você pode importá-los para o Illustrator. No Illustrator, você pode enviá-los para o After Effects. After Effects, você pode enviá-los para a No After Effects, você pode enviá-los para a estreia e assim por diante. Portanto, há todos esses fluxos de trabalho que precisam acontecer antes que eles finalmente encerrem o Adobe XD. E isso vai acontecer nos próximos dois anos. Então, mais uma vez, voltando ao início deste vídeo, o objetivo deste curso não é restringir você ao Adobe XD, é mostrar e ensinar como aplicar esses melhores e melhores métodos metodologias usando o design thinking e usando o processo de design. Portanto, não importa qual ferramenta você esteja usando, você ainda poderá ser o melhor designer de UX possível. Então, com isso resolvido, vamos passar para o Webflow e realmente começar a construir a partir do gráfico da web. Agora. 149. Design de sites em Figma Introdução: Nesta parte do curso, vou mostrar como criar um design que acabamos de criar no Adobe XD, figma. Quais são algumas das diferenças entre trabalhar no XD, trabalhar no Figma e quais são as duas que eu prefiro? Por que criar algo assim em primeiro lugar? Bem, se ainda não sabia, Adobe comprou a Figma por uma grande quantia de dinheiro nos próximos dois anos, eles a integrarão ao pacote de ferramentas da Creative Cloud. O que isso significa para você como designer é basicamente nada. Se você sabe como usar o Adobe XD, você também sabe como usar o Figma, porque essas duas ferramentas são exatamente iguais, exceto em alguns recursos principais que o figma possui. O Adobe XD não tem, e vice-versa. Agora, o que isso significa para a Figma em geral que eles dizem que não vão mudar nada. Ainda vai continuar o mesmo. Mas a Adobe não é confiável, na minha opinião, porque se você analisar as últimas décadas de seus negócios, o que eles fizeram com a mídia macro, o que fizeram com o Dreamweaver, o que fizeram com a demência e, recentemente, o que fizeram com o XD. Eles também farão praticamente a mesma coisa com Figma. O que isso significa é que eles adicionarão lentamente novos recursos aos adicionarão lentamente novos recursos recursos existentes e os transformarão em algum tipo de versão do Photoshop, como fazem com todas as suas ferramentas. Mas nós, como designers, temos que nos ajustar e nos adaptar a essas tendências e mudanças no setor. E, no final das contas, essas são apenas ferramentas. Então, se você assistiu a este curso até agora, viu que o processo de design não é apenas como trabalhar dentro de uma ferramenta de design como XD ou Figma. Essa é apenas uma parte muito pequena no final do quebra-cabeça. Além disso, mais uma coisa que quero mencionar é que vou mostrar os dois fluxos porque neste curso abordaremos o Webflow na próxima seção deste curso. E vou mostrar algumas diferenças em como exportar arquivos do XD e depois trabalhar no Figma, trabalhar no Webflow e como trabalhar diretamente no Figma. Em seguida, basta copiar e colar seu design no Webflow. E por que eu não acho que seja uma boa ideia. Na minha opinião, você deve sempre exportar todos os seus ativos e recriá-los do zero no Webflow, exceto se você estiver criando essas páginas de destino realmente simples que podem ser recriadas em, digamos, 1 h ou 2 h ou algo parecido. Na minha opinião, vale muito a pena experimentar esse plug-in. E vale muito a pena o esforço de figma para Webflow, mas não o contrário, não para essas páginas, digamos, complexas, porque na minha opinião, se algo vai quebrar, se você não sabe como consertá-lo no Webflow, então você realmente vai tropeçar. Portanto, não deixe de conferir a parte do Webflow e ver como construí-la do zero. E não vou regravar essa seção mais uma vez porque ela já foi gravada a partir desses ativos exportados do Adobe XD para o Figma porque é exatamente a mesma coisa. Mais uma vez, imagem é uma imagem, se você exportou do Adobe XD ou do Figma, você ainda vai acabar no Webflow neste exemplo específico. Então, como eu disse na próxima lição, vamos começar com essa transição do XD Figma. E vou mostrar algumas diferenças em como trabalhar com as duas ferramentas. Então, nos vemos na próxima aula e vamos começar. 150. Placa de Mood e mapa de site: Tudo bem, menos do que pular para o Adobe XD. Deixe-me mostrar onde estávamos e onde vamos parar durante esta seção do curso. Então, aqui estamos no Adobe XD e isso é o que criamos até agora, como você deve se lembrar, criamos esses wireframes em papel para criar fluxos de usuários, mapas de sites para a arquitetura de conteúdo. Em seguida, criamos esse mood board copiando e colando imagens da web. E criamos esse guia de estilo no final do nosso projeto. Agora, não vou abordar exatamente as mesmas etapas porque eu já as criei e você provavelmente já as assistiu. Então você ficará entediado porque tudo é exatamente o mesmo. O que vou fazer nesta parte do curso não é focar em wireframes em papel, focar no fluxo de usuários. Mas vou mostrar algumas diferenças em Figma em relação a essas flechas em particular. E vamos trabalhar no mapa do site e na arquitetura de conteúdo. E não por causa do conteúdo em si, vou apenas copiar esse conteúdo daqui e colá-lo no Figma. Mas vou mostrar algumas dicas e truques de organização que você pode usar na dívida da Figma. uma vez, o Adobe XD é um pouco diferente, então, para o mood board, vamos copiar isso porque não quero perder seu tempo com este guia de estilo. Mesma história. Vou copiar e colar isso porque estamos usando apenas os mesmos ativos. E vou mostrar como configurar isso para seus desenvolvedores mais tarde porque o Figma tem esse recurso chamado páginas que o Adobe XD não tem. Então, vou mostrar algumas diferenças lá. Então vamos atacar nosso design. Vamos começar pela página inicial, passar para carros, carros selecionados e assim por diante. Então, vou fazer exatamente a mesma coisa que fizemos aqui. Eu só vou mostrar como recriá-lo no Figma e quais são algumas diferenças. Quero guiá-lo por esse processo inteiramente do zero, como eu disse, porque eu só queria mostrar que essas ferramentas são quase exatamente as mesmas. Como um estranho. Você pode examinar algumas características e pensar por si mesmo: bem, existem algumas diferenças principais aqui. Eles não são exatamente iguais, mas acredite em mim, eles são. Enquanto eu oriento você nesse processo, você pode assistir toda a parte XD do curso e agora toda a parte cinematográfica do curso. E veja por si mesmo como essas ferramentas realmente são diferentes. A verdade é que eles são quase exatamente iguais. Que existem algumas, apenas algumas diferenças aqui e ali, digamos, nas convenções de nomenclatura e nessas páginas, por exemplo, como os componentes funcionam e coisas assim. Mas, no final das contas, o quadro geral é exatamente o mesmo e essas ferramentas fazem exatamente o mesmo trabalho. Então, o que eu vou fazer é deixar isso de lado e mostrar como trabalhar no Figma. Então, aqui estamos em Figma. E, como você pode notar, a ferramenta é um pouco diferente do XD. Porque no XD, se eu o trouxer de volta mais uma vez, você pode ver que temos todos os nossos recursos e todos os nossos componentes, cores e estilos aqui, e temos nossas ferramentas no lado esquerdo, enquanto no Figma, temos nossas ferramentas aqui e temos nosso painel de propriedades aqui. O compartilhamento é exatamente o mesmo que no XD. Você simplesmente não tem esse protótipo de design compartilhado aqui, mas está projetando imediatamente. Você não precisa compartilhar por si só, você só precisa compartilhar quando ele começar a compartilhar e, em seguida, ele será atualizado automaticamente porque está no navegador. Mas aqui você pode simplesmente clicar para visualizar, mesma forma que no Adobe XD. E em vez de ter todas as suas cores, estilos, ativos ícones desse lado, você os terá desse lado ao clicar em algum lugar externo. A outra grande diferença aqui é que não temos nossos conselhos. Então, no XD, temos nossos pássaros. Então, todos esses são quadros de arte, como você deve se lembrar, isso, por exemplo é 14 40 por 5775. Então, vou copiar isso muito rapidamente. Só essa largura. Volte para aqui e aqui eu tenho que pressionar F para o quadro, arrastar um quadro rápido. E aqui para a largura, basta colar esse N. E aqui eu tenho minha moldura. Se bem me lembro, essa é uma página inicial. Então, deixe-me copiar esse texto aqui. Volte para aqui, clique duas vezes nesse nome do controle de quadro V e pressione Enter. Então, basicamente, o que eu fiz aqui, ele criou um aeroporto. É só que não se chama nosso porto em Figma. É chamado de moldura. E o quadro tem alguns recursos que as portas não têm. Mas basicamente, em poucas palavras, eles são exatamente iguais. Então, vamos começar com o primeiro e vou clicar em Excluir rapidamente, porque o que eu quero fazer é arrastar x dy para fora. Para que você não fique cego enquanto eu começo a trabalhar com essa música, vamos tocar em Control C e Control V para colar alguns ácidos aqui e ali. Então, eu vou entrar aqui e colar essa moldura de papel lá dentro, assim. Então, o que eu vou fazer é basicamente criar um relatório ou um quadro como esse. E eu vou chamá-lo de moodboard. E deixe-me verificar. É 19 201-080-1920 por 1080, assim. E então eu vou selecionar todo o conteúdo que estava originalmente dentro desse quadro de humor e selecionei Ctrl V para colá-lo. E você pode ver que ele vai colá-lo exatamente com o mesmo peso, mas em vez de ter imagens separadas como eu tenho aqui no XD, ele vai colá-las como uma única imagem. Então, o que eu posso fazer neste momento é chamado de imagens de mood board. E se você quiser exportar imagens separadas, o que você pode fazer, porque, como você pode ver, eu as selecionei. Tudo bem, aqui. Você pode fazer isso. Então você pode controlar C, copiar, controlar V e colar. Então, ele vai colar uma única imagem. Em seguida, você pode dimensioná-lo segurando a tecla Shift e colando-a ali mesmo para poder posicioná-la onde quiser. Mas, nesse caso, não quero perder seu tempo, porque se quisermos ver como obtive essas imagens, deixe de assistir à seção de mood board do curso. Então, o que eu vou fazer é arrastar e soltar meu logotipo dentro. E eu vou colocá-lo em algum lugar por aqui e vou chamá-lo de logotipo. E você pode ver que temos alguns problemas aqui. Então, o que vou fazer primeiro de tudo é, por exemplo, vamos ver. Talvez eu queira aumentar o espaçamento das letras para algo assim e, em seguida, garantir que essas duas estejam centralizadas. E eu vou colocar o contorno como está, selecionar meu logotipo, e este é o seu componente aqui. Então, clique em Control Alt ou Command Alt clique em um Mac. Em vez de controlar K, você pode ver que o controle Alt K aqui no XD é apenas Controle K ou Comando K, tecla Command Alt. Então, basicamente, exatamente o mesmo logotipo. E se você quiser criar uma versão desse logotipo, não precisamos, mas se você quiser, o que você pode fazer é clicar aqui para adicionar uma variante. O que é a variante é uma versão ou nosso componente derivado desse componente principal. E nesse caso, vamos ver o que podemos fazer. Portanto, posso chamá-la, por exemplo em vez de variantes, posso chamá-la de branca. Então você pode ver que agora temos isso. E se eu clicar duas vezes aqui, você pode ver a propriedade 1 branca. Portanto, a propriedade 1 significa que é a primeira propriedade. Se adicionarmos outra variante, ela será propriedade da propriedade três e assim por diante. Portanto, não importa quantas dessas propriedades você adicione, tudo vai acabar assim. Então, vou selecionar meu esboço. Clique aqui. Certifique-se de escolher o branco. E eu vou adicionar esse branco como cor para que eu possa clicar aqui e deixar eu me esconder para que você possa ver isso um pouco melhor. E eu posso então clicar onde diz estilos de cores. Vou clicar aqui e chamá-lo de branco, desse jeito. E descrição: cor branca pura. Lá vamos nós. Então agora temos esse estilo branco. Você pode ver que é aplicado. E eu posso selecionar esses dois textos e chegar à minha cor de preenchimento, que é essa aqui. Clique nesses pontos. Acho que selecione branco. Então, ele vai ser atualizado para isso. Agora temos um logotipo com duas versões. Temos branco e temos essa cor original escura. Então, vamos organizá-los um pouco melhor. Eu vou cutucar eles desse jeito. E antes de prosseguirmos, você pode ver que temos a página aqui. Posso clicar na página, clicar com o botão direito aqui, renomear a página. E eu posso ver, por exemplo ativos ou uma aranha porque esse é o nome. Ácidos. Pressione Enter. Lá vamos nós. E eu posso criar uma nova página, e posso chamá-la de design. Então, dentro do design, talvez eu queira selecionar Controle C e Controle V para colar esses wireframes. Porque se eu quiser me lembrar a qualquer momento, se algo foi feito corretamente, por exemplo , posso clicar duas vezes aqui e chamar esse wireframe de papel, por exemplo , e depois voltar para um spotter assets. Eu posso me livrar dele se eu quiser, mas vou deixar como está aqui. Agora, o que eu quero fazer a seguir nesta seção específica é começar a criar esse mapa do site ou arquitetura de conteúdo. Então aperte frame, pressione F. Agora clique, copie e cole o nome dos textos. Uma vez que eu possa mapear o site da arquitetura de conteúdo para esse caso específico, o que vou fazer é 1173616 porque, opa, não o logotipo. Isso 11173616. Lá vamos nós. Porque eu quero que o conteúdo seja exatamente o mesmo. E quero mencionar que você obterá esses arquivos Figma como arquivos de projeto, mesma forma que fizemos com os arquivos XD. Portanto, certifique-se de baixá-los, certifique-se de abri-los em seu computador exatamente quando quiser abri-los e venha aqui. Volte para arquivos e depois para Importação de arquivos. E você importará esses arquivos como novos arquivos. Basicamente, verá algo como importar de outras ferramentas ou algo parecido. Então, deixe-me realmente verificar. Portanto, neste novo arquivo de design e arquivo de importação, você pode clicar em Importar arquivo para trazer arquivos de outras ferramentas. E então, dentro disso, você será capaz de abri-lo. Então, deixe-me voltar ao meu arquivo, desse jeito. Então, aí estamos e vamos entrar e criar rapidamente essa arquitetura de conteúdo, porque já estamos há 10 minutos neste vídeo. Então, vamos criar rapidamente isso pronto. E então eu vou voltar. Para o fluxo de usuários no próximo vídeo. Então, vamos começar com a página inicial. E antes de tudo, vamos criar um texto. Então, vamos escolher Poppins aqui. Poppins, lá vamos nós. E Poppins será 20 irregulares. Lá vamos nós. E a cor pode ser branca pura, por exemplo, então o que posso fazer neste momento é digitar a página inicial. Lá vamos nós. E o que eu posso fazer é pressionar Shift a, isso vai criar uma moldura em torno dela. E vou usar exatamente as mesmas configurações que usei anteriormente. Então, vou me certificar de que está centralizado. E vou incluir o emparelhamento horizontal de, vamos ver, 44, 44 pixels. Lá vamos nós. E agora eu preciso de um preenchimento vertical de 26 pixels, por exemplo, e vou obter exatamente a mesma forma dessa forma. Agora só em Figma. Agora, em termos de cores, deixe-me escolher aquela cor que já temos aqui e aqui, onde diz Preencher, vou clicar em Mais, clique aqui e cole nessa cor. Lá vamos nós. E agora vou selecionar a cor do texto aqui. E vamos ver, na verdade isso deveria ser branco. Lá vamos nós. Seleção de cores. Vamos apenas ver. Então preencha. Lá vamos nós. Se eu selecionar meu texto, agora vamos lá. Então, isso deve ser branco lá. Ok? Então, se eu segurar minha tecla Alt ou Option, você pode ver que somos 26 de cima para baixo e 44 de cada lado, iguais liquidados aqui. Então você pode ver agora que temos a moldura. E em termos de convenções de nomenclatura, vamos usar a mesma convenção de nomenclatura. Então, vou chamá-lo de item de navegação como fiz no Adobe XD. E eu vou apenas duplicá-lo. Então, Controle D. E aqui o que eu vou chamá-lo é de carros. Controle D. Este eu vou chamar de empréstimos. Controle D. Isso será Fale Conosco. E se você assistiu ao vídeo sobre arquitetura de conteúdo, o que eu realmente encorajo você a fazer, o que você realmente deveria fazer é pensar basicamente no tipo de conteúdo que aparecerá em cada página. Esse é realmente o objetivo principal da arquitetura de conteúdo. E, nesse caso, estamos apenas pensando no que incluiremos em qual página. Com isso, quero dizer, o que cada página precisa. Então, deixe-me tentar realmente copiar e colar o texto, mas ele é baseado apenas em uma imagem. Então, vamos fazer isso. Então aperte T, eu estive navegando. E vamos verificar o que ele fez aqui. E isso é o que será corrigido nas versões posteriores do Figma. Agora que faz parte do XD. Então, vamos verificar essa cor. Então, eu vou selecionar essa cor, apenas deixe-me ver como eu a chamei. uma cor escura que bate forte. Sim. Vamos renomeá-lo e adicioná-lo rapidamente aqui, clique aqui. Tão escuro, adicionando cor, cabelos escuros, e lá vamos nós. Então, agora o que vamos fazer é basicamente criar um grupo e chamar esse grupo. Deixe-me ver como eu o chamei. Dentro daqui estão as seções iniciais. Agora, para esse grupo, posso criar um layout automático como este. E eu posso colocá-lo no fundo, assim. E vamos ver o que eu fiz no Adobe XD. Você pode ver aqui que usamos a pilha na parte inferior de 20. Então, vamos voltar para Figma. Então, empilhei o layout automático dos 20 últimos neste caso. Então, quando eu faço a duplicação e mantenho pressionada a tecla Alt, você pode ver que temos uma distância de 20 entre esses dois itens, que é o que realmente queremos. Então, quem somos? Lá vamos nós. Você pode clicar fora do Controle D, ele vai colocar isso. Então, o que fazemos, controle D, controle D, controle D. Então, esses serão nossos benefícios onde estamos e mapeamos como esse será Fale conosco. Então, finalmente, controle D Mais uma vez no rodapé. Lá vamos nós. Agora que temos essas seções de casas, o que podemos fazer é colocar essas duas. Então, esse item de navegação e a seção inicial, podemos colocá-los em um controle de grupo G. E vamos ver, eu posso chamar isso, por exemplo página inicial assim. E certifique-se de ativar o layout automático para ele. E desta vez vou fazer a distância de 40. Lá vamos nós. E agora eu realmente vou terminar esse vídeo aqui. Livre-se deles. Porque o que eu posso fazer é a mesma história do Adobe XD. Antes de tudo, certifique-se de que isso esteja centralizado assim. E depois faça mais três cópias. Então Control D, Control D. Opa. Controle D, assim. E agora eu posso clicar duas vezes dentro disso chamar aqueles carros e depois mudar tudo isso. Vou clicar duas vezes aqui, digitar empréstimos e alterar tudo isso. Clique duas vezes aqui e digite Fale conosco e altere tudo isso. Então, nos vemos no próximo vídeo quando eu terminar com isso, e depois passaremos para o fluxo de usuários. Então, nos vemos lá. 151. Fluxo do usuários: Agora que a arquitetura de conteúdo do sitemap I está pronta, vamos agora passar para o fluxo de usuários e mostrar como ele se parece no XD. Então é isso. Vamos criar rapidamente esses componentes do mesmo tamanho que fizemos para a arquitetura de conteúdo no momento, no formato Figma Deixe-me mostrar como fazer exatamente isso. Então, vamos colocá-lo em algum lugar por aqui, por exemplo, então espaço e clique com o botão esquerdo do mouse para navegar, pressione F para o quadro. Desenhe um e eu vou chamá-lo, por exemplo, fluxos de usuário iguais aos que o chamamos no Adobe XD. Agora, vamos dar o mesmo, digamos, dimensões. Então, deixe-me selecionar esse e ver o que tínhamos aqui. Então, temos 18 73 com 749 assim. Então, largura e altura, e eu vou colocá-lo aqui por aqui e depois posicioná-lo aqui, talvez em algum lugar ao redor disso. Então, talvez possamos substituir isso para ter a mesma aparência, como se estivesse dentro do XD , por algo assim. E então talvez eu possa posicionar meu logotipo e aproximadamente por aqui. E vou posicionar esse logotipo de forma um pouco diferente porque vou criar um guia de estilo na próxima lição, mostrar como fazer isso. Então, vamos colocar esse logotipo lá, mas por enquanto vamos posicioná-lo talvez aqui para que possamos movê-lo um pouco mais perto. Agora, vamos passar para o fluxo de usuários. Quando começar, vou desenhar alguns retângulos. Então aperte R, clique novamente dentro de lá. E então eu vou copiar essas duas cores. Então copie meu azul principal. Cole aqui mesmo. Lá vamos nós. Vou clicar aqui mesmo. Clique para adicionar um novo estilo de cor e deixe-me me esconder para que você possa ver o que estou fazendo. E eu vou chamar isso de azul principal. Eu a chamo de cor azul principal. Na verdade, essa é a principal diferença no XD figma porque você pode ver as opções descritivas de d e explicar melhor para que essa cor é usada. Então, basicamente, se essa cor for usada apenas para os botões, você poderá descrevê-la. Por exemplo, a cor do botão azul principal ou se é usado apenas para imagens de fundo ou para sombras projetadas ou para qualquer outra coisa. Você pode então descrevê-lo aqui. E isso é especialmente útil para desenvolvedores. Você não tem Mostrar mais opções. Então, quando eu clico ali, você pode ver que temos essas propriedades. Eu posso ajustá-lo ou até mesmo adicionar novas propriedades aqui. Por exemplo, eu posso adicionar as sobreposições, posso clicar aqui. E então, em vez de sólido, posso incluir um gradiente linear. Então, talvez eu possa diminuir a opacidade desse gradiente linear. E posso acrescentar ainda mais todas essas opções. Agora, posso simplesmente clicar em Criar estilo porque não precisamos de nada disso. Vou simplesmente clicar em Criar estilo. E agora temos esse estilo principal de blues. Agora vou fazer a mesma coisa. Então, deixe-me copiar e colar este. Clique aqui, clique aqui e chame essa cor do mouse. mouse ou cor do mouse. Então, nossos desenvolvedores, mais tarde , nós sabemos o que é isso. Então, agora que criei esses dois, deixe-me me livrar deles muito rapidamente. E vou usar os mesmos textos do Poppins 20. E eu vou te mostrar como adicionar esse texto um pouco mais tarde, mas por enquanto vamos criá-lo do zero. Então, o que eu vou fazer é basicamente criar um círculo e o atalho é 0 aqui. Você pode segurar sua tecla Shift aqui. E deixe-me fechar tudo isso para que não nos incomodem. Então, para este, o que eu posso fazer é chamá-lo de círculo, como uma dívida. E para as dimensões, vamos usar um quinto, t com um quinto. Então, algo bonito e grande. Clique em suas cores, clique em azul principal, digite o texto interno. E eu vou chamá-la de entrada assim. E como você pode ver, ele vai manter a mesma cor e vamos colocar um branco nele. E agrupe todos eles, certifique-se de que estejam em um centro como uma dívida. E eu vou colocá-los em um grupo antes de tudo. E eu vou ligar para essa entrada. E então eu vou transformar isso em um componente. Então, agora temos a entrada. Então, vou colocar isso aqui muito rapidamente. Então, o que também temos é que, se eu rolar até o fim, teremos entrada, ação, processo e decisão. Então, para a ação, o que vamos fazer é basicamente criar esse círculo mais leve. Mas agora que eu olhei para ele, nós realmente não o usamos. Então, o que podemos fazer em talvez possamos simplesmente usar a ação. Então, vamos novamente. Então aperte 0 aqui, crie um círculo, 15150. Lá vamos nós. E eu vou anexar a cor do mouse a ela. Vou chamar isso de círculo. Em seguida, use a ferramenta de texto, digite uma ação como essa. E apenas certifique-se de que o texto esteja alinhado ao centro da mesma história aqui. Portanto, certifique-se de que ambos estejam centralizados dessa forma. Tipo, então, lá vamos nós. E vou agrupá-los para chamar isso de ação. Pode pressionar Shift a imediatamente. Vou mostrar que o fluxo de trabalho que usamos no XD também funciona exatamente da mesma forma aqui. Então, agora que temos ação, o que queremos é o processo. Então, para o processo, vamos criar um retângulo rápido. Você pode pressionar R aqui mesmo. E para o processo, podemos usar exatamente a mesma cor. Lá vamos nós. E eu vou chamá-lo de retângulo. Assim. Pressione T para a Ferramenta de Texto, eu defino um processo assim. E vamos ver o que podemos fazer aqui para que eu possa empurrar para aqui. E vamos ver, este tinha 86 de altura. Então, vamos fazer isso. 86 de altura e certifique-se de que esteja no centro. Lá vamos nós. E para os lados, o que podemos fazer talvez seja incluir 44. Eu acho que isso está bem. Sim. Então, se um agrupar e chamar de processo, aí está, aperte Shift a e então eu posso transformá-lo em um componente. Então, desta vez eu fiz o contrário, mas ainda assim você pode ver que eles estão aparecendo como componentes. Então, basicamente, você pode fazer isso como quiser. Finalmente, o que temos é uma decisão. Então, para fazer isso, o que você pode fazer é criar um quadrado. Então, vamos usar o nosso mais uma vez, e vamos transformar isso em 100 por 100. Lá vamos nós. E podemos usar a mesma cor de terror. Lá vamos nós. E eu posso chamar essa decisão assim. Tome a decisão de pressionar Shift enquanto estiver girando, certifique-se de posicionar esses dois no centro dessa forma. Lá vamos nós. E, na verdade, vamos transformar isso em uma cor escura. Então, cor azul principal. E agrupe-os para tomar uma decisão. E então clique aqui para transformar isso em um componente. Agora, finalmente, para usar todas essas flechas, o que você pode fazer é usar uma flecha daqui. Então, para conectar tudo isso e transformá-lo nisso, o que temos aqui dentro do nosso arquivo XD. Então, o que eu posso fazer, na verdade, é selecionar tudo desse jeito ou controlar C. Entre aqui, digite Control V e ele vai colá-lo como imagem. Então, será uma pequena referência agradável para nós. Então, o que podemos fazer aqui é talvez fazer algumas seleções. Então, por aqui, temos essa decisão. Então, aqui, em vez de processar, o que faremos é digitar algo como Procurar carros e você verá que ele se ajusta automaticamente. Então, para esta ação, vamos digitar o cartão de visualização. Lá vamos nós e nos certificamos de que ambos estejam no centro. Então, a mesma história do XD anterior. Mas, por algum motivo, ele não funciona, então deixe-me selecioná-lo manualmente e colocá-lo aqui. Então, Vieux Carre, lá vamos nós. Então temos essa decisão. E vamos garantir que todos estejam centrados na vida. Portanto, certifique-se de trazê-los aqui. Então aqui em cima vemos, vemos baixo, então Controle D mais uma vez. Então, veja os empréstimos. Lá vamos nós. Isso vai para o centro desse Control D. Down. Lá está você e vê Carros relacionados. Certifique-se de que esteja no controle central D. Aqui vou escrever em contato, o revendedor garante que esteja no centro. Controle o livro. Faça um test drive, permita o loop e depois duplique este. Em vez de digitar entrada, digite exit. Agora que temos o fluxo de usuários, o que podemos fazer neste momento é conectado com setas. Então, talvez possamos espaçá-los e talvez posicioná-los assim, talvez empurrá-los um pouco. Talvez possamos ter certeza de que eles estão centralizados. Mova-os um pouco. Talvez faça algo assim, algo assim, porque temos espaço e eu vou colocá-lo aqui. Então aqui se certifica de que isso, esses dois estão centralizados e isso está aproximadamente por aqui. Então, agora vamos adicionar todas essas setas. Então, primeiro de tudo, vou usar o Shift L, mas vou clicar na seta só para mostrar a você. Você pode usar o turno. Lá vamos nós. Agora 40 flechas, se bem me lembro, sim, se usarmos essa cor, você não pode ter esse círculo. Você teria que recriá-lo se quiser que seja exatamente igual ao de Figma. Mas, por enquanto, vou usá-lo em todo esse círculo. Então, vamos pular para dentro daqui. Deixe-me realmente me mudar para cá. Então aqui talvez possamos usar para, para a espessura, para a cor. Eu posso usar a cor do mouse e instantaneamente temos nossa flecha. Então, o que eu posso fazer é selecionar Control D para duplicá-lo, Control D para posicioná-lo aqui. Eu posso ver que ele pulou para a mesma distância, mas eu quero que fique mais ou menos por aqui. Lá vamos nós. E talvez esses dois não estejam centrados. Agora eles estão. Então, vamos prosseguir e centralizar rapidamente tudo isso. Lá vamos nós. Então, agora o que podemos fazer porque temos essas setas mais complicadas, como essas, por exemplo, podemos fazer algumas combinações. Então, primeiro de tudo, vamos terminar com essas setas de amostra. Então, Controle D, vamos empurrá-lo para mais ou menos por aqui. Controle D, posicione-o aqui desse jeito. E eu vou apertar Shift. Lá vamos nós. Certifique-se de que esteja na posição central em 23, digamos. Em seguida, controle D, cubra e gire, segure a tecla Shift. Lá vamos nós. E 23 aqui, e vamos ver 23 aqui. Lá vamos nós. Talvez possamos fazer a mesma distância só por causa disso. E posicione-o aqui. Vamos ver, Alt 20, dois anos e meio. Pronto, 24 ou k garantem que isso esteja no centro desse jeito. E vou deixar isso como está agora. Então, a única outra coisa que precisamos, essa e essa. Então, vamos selecionar este e esse Controle D para fazer duplicatas. Então eu vou colocar esse aqui, esse aqui, lá vamos nós. E eu vou dar uma olhada grosseira por aqui. Então, vamos ver lá. E este vai para o centro, e este vai para aqui. Lá vamos nós. Então, agora precisamos desses dois. Então, precisamos nos conectar, ver os amarelos e entrar em contato com o revendedor. Por algum motivo, tenho uma cópia aqui. Deixe-me me livrar disso. Então, o que vou fazer é Controle D, para duplicar este , certifique-se de que ele esteja no centro. Controle D mais uma vez. E eu vou rotacionar este. Vamos fazer isso de novo. Lá vamos nós. Então, agora o que eu posso fazer é realmente estender esta. Segure minha tecla Shift para chegar ao centro. Estenda esta, Toda a minha tecla Shift, e depois selecione o final aqui. Então, digamos que nenhum. E então esses dois vão se conectar aqui. Então essa é a primeira vantagem do Figma sobre x, z na minha opinião, porque você tem uma ferramenta como essa. Agora não temos os círculos que eu criei no XD, mas não importa, podemos simplesmente usá-los assim. Então, basta pressionar Control D neste. E eu vou dar uma olhada aqui. Então, vamos ampliar um pouco para que possamos usá-los e mesclá-los. Lá vamos nós. Então, o que faremos é passar dos carros relacionados ao C para o carro de visualização. Então, nesse caso, vamos em frente. Rotacionado ao segurar a tecla Shift. Aí está. Certifique-se de posicioná-lo no centro do nosso círculo dessa forma. E então empurre suavemente a mesa para a direita, assim. Certifique-se de que esteja no centro. Certifique-se de que isso se encontre aqui. Se a espera mudar, e aí está. Basicamente, em poucas palavras, acabamos de criar nosso fluxo de usuários e demoramos 14 minutos para fazer isso. Portanto, há algumas vantagens nesse fluxo de trabalho. Há algumas desvantagens. Você pode ver, por exemplo, que o gelo acabou de selecionar todos eles e estou tentando movê-los. E às vezes simplesmente não se move, às vezes vai ser um pouco teimoso comigo e coisas assim. Então você pode ver isso aqui. Não temos aqueles pontos azuis que tínhamos na versão XD, mas ainda assim, acho que funcionará muito bem. Lembre-se de que você pode usar germe de figo, algo que não abordará neste curso. E para os alemães, basicamente quase criei para coisas assim, mas eu queria mostrar que você também pode fazer isso no Figma, usando exatamente o mesmo fluxo de trabalho que usamos até agora no XD. Então, por enquanto, o que vou fazer é selecionar tudo isso. Agora vamos ver. Esta é a flecha que se afastou de nós e atingiu o Controle G. Chame essas setas apenas para manter as coisas um pouco mais organizadas. E o que eu vou fazer é esconder esse fluxo de usuários. Então, isso é basicamente o que acontece com nosso fluxo de usuários. Isso é basicamente o suficiente para a estrutura aqui. Na próxima lição, o que faremos é focar nisso, que é o guia de estilo. Então, nos vemos lá e aí vamos estruturar nossa tipografia. Vou arrastar e soltar esses ícones. Vou posicionar o logotipo. Vamos descobrir os botões e nos certificar de posicioná-los lá e basicamente colocar todos os nossos elementos em forma antes de passarmos para design e antes de terminarmos com o design da página inicial. Então, nos vemos lá. 152. Criando um guia de estilo: Vamos continuar e trabalhar em nosso guia de estilo. Então, primeiro de tudo, deixe-me criar essa moldura muito rapidamente. Então F para a moldura, agora clique em chamá-la de guia de estilo. E, mais uma vez, estamos nas páginas como ativos da Pilar e vamos passar para o design quando realmente começarmos com o design. Mas primeiro vamos terminar com nosso processo de criação de ativos. Então, aqui, se você quiser estendê-lo, basta clicar aqui e estender por quanto tempo quiser. Mas, no nosso caso, serão 2.400. Então, vou tentar fazer com que tudo seja exatamente igual ao Adobe XD. Então, primeiro de tudo, o que eu quero fazer é digitar as cores aqui . Lá vamos nós. E este, eu vou usar 32 e bolt, como dívida. E a cor ficará tão escura aqui adicionando cores. Portanto, não sei bem por que não o traduziu. Oh, lá vamos nós. Então, demorou um pouco para atualizar. Então, vamos colocá-lo 64 do topo, desse jeito. E vamos colocá-lo em 32 neste site. Então, vamos ver, você tem essa pequena opção na parte superior mostrando onde ela está. Então, dois pixels. E se eu segurar minha tecla Alt ou Option no Mac, você pode ver que somos 64,32. Então, vamos começar com a topografia, porque isso é muito mais importante, na minha opinião. Essas cores porque elas serão criadas muito rapidamente. Então, tipografia, vou colar esse texto aqui. Certifique-se de que esteja alinhado à esquerda, certifique-se de que também esteja alinhado à esquerda. Portanto, não teremos esses problemas posteriormente. Lá vamos nós. Em primeiro lugar, vou clicar Control D aqui e em Control D aqui e basicamente copiar e colar todo esse texto dentro daqui. E, em primeiro lugar, serão 64 parafusos. Lá vamos nós. E eu vou colocá-lo, vamos ver 40 daqui. Assim. E então eu vou mover isso para baixo, colocar isso em um grupo chamado topografia. Assim. Clique no layout automático ou mude uma mistura se 40 for a diferença e, em seguida, vou selecionar esta e vir aqui. Então, primeiro de tudo, vamos ver as cores. Sim, podemos ter essa cor do título. Isso é bom. Vou clicar aqui e adicionar um novo estilo. E eu vou chamar isso de H desse jeito. Então, basicamente, esse será o nosso H1. E agora vamos em frente e duplicar esse. Clique aqui. Agora vou clicar nesse link para desvinculá-lo. Então, para este segundo, o que eu quero é isso. Então, talvez eu possa simplesmente Controlar D e selecionar tudo isso. Portanto, é muito mais simples para nós criarmos. Vamos ver, isso vai ser um bloco de texto. Lá vamos nós. E parágrafo. Lá vamos nós. E aí está o texto sem rótulo. Então, primeiro de tudo, vamos verificar se temos essa configuração. Portanto, certifique-se de selecionar H1 e clique nele, clique aqui. E vamos ver o que temos. Então, temos o que diz, um espaçamento entre linhas. Portanto, temos um espaçamento entre letras e a altura da linha. Então, neste caso, é automático. Mas aqui vamos digitar 86, por exemplo, lá vamos nós. E agora tudo vai ficar muito mais nítido. Lá vamos nós. Então esse é o nosso H1 aqui para este segundo, o que queremos é transformá-lo em 32. Então, fuja. E vamos ver a cor, acho que é a mesma. Sim, é. Então é esse um a um a dois a quatro. Lá vamos nós. Isso é bom. Então isso é o mesmo. Eu vou seguir em frente e ajustá-los. Portanto, temos 56 para a altura da linha ou espaçamento entre linhas. Como você vai chamá-lo? Então, vamos ver 56. Lá vamos nós. E eu vou clicar aqui, clicar aqui e chamá-lo de H2. Então, para este terceiro, eu vou fazer é, vamos ver, a cor é diferente. Então, talvez eu devesse realmente criar essas cores para que não fiquemos confusos. Então, vamos ver assim. Então, já temos o hover, temos o azul principal, temos o título escuro, que é essa cor aqui, de cor mais escura. Então, talvez eu possa ir em frente e, muito rápido, fazer isso. Então, nosso controle D, Controle D, Controle D, Controle D, Controle D. Vamos ver. Então, para este. O que eu posso fazer é clicar aqui e depois experimentar essa cor. Para este, posso fazer o mesmo e provar essa cor. Para este. Eu posso provar isso em cinza claro. Lá vamos nós. Isso vai ser branco puro. Nós já temos isso. E, finalmente, temos este último que é a cor do corpo. Lá vamos nós. Então, vamos experimentar esse. Lá vamos nós. Então, primeiro de tudo, vamos adicionar esses como estão. Então, assim. E isso vai estar aqui só para eu saiba o que é tudo. Então, para dar nomes a eles, ok, podemos começar com este. Então, vamos adicioná-lo rapidamente. Crie um novo estilo. Este será um parágrafo de três traços. Então, pinte para cada três e parágrafos. Lá vamos nós. Recrie-o. Eu fiz isso. Então, vamos tentar isso mais uma vez. Então, h3, o parágrafo, cor, crie o estilo. Lá vamos nós. Agora, esse. Vamos clicar aqui e depois aqui, chamá-lo de cinza escuro. Crie estilo. Isso chamaremos de cinza claro. Lá vamos nós. Então, finalmente, chamaremos isso de cor corporal. Ok? Agora que tudo está terminado, podemos fazer neste momento, talvez possamos remover isso, selecionar o disco porque precisamos aplicar a cor do corpo aqui também. Então, basta clicar aqui. Pronto, porque queremos ter certeza de que isso se destaque um pouco. Então, aqui, o que queremos com esse h3 é, vamos ver. Então, neste caso, precisaremos dessa cor h3. Então clique aqui, três parágrafos. Lá vamos nós. E vamos ajustar isso. Então, 40 para o tamanho, vamos para 24. Lá vamos nós. Bolt ainda está lá. Sim. Vamos clicar aqui no New Style, isso vai ser HD. Agora, isso vai ser um bloco de texto. Então, primeiro de tudo, vamos descer para quatro a 20. Vamos ao restaurante normal de laticínios. E aqui temos essa cor, que é cinza escuro. Então selecione a cor cinza escuro aqui. Lá vamos nós. E 44, o espaçamento desse tipo. Lá vamos nós. Então esse é o nosso bloco de texto. E vamos criar esse estilo. Então, bloqueie o texto, porque mais tarde no Webflow, usaremos exatamente esses estilos. Então, é muito importante. Então, aqui o que faremos é faltar um parágrafo por alguns motivos. Então, vamos duplicar isso e deixar eu copiar e colar isso aqui. Lá vamos nós. Então, para os textos dos parágrafos, precisamos disso para a cor D, então para D para e30. Deixe-me verificar se essa é essa cor. Para D a E, três zeros. Então, isso é o mesmo para o parágrafo. Então, 3 parágrafos , eu acredito que isso vai ser 16, 26, irregular. E vamos criar um novo estilo, chame-o de parágrafo. Lá vamos nós. Finalmente, temos esse texto do rótulo. E essa cor vai ser a mesma que essa cor. Então, vamos mudar para o parágrafo de três anos. E aqui vamos dar 12. Irregular. E o que diz aqui, altura de 24 linhas. Lá vamos nós. Portanto, isso é o que chamaremos de estilo de criação de texto sem rótulo. Lá vamos nós. Agora, nossos estilos foram concluídos, nossas cores foram concluídas. E vamos criar apenas uma amostra de cor. Então, para te mostrar como fazer isso. Então, vamos basicamente criar 177-17-7149. Na verdade, eu vou não. Vamos usar algo como 186 com 177. Essa é uma posição muito melhor aqui. Em termos de raio de canto, você coloca que a coronária está aqui. Então, aqui temos oito. Lá vamos nós. E eu vou ajustá-lo dessa cor para o nosso azul principal. Lá vamos nós. E vou sugerir que seja para o ou 32, vamos ver daqui. Então 22, traço 32. Mais uma vez, quando você pressiona Shift a seta inferior muda dez pixels, mesmo que no Adobe XD. Então eu vou chamar essa cor de Biji, como fizemos em XD ou cartão colorido, talvez. E então aperte T aqui. E vamos ver. T. Lá vamos nós. Então essa é a nossa cor. Em termos de tamanho, o que podemos fazer é 24 volts. Então, talvez possamos usar um desses estilos. Então 24, e essa é essa. Lá vamos nós. E em vez dessa cor, vou usar, digamos, essa cor. Certifique-se de que isso esteja centralizado. Lá vamos nós. E eu vou apertar o Controle D para duplicá-lo e ter certeza de posicioná-lo aqui, e isso vai ser r. Vamos ver, vamos mudar para textblock. Lá vamos nós. E vamos chamá-la de cor flutuante. Lá vamos nós. Em termos de espaçamento, vamos usar 16 aqui. Então, algo assim. Lá vamos nós, lá. Deixe-me mesclar isso. Vamos agrupar isso e chamar isso de cartão colorido. Lá vamos nós. Clique em Control G. E eu vou salvar as cores do projeto. Pressione Shift a para transformar isso em layout automático. E então vamos ver que a distância entre eles pode ser 24, assim. E vamos ver quantas cores eu tenho. 12345678. Então, sete outras cópias. Um, opa, não isso. Eu deveria selecionar o cartão colorido 1234567. Lá vamos nós. E eu vou continuar e renomear. Tudo isso está fora da tela, então você não está entediado. O que eu vou te mostrar aqui é, então vamos usar 64 aqui. Lá vamos nós. O que vou mostrar a seguir é iconografia. Então, primeiro de tudo, vamos usar essas cores Control D, posicioná-las aqui em 64. Em seguida, vamos selecionar esse texto chamado iconografia. Lá vamos nós. E vou entrar nos meus ícones, certifique-se de localizá-los nos arquivos do seu projeto. Vou pressionar Shift, um controle, devo dizer, para selecionar todos eles, arrastá-los e soltá-los dentro. Então, eles são todos uma espécie de grupo aqui e ali. Então, vou organizá-los um pouco mais tarde. Mas basicamente, o que você precisa entender é será um pouco diferente do que você costumava fazer, organizá-los dentro do Figma e dentro do XD. Então é assim que eles são organizados no XD. E basicamente vou colocá-los todos no mesmo grupo. Mas antes disso, vou transformar todos eles em componentes. Então, isso vai levar um pouco de tempo. Então, eu vou pausar o vídeo lá e pará-lo. E então talvez volte para você no vídeo separado para mostrar como fazer esses botões. E então vamos acabar com os botões do logotipo e esses cartões de carro apenas para mostrar algumas técnicas de layout muito rapidamente. E então vamos terminar o vídeo aí. E então, no vídeo seguinte, vamos começar a criar nossa página inicial e começar a criar nossa página inicial. Então, nos vemos no próximo vídeo, onde vamos realmente terminar com este guia de estilo. 153. Criando o guia de estilo: Então, aqui está o guia de estilo. Agora, eu simplesmente preenchi todas essas cores diferentes, nomes diferentes, resolvi toda a iconografia. E se eu clicar, você pode ver que acabei de colocar todos esses ícones no layout automático com uma distância de 32. Se você quiser explorá-lo um pouco mais, lembre-se de que você pode abrir todos esses arquivos. Você pode explorá-los por si mesmo e ver que ele estruturou todos esses elementos que você possa aprender por si mesmo. Se voltarmos para aqui, o que ele também fez trazer de volta aquele logotipo que estava do lado de fora. Agora está dentro. E eu configurei todos esses botões e textos de cartões de carro. Então, para os botões em si, vamos começar e criá-los muito rapidamente. Então, vamos clicar aqui e posicioná-lo em 32, por exemplo, algo assim. Então, eu vou chamá-lo de btn BG aqui, e vou dizer, vamos ver o que podemos fazer. Talvez oito pixels como esse para a altura. Vamos escolher a largura. Vamos com dois a cinco. Altura 73. Lá vamos nós. E eu vou apertar T, digitar o botão principal desse jeito. E eu vou ver, vamos ver pelos textos, o que podemos fazer é usar, vamos ver. Talvez um bloco de texto. Sim, acho que o livro didático é bom. E para a cor, vamos usar o branco puro. Assim, certifique-se de que o texto saia do centro e deve ser posicionado aqui. Lá vamos nós. E para o fundo do botão, o que vou fazer com a cor é usar o azul principal. Agora, o que vou fazer é agrupá-lo, chamá-lo de main, main btn para o botão principal. Pronto, clique em criar componentes e clique para criar uma variante. E para essa variante, vamos apenas mudar isso do azul principal para a cor do mouse, porque essa variante será chamada de hover. Lá vamos nós. E agora a única coisa que precisamos fazer é selecionar isso, mudar para o protótipo. E você pode clicar em Mostrar configurações do protótipo dessa maneira. E eu vou clicar nele. E eu vou anexá-lo aqui. Lá vamos nós. Então, ao passar o mouse, mudou para a propriedade um, que neste caso é passar o mouse. Lá vamos nós. E emissão instantânea ou você pode usar a dissolução ou a animação inteligente, mas eu vou usar o instantâneo. Se quisermos ver como isso parece, você pode simplesmente clicar aqui, mas basicamente ele vai passar o mouse para frente e para frente. E é isso que realmente queremos para essa animação em particular. E porque realmente não queremos desperdiçar o tempo de nossos usuários. Então, quando eu passo o mouse aqui, você pode realmente ver isso neste momento. Então, talvez devêssemos conectá-lo novamente. Vamos ver enquanto paira. Mostrar seção de protótipo. Veja o que podemos fazer. Enquanto paira. Mude para. Lá vamos nós. Talvez devêssemos arrastar um para fora. Então, vamos usar os ativos. E vamos usar o guia de estilo. Vamos encontrar nosso botão. Lá vamos nós. Então eu vou arrastá-lo para aqui. Agora, quando eu passo o mouse, você pode ver que está ficando louco. Então, primeiro de tudo, vamos remover isso. Vamos duas vezes e voltar três vezes. Voltar. Lá vamos nós. Então, eu só queria remover este. Lá vamos nós. Então, agora estamos exatamente nessa direção. Então, quando eu arrasto esse botão e passo o mouse, podemos ver que agora temos essa bela cor azul para a seção Hover. Então lá vamos nós. Eu vou me livrar desse. Agora temos nosso botão principal com o mouse. Vamos voltar ao design. E eu vou posicioná-lo mais ou menos aqui e ali vamos para uma certa distância. Vamos com 64, então 123 com 64. Bom. E então temos aquele botão de passar o mouse. E agora só precisamos desse contorno do botão. Então, vamos usar o nosso mais uma vez para criar um retângulo. E aqui o que precisamos é criar isso. Então, três a seis, quais 73. Lá vamos nós. E eu vou, opa, não x e y, largura e altura. Então, mais uma vez, três a seis com 73. Lá vamos nós. Agora vou selecionar o contorno do botão. Então, vou voltar para minhas camadas e chamá-lo de botão de contorno B, G. Nesse caso, vamos lá. Vou usar esse mesmo texto. Vou digitar o contorno do botão. Lá vamos nós. E neste caso, para a cor, podemos usar uma cor cinza escuro. Assim. E talvez eu possa fazer isso no centro. Devemos comer isso também? Como uma dívida. E vamos ver como podemos chamá-lo. Esboço do Btn. Adorável. Agora, em termos do contorno em si, o que eu preciso fazer é basicamente usar essa cor como borda. Então, neste caso, vou me livrar do preenchimento. Vou incluir um derrame. E para a cor do traço, vou usar a cor cinza escuro. Lá vamos nós, desse jeito. E vamos ver agora aqui o que fizemos foi, como você pode ver, acabamos de destacar isso. Portanto, esse é o estado padrão, esse é o estado do mouse. Portanto, esse é o estado de flutuação nesse caso. Quanto mais difícil, só temos isso para a cor da borda, que é de D a e30. E essa é essa cor, eu acho. Sim. Então, H, três parágrafos, só para passar o mouse ou q. Agora vamos fazer isso. Então, esboço do BTN, vamos criar um componente. Bom. Vamos criar uma variante. Nesta variante, será chamado de hover. Ao passar o mouse, o que faremos é mudar isso do parágrafo cinza escuro para o HD e alterá-lo de cinza escuro para um CH, cor de três parágrafos. Lá vamos nós. E agora, finalmente, vamos mudar para o protótipo e depois fazer a mesma coisa de antes. Então selecione este e eu vou arrastá-lo para aqui enquanto passa o mouse, mude para nenhuma animação instantânea. E lá vamos nós. Nós terminamos nossos botões. Certifique-se de posicioná-lo aqui para mantê-lo bem organizado. Então 48, isso é realmente bom. Vamos mantê-lo lá. E o que vou fazer é posicionar isso aqui, isso aqui, e agrupar todos esses chamados botões. Lá vamos nós. São 64 mortes. Adorável. E, finalmente, para a última seção, que é uma placa de carro, vou aumentá-la para 64. Vamos ver, 64, lá vamos nós. E para esta placa de carro, posso criá-la aqui, ou melhor ainda, talvez eu possa posicioná-la mais tarde. Portanto, não tenho certeza do que fazer nesse caso. Vamos mudar para o design, desculpe. Seja algo assim. Sim. Então, o que eu posso fazer é apenas usá-los como referências. Porque nós só temos o esboço aqui. Não é nada muito importante. E isso é para nossa Harvard, isso é para nosso cartão de carro principal. Então, vamos começar, na verdade, vamos criar isso. Então, vamos usar algo assim. Então, vou apertar R aqui e me certificar de que ele corresponda a essa altura. Lá vamos nós. Eu vou escolher oito para o raio da esquina. E eu vou fazer o preenchimento. Vamos configurar o branco puro. Lá vamos nós. E para a altura, vamos para 43, para a largura, vamos com 374. Lá vamos nós. Posicione-o aqui na nota, e eu vou chamá-lo de Item B, G. Agora, para o traçado, vamos incluir o traçado, clique aqui. Vou escolher uma cor mais escura, mas neste caso, vou ver o que podemos fazer aqui. Então, derrame, cor escura de audição, talvez possamos usar este. Na verdade, copie daqui e cole aqui. Lá vamos nós. E eu só vou esconder isso por enquanto porque não precisamos dele no momento. Agora que isso está feito, o que eu posso fazer é pressionar Control e D. Pronto. E vamos ver o que mais temos aqui? Então, temos a imagem do carro, imagem do carro para ela. Vou me livrar do derrame porque não preciso dele. Aqui. Vou usar esse cinza escuro ou até cinza claro. Não acho que o cinza escuro seja realmente necessário para isso. O que podemos fazer é expandir isso um pouco. Então, para o raio do canto superior esquerdo e superior direito, vamos deixá-lo em oito, mas esses dois, vamos tê-lo em zero, assim. E vamos ver, para a altura, o que podemos fazer é configurá-la para 250. Essa será a nossa imagem do nosso carro. Então, a próxima coisa que devemos fazer é incluir os textos do cartão do carro. Então aperte T aqui. Mais uma vez E vamos chamar isso. Lamborghini horror Kahn. Vamos ver, isso deve ser 24. 24. Esse é bom? Certifique-se de que esteja alinhado à esquerda. Isso é. Isso é ótimo. Vamos ver, para o espaçamento oral, o que precisamos aqui é 24,24. 24.24, Isso é ótimo. Pressione Control D para duplicá-lo. E aqui vou usar o mesmo texto, mas desta vez vou usar a cor principal, que é o azul principal. E deixe-me copiar esse preço muito rapidamente. Aí está, Controle D Mais uma vez. E então aqui vamos usar um texto menor. Então, vamos usar o normal, na verdade. Então, H30, vamos usar o textblock main blue. Vamos usar o parágrafo H2, eu acho, ou não, talvez possamos usar cinza escuro desta vez. Então, vamos ver o cinza escuro. Lá vamos nós. Isso vai superar o ano. Então, 2021, aperte Shift a e chame, vamos ver anos, quilômetros como dívidas e depois transformá-la nessa direção. Isso é bom. Vamos ver, talvez 24 seja a distância. Vamos incluí-lo. Lá vamos nós. E aqui o que eu vou fazer é simplesmente duplicar isso aqui. Vou digitar quantos quilômetros o carro já passou? Ou quantos quilômetros ele tem no hodômetro ou como você quiser chamá-lo? Então, podemos agrupar esses três itens. Então, o nome, o preço e o ano, quilômetros, assim. Vou chamar isso, por exemplo , de carro, os textos dos carros criam um layout automático para ele. E então talvez possamos saber a distância. Esses 216. Sim, vamos com 16, algo assim. Lá vamos nós. Então, vamos ver 24 , 14, vamos com 24. E desta vez lá vamos nós e talvez tenhamos ajustado isso por qualquer motivo que tenhamos nisso. Defina isso em zero desse jeito. Vamos definir isso como zero desse jeito. E agora temos apenas um texto normal sem esses problemas. Então 16 está em todo lugar, 24 está em toda parte. É disso que eu gosto. 17 aqui na parte inferior. Na verdade, isso deveria ser 24. Então, 241.616,24. Então, talvez devêssemos estender isso um pouco menos. Zero. Lá vamos nós. Então, agora somos 24 em todos os lugares. Por 50. Ok, então vamos lá. Agora que isso está concluído, o que podemos fazer é agrupar esse cartão dourado. Bem, vamos continuar assim. Então, cartão de carro. E vamos criar um componente e vamos nos livrar desse. E vamos colocar um conjunto de componentes, basta colocá-lo deste lado. E aqui vamos expandi-lo como essa variante, que é essa. Na verdade, é se livrar desse. E vamos adicionar uma variante. Mas eu realmente não entendo por que está colocando isso aqui. Mas isso não importa agora. Isso é. Então, vamos chamá-lo de hover. Passe o mouse. Lá vamos nós. Para passar o mouse, a única coisa que precisamos é mostrar isso. Lá vamos nós. É basicamente isso. Agora, no estado padrão, mude para o protótipo e vamos conectar esses dois. Então, ao passar o mouse, ele vai passar para uma instância disso. Lá vamos nós. E agora vou arrastar isso rapidamente para aqui. Mude para o design. Lá vamos nós. Então, agora, a única coisa que basicamente resta aqui é isso. Então, como você pode realmente corrigir isso é ter essa mesma borda nessa imagem. Então, vamos voltar à imagem padrão do carro estadual. E eu vou sofrer uma insolação, e vou ter esse mesmo derrame como esse. Lá vamos nós. E eu vou esconder isso. Volte para aqui, faça o mesmo traço para mostrar isso. Então aí está. Basicamente mortes, como é fácil e super simples criar um layout como esse. Mas aqui, o que podemos fazer na verdade, é talvez também possamos esconder isso. Devemos examinar esse layout e o que fizemos? Então, aqui temos o Preenchimento e temos a borda. E a fronteira mostra que é zero por cento. Estoque. item B, G, E de largura está em 374 na imagem atual, é 372? Lá vamos nós. Sinto muito. Na verdade, essa imagem não encontra nenhuma fronteira. Então, vamos nos livrar desse e fazer o mesmo aqui. Lá vamos nós. A única coisa que ele realmente precisa é vencer 372 desse jeito. E certifique-se de selecionar esses dois. Deveríamos tê-lo colocado no centro, assim, para que você tenha um pixel de cada lado. Aqui, 372, lá vamos nós. Basta colocá-lo um pixel no centro. Talvez devêssemos até mesmo empurrá-lo um pixel para baixo. Eu acho. Algo parecido com isso. Mas, na minha opinião, isso realmente não importa. Você pode simplesmente deixar assim porque é apenas um pequeno detalhe. E ficará visível por apenas um segundo. Na verdade, tudo depende de você. Se você quiser, você pode empurrá-lo para baixo. Mas, por enquanto, vou encerrar o dia aqui porque me desculpe pelo meu nariz. Ainda estou com um pouco de resfriado, mas ainda queria continuar e trazer essa atualização para vocês, para que possam aproveitar o Figma no XD para listar que realmente deveríamos fazer. Antes de encerrarmos esta seção, basta criar esse layout básico para esse quadro de arte específico. E podemos usar esse aeroporto por toda parte. Então aperte F assim. Vou chamá-lo, por exemplo, tamanho da placa de arte ou de configurações de nossas placas ou, digamos, de nossa página no site da transportadora portuária. Vamos chamá-lo assim. Vamos ajustá-lo para ouvi-lo. Vamos ver que as configurações que temos aqui são 40, 40 para a largura. Então, para escolher 14, 40, vamos lá para a altura, isso realmente não importa. Podemos ajustar isso mais tarde. Agora, o que faremos é adicionar uma grade de layout. Então, basta clicar ali em vez dessa grade, clicar aqui em colunas, 12 colunas. Vamos ver o layout que tínhamos aqui. Como você pode ver, é um colapso total 38, 65, um a um. Então, vamos tentar replicar esse mesmo layout. Então, vamos ver, em primeiro lugar, pois a cor pode mudar de uso algum tipo de cor, sei lá, talvez azulada ou sei lá, talvez azulada ou avermelhada, algo assim. Podemos ajustar a visibilidade para talvez 5% apenas para que você possa ver o que estou fazendo e encerrar o dia lá. Então vamos para a sarjeta. Por causa do COVID 38. Aí está. E as margens em cada lado devem ser de uma para uma. Lá vamos nós. Agora temos essas duas margens, 38 e coluna, que devem ser 65. Então, vamos. Está me mostrando o carro, mas eu posso ir de qualquer maneira. Então, uma vez que 213085 mortes estão completamente bem. E lá vamos nós. Agora, o que faremos é reutilizá-lo quando começarmos com o design e colá-lo aqui. Então vamos lá, apenas alguns cliques. Nós configuramos nossos documentos. E, basicamente, parece exatamente o mesmo, ao contrário desse documento do XD em que trabalhamos até agora. Mais uma vez, se você quiser se aprofundar em todos esses detalhes sobre esse design, não deixe de conferir aprofundar em todos esses detalhes sobre esse design, não deixe de a seção x D sobre o pensamento por trás do design, sobre todo o processo, especialmente sobre wireframes de papel, a arquitetura de quantidades de pesquisa, sobre a arquitetura de quantidades de pesquisa, etc. Mas isso é apenas uma garantia de que o processo real de design no Figma e qual é a diferença entre o fema no XD? No próximo vídeo, abordaremos o design do site em si. Vou mostrar como reutilizar esses componentes que criamos aqui. Então, nos vemos lá. 154. Configuração de página de design: Neste vídeo, vamos arquivar e começar com o design. E eu vou te mostrar como recriar um design que já fizemos no Adobe XD no Figma. Então, vamos começar. Então, aqui estamos de volta em Figma, e foi aqui que paramos na vez anterior. Então, o que vou fazer em primeiro lugar, é essa página do site que temos. Vou clicar em Controle C, acessar design do site em si, acessar esta página, clicar em Controle V para colá-la dentro. E eu vou posicioná-lo aqui. Obviamente, não vamos usar isso porque já criamos esse design no Adobe XD. Mas se você estiver criando isso pela primeira vez ou se estiver compartilhando esse documento com seus clientes, colegas de trabalho são designers. É extremamente útil ter algo assim, pois eles sempre podem se referir ao papel por quadro e voltar a ele para obter mais detalhes. Então, se eu levar você de volta ao documento do Adobe XD, o que temos são 123456 páginas. Então, vamos começar com isso. Então Controle D, Controle D, Controle D, Controle D, Controle D. Então 123456. E vamos dar nomes a todos eles. Então, primeiro de tudo, esta será a página inicial. Em seguida, teremos carros. Depois disso, teremos selecionado o carro. Então, quando você seleciona um cartão na página do curso, volta para o cartão selecionado e eu vou te guiar por todo o processo em apenas um segundo, caso você não tenha assistido aos vídeos do XD. E eu recomendo fortemente que você os assista porque, como sempre menciono não vou entrar em muitos detalhes aqui. Não quero me repetir muito e ser entediante para quem já assistiu a parte do curso com as aulas do XD. Então, isso vai ser um empréstimo. E, em seguida, para outras páginas , temos Fale conosco. E, finalmente, isso será apenas uma sobreposição para a caixa de luz. E como a caixa de luz será cortada, você terá a altura de 1080 pixels. Lá vamos nós. E isso só vai superar a sobreposição em si. Então, deixe-me guiá-lo rapidamente pelo arquivo XD, dessa forma. E eu vou explicar basicamente o que é esse site se você não assistiu à parte XD do curso. Então, aqui temos a página inicial. E na página inicial, basicamente mostraremos toda a oferta desse discurso. Então, esta será apenas uma página de empréstimo simples. Esses sites, então quem são, deixe-me esconder essas linhas para que você possa vê-las. Esses guias. Então, quem são, o que representam. Então, esses são revendedores de carros exclusivos. Então, basicamente, eles vão vender esses carros de alta qualidade e não esses carros baratos que você pode encontrar basicamente em qualquer outro chão de fábrica ou em qualquer outro revendedor que esteja lá. Então, basicamente, esses caras são um pouco diferentes porque estão vendendo esses carros de alta qualidade. E, portanto, queremos representar isso e faremos isso em termos de imagens. Então, eu já forneci essas imagens e você pode ver essas imagens aqui. Basicamente, é assim que eles vão ficar. Você tem várias dessas imagens diferentes que usaremos para o desenvolvimento do Webflow e não para o design. Porque, para design, vamos usar apenas uma de cada para criar essas cartas, que já criamos seleção exclusiva na página inicial mostrará a seleção deste site e desse revendedor, o que eles oferecem, o que eles têm em estoque no momento, o que eles oferecem. Portanto, neste caso, garantia estendida , manutenção e empréstimos. Esses são apenas alguns dos principais recursos que eles oferecerão aos seus clientes, seus benefícios. Eles vão te dar a entrega gratuita não importa onde você esteja no país. Polimento em três estágios. Então, antes de entregarem o desenho animado, vão poli-lo em três estágios em troca parcial. O que isso significa é que eles vão tirar seu carro antigo e deduzir o preço do seu carro antigo, que basicamente avaliarão por quantos quilômetros foram percorridos, até que tipo de estágio em que o carro está no momento não foi destruído. Há algum dano nele e assim por diante. Em seguida, temos a página Fale conosco. Temos onde estamos com a página do mapa e temos o rodapé. Agora, essas seções que você notará se repetirão muito. Então, aqui temos as dobras do mapa de contato do mapa e do filtro de contato ou o rodapé do mapa de conteúdo do rodapé do mapa de contato. Portanto, será muito benéfico criá-los como componentes depois de concluí-los. E é isso que vamos fazer. E, basicamente, esta página é que esse site em si será muito simples de criar no Webflow posteriormente. E a razão pela qual eu não vou usar esse plugin dos fluxos de trabalho da ferramenta figma que foram lançados sozinhos é por causa dessa página em particular. Sim, você pode criar isso nesse plug-in, mas ele usará vários caminhos diferentes em torno desse design para que ele funcione no Webflow. Então, por causa dessa página em si, não vou usar esse plug-in, mas mesmo assim, vou mostrar que conectar uma das lições posteriores. Só para você ver como criar um site como esse no Webflow pauper, nesta página específica. Não vai funcionar no Webflow porque vamos usar algumas técnicas diferentes. Então, tenha isso em mente. Se você tentar criar algo usando esse plugin , certifique-se de testá-lo primeiro e ver se funciona. Sim, você pode criar um layout como esse no Figma. De qualquer forma, será benéfico para você e você não precisará importar todas as páginas. Você pode criar algumas páginas manualmente porque você pode criar alguns componentes no Webflow, você pode criar alguns componentes no Figma que importará todos esses estilos, opções de cores, fontes e componentes do figma para o Webflow. Portanto, você pode usar algumas delas, mas lembre-se de que páginas como essas exigem um pouco mais de reflexão externa. E basicamente alguns hackeiam o Webflow para fazê-los funcionar porque não há opções padrão no Webflow pré-construídas para criar layouts como esse. Então, para essas páginas básicas como esta, como esta, essas duas, vai funcionar muito bem. Mas assim que você encontrar algo assim com esse layout, com esse layout fixo, com essa sobreposição. Então, quando os usuários clicarem em uma dessas imagens, mostrará a eles essas opções de caixa de luz. Então é aí que ele se separa. Então, eu só queria te mostrar isso e explicar isso para você. Obviamente, as imagens são da Envato Elements, que eu já mencionei na seção XD. E você tem a opção de obter todas essas imagens se adquirir a assinatura premium do Envato Elements, porque essas imagens são imagens premium se você não quiser, poderá usar imagens gratuitas. Depende de você. Mas se você quiser usar essas imagens exatas que estou usando dentro do meu design. Você precisa licenciá-los dos elementos da Envato, caso contrário, não poderá usá-los em seu portfólio. Portanto, certifique-se de verificar essa licença também. Certifique-se de conferir esse PDF, certifique-se de verificar todas essas imagens que estou fornecendo nesta coleção específica. E, como mencionei, todos esses ativos são da Envato Elements. Então, isso vai ser o suficiente para esta lição em particular. Na próxima lição, começaremos com a página inicial e deixe-me ampliá-la um pouco mais. Então você pode simplesmente clicar aqui. E, como eu disse, vamos começar com a página inteira e começar a criar o layout da nossa página inicial. Então, nos vemos lá. 155. Design de página inicial Parte 1: Vamos começar com a página inicial. E a primeira coisa que eu quero fazer é acessar meus ativos e pesquisar o logotipo. Aqui mesmo no topo. Eu tenho esse logotipo. Vou arrastá-lo e soltá-lo em algum lugar por aqui. Deixe-me verificar meu design original. Acho que o posiciono em 20. Então, o que eu posso fazer é encaixá-lo na parte superior, deslocar para baixo duas vezes, segurar minha tecla Alt ou Option e ver que estou em 20 pixels. Então eu vou seguir em frente e criar a navegação. Então, eu vou digitar carros assim. E vou escolher a opção predeterminada para os estilos de texto. Vamos usar o textblock. Lá vamos nós. Deixe-me verificar. Sim, aí estamos. Eu só vou usar essa cor, então cinza escuro neste caso. E deixe-me alinhá-lo de forma fácil e fácil com meu logotipo. Você pode selecionar os dois. Você pode clicar aqui, verificar se eles estão alinhados e movê-los três pixels para baixo. Lá vamos nós. Agora que temos carros, o que posso fazer é pressionar o Controle G para agrupá-los. E vou chamar isso de Top Nav e transformá-lo em layout automático nessa direção. E vamos ver com esses dois Ds, eu posso fazer algo como 24. Acho que vai ficar tudo bem. Clique em Control D, Control D para fazer mais duas cópias. Este vai ser um Lowe's e este aqui vai ser Entre em contato conosco. Lá vamos nós. Agora que fiz isso, vou selecionar todos eles. Então, clique em Nav e certifique-se de tirá-las aqui. Agora, primeiro de tudo, devemos seguir em frente e criar componentes para cada um deles, porque esse é um estado padrão. Se ele te levar de volta ao XD, se você não assistiu, não deixe de assistir novamente. Portanto, temos o estado de flutuação e temos o estado selecionado. Então, se eu ampliar um pouco mais aqui e escolher que o estado padrão do meu carro é essa cor cinza escuro, estado de Horace é essa cor do mouse, que você pode ver aqui. E então o estado selecionado é essa cor azul principal. Isso será selecionado quando você estiver na página em que está no momento para criá-los. Então, vamos voltar para Figma. E para fazer algo assim, o que eu posso fazer é basicamente selecionar todos eles, pressionar o Controle C e levá-los para algum lugar por aqui. Porque eu queria poder criar esses componentes. Então, vou apenas selecioná-los como estão. E eu vou transformar isso em um componente, transformar isso em um componente e isso, e então eu vou criar mais dois desse jeito. E adicione outra variante em uma variante, em uma variante, Adicionar variante e adicionar variante. Deixe-me espaçá-los um pouco. Agora, uma coisa irritante sobre o Figma, se você me perguntar, é porque você não pode fazer isso dentro da sua prancheta como você pode fazer dentro do XD. Então, em vez do XD, você pode simplesmente colocá-los no lugar. Mas aqui em Figma, você pode fazer isso aqui. E então você pode escolher o estado que quiser, mas ele continua criando essas variantes. Então, isso é algo que eu realmente não gosto na figma, mas o que você pode fazer? Então, vamos começar. Esse é nosso estado padrão. Esse será nosso estado de horror. Então, vou apenas selecionar o tipo ao passar o mouse. Selecione meu mouse, assim. Clique em Control C. Pronto. E eu vou selecionar este. Que variante dois. Em seguida, vou colar com a cor do mouse também. Selecione este com base no mouse. Aqui. Lá vamos nós. E este último será selecionado. Selecionado. Deixe-me selecionar, selecionar. Deixe-me fazer isso aqui. E estou fazendo isso porque mais tarde será muito mais simples organizá-los. Porque o que vem a seguir é basicamente mudar essas cores aqui e ali. Então, agora que estamos lá, vamos selecionar todo o estado de horror. E vamos para a cor de preenchimento. Opa, não a cor de preenchimento, mas selecione o texto em si em vez de cinza escuro. Vamos para cor de terror, cor, cor e, em seguida, selecionar esta em vez de cinza escuro. Vamos para o azul principal. Azul principal, e entre, toque no azul principal. Lá vamos nós. Agora que isso foi criado, o que podemos fazer aqui é testá-los. Então, aqui o que eu posso fazer é realmente ir em frente e me livrar deles. Então, deixe-me ir ao meu painel de ativos. E, na verdade, o que posso fazer é selecionar esses domínios básicos aqui. Pronto, Control G. Transforme isso em Auto Layout 24. Opa, isso é 62424. Lá vamos nós. Certifique-se de que estamos no centro desses dois. Lá vamos nós. 24 ou 2018, 20. Basta mover isso e estimar. Então, aqui vou selecionar isso e você pode ver que temos carros, entre em contato conosco e empréstimos. Então é isso que temos aqui. E aqui temos o padrão, temos o hover. Nós selecionamos, então eu vou selecionar o padrão e essas serão nossas opções para esse componente específico. Você pode separar a instância se quiser comprar e, Você pode separar a instância se quiser comprar se fizer algum tipo de alteração nesses componentes principais, essas instâncias seguirão. Então, vamos rapidamente renomeá-los para Top Nav. Lá vamos nós. E eu vou arrastar isso para aqui. Agora que fizemos isso, vamos agrupar isso e quando chamá-lo de nav. E abaixo da navegação, o que vamos fazer é basicamente incluir essa seção de heróis. Então, crie uma seção de heróis. E eu vou copiá-los muito rapidamente. Aí está, Controle D. E vamos pegar este. Pronto, controle D imediatamente. Eu vou mudar isso para isso. Vou mudar a cor de preenchimento para cinza escuro. Este vai ser o H1. Lá vamos nós. Vou alinhá-los bem aqui. Adorável. E depois ativos. Vou arrastar meu botão para dentro. Para o meu botão, vou digitar algo como explorar carros. Pronto, Nice. E então eu tenho que criar esse grupo. Então, Control G. Deixe-me mudar para as camadas. Esses serão nossos textos de heróis. Lá vamos nós. Vamos transformar isso em layout automático abaixo de 32 para ser a distância. Certifique-se de espaçá-los para o lado esquerdo. Pronto, calma e calma, não é? E uma última coisa que precisamos aqui é criar nossa seção de heróis. Agora, para fazer isso, vou trazer minha imagem. Então eu tenho minha imagem do Maclaurin. Vamos colocá-lo ali mesmo e, em seguida, criar dois círculos. Então é um sucesso. Tudo bem, aqui ele muda. Lá vamos nós. Controle D para duplicá-lo, posicione-o aproximadamente ao redor dele. E eu vou chamar isso de pequeno círculo. E isso vai ser um grande círculo. Lá vamos nós e o posicionamos ali e ali. Agora, para o círculo pequeno, o que vamos fazer em termos de tamanho é dar 1054105 apenas para torná-lo exatamente o mesmo lago que está em nosso design original em XD e esse grande círculo Vamos ver, talvez possamos criá-lo para ser 13130. Assim. Lá vamos nós. E vou selecionar a página inteira e ocultar esse layout por um segundo. Lá vamos nós. Fácil e agradável. E o que está faltando aqui é esse círculo branco, eu acho. Então, primeiro de tudo, vamos mudar as cores reais. Então, esse círculo PG deve ser, desculpe, não isso, mas isso, devemos dizer azul e esse círculo aqui deve ser cinza escuro. Lá vamos nós. E agora o que eu preciso é criar esse círculo de fundo. Vamos voltar para aqui. Portanto, o círculo da imagem do herói é 388 por 388. Então, vamos duplicar esse. Círculo de imagem do herói. Vamos ver, a cor será branca e o tamanho será 388. Por 388. Aí está, algo assim e o posicionamos logo atrás dessa imagem de herói. E certifique-se de que eles estejam centralizados, algo assim. Lá vamos nós. Certifique-se de que isso está aqui, isso está aqui. E eu acho isso ótimo. Só para verificar isso rapidamente , porque não mostrava as cores do corpo. Então, vamos realmente nos esconder este ano, temos os círculos de heróis. Todos nós temos que criá-lo porque eu o exportei do design original como uma imagem. Agora vamos seguir em frente e realmente aplicar essa mudança a tudo isso. Então, vou segurar a tecla Shift. E para a cor de preenchimento, vou usar a cor do corpo. Lá vamos nós. Agora, a próxima coisa que vou fazer é trazer minhas colunas de volta para que possamos ver o que estamos fazendo. E aqui vou apresentar alguns ícones. Então, primeiro de tudo, vamos trazer o ícone da chave aqui. Vou cutucá-lo, colocá-lo no centro. Aí está, Controle G para agrupá-lo. E aqui eu vou usar esse outro ícone para esse tipo de metal, como esse para o emblema. Certifique-se de que esses dois estejam no controle central G. Pronto, retorne às camadas. E dentro do XD, o que eu vou fazer é nomear isso assim. E nomes e desgostos. Então, posicione isso um pouco abaixo, posicione isso assim. E eu vou agrupar tudo isso e chamá-lo de herói IMG. Lá vamos nós. O que posso fazer é selecionar os dois, garantir que estejam alinhados ao centro. Vamos ver, talvez possamos tirá-los 100% da imagem do herói, da navegação superior, desculpe. Agora que temos a imagem, temos o texto. O que podemos fazer é agrupá-los para chamá-los de heróis. Lá vamos e passamos para a próxima seção. E para a próxima seção, o que precisaremos é apenas dessa imagem. Encaixe-o assim e, em seguida, use apenas algumas linhas de texto. Então, primeiro de tudo, vamos clicar em D. Vamos organizar nossos textos um pouco. Então, vamos fazer isso mais uma vez. Lá vamos nós. Controle D. E eu vou usar outro. Controle D. Vou usar outro. Lá vamos nós. Agora, este deve ser um parágrafo, este deve ser h3. Esse deveria ser, vamos ver. Bloco de texto. Isso é bom. Apenas uma cor diferente, cinza escuro. Lá vamos nós. Em termos de espaçamento. Vamos de C para D para D para D para E. Então H três parágrafos devem estar aqui. Lá vamos nós. Em termos de espaçamento, vamos usar 24. Então, o que posso fazer é garantir que eles fiquem sozinhos. Devemos agrupá-los. Quem somos. Texto, ative o Layout automático para baixo 24. Lá vamos nós. E apenas certifique-se de posicioná-lo aqui. Então, temos 12345 linhas, e então esta imagem vai alinhá-la ao centro, clique em Control G para chamá-la de quem somos. E a distância é de 200 daqui. Então, algo assim. Então, 200. Vamos prosseguir e passar para a próxima seção. A próxima seção será essa oferta exclusiva. Então, para fazer isso, vamos criar um elemento de texto como esse. Colar em nossa seleção exclusiva garante que estamos no centro e certifique-se de escolher h três. Lá vamos nós. Certifique-se de colocá-lo no centro, de forma que fique a 200 da seção acima. Então, basta cutucar aqui. Vamos ver 200. Adorável. O que vamos fazer é realmente trazer os cartões que criamos. Então, podemos encontrá-los aqui. Lá vamos nós. Aqui temos o mesmo cartão. Posicione-o ali mesmo. E o que vamos fazer é posicionar aqui 64. 64, lá vamos nós. E eu vou para o Controle D para duplicá-lo. O controle D vai colocá-lo aqui. E eu vou voltar e encontrar meu botão, posicioná-lo lá, ter certeza de que está no centro. E certifique-se de que está a uma distância de 64 desta carta aqui. Agora, esse botão deve dizer: Veja todos os carros. Mais uma vez, porque isso é ótimo no Figma e não no XD. Quando você passa o mouse, ele muda o texto automaticamente. Enquanto estiver no XD, você precisa alterá-lo manualmente. Então, deixe-me preencher alguns textos. Então Cadillac Escalade vai ser isso. O preço será esse. Veja, o ano vai ser 2020. Assim. E deixe-me passar para o meu painel de camadas e aqui onde estamos, tantos anos, cartão de quilômetros, campo de texto. Isso deve ser um pouco diferente porque temos 28 distâncias aqui. Vamos mudar isso para aqui. Não sei por que é 28, deveria ser 24. Então, por algum motivo , está atualizado aqui. Então, talvez tenhamos uma altura fixa, sem largura fixa. Sei que por algum motivo isso não vai mudar ou Derek acorda, então muda quando é preciso consertar, eu acho. Sim. Então, quando eu mudo para largura fixa, largura fixa aqui, largura fixa. Então, quando eu mudar a altura para a largura fixa, vou voltar para 24. Então, vamos fazer isso para todos eles. Então, altura fixa, lá vamos nós. E largura fixa. Não sei por que isso aconteceu. Porque quando você muda, tudo o que entra no XD fica como você mandou. Então isso vai ser Lucid Air. Esse será o preço. E esses serão os quilômetros, e o ano será 2022. Lá vamos nós. Agora que esta seção está concluída, o que eu preciso fazer é testá-la rapidamente. Veja, ao passar o mouse, lá vamos nós. Então, mudou e lembrou, o que é lindo nisso. Então, o que vou fazer é acessar a página do meu curso. E localize um capô Lamborghini que ocorreu e selecione isso. Então, para a imagem do carro. E eu vou transformá-lo em preenchimento. Faça a mesma coisa aqui. Então, basta adicionar um preenchimento. Aí está. O que aconteceu? E vou posicionar minha imagem em cima do preenchimento. Em seguida, faça o mesmo com o Cadillac escalate. Basta localizar a imagem número três. Posicione-o em cima dele. E isso basicamente funcionará um pouco mais devagar se a imagem for grande, embora eu a tenha otimizado Esse é o problema com o Figma. Você não pode simplesmente arrastar e soltar imagens. Como se você pudesse comer o Adobe XD, o que é realmente irritante nessa ferramenta. Então, quando eu o arrasto, ele vai colocá-lo. Lá vamos nós. Então, Lucid, Air, imagem número três e coloque-a ali mesmo. Lá vamos nós. Temos nossos cartões. Isso é ótimo. Então, vamos organizar isso um pouco melhor. Então, deixe-me, antes de tudo, incluir esses cartões em um carro coletivo. Cartas. Lá vamos nós. Ative o layout automático. Lá vamos nós. E agora selecione tudo isso. E seleção exclusiva. Lá vamos nós. E transforme isso em layout automático. Agora que esta seção foi concluída, a próxima seção será a seção Ofertas. Então, vamos seguir em frente e criar isso. Então, primeiro de tudo, vamos em frente e realmente copiar isso. Então, nossa seleção exclusiva, vá em frente e clique aqui, onde está, aqui mesmo. Lá vamos nós e isso dentro da nave. Mas aqui temos que organizar isso. Lá vamos nós. E vou colocar isso em 200 também. Assim. Então, o que oferecemos, aí está. E eu preciso dessa imagem muito rapidamente para mostrar o que eles estão oferecendo. Posicione isso aqui. E vamos ver, podemos tê-lo a 64 pixels dessa borda. Certifique-se de alinhá-lo. 64. Lá vamos nós. E agora eu só tenho que digitar esse texto. Mas antes disso, quero arrastar esses ícones muito rapidamente. Então, eu preciso do ciclo de manutenção. Eu preciso do ícone de garantia estendida. Deixe-me encontrá-lo muito rapidamente. Por algum motivo, não está aparecendo aqui. Ok. Vamos ver os empréstimos. Empréstimos. Lá vamos nós. Se escolhermos a garantia, vou usar apenas esta. Isso não importa. Então, vamos preenchê-lo com o fato de ser azul. Ou vamos ver o que podemos fazer. Então, quando mudei para Layers, abra-o. Então, temos uma parte aqui. A peça tem um preenchimento. Então, azul principal, este tem um preenchimento. Então, talvez este azul tenha um preenchimento. Então, azul principal, lá vamos nós. Então, isso está feito. Então, agora isso deve estar no topo porque queremos mostrar a garantia estendida aqui, então ela deve estar abaixo dela e também deve estar abaixo dela. Portanto, todos eles devem estar alinhados com este. Então, vamos em frente e começar. Então, vou escolher a ferramenta de texto aqui. A garantia estendida garante que eu esteja aqui. Vamos ver, 24 parafusos. Então isso vai nos levar aos três anos. Adorável. E agora o que eu posso fazer é selecionar isso, duplicar, duplicar tomates. Lá vamos nós. O que vou fazer é garantir que esses dois estejam centralizados. Esses dois estão centrados. também são. Lá vamos nós. Eu quero basicamente duplicar isso assim. Certifique-se de que seja um bloco de texto. Certifique-se de posicioná-lo aqui e certifique-se de usar a cor cinza escuro Control D. Controle D. Controle D. Pronto. Agora, esses dois, vou passar para o meu painel de camadas e me certificar de agrupá-los. Vou agrupar esses, vou desagrupar esses dois. Lá vamos nós. Portanto, o layout automático, o layout automático e o layout automático serão 16. Isso vai ser 16 também, e isso vai ser 16 também. Então, o que precisamos aqui é digitar a palavra manutenção. Este último deveria dizer, uh, muitos. No último, deveríamos ter esse texto. Neste. Deveríamos ter esse texto. Então, isso é basicamente o que eles estão oferecendo. Então, aqui o que eu vou fazer é digitar Los. Isso vai ser manutenção. E esse primeiro deve ser 1,2. Isso deveria dizer garantia. Lá vamos nós. E agora as distâncias entre o texto e o título devem ser 24. Então, na verdade, vamos selecionar isso, colocá-los em um grupo. Vamos selecionar isso, colocar o grupo amino e esse grupo. Então esse é um empréstimo, esse é a manutenção. E, finalmente, este é 1,2. Então, quando eu coloco isso no layout automático e uso 24, faça o mesmo com este. E faça o mesmo com este. O que eu também posso fazer é colocá-los em outro layout automático, se eu quiser. Então, assim e a distância entre todos eles. Então, vamos chamá-lo de algo como texto de oferta. Esse texto parece meio pequeno. Deveria ser H2, na verdade. Isso também deve ser H2. Então, vamos mudar isso. Lá vamos nós. E acho que isso também deveria ser H2, se não me engano. Sim. Então, em vez de H três, vamos mudar para H12, verifique se está alinhado. Sim, é. Este está em 64.200 graus, este 48. Então, o que eu posso fazer é talvez aumentá-lo para 64. Aqui, mova-o para 200. Então isso deve estar em 64. Lá vamos nós. E então esse deve ser o layout automático aos 40 e basicamente colocá-lo bem no topo, assim. Ou talvez você possa até mesmo colocá-lo no centro, não importa, ele cobrirá dívidas de qualquer maneira. Então, o que oferecemos de textos, aí está. Então, basicamente, vou selecionar esses três, pressione Control G, assim como o que oferecemos , e aqui você pode colocá-los em um layout automático, se quiser. Eu não vou me preocupar com isso. Vou passar para a próxima seção. Na próxima seção estão os benefícios. Então, neste caso, o que vamos fazer é muito rapidamente, obter alguns benefícios. lugar da imagem está sentado aqui. Certifique-se de que estamos no centro. Garante que somos 200. Mais uma vez, da imagem acima, lá vamos nós. Topo da dívida. O que eu vou fazer é basicamente desenhar um retângulo, então aperte R e certifique-se de que o cobrimos assim, para que ele cubra toda a largura da nossa imagem. E isso será chamado de plano de fundo da seção de benefícios. Lá vamos nós. Essa pode ser essa cor de preenchimento. Então, vamos ver, talvez a cada três parágrafos e imagens, reduzamos a opacidade para talvez dez por cento. Então, vamos usar algo assim para que tenhamos essa bela imagem transparente. Eu acho que isso parece ótimo. Salve, vamos organizar essas seções mais uma vez. Então, vamos ver o que temos. Deveríamos ter uma navegação no topo. Então herói, isso é o que somos. Essas são seleções exclusivas. Lá vamos nós. Então, o que oferecemos e agora esses benefícios serão úteis. Então, o que eu posso fazer imediatamente é colocá-los em um grupo e chamar isso de benefícios. Lá vamos nós. Então, eu vou selecionar esse texto. O tipo T são benefícios. Lá vamos nós. Bom. Coloque isso no centro desses dois assim. E apenas certifique-se de que está aqui. E vamos ver de cima, o que eu posso fazer talvez seja 95 ou algo assim. Então, boa, grande distância como essa, Controle D. E para esta, vamos usar H três. Lá vamos nós. Agora isso vai ser uma entrega gratuita como essa. E eu vou mesclá-lo aqui. E vamos ver que, para este, talvez possamos usar 16. Então, para o parágrafo e para a cor, vamos usar o branco. Portanto, isso também deve ser branco. Isso também deve ser branco. Então, na verdade, você sabe o que, talvez possamos usar essa cor da prancheta aqui. A cor do corpo. Acho que essa será uma opção muito melhor aqui. Lá vamos nós. Então, eu vou apertar o Controle D desta vez ou não, vamos primeiro colocar um ícone. Então, primeiro, vamos ver, talvez possamos posicionar esses dois para estarem a 24 distâncias desse jeito. Vamos usar esse ícone. Então, primeiro de tudo, vamos encerrar isso. E vamos ver, precisamos encontrar esse ícone. Peso, o localizador. Lá vamos nós. A distância entre a dívida deve ser novamente de 24. Então, vamos ver onde estamos no momento. 20. Então, temos 24 anos. Então, se eu selecionar e agrupar todos eles, clique em Camadas. Entrega gratuita. Lá vamos nós. Controle D ou Controle D mais uma vez. Lá vamos nós. Agora, o que vou fazer é basicamente pressionar R, criar um retângulo, selecionar esses dois e ter certeza de posicioná-lo no centro. Em seguida, use exatamente o mesmo retângulo. Volte para aqui, alinhe-o, mova isso, alinhe-o à grade. Selecione-os para ter certeza de que estamos em um centro. Livre-se desse retângulo. Não precisamos mais disso. Agora, este segundo deve dizer polimento de três estágios. Lá vamos nós. E basta copiar e colar os textos. Porque, mais uma vez, esses não são os benefícios que já mencionamos. E esta última deve ser uma troca parcial. Lá vamos nós. Finalmente, o texto interno. Agora, em termos desses, o que eu posso fazer é chamado de troca de peças. Isso deve ser polido. Isso é entrega gratuita, tudo bem. Então, o que precisamos neste estágio é substituir esses ícones. Então, vou selecionar esse ícone, voltar ao meu painel de ativos e localizar meu ícone polonês. Então, as leiteiras precisam basicamente colocar isso e voltar para camadas como essa. Clique em Excluir. Certifique-se de que eu esteja no centro com este texto. E eu vou continuar e aumentá-lo até 24. Lá vamos nós, bonitos e grandes. E, finalmente, esse ícone de troca de peças. Então, vamos ver, só precisamos localizar o carro com a chave do carro. Lá vamos nós. E apenas coloque-o no lugar, posicione-o aqui, selecione o original e livre-se dele. Lá vamos nós. Então, volte ao painel Layers e vamos ver uma troca de peças desse jeito. Agora que temos essa seção, tudo o que precisamos fazer é espaçar essas três. Portanto, use esses três e reduza esses benefícios para 64 . Vamos ver. 64, lá vamos nós. Portanto, o polimento deve estar no centro. Vamos ter certeza de que está no centro. Lá vamos nós. E os benefícios também devem estar no centro. Certifique-se de que esteja no centro. Lá vamos nós. Portanto, a sessão de benefícios foi concluída. Em seguida, entraremos em contato conosco. Temos o formulário e temos o rodapé. Mas eu não vou te entediar muito com esta lição porque já estamos a 30 minutos ou algo assim. Então, vamos parar aqui e continuar com a página do herói. No próximo vídeo, finalizaremos essas três seções porque elas se repetirão em todo o nosso design. Então eu vou te ver lá. 156. Home Page Design Parte 2: Vamos terminar esta seção da página inicial e o discurso em si. Então, vou digitar T e digitar Fale conosco. E vou mudá-lo do bloco de texto para o H12. Certifique-se de que esteja no centro e alinhado ao centro dessa forma. E certifique-se de que são 200 daqui, desse jeito. E então o que eu vou fazer é duplicar esse também. E eu vou selecioná-lo para ser um bloco de texto, assim. E vamos ver, eu posso posicionar que pode ser 64 daqui. Vamos ver. Assim. E eu vou usar essa cor cinza escuro. Lá vamos nós. Não sei bem por que os está herdando, mas isso não importa. Então, vamos usar essa cor cinza escuro e eu vou escrever o nome completo aqui. E eu vou alinhá-lo à esquerda assim. Então, estamos com 64 anos, isso é ótimo. E eu vou apertar Control e D mais uma vez para duplicar isso. E eu vou usar textos de parágrafos aqui. E vou me certificar de mudar isso para, vamos ver, H de três parágrafos. E eu vou dizer algo como Digite seu nome completo. Lá vamos nós. E agora vou criar o campo de entrada para isso. Então, vamos ver, vamos usar um retângulo e arrastar um de ponta a ponta, desse jeito. Agora, para a distância, tudo bem e vamos para a altura de 60. Clique com o botão direito do mouse e você verá, então vá para a página, Enviar para trás. Você pode usar a barra invertida se quiser e certifique-se de posicioná-la no centro. Agora, em termos de cor, isso terá a cor branca em termos do nome, será um campo de entrada. E agora, para a distância entre eles, vou mover esses 16. Então, quando eu chamo minha tecla Alt, você pode ver que há 16 na página esquerda e 17 na parte superior e inferior. Então, agora vamos agrupar esses dois. E eu vou chamar essa entrada assim. E eu vou agrupar esses dois controles G. E vou chamar esse nome desse jeito. Vamos ver. Para as distâncias, talvez possamos usar o layout automático e 16, assim. Lá vamos nós. Agora aperte o Controle D para duplicar isso, e eu vou mover isso para 32. Então, vamos ver. 32. Lá vamos nós. Agora, esse segundo deve ser e-mail. E o campo de entrada em si deve ser mais curto, então deve ter seis colunas de largura. Então 123456. E vamos alinhar isso à coluna. Lá vamos nós. Boa ampliação. Então, isso vai ser e-mail. Então, digite o e-mail. E em vez de digitar seu nome completo, vai dizer digite seu e-mail assim. Agora, o que podemos fazer aqui é colocar isso em um grupo e chamá-lo de meio, se você quiser. Mas eu não vou, vou apenas apertar o Controle D para duplicá-lo, posicioná-lo aqui e alinhá-lo à página. Não tenho certeza do porquê. Está me mostrando isso por qualquer motivo. Mas estamos prontos para ir, acho que aqui. Então, vamos dar uma olhada. Por algum motivo. Não se encaixa na rede. Portanto, a largura é cinco AT, então certifique-se de que isso também seja cinco AD. Lá vamos nós. Então, agora ele vai se encaixar perfeitamente na grade em ambos os lados. Portanto, este não será enviado por e-mail. Esse vai ser divertido. Vou digitar no telefone. Digite seu número de telefone. Ótimo. E agora vamos duplicar esse e posicioná-lo aqui. 32. Isso vai ser e-mail ou mensagem. E isso vai dizer algo como escrever sua mensagem. Aqui. Lá vamos nós. E agora vamos renomear isso para mensagem e nos certificar de posicioná-la até aqui. E esse campo vamos estender um pouco. Então, vai ter 171 cm de altura, só para que possamos dar aos nossos usuários um pouco mais de espaço para que eles possam incluir qualquer tipo de mensagem que tenham. Suture os ativos, use nosso botão principal. E aqui teremos a mesma distância de 30 para garantir que alinhemos à esquerda, clicamos duas vezes dentro e digitamos enviar mensagem. Lá vamos nós. E volte para a posição do painel de camadas aqui e certifique-se de que ****** entre em contato conosco aqui. Vou agrupá-los, chamá-los de entradas. E eu vou agrupar tudo isso, posicioná-lo abaixo, sendo contatado conosco. E aqui está a parte crucial. Se eu te mostrar isso, entre em contato conosco. Vou selecionar esse campo inteiro e transformá-lo em um componente. Agora, isso vai me permitir copiá-lo e colá-lo em todas essas outras seções que eu já mostrei anteriormente. Então, vamos em frente e criar o próximo. Portanto, certifique-se de que somos 200. Sim, nós somos. Então, onde estamos será nossa próxima seção. Então, vamos arrastar rapidamente um mapa como esse, ter certeza de que estamos aqui, ter certeza de que estamos a 200 deste. Assim, lá vamos nós. Então, agora o que faremos aqui é usar o mesmo H12. Então, onde estamos. E eu vou usar este como H12. Lá vamos nós. Alinhe à esquerda. Isso garante que haja duas grades aqui. Agora, isso é bloco de texto. Usaremos cinza escuro. Use este, verifique se está alinhado à esquerda , posicione-o lá. Vamos ver, vamos estar a 24 desta borda. Vamos ver. 24. Adorável. Então isso vai ser um título. E não se esqueça de empurrá-lo até aqui. Posicione-o na parte superior, para que tenhamos espaço suficiente? Agora, precisaremos de alguns ícones aqui. Então, o primeiro ícone que precisaremos é arrastar um telefone. Vamos arrastar um relógio, este, e pintar um localizador. Então, este vai para o topo. Este vai para o fundo. Este estará no centro. Lá vamos nós. Agora pressione o endereço do tipo D e transforme-o do bloco de texto em um parágrafo. E certifique-se de agrupá-los para ter certeza de posicioná-los da mesma forma. E aí vamos nós. Agora, daqui até aqui, deveria ser 16, eu acho. Sim. Mas antes de fazermos isso, vamos nos certificar de colar isso aqui. E eu quero organizar meu conteúdo primeiro para que eu possa seguir em frente um pouco mais. Assim. Lá vamos nós. Então, isso deve dizer número de telefone. E deixe-me colar o número do telefone. Esse será o horário de funcionamento. Esse é o horário de funcionamento. Lá vamos nós. Então, primeiro de tudo, vamos garantir que eles estejam centralizados, colocá-los em um grupo, garantir que o design do layout automático garanta que estejam em 16. Esses dois estão em um grupo. Antes de tudo, alinhe-os, coloque-os em um grupo, use o layout automático 16. Esses dois devem estar alinhados em um grupo ou ao layout e 16. E esses outros também podem ser 16. Assim, você pode agrupar esses layouts automáticos 16. Em seguida, você pode garantir que eles estejam alinhados à esquerda em um layout automático de grupo 16. E eles são alinhados à esquerda em um layout automático de grupo 16. Agora, tudo o que precisamos fazer é voltar ao nosso painel Layers porque só temos quadros, então horas. Agora, isso pode ser um telefone e esse primeiro pode ser endereçado. Lá vamos nós. Agora, podemos colocar tudo isso em um grupo e nos certificar de chamá-lo, por exemplo, conteúdo. Coloque isso em um layout automático de 24. Lá vamos nós. E agora tudo o que precisamos fazer é distanciar isso daqui. Então, deixe-me ver o que eu fiz no design original. Então, sim, talvez possamos colocá-lo em 32. 32, lá vamos nós. Selecione todo o nosso conteúdo, coloque-o no centro do nosso mapa certifique-se de que ele esteja alinhado à esquerda. Isso é. E vamos ver, basta agrupar tudo isso. Certifique-se de que somos 200. Estamos posicionados totalmente para baixo. E nesta seção chamaremos de onde estamos. Assim. Transforme isso em um componente. Agora, um componente final que precisamos incluir aqui é o próprio rodapé. Então, o que vou fazer nesse estágio específico é usar minha navegação, duplicá-la, centralizá-la e empurrá-la até o final. Certifique-se de que estou quase por aqui e lá vamos nós. Então eu vou até lá e desagrupar isso. Assim. E vamos nos certificar de que a altura se dispersa para que você possa vê-la um pouco melhor. Então, vou usar esse logotipo, certifique-se de que ele esteja no centro. E eu vou basicamente usar minha ferramenta de texto e colar o texto que estava originalmente lá. E vamos ver, podemos usar o estilo de texto para o parágrafo. Pronto, e não se esqueça de colocá-lo no centro da nossa página. O dardo 64 desses desse tipo. E o logotipo também deve ser 64 deles. Assim. Agora, uma última coisa que precisamos fazer é trazer esses ícones de mídia social. Então, temos o Twitter, temos o YouTube. Vamos localizar o instagram, desculpe, o LinkedIn e o Facebook. Então, deixe-me organizá-los um pouco melhor. Então, primeiro, Facebook, depois Twitter, YouTube, e depois vinculados, certifique-se de que todos estejam alinhados ao centro. E vamos ver o que temos. Talvez possamos colocá-los em um grupo. Ativar o Layout automático 24 está bem. Volte para o painel Camadas e eu chamarei esse grupo ou esse quadro de ícones sociais. Lá vamos nós. E agora o que vou fazer é alinhá-los ao centro com este texto aqui. Apenas certifique-se e verifique novamente. Lá vamos nós. Então, vou selecionar tudo isso, clicar em Control G, colocar tudo isso lá de volta, chamá-lo de rodapé, desse jeito, e ter certeza de que estou a 200 daqui. Lá vamos nós. E uma última coisa que eu quero fazer é mover isso e cortá-lo um pouco. Então, eu tenho basicamente 64 anos dessa borda inferior em particular. Então, só mais três pixels amanhã. Então, altura, vamos ver, temos que adicionar mais dois. Vamos ver o original, o que diz, 5775. Por algum motivo, estendemos apenas um toque, mas isso importa. Vamos adicionar mais dois. Vamos adicionar mais um. Então 5796. Vamos ver. Lá vamos nós. Então esta é nossa página inicial concluída. Vamos esconder isso muito rapidamente. Vamos dar uma prévia, porque eu queria mostrar algo a vocês , porque temos alguns problemas aqui imediatamente. Portanto, teremos que corrigir esses problemas. Então, enquanto carrega aqui, não temos isso. Então, vamos abri-lo em tela cheia. Vamos esconder isso. Não temos esse efeito de flutuação. Então, teremos que mudar isso. Conectado aqui. Quando eu passo o mouse, você pode ver que as imagens desaparecem. Portanto, teremos que passar o mouse sobre cada uma delas e adicionar imagens adicionais. Mais uma vez, tudo funciona bem aqui, parece ótimo aqui. Tudo funciona muito bem aqui, como deveria. Então, vamos adicionar isso. Em primeiro lugar, vamos conectá-los. Então, primeiro de tudo, mude para o protótipo e vire isso para aqui. Esses dois aqui, esses dois aqui. Enquanto paira. Isso deve ser feito enquanto estiver pairando. Isso deve ser feito enquanto estiver pairando. E quando eu clico no próprio mouse, clico em mudar para a propriedade um. Lá vamos nós. Ao clicar. E, finalmente, com um clique. Isso é ótimo. Então, agora que funciona, podemos voltar nossa atenção para eles. Então, vamos voltar ao nosso design. Vamos passar para passar o mouse. Clique aqui, mude para como ou clique aqui para passar o mouse. Então, primeiro de tudo, precisamos vamos adicionar um Lucid Air primeiro, porque eu já o abri aqui. Em seguida, vá em frente e adicione escalado. Lá vamos nós. E adicione o Oticon muito rapidamente. Lá vamos nós. Então, agora temos que selecionar este, trazê-lo para o padrão, trazer isso para o padrão, trazer isso para o padrão. Lá vamos nós. Agora que tudo isso foi concluído, nossa página está basicamente pronta. E na próxima seção, passaremos a criar esta seção do curso, que basicamente conterá várias delas e terá várias seções aqui. Portanto, teremos que estendê-lo um pouco e também duplicaremos algumas dessas seções. Adicionaremos conteúdo adicional. Adicionaremos mais e copiaremos algumas dessas seções e algumas páginas como esta Fale Conosco serão extremamente simples de criar porque, como mencionei, já temos a maioria dessas seções concluídas. Então, nos vemos no próximo vídeo, onde vamos atacar a página de carros, e nos vemos lá. 157. Design de página de carros: Vamos agora criar a página deste carro. Então, o que vou fazer , na verdade, é voltar à nossa página inicial porque esqueci transformar isso em um componente. Então, agora, quando mudei para aqui, volte para meus ativos e passe a usar como ativos do site. Então, o que eu tenho aqui está na minha página inicial, eu tenho tudo isso. Então nav, vou arrastá-lo e soltá-lo, posicioná-lo aqui, posicioná-lo aqui e, em posicioná-lo aqui, posicioná-lo aqui e, seguida, posicioná-lo em 20. O que eu também posso fazer é fazer a mesma coisa com cada um deles. Porque basicamente o que teremos está no mesmo layout em cada página. Então, por que não economizar mais tempo diretamente aqui? Vamos ver, Fale Conosco será nossa última posição aqui e depois aqui. Lá vamos nós. Além disso, o que todas essas páginas terão basicamente são todas essas ações com formulário de contato, mapa e rodapé. Então, vamos em frente e fazer isso. E deixe-me verificar se eu criei o rodapé, não criei. Então, vamos transformar isso em componente também. Então, primeiro de tudo, vamos arrastar esse rodapé m para esta página, para esta página, para esta página e para esta página. Certifique-se de que esteja alinhado à esquerda. E apenas posicione-o a 40 pixels da parte inferior , porque obviamente vamos ajustá-lo um pouco mais tarde assim que formos em frente e realmente adicionarmos o conteúdo. Então, vou empurrar toda essa seção para baixo porque estou logo acima dela. Vou adicionar meu mapa, verificar se ele está centralizado e ter certeza de que está a 200 pixels daqui. E o formulário de contato está centralizado. E eu vou realmente adicionar 200 pixels a partir daqui. Então, a mesma história aqui. Vou posicionar esses dois no centro. E isso vai estar em 200 pixels, e isso vai estar em 200 pixels também. Então faça a mesma história aqui. Então, teremos o mapa e o formulário de contato. Teremos o mapa com o formulário de contato, centro, centro. E vamos ver o centro de 222200200. Assim, você pode ver quanto tempo estamos economizando para mais tarde. E isso só vai reduzir muito nosso clone de frutas. É por isso que esses componentes são tão úteis. Então, para a seção do refrão em si, o que eu vou fazer é basicamente duplicar essa seção e arrastá-la até aqui. Vamos ver as camadas. Quando eu clico aqui, seleção exclusiva. Aqui temos uma seleção exclusiva. Certifique-se de encaixá-lo no centro. O que vou fazer aqui para cima é usar esse texto aqui. E eu vou simplesmente colocá-lo no centro, no centro aqui. E eu vou escrever no texto para seu parceiro para carros exclusivos. E vamos ver, eu posso fazer esse texto 40. Vamos ver se algo não está certo aqui. Lá vamos nós. Agora está bem centrado. Então, a partir desta borda, vou para o turno 1234. Certifique-se de empurrá-lo 40 pixels para baixo. Lá vamos nós. E eu vou criar esse círculo que vai ficar em segundo plano. Então aperte 0. Assim imediatamente, use a cor azul principal. E para os tamanhos, vou escolher 300 por 300. Pronto, verifique se está centralizado. E a partir dessa borda, o que vou fazer é basicamente alinhá-la ao centro dos meus textos e à borda inferior. E aqui, deixe-me adicionar a imagem do carro, que vou usar, colocá-la no centro e empurrá-la algum lugar por aqui para que não vejamos o círculo real no fundo. Então, o que vou fazer é mover seção de seleção exclusiva e ter certeza de que está a 100 pixels daqui. Assim. E eu vou me livrar do C, todo o fundo dos carros desse jeito. E aqui o que temos, se você se lembra, é que temos esses cartões de carro. Então, neste caso, vou remover o layout automático porque vou duplicá-los e diminuí-los. Então, cartões de carro, agora vou mudar o layout automático. Então, vamos voltar mais uma vez porque temos esse grupo com três cartas dentro, assim, então 12,3 e não temos layout automático nele. O que eu vou fazer é colocar esse grupo em outro grupo com isso. E agora gire o layout automático nessa direção e a distância entre esses carros deve ser 32. Assim. E agora tudo que você precisa fazer é pressionar Controle D, controle D para ter mais duas cópias. Agora, essa será uma seleção exclusiva. E tudo o que precisamos fazer agora é preencher essas informações chatas. Mas antes de fazermos isso, eu quero. Basicamente, incentive-os para que estejam no lugar. C15, 6200. Lá vamos nós. E agora, apenas 64 da parte inferior, aqui. Então, vamos seguir em frente e fazer isso muito rapidamente. Então, temos tudo em ordem. Vamos ver onde estamos. 59, então só um pouco mais. Lá vamos nós. Então, agora que isso está feito, vamos nos concentrar nesses carros porque esta página está mais ou menos pronta. Então, o que eu tenho aqui é o Tesla Model X. Então, vou me concentrar primeiro no conteúdo em si. E o ano do carro é 2020. Na verdade, 2021. Por que não? Vamos deixar assim. Então esse é o Tesla Model, X zero S, desculpe. Então, o próximo depois disso será um Porsche Cayenne. O preço será neste ano, será em 2021. E quilômetros. Então, 18.000.692. Lá vamos nós. A próxima será a McLaren. Então, mais uma vez, concentre-se em carros exclusivos. É disso que trata essa concessionária. Você pode usar qualquer tipo de carro, se quiser. Se você não quiser ter essas imagens do Envato Elements, se não quiser licenciá-las, use suas próprias imagens. Obviamente, você pode simplesmente se certificar seguir algumas das regras que mencionamos neste curso em termos de consistência layout, espaçamento ritmo e coisas assim. Só para ter basicamente o mesmo layout que fizemos aqui. Então 56, vamos ver, 24, ainda estamos lá. Isso é bom. E este é o carro mais antigo desta coleção. Então, talvez alguém o tenha dado como uma troca parcial. Finalmente, vamos usar isso como revogação do Range Rover. Veja 90 quilômetros e o ano é 2021. Agora, como eu não tenho isso, vou me livrar dele e excluí-lo. Então, basicamente, esses são todos os nossos carros. O que vou fazer nesta fase é fechar algumas delas porque não preciso que elas sejam abertas tanto. Na verdade. Vamos prosseguir e fechá-los assim. Lá vamos nós. Então, o que vou fazer neste momento é localizar minhas imagens. Então, vamos ver o tesla número três e trocá-lo. Lá vamos nós. Este vai ser o Porsche Cayenne. Isso vai ser a McLaren. Isso vai ser um Cadillac CTS, desculpe. E, finalmente, isso será uma evocação do Range Rover. Uma peça final do quebra-cabeça. Basta lembrar o que fizemos anteriormente. Você pode fechar tudo isso porque todos esses três estão prontos, se você se lembrar da página inicial. Então, o que faremos agora é selecionar este transformá-lo em um mouse. Selecione este, transforme-o em passar o mouse. Isso para passar o mouse. Então, isso deve ser passar o mouse, esse aplicativo é curtido, deve estar passando o mouse. Lá vamos nós. Então, agora deixe-me ir em frente e selecionar todos eles novamente. Então, vamos de trás para frente. Então este é um Range Rover, feche-o e torne-o padrão. Cts, só temos o desejo de tirar a imagem no centro do campo porque eu posso fazer isso no XD. Então, eu só espero que a equipe acrescente isso no futuro, agora que os dois fazem parte da mesma equipe porque faz mais sentido colocá-la aqui em vez de aqui neste pequeno campo, então simplesmente não faz sentido. Então, a McLaren deveria realmente ser essa imagem. Lá vamos nós. Bonito e solto. Então, por padrão, isso deve ser escrito em coreano. Então, vamos localizar esse número três. Lá vamos nós. Arraste e solte e volte ao estado padrão. E o último é o Teslas. Então, vamos localizar o Tesla número três. Lá vamos nós. Então, agora todos eles foram concluídos. Você pode ver que estamos a apenas 10 minutos. Esta página já foi concluída. E vamos testar isso muito rapidamente. Porque sim, uma coisa que esqueci de mencionar está aqui porque estamos na página do curso. Vou selecionar este e transformá-lo em um campo selecionado. Agora você pode ver lá em cima que diz carros e que está selecionado. E como nossos efeitos ainda funcionam, entre em contato conosco, ainda funciona. E eu vou descobrir como me livrar dessa barra só para que ela não nos incomode. Então aqui, eu acho que sim, acho que talvez não tenha carregado ou algo assim, porque você viu que nós o ligamos e substituímos todos eles. Então, talvez eu tenha que entrar e fazer todas elas mais uma vez. O que cada instância em particular. Então, vou fazer isso fora da câmera apenas para ter certeza de que funciona. Mas tudo isso funciona. Isso ainda está aqui. Tudo isso está aqui. Carros foram selecionados e página adicional de Diego foi concluída. Mais um passo, está feito. Então, talvez porque V cole isso primeiro. Sim, você pode ver que quando eu mudei o padrão ao passar o mouse, ele funciona aqui. Sim, não, também não funciona em uma página inicial. Então, talvez eu devesse configurá-lo aqui e depois voltar para você apenas para dizer e dizer qual foi a solução. Mas, por enquanto, a página de carros está pronta. No próximo vídeo, vamos passar para o cartão selecionado, que é a parte mais difícil de todo esse design. Então, eu vou te ver lá e vou te mostrar como configurá-lo também. 158. Design de página de carro: Vamos continuar de onde paramos na lição anterior. E antes disso, eu só quero mostrar como consertei essas placas de carro. Então, basicamente, o que eu fiz foi recriá-los do zero. E tudo o que fiz aqui foi criar o nome para ele para que o nome do atual detentor possa ficar lúcido. E você verá isso se baixar esse arquivo e abri-lo no Figma por si mesmo. E tudo o que fiz foi criar outra instância disso. Então você pode ver que aqui eu tenho o mouse e aqui eu tenho o padrão. Então, basicamente, acabei de criar isso e adicionar uma variante. variante é o cursor do mouse para cada uma dessas cartas. Dentro da variante de passar o mouse para cada uma dessas cartas, tudo o que fiz foi selecionar esse plano de fundo e mostrar a cor do traço. É basicamente isso, porque cada coisa que eu tentei praticamente falhar aqui. Agora, quando eu visualizo a página inicial, por exemplo , tudo o que quero mostrar aqui é para que você veja que ela realmente funciona agora, porque esses são os componentes reais da página real. Então, quando eu passo o mouse, a única mudança que estava acontecendo era apenas mostrar esse contorno da cor de fundo aqui. Então é basicamente isso. E agora podemos passar para a próxima página. Em todo esse processo, fiz a mesma coisa aqui, como mencionei. E aqui tudo que eu quero fazer é criar a página do cartão selecionado. Agora ele vai ter o seletor de imagem aqui para a caixa de luz. E vamos animá-lo um pouco mais tarde. Ele terá as informações abaixo e eu vou resumir um pouco. Mas antes de passar para tudo isso, o que eu queria mostrar é a troca de instâncias no Figma. Então, quando eu seleciono isso, você pode ver que eu criei uma seleção exclusiva e depois rho 12.3. E agora, quando eu seleciono este, por exemplo, e eu quero trocá-lo. Você pode ver que eu organizei aqui, que é o Range Rover. Quando eu clico, ele vai me mostrar diferentes instâncias. Essa é uma opção muito melhor do que o XD, devo admitir, porque muito mais rápido substituí-los dessa forma. Em seguida, para localizá-lo aqui, clique em arrastar e coloque em cima dele para trocar instâncias. Então você pode simplesmente clicar para mudá-lo para Porsche, por exemplo, e depois mudá-lo de volta para Range Rover. Método muito mais rápido, especialmente se você tiver milhares desses ícones diferentes e assim por diante. Então, para o cartão selecionado, o que eu quero fazer, e como eu disse, eu simplesmente criei isso. Então, vou levar isso muito rapidamente para algum lugar por aqui, para que possamos economizar um pouco de tempo aqui. Eu tenho essa especificação do veículo. Então, vamos começar com as imagens. Então, o que eu quero fazer é usar minha ferramenta de retângulo aqui. Então R e crie a imagem aqui, com oito colunas de largura. Portanto, 786 é a largura e a altura é 437. Lá vamos nós. Então isso vai ser imagem1, desse jeito. E, abaixo disso, teremos algumas imagens de carros. Então, vamos em frente e criá-los muito rapidamente com uma distância de 24. Eu posso até mesmo duplicar este. Posicione-o como 24. Assim. E eu vou simplesmente reduzi-lo dessa forma. E deve ter 93 de altura e 168 de largura. Então, vamos verificar se estamos lá. Lá vamos nós. Então, o que é 68, 93. Lá vamos nós. E eu posso chamar essa imagem de número dois e basicamente colocá-la em um grupo separado de imagens. E eu posso até mesmo ativar layout automático e duplicar este. Então, basta selecioná-lo. E vamos ver, a distância pode ser 38, por exemplo, e por qualquer motivo, sim, é só porque está colocada em uma única imagem. Então, na verdade, vamos, antes de fazer isso, vamos apenas duplicá-lo à moda antiga, desse jeito e daquele jeito. Então, vamos criar uma cópia separada. Então isso vai ser dois, isso vai ser três. E nomear suas camadas é muito importante, especialmente aqui porque quando você chega à Figma, você realmente quer que as coisas funcionem. Então, esse será o pincel número quatro e essa será a imagem número cinco. Agora eu posso agrupá-los, chamá-los de imagens. Lá vamos nós. E 24 é a distância, o que é ótimo. Agora, o que vou fazer também é criar essa tag alternativa um pouco aqui. Então, mais uma vez, vou dar uma cor branca. Lá vamos nós. E vamos ver. Isso vai ser 145, largura 50. Lá vamos nós. E vou nomear todas as imagens, BG, vamos ver, as distâncias podem ser, vamos ver o que fizemos anteriormente. Então, 24, 24 em cada lado. Então, vamos fazer isso. Então 24, 24 crianças podem ver. Todas as imagens estão centralizadas e certifique-se de posicioná-las aqui. Este é um tamanho de parágrafo, aliás, controle G para colocar os grupos finos, ver todas as imagens. Lá vamos nós. E agora o que eu posso fazer neste estágio é simplesmente trazer minhas imagens. Então, vou localizar meu Range Rover. Então, primeiro de tudo, essa primeira será apenas a imagem número um. Esta será a imagem número dois. Esta será a imagem número três, hemorragia número quatro e, finalmente, a imagem número cinco. Lá vamos nós. E corrigiremos isso mais tarde, quando criarmos o efeito Lightbox. Mas, por enquanto, acho que estamos prontos para ir aqui e acho que vamos deixar como está. Então, aqui o que faremos é alinhar isso à navegação. É 40, coloque-o em pixels. E lá vamos nós. Agora estamos 40 acima do topo. Então, aqui o que vou fazer é pressionar R mais uma vez e criar um retângulo com quatro colunas de largura. Lá vamos nós, desse jeito. E para este, vamos ver o que podemos fazer. Talvez possamos incluir um pouco do raio de milho na mistura. Sim, então, para o raio da esquina, vamos usar oito. Para a cor de fundo, vamos usar o branco. E para a altura, vamos escolher um vinte. Esta é a seção que realmente vai aumentar e diminuir. Então, na verdade, vamos com quatro a 53, algo assim é uma boa ampliação. Então, o que vou fazer é chamar esse carro de fundo da barra lateral. Lá vamos nós. Aqui, vou começar a criar esses rótulos. Então, primeiro de tudo, vamos começar com o ícone, identificar ativos e vamos localizar o ícone do SUV, que é esse. Arrastá-lo para dentro do calor é algo assim. Toque em D SUV. Agora, isso deve ir da esquerda e, na verdade, deve ser rotulado como textos assim. Agora, isso deve ter 33 de altura. Deve ser a cor do corpo e deve ser para o raio do canto. Lá vamos nós. Volte para o nosso painel de camadas e eu vou posicioná-lo aqui. Então, rotule BG. Lá vamos nós. Vamos ver, para o distanciamento, o que eu possa fazer talvez seja usar 16. Primeiro de tudo, vamos posicionar isso no centro. Tudo isso assim. E vamos ver isso. Podemos trazer 16, desse jeito. E o texto em si garante que esteja centralizado. É. Isso pode ser às oito. Talvez. Lá vamos nós. Então, o que eu posso fazer é colocar isso em um grupo chamado tipo de cicatriz assim. E certifique-se de ativar o layout automático com oito e depois rotular o plano de fundo. O que eu posso fazer talvez seja colocar 16 em cada lado. Vamos ver. Traga-o de volta para aqui. Dois pixels, então o que deve ser 88. Lá vamos nós. Vamos verificar isso mais uma vez. Então 6.7. Lá vamos nós. Então, agora que isso está feito, vou apenas agrupar isso e chamá-lo de rótulo. E eu vou apenas posicioná-lo da borda superior e inferior para ser, desculpe, da borda superior e esquerda para ser 24. Lá vamos nós. Então, agora que isso está feito, isso é branco. Essa é basicamente a cor mais nítida, então ela se destacará contra o fundo branco. Então, o que vamos fazer a seguir é basicamente trazer nosso título aqui. Então digite Range Rover, isso será RH três. Lá vamos nós. E a distância aqui deve ser 24. Controle D Mais uma vez. Transforme isso em uma cor azul porque esse será o preço. Lá vamos nós. Controle D mais uma vez. E com isso, vou me transformar em um bloco de texto, ou melhor ainda em parágrafo. Cada parágrafo, e eu vou transformar isso em um parágrafo. Por exemplo, estará disponível para retirada agora. E a distância para isso também será de 24. 24 aqui, 24 aqui. Portanto, todas as distâncias são consistentes e isso será muito fácil de desenvolver posteriormente no Webflow. Então, o que vou fazer nesta fase é colocar esses botões. Então esse será nosso primeiro botão, 24. Lá vamos nós. E a distância aqui deve ser 24, então tudo bem. E agora vou trazer o segundo botão que criamos, que é esse. Posicione-o aqui. Então, certifique-se de que temos 24 anos aqui. 24. E vamos ver, devemos restringir isso até chegarmos aos 24 anos. Portanto, a altura deve ser 448. Lá vamos nós. Então é isso. Agora, em termos desse botão, ele deveria ser, vamos ver, 73 é a altura, três a seis é a largura. Na verdade, isso também deve ser de três a seis. Mas antes de mudar isso, deixe-me trocar isso por reserva. Esse carro. Nós vamos. Lá vamos nós. Vamos voltar a passar o mouse. Funciona. Isso é ótimo. Isso para passar o mouse funciona, isso é ótimo. E isso deve dizer apenas C opções. Lá vamos nós. Agora, esses botões foram concluídos. Todas as informações foram incluídas no interior. Vamos selecionar Control G e chamá-lo de barra lateral do carro. Lá vamos nós. E essa barra lateral no Webflow acompanhará nosso conteúdo à medida que rolamos para baixo. Então, basicamente, é isso que incluiremos lá. Então, a seguir, vamos lidar com a visão geral que virá aqui. Então, primeiro de tudo, vamos usar um retângulo. Então, escolha nossa posição para ter oito colunas de largura. E vamos usar, vamos ver, oito para o raio do canto. Certifique-se de que seja branco, para que se destaque contra esse fundo e certifique-se de posicioná-lo 24 mais uma vez. A partir daqui, será o plano de fundo geral ou o Oreo BG pressione T e a visão geral da digitação. Lá vamos nós. Certifique-se de que esteja alinhado à esquerda, ali mesmo. E vamos usar H three nesta ocasião. Então 24 mais uma vez, vamos verificar 24. Isso é ótimo. E agora chegou a hora de criarmos esse layout. Mas antes disso, quero corrigir esse layout porque será muito mais rápido fazer isso. Deixe-me realmente duplicar esses dois. Coloque-os em um grupo e posicione-o aqui. Agora, esse grupo será descrito assim. E isso deve dizer a descrição do veículo. Isso é ótimo. Controle D para duplicar isso. E isso deveria, na verdade, ser um parágrafo. Lá vamos nós. Bem, deixe-me copiar e colar o texto. E então isso deveria ser 24, desse jeito. E a altura total disso deve ser 198. Então, vamos mudar isso para 198. Lá vamos nós. Então, estamos a 32 da borda inferior. Isso é ótimo. Agora, eu realmente não gosto disso, então vou alterá-lo para um parágrafo de três anos, e é basicamente isso para esta seção em particular. Então, a descrição está feita. Vamos agora lidar com a visão geral do carro. Mas mais uma vez, antes de fazermos isso, vamos mudar isso para 24. Vamos mudar isso para 24, que acabamos de criar. Assim. Lá vamos nós. E vou mudar isso um pouco mais tarde. Mas basicamente está em 200, igual a todas as outras coisas, mas precisaremos incluir esta seção. Mas vamos primeiro lidar com a visão geral porque temos alguns ícones aqui. Então, o que vamos fazer primeiro é incluir apenas o texto e, para o texto em si, o que vou fazer é criar vários desses itens de parágrafo. Então, vou chamá-lo de 2021. Isso vai ser para o ano. Então, parágrafo para a cor do parágrafo, vou usar este. Lá vamos nós. E eu vou rapidamente pegar o ícone e usar o ícone do calendário aqui. Coloque-o aqui e certifique-se de que eu os agrupei. Certifique-se de que eu os chame de calendário. Certifique-se então de que eu tenha ativado o layout automático, mas antes disso, certifique-se de que eu os centralizei dessa maneira. Layout automático do calendário. E vamos ver, a distância para isso pode ser 16, por exemplo, eu acho. Sim. Então 16, lá vamos nós. Agora vou dar uma olhada aqui. Lá vamos nós. E, basicamente, o que vou fazer nesta fase é criar um monte de cópias. Vamos ver, 24 desta borda deve funcionar bem. Sim, eu acho isso ótimo. Então, basta criar mais duas cópias como essa. E eu vou colocar nessa chamada automática. A transmissão, isso vai ser gasolina para o tipo de combustível, e isso vai ser 15.246 km. Isso é o quanto o carro fez até agora. Então, vamos ver. Temos o calendário, que é esse. Depois temos a quilometragem, que deve ficar abaixo do calendário. Depois, temos o tipo de campo, que deve ficar abaixo da quilometragem. E, finalmente, temos a transmissão, que deve ir aqui. Então, o que podemos fazer neste estágio é meio que empurrar isso para talvez, eu não saiba ADH ou algo parecido. Então, vamos usar, vamos ver, 88. E então eu posso selecionar esses quatro, chegar ao topo e apenas arrumar. Sim. Ele faz seis trabalhos bem, mas não tenho certeza. Gosto do que fiz anteriormente. Portanto, distribua o espaçamento horizontal. Lá vamos nós. Acho que vai ficar tudo bem. Então, vamos ver um T9. Agora, vamos tentar trocar esses ícones. Então, para este, o que precisaremos é dessa transmissão. Portanto, certifique-se de encontrá-lo. Lá vamos nós. Para este. Vamos trocar. Iremos para o tipo de campo. Essa é a quilometragem. Então, acho que o ícone do odômetro deve funcionar bem aqui. Lá vamos nós. E agora que eles foram concluídos, o que podemos fazer é basicamente colocá-los em uma linha e duplicar essa linha, posicioná-la para baixo. Então, essa será a linha número dois dentro dela. Vamos transformar isso em um motor. Porque será o tipo de motor. Isso deveria dizer motor V8. Tipo de motor, como quisermos. Em vez de quilometragem, isso terá o ícone da porta. Então, vamos ver onde está. Lá vamos nós. E vai ter cinco portas. Lá vamos nós. Agora, o próximo deve ter assentos, então sete assentos. Então, esse ícone vai ser usado para as sementes, que estão por aqui. Assentos. E este último deve ser para garantia. Porque alguns carros terão garantia, outros não. Tudo depende da idade do seu carro na fase de venda. E se você puder provar que é seu, se você puder provar isso, vale a pena o que você está dizendo e coisas assim. Então não estamos. Lá vamos nós. Então, isso é basicamente o suficiente para isso. E eu acho que esta seção está terminada. Tudo o que precisamos fazer é arrumá-lo um pouco. Então, vou colocar isso em 24 também e transformar isso em 196. Portanto, a altura é 196. Lá vamos nós. Então, somos 32 de baixo, 24 de cada um desses lados. E agora o que vou fazer é colocar isso em cima com isso na parte inferior. Chame isso de visão geral. E deixe-me me mostrar desse lado. Então, 24 desse lado, vamos apenas empurrar isso para 24, empurrar isso para 24 também. Aqui, o que precisaremos é apenas copiar esta seção. Então, basicamente, basta empurrá-lo aqui para ter certeza de que está centralizado. E vamos ver a distância, vamos colocá-la em 200. Então, vamos ver onde estamos aqui, algo assim. Então, 200 e essas seções abaixo devem estar em 200, bem como algo assim. Lá vamos nós. E vou estender isso para baixo para que meu rodapé não fique coberto. Será em 64, o mesmo que fizemos anteriormente. Então, a altura deveria ser 5856, eu acho. Lá vamos nós. Então, um pouco de matemática ajuda muito. Aí está. Essa é aquela página. Tudo foi concluído. Então, vamos dar uma prévia do final deste vídeo. Só quero mostrar o que fizemos até agora e o que faremos com essa página em particular. Então, aqui teremos essas imagens. E quando você clica em qualquer imagem, a caixa de luz vai aparecer. Você pode ver isso na parte do curso sobre Adobe XD, mas também faremos isso em um dos vídeos posteriores aqui. Reservamos este curso, suas opções de empréstimo e carros devem ser selecionados aqui, o que será corrigido agora, porque na verdade isso faz parte da página do curso. Então, vamos selecionar isso. E em vez do padrão, vamos escolher selecionado. Agora você pode ver que está destacado aqui. Reserve este carro ou apenas as opções C. Então, basta adicionar S aqui. E é por isso que estamos verificando isso. Então isso é ótimo. Então, opções de Ceilão. Assim, você pode ver essas opções de empréstimo na próxima página. E isso só vai te dar opções gerais. Mas é claro que, para cada carro e para cada preço, serão diferentes. Portanto, é melhor entrar em contato com a pessoa que está fazendo os empréstimos dentro dessa empresa ou empresa externa para oferecer a melhor opção possível. Então, opções de Ceilão, vamos levá-lo ao discurso do empréstimo em si. Reservar este carro só vai levá-lo até o fórum Philip. Você pode preencher este formulário, reservar. Este carro vai saber que você veio desta página. Então, será muito melhor assim que tivermos a ótima descrição do veículo, o que é ótimo. Tudo isso é ótimo. Tudo isso está bem. 200 carros selados em todo esse trabalho. Entre em contato conosco. Lá vamos nós. Então, tudo isso funciona muito bem. E lá vamos nós. É isso. É isso aí, pois esta página, a página de empréstimos, entre em contato conosco será uma caixa super simples e leve. Será basicamente o mesmo layout, mas adicionando mais imagens. Então, nos vemos no próximo vídeo, onde criaremos esta página de Empréstimos. Então eu vou te ver lá. 159. Empréstimos e projetos de páginas de Lighbox: Vamos começar com a página de Empréstimos. Então, o que vou fazer primeiro é selecionar esse texto aqui. Controle C, venha aqui, controle V, cole-o no lugar. E vou substituí-lo por alguns textos adicionais. Então, empréstimos do carro dos seus sonhos. E eu vou vir aqui com minhas imagens. E vou colocar imagens que irão para a seção de heróis na parte superior. Alinhe-os assim, traga-os aqui e certifique-se de alinhá-los ainda mais a algo assim, depois aproxime isso um pouco mais, talvez até mesmo de algo assim. Mas sim, acho que tudo vai ficar bem porque vai ser fácil para mim alinhar essas imagens em termos do alinhamento geral. Acho que estamos bem aqui. Então, vamos selecionar essas imagens, chamá-las de imagens de heróis. Lá vamos nós. E eu vou agrupar tudo isso, chamá-lo de herói. Basta verificar o texto muito rapidamente. Isso é ótimo. Selecione os empréstimos e nós entraremos lá dentro. Nav, não sei por que não está me mostrando. Lá vamos nós. Então, os empréstimos que vou escolher enquanto estivermos disponíveis, acesse Fale conosco e escolha, selecione-os. Lá vamos nós. Então, volte para os pulmões. O que precisaremos aqui é criar outra seção abaixo desta. Então aperte T e eu vou escrever algo assim, certifique-se de que está centralizado. E em vez disso, vou continuar com isso. Então, centralizado mais uma vez, no centro da página. E eu vou escolher 150 desta imagem. Então, assim, lá vamos nós. Obviamente, vou colocá-lo abaixo da minha seção de heróis. E então eu vou duplicar isso, certificar de que é de três anos neste caso. Basicamente, vou recriar o mesmo layout que temos aqui. Podemos até copiar isso se você quiser. Então, vamos realmente fazer isso, porque basicamente usaremos o mesmo layout. Então selecione esses três, pressione Controle C, volte aqui. Clique em Control V. Certifique-se de que estamos no centro da página desse jeito, e certifique-se de que estamos, vamos ver, 64 daqui. Então 64, lá vamos nós. Agora, vou transformar isso na cor h3. Lá vamos nós. Faça o mesmo com isso. Então h3h3 e isso, vamos ver, talvez seja aquela cor cinza escuro. Acho que vai ficar tudo bem. E cinza escuro e cinza escuro. Agora, em termos de conteúdo, vamos preencher o mesmo. Lá vamos nós. Lá vamos nós. E vou deixar os ícones para o final porque vamos chegar até eles em apenas um segundo. Vou mostrar como usar e reutilizar rapidamente algumas dessas seções porque elas estão se repetindo. Você vai fazer isso no Webflow de qualquer maneira. Então, por que não fazer isso em Figma também? Então, aqui o que faremos é selecionar esse ícone e obteremos e alteraremos da maneira mais conveniente. Eu posso até digitar de forma conveniente. Lá vamos nós. Isso será, vamos ver, o pagamento do carro. Portanto, substitua-o por pagamentos de carro. Então essa será a garantia do carro. Garantia do carro. Lá vamos nós. Agora tudo que eu quero fazer é alinhar esses três. Assim, eu acho. Não, vamos tentar até o fundo. Lá vamos nós. Agora, tudo parece bem. Vamos ver se eu seleciono esse. Temos 64 anos, somos 72 por algum motivo aqui. Talvez esse ícone seja um pouco mais curto. Então, o que vou fazer é selecionar os três, clicar em Desagrupar e organizar tudo manualmente. Então, daqui até aqui, devemos estar aos 24. Lá vamos daqui para cá, deveríamos estar em 74. Lá vamos nós. Isso também deve ser aos 24. Lá vamos nós. E isso também deve ser 24, porque trocamos algumas instâncias e alteramos alguns desses ícones. Vamos tentar a partir daqui. Não sei por que não vai se alinhar aqui. Lá vamos nós. Vá lá. Ok, então agora isso está feito, isso está feito, isso está feito, isso é ótimo. Então Controle G, controle G, controle G. Pronto. Isso vai ser simples. Isso vai ser um pagamento. Isso vai ser uma garantia. Tranquilidade. Lá vamos nós. Então, agora estamos. Quando selecionamos todos eles, devemos ter 64 anos. Nós somos. Vamos colocá-lo aqui, clicar em Control G e chamar isso de empréstimos líderes de mercado, por exemplo, lá vamos nós. 150 da seção acima, o que farei neste caso é selecionar esta seção controle C, controle V aqui. Seja qual for o motivo, não o coloquei. Então, vamos usar algo assim por enquanto. E o que eu vou fazer é simplesmente arrastar outra imagem aqui para preencher esta. Lá vamos nós. E vou selecioná-los para ter certeza de que estão centralizados. Aqui. Deixe-me copiar esse texto. Lá vamos nós. Cole neste texto. Lá vamos nós. Então, agora que isso está feito, vou selecioná-los para clicar aqui. Lá vamos nós. E agora eu quero adicionar esses logotipos adicionais que foram incluídos anteriormente. Então deixe-me arrastá-los para dentro daqui. Lá vamos nós. Então, enviamos para lá e temos esse arrendamento S. Então, em algum momento, virá aqui e o zinco adormecido virá aqui. Aí está. Então, 24 em cada lado. Lá vamos nós. Então, agora que isso está feito, o que vou fazer é selecionar basicamente esses três. Então, vamos realmente trazer isso para dentro. Então, quem somos nós? Devemos mudar isso para nossos parceiros. Lá vamos nós. A mão do nosso parceiro. Vamos trazer esses dois para dentro de lá. Algo parecido. Lá vamos nós. Apenas certifique-se de que esteja perfeitamente no centro. 24. E agora isso está feito. Então, nossos parceiros foram concluídos. Quem somos parceiros tributados. Texto. Ok. Basicamente , é isso para esta página. Então, a única coisa que nos resta fazer é alinhar isso, isso e isso à distância de 200 pixels. Vamos ampliá-lo. Lá vamos nós. Clique duas vezes aqui para selecionar nosso quadro de empréstimos. Diminua o ritmo e estaremos prontos para fazer algo assim. Então, menos três. Então 3885. Lá vamos nós. Porque estamos aqui e só nos falta a imagem basicamente aqui. Então, vamos terminar a página de contato também. Então, vou arrastar e soltar uma imagem aqui, para garantir que seu centro esteja alinhado. Certifique-se de que ele esteja alinhado até aqui, 20 pixels abaixo, por exemplo, ou melhor ainda. Sim, 20 pixels é ótimo. Tudo o que precisamos fazer aqui é basicamente selecionar todo esse conteúdo e trazê-lo à tona. Então, em vez de 200, vamos usar 100 porque não precisamos desse espaçamento. Então, vamos ver 100. E mais uma vez, basicamente, basta cortar isso no núcleo. Lá vamos nós. Vamos ver onde estamos. Estamos a 9 minutos. Talvez possamos até mesmo terminar essa sobreposição também. Então, 4273564. Lá vamos nós. Então, vamos em frente e realmente fazer a caixa de luz em si. Então, deixe-me copiar isso. Deixe-me colar isso. E a própria caixa de luz. Vamos ver. Isso deve ser dez. Então 10905609. Lá vamos nós. Certifique-se de que esteja no centro. Acredito que vamos trazer isso aqui. Vai ficar como está. Então 168 por 93, isso é ótimo. E tudo o que precisamos fazer agora neste momento é apenas adicionar mais três porque temos 12345. Então, mais três funcionarão bem aqui. Então, primeiro de tudo, vou voltar aqui e transformar isso em layout automático. Venha aqui, transforme isso em um layout automático. 123. Então esse deve ser o número seis, esse deve ser o número sete. Aí está, e esse deve ser o número oito. Agora que isso está feito, o que também podemos fazer é basicamente alinhá-los um pouco melhor. Então, primeiro de tudo, é encaixar isso no centro da página. Vou reduzir um pouco isso. Empurre, por exemplo , vamos ver, 64, talvez 64 deste lado, isso é ótimo. E talvez 16 deste lado. Deixe-me ver algo assim. Como eu quero poder ver todas as imagens ou talvez até melhor, podemos simplesmente colocá-las no centro dessa forma. Então, lá vamos nós. Veja talvez um a vinte desta borda. Então, algo assim. Sim. Agora que temos isso, o que podemos fazer é pressionar R para o retângulo e apenas posicioná-lo para preencher completamente esse quadro. Lá vamos nós. Posicione-o em segundo plano. E eu vou chamá-lo de fundo de caixa de luz. Eu vou dar a ele aquela cor cinza escuro. Lá vamos nós. E eu vou dar a ela uma cidade-base de 80 por cento. Portanto, preencha com o cinza escuro e a obesidade de 80 por cento. Lá vamos nós. O que também precisamos aqui é daquele ícone de fechar. Então, podemos usar esse. Lá vamos nós. Posicione-o aproximadamente por aqui para que fique alinhado. E eu vou dar a ela, vamos ver, a cor da seleção. Então, em vez desta, não a cor de preenchimento, vamos selecioná-la. falha deve ser branca. Lá vamos nós. Adorável malabarismo. E do topo deveria ser, sei lá, talvez 53 ou algo assim. 56, eu acho. Sim, 56. E é basicamente isso. Essa é a nossa sobreposição feita. Porque deixamos isso em 80 por cento. Basicamente, será transmitido. Então, quando a colocarmos sobre essa página, poderemos ter a opacidade em segundo plano. Então, na verdade, vamos agrupá-los e chamá-los de caixa de luz assim. E lá vamos nós. Nosso design foi concluído, tudo foi feito. No próximo vídeo, podemos atacar algumas prototipagens básicas. E no vídeo seguinte, talvez eu possa mostrar como exportar alguns desses ativos. E finalmente, no final, vou mostrar esse plugin, que vai te ajudar a transformar alguns designs básicos de figma para Webflow sem escrever uma única linha de código, adicionar sem tocar em todos esses componentes no próprio Webflow, porque você pode fazer tudo isso no Figma. Mas, mais uma vez, lembre-se de que é para páginas realmente básicas. Então, nos vemos no próximo vídeo onde começaremos com a prototipagem. 160. Criando protótipos em Figma: Vamos agora começar com algumas prototipagens bem básicas. Então, o que vou fazer é aqui mesmo, onde diz carros, vou mudar para o protótipo e arrastá-lo para a página de carros. Vou clicar, navegar um instante porque não quero nenhum tipo de animação entre os empréstimos. Mesma história. Então, basta selecioná-lo e ir para empréstimos e entrar em contato conosco, selecioná-lo e ir até Fale conosco. Agora, como o aplicamos a partir daqui, como você pode ver, ele foi transferido para cada instância desse componente específico. Botão C - todos os cartões. O que vou fazer é simplesmente selecioná-lo e, a partir dele, vou para esta página instantaneamente. Vamos usar o smart animate porque teremos essa opção aqui. Navegação entre em contato conosco. Tudo isso vai ficar praticamente o mesmo. Agora, nesta página, o que faremos é selecionar o Range Rover. Então, vamos selecionar o cartão de débito e iremos para esta página específica. Vamos usar o smart animate também neste caso. Reserve as opções de empréstimo de Garcia? Então, para as opções de empréstimo, vou para os pulmões. Aqui, veja todos os carros ou ela nos levará a esta página aqui. Acho que nem precisamos desse botão agora que penso nisso, mas vamos deixar como está, porque vamos incluí-lo posteriormente no Webflow. E isso é basicamente o suficiente para essa página em particular. Agora, por aqui, tudo é feito aqui, tudo está feito. Tudo o que precisamos fazer agora é conectar esta caixa de luz. Então, para fazer isso, o que você pode fazer é clicar aqui ou aqui. Então, vou selecionar C todas as imagens. Clique e arraste até a caixa de luz ao clicar. Vá para, eu vou para Abrir sobreposição. E eu vou escolher o instantâneo. E dentro da caixa de luz, vou clicar e selecionar isso fechar. Clique aqui. Ao clicar. Eu já tenho essa interação de alguma forma. Então, vamos fechar isso. Vamos fechar isso. Então, selecione-o novamente. Clique e arraste aqui. Então, ao clicar, vou fechar a sobreposição. Então, isso basicamente vai fechar esse. Agora, uma coisa que eu não pesquisei é como ocultar essa barra de menu específica que vem de cima para baixo aqui. Então, esta, provavelmente há alguma opção, mas eu estava com preguiça. Agora, quando eu clico, isso vai me levar até lá, o que é bom. Aqui. Podemos ver como tudo isso parece. E eu posso até voltar para aqui. Mas eu provavelmente deveria fazer um protótipo. Então, vamos dar uma olhada aqui. Então, carros, tudo funciona. Quando eu clicar aqui, ele abrirá esta página. Então, tudo funciona muito bem. Você pode ver que temos as capas. Ver todos os carros nos levará a esta página. Ele manterá essa posição que não é a ideal, mas ainda assim reservará as opções de empréstimo para o carro C. Vamos precisar de dois pulmões. E quando você clica em Ver todas as imagens, ela abrirá esta página. Agora, o que podemos fazer com esta página é reduzi-la um pouco em altura. Então, vamos prosseguir e fechar isso. Lá vamos nós e fechamos isso. Mude para o design. Então, o que temos aqui é 64, se bem me lembro, sim, nós temos. Então, podemos simplesmente melhorar isso. Vamos ver onde estamos aqui, 118. Catia acha que vai funcionar muito bem. E veja onde estamos com isso. Sim, então eu também tenho que restringir a imagem da caixa de luz. 68, então quatro a menos, 150. Lá vamos nós. E a caixa de luz em si deve ser 150. Lá vamos nós. Agora que isso está feito, talvez possamos clicar em Visualizar aqui nesta página específica para ver se há alguma diferença no que criamos. Sim, existe, porque agora ele apenas o empurra um pouco para cima em direção ao centro. E isso é basicamente o suficiente para a prototipagem oral e o que você pode fazer com ela. Não vamos enlouquecer aqui porque vamos criar um protótipo mais tarde no Webflow. No próximo vídeo, mostrarei algumas opções de exportação e como você pode exportar alguns desses ativos para desenvolvedores se não estiver desenvolvendo isso sozinho ou para si mesmo. Se você estiver desenvolvendo isso no Webflow como nós vamos fazer, nos vemos lá. 161. Export Ativos de Figma: Vamos agora lidar com a exportação de alguns desses itens. E eu vou explicar basicamente três formatos diferentes, formatos arquivo para você nos quais você pode exportar. Portanto, você pode conferir as diversões de exportação neste momento e começar com o Webflow, parte deste curso, para entender um pouco como importar algumas dessas opções, que elas são usadas e para que serve cada formato de arquivo. Eu expliquei tudo isso na parte de refluxo do curso. Nessa parte do curso, usaremos itens de exportação do Adobe XD. Figma funciona exatamente da mesma maneira. Mostre aqui, por exemplo, temos esses ícones agora, cada ícone que vou exportar como SVG. E para fazer isso, vou selecionar o ícone em si. Venha aqui onde diz Exportar, clique em Selecionar. E aqui eu posso alterar o formato do arquivo de PNG para JPEG, SVG e PDF basicamente para este curso. E, em geral, você precisa se preocupar com PNG, JPEG e SVG. Apenas tenha em mente isso. Svg é incrível para ícones porque manterá a mesma qualidade e permanecerá consistente, não importa o tamanho em que você esteja projetando, porque o SVG é um gráfico vetorial escalável Ele sempre manterá a mesma qualidade. JPEG é para imagens embutidas que não têm fundo transparente. E eu vou te mostrar um deles aqui. Por exemplo, esta imagem aqui. Ele não tem nenhum fundo transparente, então JPEG para esse formato de arquivo específico é ótimo. E, finalmente, temos a P&G. P&g é ótima para imagens como essas, por exemplo, para imagens como essas, como essas duas. Porque eles têm fundos transparentes. Então, para exportar, você realmente tem duas opções diferentes aqui. Digamos que eu queira exportar esse ícone em vez de PNG, vou selecionar SVG. O que você pode fazer é adicionar sufixos diferentes aqui, por exemplo, 1x2x3 x. Se você quiser exportar isso em um x2, x3 x, tudo o que você precisa fazer é adicionar um x como sufixo. Clique aqui. Ele será adicionado automaticamente, adicionar ao clique mais uma vez, três saídas a3x. Você pode adicionar mais e mais se quiser, mas nós realmente não precisamos disso. Então, basicamente, vou me livrar deles. Você pode ver como fica aqui. Mas vou fechar tudo isso e apenas exportar neste. Vou remover o sufixo porque realmente não preciso dele. O que posso fazer é clicar em Exportar imagem da chave do carro. E você pode ver aqui, se eu me esforçar, que ele o exporta para o meu desktop muito rapidamente. Agora, o que isso faz é me permitir simplesmente arrastá-lo e soltá-lo no Webflow, como farei na próxima parte do curso, quando começarmos com a web para desenvolvimento. E será muito simples arrastar e soltar e ter todos os seus arquivos consistentes nesses padrões organizacionais específicos. Então, deixe-me mostrar isso também. Basicamente, é assim que essas imagens se parecem. Então você pode ver que alguns deles são SVG, como este e este. Isso é um PNG. Então, quando eu abordo muito rapidamente, você pode ver uma extensão de arquivo PNG. Este é um arquivo JPEG porque realmente não precisamos da extensão PNG. Este é o PNG porque tem um fundo transparente que você pode ver, então aqui, este é um Jpeg, como eu mencionei, porque não tem um fundo transparente em termos de ícones, você pode ver que todos eles são SVG. E basicamente eu fui em frente e exportei todos eles. Mas o que acontece se você quiser exportar vários ícones? Bem, você pode simplesmente selecionar o ícone enquanto estiver criando. Clique em Exportar, altere isso para SVG. E agora, quando eu selecionar este, saberá que eu sempre seleciono o SVG lá. Ele vai selecionar este como SVG. Talvez este possa ser exportado como JPEG e este, grande. Então, a imagem do herói pode ser exportada na P&G. Então, o que acontece se quisermos selecionar uma exportação? Todos eles, bem, você pode fazer isso facilmente clicando aqui. Em seguida, Arquivo e Exportação. E ele exportará todos os itens que você basicamente alinhou para exportação porque você marca todos eles, selecionou os formatos de arquivo. Em seguida, você pode ir para Exportação de arquivo e ele será exportado para o destino desejado. Basicamente, é basicamente isso. Isso mostra como é simples exportar. Não vou me preocupar selecionar um especialista em tudo isso. Basicamente, com isso, você nem precisa exportar essa elipse. Você pode recriá-lo no Webflow, mas acho que ainda o exportei do Adobe XD porque é muito mais simples importar em formato SVG e criar um sozinho. Porque no Webflow, isso é praticamente um div com apenas um raio de canto de 100 por cento e a cor azul interna. É basicamente isso. E então você pode jogar com as opções de posicionamento dentro do Webflow. Você não está exportando fontes. Você não está exportando cores, não está exportando botões. Você está criando todas essas coisas dentro do Webflow. Então, basicamente, não há necessidade de você fazer isso e exportá-los diretamente do Figma. Falando em exportar do figma para o Webflow. No próximo vídeo, vou abordar esse famoso plugin. E vamos explorá-lo e ver o que você pode fazer dentro do Figma, como conectá-lo ao seu projeto Webflow e como trabalhar em projetos semelhantes nele, mas não neste. Então, nos vemos lá. 162. Figma para o Plugin de Webflow: Tudo bem, então vamos lá. Vou mostrar como conectar o fluxo de trabalho da ferramenta Figma. Estou fazendo isso pela primeira vez e vou te mostrar como é. Então, basicamente, você virá aqui para o painel de pesquisa de Plugins, Figma para Webflow e instalará este. Apenas certifique-se de que seja feito pelos laboratórios Webflow. Você pode ver isso aqui. Então, só para ter certeza de que é um plugin oficial, clique em executar. E ele vai rodar basicamente uma instalação. Você pode ver aqui. E vai te mostrar todos os tipos de opções diferentes. Portanto, o Safari não é compatível. Use o fluxo de trabalho no Chrome. Eu o estou usando no Chrome, então não sei por que ele está me mostrando isso. E é basicamente isso. Então, o que temos aqui, temos layouts e temos estrutura. Assim, você pode incluir seção e contêiner. Duas colunas, três colunas, cabeçalho de quatro colunas mais três colunas e assim por diante. E você realmente deve aprender isso na seção Webflow do próprio curso, o que são tudo e como estruturar seus sites. E então talvez volte a isso. Se você não está familiarizado com alguma estrutura HTML básica de suas páginas , temos o layout, e esses são basicamente os modelos que você pode usar. Então, vamos empurrar isso para o lado. Na verdade, vamos aos nossos ativos à vista. Use a página do nosso site, pressione Controle C. Volte para o controle de design do site V. Posicione-o aproximadamente por aqui. Lá vamos nós. O que eu vou fazer é, digamos, usar esse logotipo de navegação, clicar com o botão esquerdo e adicionar ao Canvas. Então, vou clicar e espero que ele o adicione aqui. Talvez não seja em outro lugar. Saiba, por qualquer motivo, não funciona. Não tenho certeza do porquê. Talvez devêssemos começar com uma palestra sobre estrutura. Vamos nos livrar desse. Então, vamos tentar assim. Lá vamos nós. Então, nova página. Temos que usar os deles. Então 14, 40. Nesse caso. Aqui, o que faremos é apenas navegar pelo logotipo à esquerda. Isso incluirá aquele herói indo para a esquerda. Vamos ver. Então, equipe de heróis, vamos ver características, matriz de características. Lá vamos nós. Então você pode ver que ele começa a adicionar todas essas talvez seções de equipe, círculos de equipe. Lá vamos nós. Talvez depoimentos. Então, vamos usar esse. E talvez possamos usar logotipos. Talvez esse, Footer, talvez esse. E lá vamos nós. Vamos tentar mais uma vez. Lá vamos nós. Agora que temos tudo, vamos explorar rapidamente esse layout porque você precisará usar esse layout específico para implementar esse layout em suas próprias páginas. Então, primeiro de tudo, podemos ver que o layout está fixo na API 14:40, 14.40 pixels. Então aqui também temos 14, 40. Mas o nosso não é fixo. Então, você deve basicamente consertá-lo. E você deve transformar todo o seu conteúdo em layout automático. Então você pode ver que eles têm o layout automático. Então, por exemplo, se eu fizer isso aqui, posso criar um layout automático em vez de usar uma largura fixa. E aí está. Meu conteúdo é igual ao deles. Então, o que devemos fazer a seguir? Bem, basicamente, tudo isso deve estar em seu próprio layout automático separado. Então, aqui temos agora o logotipo da Navbar à esquerda, que é essa barra de navegação na parte superior. E se eu abrir, em primeiro lugar, você pode ver que é por si só, é um layout automático. E você pode ver que temos um preenchimento horizontal de 24. Então, se eu abrir, temos o contêiner navbar, que é o contêiner para o conteúdo entrar. Depois, temos o conteúdo da barra de navegação em si. Sim. Agora empreste conteúdo, que é tudo isso interno. Dentro disso, temos a marca navbar e temos o menu da barra de navegação. Portanto, é assim que você deve estruturar seus arquivos e apenas se certificar de que está configurado para encher o contêiner e abraçar itens dentro dele. Então, quando eu seleciono isso, você pode ver que é 14 40 p . Mas como está definido a uma distância de 24 em cada lado, você pode ver aqui. Então, quando eu seleciono meu contêiner, eles definem a largura fixa de 1.200 e, em seguida, a largura total do conteúdo interno. Isso fará com que ele responda imediatamente. O que vai acontecer aqui é que você pode selecionar este. Por exemplo, e em vez disso, você pode incluir seu próprio logotipo aqui. Assim, você pode fazer uma troca de instâncias, digamos , ou simplesmente arrastar e soltar seu logotipo dentro. E vamos realmente tentar fazer isso. Vamos ver uma aranha. Lá vamos nós. Você pode ver que pode colocar seu logotipo dentro e simplesmente se livrar do logotipo deles, apenas certifique-se de manter a distância dentro da dívida. Então, na verdade, Control X, Control V. Aperte isso, exclua isso e pronto. Agora substituímos o logotipo pelo nosso próprio logotipo. Podemos colocar todas as nossas instâncias aqui em vários recursos aqui e assim por diante. Mas, na verdade, como conectar tudo isso. Você precisa abrir seus painéis de fluxo de trabalho e encontrar o projeto. Ele está relacionado a este arquivo Figma? No nosso caso, é chamado de spider , carros exclusivos projetados em Webflow Tem o mesmo nome. Então, ao abrir seu painel de fluxo de trabalho, você fará o login. Então, basta clicar aqui. Você fará o login e depois clicará nesse projeto específico para conectá-lo. Então, ao conectá-lo, o que você pode fazer é copiar todos os textos e estilos de cores, apenas texto e apenas estilos de cores. Você pode acessar as configurações do plugin e configurá-lo lá. Agora, basicamente, para cada arquivo Figma, você pode se conectar a diferentes sites para projetos e fazer o contrário. Por quê? Não acho que isso seja útil para projetos complexos, pois você pode fazer praticamente qualquer coisa aqui. Mas, como eu disse, para nosso caso de uso específico, esta página realmente requer alguns ajustes adicionais . E você verá que, ao acessar página do Webflow, por causa dessas caixas de luz, tive que combinar várias caixas de luz porque o fluxo de trabalho não tem as opções padrão que eu realmente preciso para executar este projeto. Portanto, é muito difícil fazer algumas coisas quando você está apenas indo para a rota padrão. Às vezes, você precisa basicamente fingir e fazer algumas coisas de uma maneira diferente, de uma forma diferente. Mas com isso, vou encerrar essa etapa de design e prototipagem no próximo vídeo. Basicamente, você poderá começar com a parte Webflow deste curso. Você pode abrir esse arquivo Figma para explorá-lo. Você pode exportar todos esses ativos como eu mostrei. Você pode brincar com algumas configurações de prototipagem. Lembre-se de que tudo funciona exatamente da mesma forma no Figma e no Adobe XD. As duas únicas diferenças principais, como você viu até agora, são basicamente três. Como você cria esses estilos para texto e cores. Porque no XD, eles estão aqui no lado esquerdo. Em Figma, eles estão aqui. Assim, você pode clicar nele na troca de instâncias porque no XD você pode arrastar o componente colocá-lo em cima do novo componente. Aqui você tem essa troca de instâncias, que eu acho um pouco melhor do que aqui. E basicamente em toda a estrutura que eles chamam de layout automático aqui, e no XD eles são chamados de pilhas. Todo o resto, na minha opinião, é exatamente o mesmo. Algumas coisas são ainda piores na minha opinião, como adicionar imagens que você não pode simplesmente arrastar e soltar sobre a forma. Então você tem que, aqui no lado direito, encontrar essa forma e depois arrastá-la e soltá-la lá. Obviamente, existem algumas grandes diferenças quando se trata do fêmur, que são melhores do que no XD, como você pode adicionar grades horizontais e verticais, por exemplo, você pode adicionar várias opacidades e várias cores e cores, estilos e tecidos em cima de quantidades existentes. Você não pode fazer isso no XD. Então, há praticamente mortos. E eles são, é claro, alguns recursos avançados de prototipagem, como usos e melhorias, e você pode alterar as curvas e coisas assim. Mas eu propositalmente não queria incomodá-lo muito com essas coisas, porque nós vamos fazer isso mais tarde no Webflow de qualquer maneira. Então, qual é o objetivo? Aqui, acabei de mostrar um parafuso básico de prototipagem no XD e aqui no Figma. Então, isso praticamente encerrará esta seção de design do curso. Desculpe se alguns vídeos foram mais longos, mas eu só estava tentando explicar o máximo que puderam sobre essa transição do XD Figma. Você pode ver que é praticamente o mesmo e será praticamente o mesmo agora que a Adobe o comprou. Então, nos vemos na próxima lição onde começaremos com o fluxo de trabalho. 163. SECÇÃO 16 ATRIBUIÇÃO: Sua tarefa para esta seção é usar os arquivos que eu forneci e tentar usar imagens ou cores diferentes ou topografia completamente diferente. E só para brincar com os arquivos, eu realmente encorajo você a acompanhar essa aula na íntegra, porque os arquivos são fornecidos por esse motivo específico. Não tente usar o arquivo finalizado e brincar com ele para tentar me acompanhar, acompanhar e criar ao meu lado enquanto eu ensino. Então, para entender muito melhor do que usar o arquivo finalizado e simplesmente separá-lo e encerrá-lo, é sempre a melhor abordagem para aprender à medida que você avança. Então, enquanto eu ensino, enquanto você assiste a essas aulas, é sempre melhor acompanhar e tentar criá-las você mesmo. E enquanto você o está criando pela primeira vez, talvez experimente um pouco apenas para usar talvez um tom diferente de cinza e não exatamente o mesmo tom de cinza que usei nesta lição. E essa é a melhor maneira de aprender, na minha opinião. 164. SEÇÃO 17 Construção do fluxo da Web: Nesta seção do curso, vamos pegar o que acabamos de criar e transferi-lo para o fluxo de trabalho. O Workflow é uma ferramenta fantástica projetada sem nenhum código em mente. O que isso significa é que você tem o código em execução em segundo plano, mas na verdade está fazendo o material visual, mas é diferente de todas essas outras ferramentas porque você vai aprender HTML, CSS e JavaScript ao longo do caminho sem que você realmente precise conhecer uma única linha de código. Então, vamos começar com o Webflow e finalizar esse projeto. 165. Introdução ao fluxo de internet: Webflow é uma ferramenta incrível que permite criar sites ricos em conteúdo totalmente responsivos e totalmente animados, tudo sem conhecer uma única linha de código. Obviamente, é melhor que você saiba como codificar, porque você pode então expandir essa falsa funcionalidade da web. Mas se você não sabe codificar, tudo bem, porque você pode criar seu design do zero, como estamos fazendo neste curso, ou pode usar alguns dos milhares que choraram, modelos diferentes que o Webflow fornece. E então você pode editar um desses modelos e simplesmente continuar de onde eles pararam com esse modelo. Mais uma vez, é benéfico que você conheça pelo menos a estrutura do código. Mas se você não sabe, falaremos sobre isso neste curso, em breve. Mas, por enquanto, o Webflow é uma ferramenta fantástica porque não permite que você se sobrecarregue com alguns plug-ins e atualizações como o WordPress, por exemplo, não é muito limitado, como corrigido, por exemplo onde tudo já está preparado e você está limitado a esses modelos, larguras e tamanhos e assim por diante. Mas você pode criar todo o seu conteúdo do zero. Você pode criar seus designs personalizados do zero. E isso é realmente oficial, especialmente quando se trata da funcionalidade CMS, que abordaremos neste curso mais tarde. E, claro, a funcionalidade de comércio eletrônico, que permite que seus clientes vendam coisas on-line usando o Webflow. O que distingue o fluxo de trabalho de todos os seus concorrentes é que ele oferece hospedagem, o que é muito benéfico para você e seus clientes. Porque imediatamente, quando você finaliza seu projeto, quando obtém a aprovação final de seus clientes, você pode começar a hospedar imediatamente. Você pode integrar seu nome de domínio hospedagem prejudicada diretamente do Webflow. Ou você pode comprar seu nome de domínio para algo como GoDaddy, por exemplo, e simplesmente implementar esse nome de domínio em sua hospedagem Webflow. Finalmente, se você não quiser hospedar sites com fluxo de fogo, você quer hospedá-lo em sites externos, como Whole Stinger ou Host Gator ou algo parecido, talvez blue host. Então, o Webflow também tem essa opção. Você pode exportar todo o seu código e simplesmente prepará-lo bem em uma única pasta. Em seguida, você pode fazer o upload dessa pasta para uma pasta raiz em seu site de hospedagem. Então, deixe-me mostrar o que flui e o que ele pode fazer agora. Então, aqui estamos no webflow.com e você pode visitar este site apenas para se familiarizar um pouco com o que o Webflow pode fazer, sua aparência. É claro que vamos abordar muitas coisas neste curso, mas é sempre benéfico que você saiba pelo menos um pouco antes de entrar no conteúdo em si. Então, o que temos aqui é a aparência do Webflow. Então, este é o modo de pré-visualização e você tem esse íon aqui, que abordaremos várias vezes no curso. Aqui no topo, você tem seus vários pontos de interrupção, que mencionei na seção de design. Então essa é a área de trabalho e, no Webflow, tudo começa na área de trabalho e desce como já mencionado. Então, você está projetando primeiro para desktop e depois passa para o tablet, o que é distinto. Isso é paisagem móvel e isso é retrato móvel. E aqui você pode ver o tamanho da pré-visualização da sua janela. Portanto, se você tiver um laptop menor, isso é realmente benéfico porque aqui você pode inserir vários tamanhos, como, por exemplo, 2000 pixels de largura da tela. E vai imitar a largura de uma tela de 2000 pixels, mesmo que sua tela possa ter 13, 80 ou algo parecido. Então, aqui temos a função de adenina , que seus clientes podem editar com bastante facilidade depois publicar o site, porque você pode simplesmente convidá-los ou compartilhar o link ou ao traduzir e transição do seu site do design para a hospedagem, por exemplo, então eles podem editá-lo diretamente. Eles podem mudar o texto, podem criar novos textos. Eles podem copiar e colar diferentes seções do site. Eles podem criar conteúdo completamente novo por meio do CMS, que abordaremos um pouco. E então você pode ver as alterações salvas aqui. E aqui você pode publicar mudanças para o mundo ver. Então, é bem simples quando você pega o jeito, mas vai parecer complicado, mas prometo que não é nada complicado. Pense nisso como uma grande ferramenta de design, talvez algo como um Photoshop ou algo parecido. E vai ser muito fácil para você entender. Uma última coisa que eu quero abordar sobre Webflow é isso. Se você quiser hospedar seus sites em qualquer outro lugar, CMS e comércio eletrônico, incluindo fóruns, isso não funcionará corretamente porque todos esses elementos são combinados na funcionalidade de fluxos de trabalho. Então, se você quiser criar seus itens de CMS como faremos neste curso para todos esses carros e páginas detalhadas de todos esses carros, você precisa fazer isso através do Webflow. Caso contrário, ele não será conectado corretamente e não funcionará corretamente. Portanto, certifique-se de manter isso em mente. A mesma história vale para a funcionalidade de comércio eletrônico do Webflow. Portanto, você precisa hospedar os produtos do seu cliente dentro do Webflow para que ele funcione. E, finalmente, quero abordar os fóruns. Fóruns como o formulário de contato que vamos criar nesta classe são conectados por meio da API de fluxos de trabalho. Então, ele está enviando as informações diretamente pelo Webflow. Para o seu, digamos, o Gmail ou o que quer que você esteja recebendo seu e-mail. Então, isso também não vai funcionar corretamente. Mas se você estiver criando fóruns de contato, você pode simplesmente editá-los um pouco mais tarde. Em algo como, sei lá, pode ser um texto sublime ou qualquer que seja o seu editor de texto, se você souber apenas um pouco de código para poder simplesmente apontar esse e-mail. Portanto, não é enviar esse e-mail por meio de servidores de fluxos de trabalho, mas diretamente por meio do seu servidor Você pode simplesmente posicionar isso e apenas isso diretamente dentro do Gmail, por exemplo, se você estiver hospedando seu e-mail no Gmail. Mas eu só queria ressaltar isso e é muito importante, se você estiver trabalhando com seus clientes, dizer a eles que, se eles não quiserem hospedar no Webflow, então CMS, comércio eletrônico e os fóruns não funcionarão diretamente lá. Então, uma coisa a ter em mente para sites estáticos, eu, as páginas que não vão se mover, elas permanecerão completamente estáticas, como as páginas de destino são todas as outras páginas deste site, exceto aquelas páginas de vários carros diferentes. Isso vai mudar. Portanto, lembre-se disso e deixe seus clientes saberem de antemão o que estão fazendo. Então, aqui estamos de volta ao site de fluxos de trabalho. E, como mencionei, deixe-me dar uma olhada e mostrar alguns exemplos do que você pode criar. Aqui você pode ver o seletor de cores , do mesmo gosto, digamos o Photoshop ou qualquer outra ferramenta. Vamos criar essas amostras de cores como fizemos no Adobe XD. Aqui você pode ver a publicação de sua nação. Portanto, você pode publicar por meio do domínio de teste, o que pode ser feito até dois sites no plano gratuito do Webflow. E aqui você pode conectar seu domínio personalizado ou sua hospedagem personalizada ou o que quiser diretamente por meio do Webflow para que você possa conectar seu domínio personalizado, como lattice.com, neste caso, e você pode hospedá-lo diretamente no Webflow, como mencionei, e ele conectará tudo para você. Você pode publicar para selecionar os domínios como esse ou acessar as Opções Avançadas e exportar código e coisas assim. Então, aqui onde diz publicar, você pode clicar lá e ele mostrará a opção de exportação de código, que mostrarei um pouco mais tarde. Então, se eu começar a rolar para baixo, você poderá ver que todos esses sites foram criados ou têm pelo menos algumas páginas criadas no Webflow. Upwork é quase inteiramente criado no Webflow, e eu sei que o gamma road também é criado no Webflow. Assim, você pode ver quantos designers estão usando o Webflow no momento. E aqui está o que acontece quando você começa a trabalhar dentro do fluxo de trabalho. Então, você pode simplesmente clicar em Ajustar e ele será ajustado em tempo real. O mesmo que qualquer outra ferramenta de design. E isso me lembra muito o Photoshop, especialmente por causa do esquema de cores e do posicionamento de todos esses elementos diferentes. Você pode arrastar e soltar elementos na página e torná-los realmente específicos. E você pode até mesmo inserir um código personalizado lá dentro. Como eu disse, se você sabe codificar, se não, está tudo bem. Você nem sabe programar. Eu vou te mostrar isso mais tarde. Um poder criativo que vai muito além dos modelos. Então você pode ver que esse é o CMS que abordará um pouco para que você possa extrair conteúdo da sua biblioteca, que é o que vamos criar um pouco mais tarde. Então, vamos criar aquela página dinâmica que tem apenas uma página, um modelo, que abrigará o layout e o conteúdo de todas as nossas diferentes páginas dinâmicas. Então, lembre-se de que teremos oito carros diferentes, então teremos oito páginas dinâmicas diferentes. Mas em vez de criarmos oito páginas diferentes novamente, ou simplesmente copiarmos e colarmos elementos. Vamos fazer tudo isso dentro do CMS. É por isso que um sistema de gerenciamento de conteúdo ou CMS como este é benéfico para seus clientes. Você pode lançar lojas de comércio eletrônico personalizadas, como mencionei, para posicionar os preços e colocar diferentes opções de cores, botões e coisas assim. Podemos monetizar conteúdo exclusivo para membros por meio da assinatura. E você pode fazer isso estourar. Então você pode ver todos os tipos de animações diferentes aqui. E você pode ser muito, muito específico com animações. E abordaremos a animação um pouco mais tarde. Mas podemos basicamente criar um curso inteiro sobre animações porque elas são muito avançadas e podem ser muito avançadas. Mas, ao mesmo tempo, eles podem ser muito fáceis de criar. Tudo depende realmente de você o que você quer criar com as animações do seu site. Então, se você rolar um pouco para baixo, ele será otimizado para marketing e apoiado pelo design. Então você pode ver algo assim. Por que eles mencionaram que seus clientes talvez queiram adicionar um novo texto, talvez colocar uma nova cópia dentro e você pode ver aqui, então temos esse botão Publicar. Então, depois de editar sua cópia, você pode clicar em Publicar e ela publicará essa alteração ao vivo. Assim, você pode otimizar o SEO. Assim, você pode adicionar tags de título, adicionar meta-descrições. Você pode criar fluxos com lógica, o que é muito benéfico, especialmente se você estiver usando algo como a tabela de ar, talvez para extrair informações da tabela aérea diretamente pela web, site completo. E você pode conectar esses exemplos de lógica personalizada , como o Zapier. Então, se o usuário fizer isso, você faz isso e mostra isso a ele. Assim, você pode conectar todos os tipos de coisas diferentes. Por exemplo, se o usuário me enviar um e-mail, coloque esse endereço de e-mail desse usuário em um banco de dados chamado Marketing for Mondays ou algo parecido. Assim, você pode ser muito específico e muito criativo com lógica do Webflow e conectar todas as suas ferramentas favoritas. Então, se você estiver usando o Google Analytics, você pode, se estiver usando o Facebook pixel, você pode, se estiver vendendo por meio de, digamos, cursos do Teachable, você também pode fazer isso. Então você pode fazer muitas coisas aqui mesmo dentro do Webflow. Assim, você pode crescer porque ele foi criado para o crescimento em escala corporativa, especialmente se você estiver criando blogs maiores. Talvez essa não seja a opção certa para blogs que talvez tenham tamanhos novos, porque às vezes pode ser complicado porque esses sites grandes tendem a mudar de página de tempos em tempos, interagindo com diferentes elementos de tempos em tempos. Então, talvez algo como uma solução personalizada seja ótimo. Mas até que o negócio em cada um seja algo como uma agência de notícias com milhares de postagens de blog diferentes, postagens diárias, o Webflow é uma ótima opção para isso. Você pode ver alguns sites criados no Webflow. E, basicamente, o céu é o limite quando se trata de criatividade. Você pode ver o made in Webflow, descobrir tudo sobre ele e ver o que as pessoas criaram. Eles têm um ótimo recurso chamado Webflow University, e você pode assistir aos tutoriais deles no webflow.com ou no YouTube. Eles têm um ótimo canal no YouTube e você pode assistir gratuitamente até estar pronto para o lançamento. Você pode criar seu site gratuitamente e levar o tempo que precisar. Basta adicionar um plano de site para mais páginas e domínios personalizados quando estiver pronto para o mundo. Então você pode ver por que eles estão colocando isso de graça porque você pode construir, você pode aprender, você pode preparar tudo. E então, quando você estiver pronto para o lançamento, você pagará. Então, falando sobre isso, vamos abordar rapidamente os preços e ver como isso acontece. Então, se eu abordar os preços aqui, você pode ver que temos planos de sites. Temos CMS inicial, básico, empresarial e empresarial. Agora isso pode ser um pouco complicado. Portanto, os planos do site são ótimos para experimentar o Webflow. E quando você compra um site pago, planeje publicar, hospedar e desbloquear recursos adicionais. Então, isso basicamente permitirá que você publique seu site finalizado, e é para isso que servem os planos do site. Assim, você pode ver o que está incluído no básico. Você pode incluir o domínio personalizado zero itens do CMS. Portanto, não é para CMS, 500 assinaturas mensais de fóruns. Assim, você pode atrair tantas pessoas por meio seu e-mail e 50 GB de largura de banda. E para o CMS, você pode ter itens de CMS dos anos 2000, que mencionei. Basta lembrar que temos oito, por exemplo, neste caso. Mas no nosso caso, digamos que quando o cliente vende aquele carro, obviamente ele excluirá esse anúncio. Então, aqui temos itens CMS dos anos 2000. Só temos oito, mas vendemos um, então vamos excluí-lo agora que temos sete, queremos adicionar mais dois. Então, agora temos nove. Vamos vender um e excluir um. Então, agora temos oito. Então, você pode ver os anos 2000, é muito difícil escalar, especialmente para negócios desse porte. Então, $23 mensais ou se eu mudar aqui para anualmente. Então, isso é construído anualmente, então 23 vezes 12, e é isso que você vai conseguir. Então, temos o geral e depois o comércio eletrônico, que mais uma vez oferecerá funcionalidades diferentes. Então, aqui temos milhares de itens diferentes e 2.000, 200.000 em volume anual de vendas. E aqui você tem um volume de vendas ilimitado. Então, obviamente, como suas habilidades de negócios, você expandirá e adicionará esses diferentes planos de sites. E, obviamente, quando você está vendendo esses sites para seus clientes, é importante orientá-los em tudo isso para que eles entendam que é melhor começar com menos. Portanto, se seu cliente não tiver nenhuma página de CMS, ele não quer nenhum conteúdo dinâmico essa planta funciona muito bem. Mas assim que eles adicionarem algum conteúdo de CMS, você terá que comprar esse plano. Eles terão que comprá-lo novamente porque hospedarão seu site no fluxo de trabalho se quiserem o CMS. Se eles não querem CMS, eles só querem hospedagem regular, então essa é provavelmente uma boa opção. Mas se eles não precisarem de nenhum tipo de CMS, talvez essa não seja uma boa opção , pois fica muito caro quando você adiciona isso. Porque se eles quiserem mudar o que precisarem, crie um plano de designer que você fará em apenas um segundo para que eles façam alterações, façam upload de novas imagens, as substituam e coisas assim. Então, talvez até essa não seja uma boa opção, mas na verdade tudo depende de você e seu cliente concordarem. Por exemplo, um dos meus clientes não queria hospedar seu site no Webflow, mas para cada alteração, eles entraram em contato comigo e eu cobrava por cada alteração no site. Mas é assim que você concorda com seus clientes, porque, para esse cliente em particular, acabamos de fazer com que Dan mude ao longo de um ano. Portanto, não é tão difícil, mas se seu cliente precisar de mudanças constantes em seu site, talvez comprar a hospedagem Webflow seja uma boa opção para ele. Temos espaços de trabalho para freelancers e agências. Não vamos falar de muita coisa sobre isso. Mas, obviamente, se você faz parte de uma agência ou está criando uma agência, isso é o que precisa ser explicado. E aqui temos ainda mais. Então. Temos designer de produto, que é o que nos interessa discursar. E nós temos a estrutura, navegamos em seus símbolos, todos os tipos de coisas diferentes. Então, vamos falar sobre isso em apenas um segundo. Só quero ver se consigo encontrar preços aqui. Acho que não consigo. Se eu for ver o painel vou para a conta e vou para as plantas. Então, eu estava leve, mas vai ser cancelado nesta data porque eu quero atualizar para o Pro, mas não queria atualizar antes. Portanto, ao cancelar seu plano, você pode pagar mensalmente ou anualmente. Então você pode ver que esse é o meu plano atual. Você pode começar gratuitamente. Como mencionei aqui, você tem dois projetos. Temos teste gratuito, mas você não tem uma exportação de código, então você terá que pagar para poder exportar o código, sem rótulo branco. E isso significa que você pode adicionar seu próprio logotipo ao editor e remover a marca do Webflow, sem proteção por senha do site e sem painel da equipe. Então você também não tem isso aqui, mas neste plano, motivo pelo qual escolhi esse plano é que meus clientes possam exportar código e que eu tenha dez projetos, o que eu acho que é o bastante para eu. Mais uma vez, você pode construir isso manualmente ou anualmente, ou construí-la mensalmente como quiser, mas você terá que comprar essa planta, como mencionei, se quiser mais de dois projetos e se você quiser exportar código, se não quiser fazer nada disso. Se você quer apenas aprender, começar um plano plano plano é perfeitamente adequado. Você pode aprender o Webflow. Você pode criar quantos desses projetos quiser. Você só precisa excluir alguns deles ao atingir o limite de dois projetos. E depois de conseguir que alguns clientes começassem, você pode comprar o plano de consulta e simplesmente continuar lá onde você tem dez projetos ou quando isso se tornar pequeno, espero que em breve para você, então você pode ir para a sonda. Então, mais uma vez, para cobrir rapidamente, você precisa comprar plantas de conta se quiser ter mais de dois projetos e poder exportar código. Se você quiser hospedar no Webflow, não você, mas seus clientes, eles terão que comprar planos de hospedagem. E se eles quiserem poder fazer alterações em seus sites sozinhos, eles também precisarão comprar eles também precisarão comprar esses planos de conta para que possam fazer qualquer tipo de alteração e sejam capaz de adicionar imagens sozinhos, por exemplo, e mexer com o CMS e coisas assim. Então você tem que explicar isso para seus clientes. Essa é apenas uma despesa normal para a empresa. Então, qualquer pessoa que esteja fazendo negócios, eu mesmo, por exemplo, estou pagando para que o Teachable possa hospedar todos os meus cursos. Estou pagando para que o Gmail possa ter e-mail comercial. Estou pagando pelo fluxo de trabalho, como você pode ver neste exemplo aqui, estou pagando pelo plano de negócios, por exemplo então tudo faz parte do negócio e eles só precisam saber que essa é a despesa deles. Tenha isso em mente. Eles terão que comprar um domínio. Eles terão que comprar hospedagem, em qualquer caso, seja por meio do Webflow ou da hostgirl , Bluehost, Host, Gator, tudo o que precisarem comprar para que também sejam domínios. Você precisará comprar seu domínio por meio da GoDaddy ou para domínios do Google ou por meio do Webflow. Então, de qualquer forma, eles terão que comprar essas coisas. O Webflow oferece apenas essa opção adicional, na qual você pode projetar, construir, preparar, lançar e hospedar tudo em um só lugar. Então, se seus clientes quiserem fazer isso, tudo bem. Caso contrário, é sua responsabilidade explicar a eles. Então, toda essa funcionalidade não funcionará. Se você não hospeda no Webflow. É muito simples. Então, lá vamos nós. Explicamos o Webflow. Espero que isso faça mais sentido para você agora Se não quiser explorar isso mais uma vez, assista a este vídeo mais uma vez. Vamos ver por si mesmo e criar sua conta lá. Mais uma vez, é totalmente gratuito iniciar até dois projetos sem nenhum especialista em código. Mas eu vou te mostrar como isso acontece neste curso. Em seguida, vamos preparar nossos arquivos e começar a criar nosso projeto Webflow. Então eu vou te ver lá. 166. Configurando o projeto: Tudo bem, agora vamos preparar nossos arquivos do Adobe XD e certificar-nos de traduzi-los por meio do Webflow. E eu vou te mostrar como começar um novo projeto. Então, vamos começar. Então, aqui estamos no Adobe XD e esse é o nosso projeto, e foi aqui que o paramos. Então, mais uma vez, aqui temos o fluxo de usuários, temos wireframes de papel que fizemos. Temos mapa do site e arquitetura de conteúdo. Temos nosso quadro de humor e aqui temos nosso design. Mas isso você não viu antes nos vídeos. Então, este é o guia de estilo e como você pode criar algo assim. É simplesmente super simples. E antes de tudo, por que você criaria algo assim em primeiro lugar. O guia de estilos é muito mais fácil de simplesmente copiar e colar estilos e elementos, se necessário, e apenas para manter e ter todos os seus elementos em um piscar de olhos. Então aqui você pode ver que eu criei cores, tipografia, iconografia, logotipo, botões e cartões de carros. Então, por que isso é importante? Bem, é muito mais fácil para mim criar isso agora no Webflow. E eu vou mostrar isso em apenas um segundo. Mas antes de fazer como criar algo que encante isso, você simplesmente cria, digamos, para tipografia, você cria todos esses elementos. E se você quiser mudar alguma coisa, basta clicar aqui e ela aplicará essa alteração, como eu mostrei neste caso. Então, para as cores, fiz exatamente o mesmo porque quero poder copiar esses códigos hexadecimais daqui ou daqui. Mas é muito mais simples tê-los em um piscar de olhos, tanto para você quanto para seus clientes. Para desenvolvedores, se você estiver enviando isso para um maior desenvolvimento. Mas, neste caso, apenas para nos lembrarmos do que está envolvido neste projeto e do que está incluído nesse projeto. Então, primeiro de tudo, deixe-me mudar para overflow. E aqui temos meus lados. Este é o site de preparação que eu criei para poder guiá-lo até este curso. E nesse caso, vou criar um novo site que está localizado aqui, que está no meu painel do Webflow. Então, se eu clicar aqui e você puder ver, você pode começar com os modelos. E você tem esses modelos, que são modelos premium, criados por uma comunidade de designers. E você pode escolher carne no Webflow e aqui, onde diz os recursos que você tem, modelos. Então, se eu clicar com o botão direito do mouse e abrir em uma nova guia, você poderá ver todos os tipos de modelos diferentes, mas eles são principalmente premium. Mas você pode filtrar gratuitamente aqui na parte superior. E você pode ver todos os tipos de modelos gratuitos aqui. Mas a maioria dos modelos bons e excelentes são premium. Assim, você pode pesquisar por categoria popular CMS, comércio eletrônico. Você pode descobrir tudo isso ou clicar em “ Conheça” no Webflow para se inspirar. E vai mostrar alguns sites incríveis que são criados no Webflow. Mas, de volta ao nosso painel, o que vou fazer é simplesmente começar com um modelo em branco. Você pode ver, é claro que é grátis. Então, quando clico ali mesmo, tenho que dar um nome a ele. Então, neste caso, vou dar a ele o nome de um site de carros exclusivos para aranhas apenas para distingui-lo do original que eu criei. Clique em criar site. E vai começar a criar. Nesse caso. Aqui somos recebidos por nossos designers. Então, antes de prosseguirmos, eu só queria falar um pouco mais sobre esse designer. O que ele faz, se algumas funcionalidades que você deve conhecer e aprender sobre. E que tipo de código é necessário para que você pelo menos entenda como ele funciona. Então, aqui estamos de volta em nosso designer e é assim que tudo parece no Webflow. Começou a partir daqui. Ao passar o mouse sobre esse logotipo do fluxo de trabalho, você pode clicar e ele mostrará um painel, as configurações do projeto e o editor. Então, se eu clicar aqui fora, temos todos os tipos de elementos que podemos adicionar à nossa página. Mas onde adicioná-los, você pode clicar aqui para abrir todos esses elementos. Portanto, temos elementos e layouts, que são basicamente modelos pré-fabricados que você pode usar. Neste curso, vamos começar tudo do zero, mas você pode usar alguns desses elementos se quiser. Eles são como kits de interface do usuário. Você pode simplesmente arrastá-los e soltá-los dentro. Então, aqui temos layout, elementos básicos, tipografia, CMS, mídia, fóruns, componentes, todos os tipos de coisas diferentes. Então, para poder adicionar qualquer coisa, você tem três opções. Então, se eu quiser adicionar uma seção, posso clicar e arrastar e soltar aqui, ou deixe-me removê-la daqui. O que eu posso fazer é, digamos, clicar mais uma vez na Seção. Arraste-o aqui para o Navigator, que é como um painel de camadas. E está localizado aqui. Você pode ver isso em uma última coisa. E vamos fazer isso o tempo todo. Quando seleciono o corpo e pressiono Control K ou Command K , posso digitar algo como seção, pressionar Enter ou Return, e ele publicará isso aqui. Vamos usar isso ao longo deste curso, então certifique-se de se acostumar com isso novamente Control K. Então, dentro dessa seção, vou colocar um bloco div, por exemplo, dentro do blog div, por exemplo, Control K. Mais uma vez, vou digitar H para o título e clicar no meu mouse. E digamos que este seja o H2 , abaixo do título Control K, IMG para a imagem. E abaixo desse controle de imagem K, digamos parágrafo. E você pode ver como isso é simples porque isso é HTML. Lembre-se de que, em HTML, tudo vai do canto superior esquerdo para baixo. Então é assim que o HTML empilha as coisas. Não é um ao lado do outro. Ou se eu abri-lo aqui no navegador, você pode ver dentro desta seção que temos nosso bloco div, que conterá todos os nossos elementos. Então, dentro do bloco div, temos um título que é distinto. Temos imagem e parágrafos, e eles não estão um abaixo do outro, como no Photoshop, no XD ou no Figma ou em qualquer outra ferramenta de design, mas estão um abaixo do outro. Então, temos que criar algo chamado eixo y. E vamos falar sobre isso daqui a pouco, um pouco mais tarde. Mas antes de fazermos isso, quero te mostrar coisas adicionais. Então, o que temos aqui, essa caixa são símbolos, e os símbolos são basicamente componentes que vamos abordar um pouco. Então, se eu mudar você para o XD mais uma vez, aqui temos um componente para a navegação e, em seguida, temos um componente para nosso formulário de contato, para o mapa e a localização, e para o rodapé, por exemplo e será o mesmo aqui no Webflow, onde criaremos esses componentes quando realmente começarmos com nosso layout. Abaixo disso, temos esse Navigator, que é o que eu já mostrei para vocês. É mais ou menos como seu painel de camadas. E aqui você pode destruir todas as vidas vivas ou abri-las aqui, você pode soltar o navegador e ele se moverá, mas eu não recomendo que simplesmente clique em fixar o navegador e ele vai fico lá o tempo todo. Você pode passar o mouse e ajustar a largura do navegador, algo assim. Se você quiser ver mais do navegador em si mesmo, abaixo temos as páginas. Então, aqui você vai adicionar suas páginas adicionais, novas páginas, páginas utilitárias, temos senha e quatro ou quatro redirecionamentos. Você pode adicioná-lo a eles. Você pode clicar ali mesmo e adicioná-lo como estiver . Ou se quiser criar uma nova página, clique aqui. E se você quiser criar uma nova pasta, o que obviamente é útil por vários motivos diferentes. Mas, por enquanto, vamos criar novas páginas para este site. Abaixo disso, temos o CMS, que é um sistema de gerenciamento de conteúdo. Vamos falar sobre isso um pouco mais tarde, então teremos que criar uma nova coleção. A coleção será de carros à venda ou simplesmente carros, seja o que for. E então, dentro dessa coleção, vamos criar uma página ou um item e , em seguida, simplesmente recriar essa página novamente. Uma vez que começamos a criar novos dados e novas informações e a inseri-los. Abaixo disso, temos o comércio eletrônico. E você pode ver o que diz aqui, mas não vamos fazer com o comércio eletrônico no discurso. Abaixo disso, temos ativos. Aqui. Você poderá arrastar e soltar todos os seus ativos. E, na verdade, vamos fazer isso agora. Então, se você se lembra, nós os exportamos aqui, temos todas as imagens do nosso projeto aqui temos todos os ícones de nossos projetos. Então, vou simplesmente selecionar todos eles, clicar, arrastar e soltá-los dentro deles. E você pode ver que ele será preenchido com todos esses ícones diferentes. E eu vou fazer o mesmo com minhas imagens. Então, basta selecionar todas as minhas imagens, arrastá-las e soltá-las dentro. Aí está. E ele fará o upload de todas as suas imagens e as posicionará. Eles estão falando sobre imagens. O que você pode fazer ou nos ícones é clicar nesse relógio. Então, quando você passar o mouse, vai mostrar essa engrenagem no canto superior direito. Então, quando eu clicar ali, ele vai te mostrar se a imagem é descritiva ou decorativa? Porque é descritivo porque está tentando explicar alguma coisa. Vou dizer algo como um homem parado no showroom de carros desse jeito e simplesmente fechá-lo. Por que eu fiz isso? Se eu clicar mais uma vez para abri-lo, é porque pessoas com deficiência visual usam leitores de tela para poder navegar no site. Então é por isso que você está usando isso. E se eu clicar aqui, adicione outros para que as pessoas fechem o negócio sobre venda de carros, venda de carros ou algo parecido. Aí está. Então, aqui vamos digitar algo como pessoas explorando um showroom de carros aranha. Assim. E aqui teremos empréstimos para carros exclusivos de aranha, algo assim. Então, aqui o que podemos fazer é criar algo como cláusula si da Mercedes Benz. Aí está. Esta será uma imagem ou coloração de um carro-aranha. Carro. Talvez a imagem, ou porque é decorativa, o que eu posso fazer é me livrar dela e ela simplesmente mudar para decorativa. Portanto, eles não transmitem significado e não exigem textos alternativos, então eles estão lá apenas para fins de decoração. Mas porque isso é, vou digitar algo como Audi RS cinco e mudar para o meu alcance, que será esse , Range Rover, Vogue. Aí vamos nós. Então, agora o texto alternativo vai mostrá-los e vai se traduzir bem em mostrar isso para o meu público. Deixe-me ver esses benefícios. A imagem parece um pouco errada porque tem opacidade. Então, deixe-me me livrar disso. Na verdade. Deixe-me mudar para o Adobe XD. Deixe-me encontrá-lo aqui. E se eu te mostrar , está em dez por cento, mas eu quero fazer isso no Webflow. Então, vou expandi-lo aqui, apertar Control ou Command E. E temos JPEG como imagens boas, tudo bem. Exportação. E então aumente para 10% aqui. Agora, se eu mudar para o fluxo de trabalho e levar você de volta aos meus carros, você pode ver agora que está tudo bem. Então, eu vou encontrá-lo aqui. Clique nele e clique em Excluir. Confirme, exclua. Aí vamos nós. E agora eu posso voltar para minha pasta, clicar em arrastar e soltar dentro dela. E agora ele vai posicioná-lo em 100 por cento. Porque, como eu disse, quero poder ajustar essas configurações. O que você deve fazer com todas as suas imagens. Mas não vou incomodá-lo muito com o discurso, mas é apenas a melhor prática fazer isso. Cada uma de suas imagens ou ícones, neste caso, deve ter texto alternativo. O texto alternativo será retirado do nome. É por isso que os chamamos no XD. Ícone de carro tão conveniente, é isso que vai ser. Descrição do decorativo. Assim, você pode escrever uma descrição da imagem. O texto alternativo é usado por leitores de tela e, ou se uma imagem não carregar. Então, ele vai usar o texto alternativo, e esses são os textos antigos que vamos criar. Então você pode simplesmente usar algo assim. Ícone de carro tão conveniente. Então você pode criar isso. Então, Kuan, ícone de carro indulgente. E vai usar os textos antigos dele. Portanto, é seu trabalho examinar todas as suas imagens, todos os seus ícones, todos os seus logotipos e incluí-los lá. E por falar em logotipos, acho que não exportamos o logotipo aqui. Acho que não fizemos isso. Então, vamos voltar ao XD muito rapidamente. Amplie um pouco. Eu tenho meu logotipo lá, mas vou fazer isso diretamente daqui. Então, em vez de JPEG, vamos usar SVG e colocá-lo dentro de nossas imagens. E se mudarmos para o meu fluxo na web, lá vamos nós. Volte para minhas imagens e onde está meu logotipo? Aí? É feito para arrastá-lo e soltá-lo para dentro. E aí está. Agora temos nosso logotipo. Então, mais uma vez, se você quiser arrastar qualquer uma dessas imagens, digamos esta , basta clicar, arrastar e soltar dentro dela. E você pode ver que ele vai se encaixar, ser colocado ali mesmo. Então, essas foram nossas imagens. E, finalmente, temos algumas configurações aqui. Assim, você pode ver os backups gerais. O fluxo de trabalho de comércio eletrônico cria automaticamente backups para você. E ele fará backup de todos os seus elementos lá. Mas basicamente é isso a partir daí. Então, aqui temos auditorias, aqui temos a Pesquisa personalizada, então encontre qualquer coisa. Aqui temos tutoriais em vídeo que você pode encontrar lá. E aqui temos a seção de ajuda. Então, se eu fechar tudo isso e deixar meu navegador aberto. O que eu tenho aqui é a prévia, então alterei a pré-visualização. E é assim que seu site ficará ao vivo. E você pode clicar em todos os tipos de pontos de interrupção diferentes para ver como seu site ficará nesses pontos de interrupção. Além disso, o que você pode fazer é digamos que eu esteja em um tablet, você tenha essa alça. Então, quando você clica e arrasta, ele alterna entre seus tamanhos. Você pode simplesmente assistir aqui na parte superior enquanto eu arrasto o que está acontecendo. Então, ele vai alternar entre esses tamanhos. Ou, como mencionei, você pode clicar aqui e digitar algo como 2000 pixels apenas para ver como o site ficará em 2000, ou digamos 4.000 pixels. E você pode ver isso ali mesmo. Então, vai imitar isso e só vai te mostrar isso. Então, se eu voltar para aqui, o que faremos a seguir é deixar-me guiá-lo por este painel e pararemos o vídeo lá porque não quero que seja muito confuso. para você e por muito tempo. Então, este vídeo, esta seção é sobre os estilos. Quando eu passo o mouse aqui, você pode ver que é o painel de estilos. Esse é o painel Configurações. Esses são os gerentes de estilo. Então, à medida que você adiciona suas aulas, vamos começar em apenas um segundo. Todas essas classes serão listadas aqui. E, finalmente, esta é sua seção de animação. Vamos abordar todas essas seções ao longo do curso, mas principalmente nessa seção de estilo. Então, basicamente, a forma como você pode ver o Webflow está deste lado, está tudo em HTML, então tudo sobre a estrutura, como tudo será colocado na página. E aqui à direita está tudo o que é CSS. Então, como tudo vai ficar e como será estilizado. Então. O que posso fazer nesse caso, por exemplo, vamos nos livrar de todos esses elementos. Então, basta clicar em Excluir em todos eles. E vamos trabalhar em nosso título. Vamos dar uma aula um pouco mais tarde. Então, no próximo vídeo, abordaremos isso. Mas aqui você pode mudar a forma como ela é exibida. Digamos que eu queira colocar a margem superior em 100 pixels. Eu posso clicar aqui, fixar 100 pixels e ele vai posicioná-lo aqui. Em seguida, na parte inferior, do mesmo tamanho. Então, para o tamanho, digamos que eu queira criar outro bloco div abaixo desse. Então, clique em Control K div, só para que você possa ver o que estou fazendo. E talvez eu possa posicionar isso como um emparelhamento. Não sei, talvez 60 pixels. E então use a cor aqui para algo assim. Aí está. E para o tamanho, vamos dar uma largura. Vamos dar a ele uma altura, na verdade, de 200 pixels, só para que você possa ver o que estou fazendo. E, na verdade, vamos empurrá-lo ainda mais até que eu saiba pela altura, pela largura, digamos 500. Então, aqui temos uma caixa que é o bloco div, 500 de largura e 200 pixels. E se eu começar a expandir isso dessa forma, segurando Shift e minha tecla de seta para a esquerda, você pode ver o quanto ela está se expandindo. Se eu adicionar a margem, que é o espaço fora do seu objeto, à esquerda, você pode ver como ela fica. Ou à direita será exatamente o mesmo e o preenchimento será o espaçamento dentro do seu objeto. Então, se eu entrar neste blog de div digitando Control K e digitar algo como textblock, coloque-o dentro. Você pode ver que o texto agora está lá dentro. Então, se eu digitar algo assim, é o nosso botão, você pode ver que o texto estará lá. Você pode imaginar que esse talvez seja nosso botão. Então, a altura é, digamos, 100 pixels e a largura é, digamos , 50. Aí está. Agora você pode ver como ele move o texto. Mas também há outra maneira de corrigir isso, chamada Flexbox. Então, quando eu clicar aqui , abordaremos muito o Flexbox ao longo deste curso. Você pode alterná-lo entre horizontal e vertical. E aqui você pode posicionar como seus elementos são colocados na página para que você possa ver como isso é simples. E se eu ajustar isso um pouco, você pode ver que agora temos algum tipo de botão aqui dentro. Portanto, este é o bloco de exibição, display flex, display grid, display, bloco embutido. Esse é o embutido no padrão para texto, e tudo isso é para oculto. Então, se eu clicar lá, ele ocultará todos os elementos que estão dentro desse bloco div, incluindo o próprio bloco. Espaçamento, como já expliquei, tamanho, já vou explicar. Então esse é o seu peso, sua altura, essa é sua largura mínima e sua altura mínima. E você fará isso, por exemplo para tamanhos de tela menores, digamos que para telas móveis muito pequenas, eu não quero que meus elementos sejam menores do que esse tamanho em largura ou altura. A largura máxima ou a altura máxima estão fazendo exatamente o oposto disso. Então, por exemplo não cresça mais do que, digamos, 1.300 pixels de largura , por exemplo, o estouro mostrará elementos internos. Vamos abordar isso um pouco mais tarde. Temos as opções de preenchimento, que são ótimas para imagens. Eu vou te mostrar isso mais tarde também. Temos o posicionamento, então temos estático relativo, absoluto, fixo e pegajoso. Nós abordaremos a maioria deles neste curso. Então, temos que a topografia cobrirá muito isso. Na próxima lição. Temos planos de fundo para todos os tipos de elementos diferentes. Então temos o raio da borda, temos as bordas e, finalmente, temos os efeitos e as animações aqui na parte inferior. É aqui que eu vou realmente parar este vídeo. Porque se eu entrar em muito mais detalhes neste vídeo, vídeo vai durar muito mais do que 20 minutos. Aí está agora mesmo. Então, vamos passar para o próximo vídeo e não se preocupar com isso. Se parecer muito confuso agora, ficará muito mais claro quando realmente começarmos a trabalhar no Webflow. Lembre-se de que o lado esquerdo é o HTML, que é uma estrutura. lado direito está o CMS e as animações podem ser js, que é um script amarelo. Então, vamos abordar tudo neste curso. Não se deixe intimidar se você não souber o que está acontecendo. Se você estiver um pouco confuso, vai ser muito simples, eu prometo. E nos vemos no próximo vídeo. 167. Como criar um guia de estilo: Guia de estilo. Agora vamos movê-lo para o fluxo de trabalho e criar nosso guia de estilo. Então, aqui estamos no Webflow e vou tentar fazer isso o mais rápido possível, mas ainda assim tentar explicar você máximo de detalhes possível. Então, uma das primeiras coisas que vou fazer é realmente adicionar minhas cores. Então, o que vou fazer é selecionar o corpo, que é a etiqueta corporal. E mais uma vez, se mudarmos você para o Adobe XD, assim. Então aqui temos a página, imagine como se fosse nossa porta neste caso, mas é só uma página. Então, tudo o que está dentro desta página está dentro do body tag. Então, é muito importante entender isso. E a estrutura é mais ou menos assim. Então aqui temos, se eu clicar aqui, temos a navegação, temos o herói, quem somos, e assim por diante. Todas essas são seções. Dentro das seções, você pode ver os contêineres. Então, você pode imaginar que isso se estende por todos esses tipos de, vamos chamá-lo assim. Ele se estende completamente da borda esquerda até a borda direita. Essa é uma seção. Na verdade, o contêiner é isso, que tem 1.200 pixels de largura, conforme explicamos. E então, dentro desse contêiner temos diferentes blocos div, que são, novamente, contêineres diferentes que contêm essas informações. Provavelmente parece muito confuso no momento, mas não se preocupe com isso. Eu prometo que não será. Então, mais uma vez, aqui temos seção que vai da borda esquerda para a borda direita. Temos um contêiner que contém conteúdo que não deve ultrapassar 1.200 pixels. E então temos contêineres adicionais, também chamados de blocos div. Este é um deles, por exemplo, que contém o conteúdo e aqui você pode vê-lo. Então, conteúdo de herói, e este é outro para imagem de herói, porque tem três imagens diferentes dentro. Então, vamos entrar no Webflow e começar a adicionar nossas cores, como mencionei. Então, se eu mudar para aqui, role um pouco para baixo aqui, deste lado, o que temos são as cores. Então, o que eu posso fazer é onde diz tipografia, posso começar a adicionar minhas cores, ou posso simplesmente ir, Vamos ver os planos de fundo. Eu posso até ir lá. E o que eu quero fazer é mudar você para o XD. E primeiro de tudo, quero adicionar essa cor de corpo. Então, deixe-me copiá-lo, clicar com o botão direito do mouse e copiar. Mude para o Webflow. Selecione esse texto aqui. Controle V para colá-lo. E vai colar a cor do corpo para adicioná-la, deixe-me trocar aqui para que você possa ver um pouco melhor ou aqui na matéria. Então eu colei a codificação de efeitos. Vou clicar aqui e vou digitar a cor do corpo assim. Pressione Enter e ele adicionará a cor do corpo. Em seguida, temos a cor branca. Então, vou mudar totalmente para o branco. Clique aqui e digite algo como branco puro , porque era isso que tínhamos no XD. Então, se eu mudar para o XD, o que temos a seguir é cinza claro. Então, clique com o botão direito do mouse em Copiar, vá para o Webflow e simplesmente selecione Colar, Enter. Clique aqui, digite em cinza claro. E eu não uso traços, mas você pode. Então, na verdade, tudo depende de você como você vai usar isso. Em seguida, temos cinza escuro. Então, eu vou entrar aqui mesmo. Clique em cinza escuro. Você pode ver que o Webflow fornece algumas indicações quais tipos de nomes você deseja usar. Copie e cole minha cor n. E para esta, quero dar a ela esse nome. Então, H, três parágrafos. Então, H, três parágrafos. Então eu sei qual é e onde usá-lo. Então temos esse. V, clique no Plus dark adicionando cor. E então temos nosso azul principal. Volte aqui. Adicione aqui. Então, azul principal. E, finalmente, temos a cor da nossa capa. Então copie, cole, clique aqui e chame de cor flutuante. Aí vamos nós. Agora que você tem todas as nossas cores, vamos aplicar essas cores corporais. Então, quando eu passo o mouse, você pode ver como eles se parecem. O corpo selecionado no navegador aplicará a cor do corpo e conterá a cor do corpo, que será exatamente igual aos nossos designs aqui. Então, vamos agora passar para a tipografia. E é por isso que eu realmente criei isso. Então, se eu ampliar um pouco para que você possa ver um pouco melhor, algo assim. Então, primeiro de tudo, temos que integrar as fontes Poppins. Então, para podermos fazer isso, deixe-me me esconder. Para esta parte, você pode ir aqui, clicar e ir para Configurações do projeto. Dentro do site atual exclusivo do Spider, você tem todos os tipos de opções diferentes. Então, para o general, você pode inserir todos os tipos de coisas diferentes aqui. E para o Fab Icon, eu realmente recomendo que você envie este clipe da web para dispositivos iPhone, quando eles são salvos em uma espécie de marcador. Então, isso só vai mostrar que basta fazer o upload para imagem de 56 por 256 pixels do seu logotipo, talvez cinco, eu posso fazer o mesmo. Então, 32 por 32, basta fazer o upload lá. Este é o fuso horário em que você está localizado, marca Webflow, a visão geral e todos os tipos de coisas diferentes. Então, o que me interessa aqui é hospedar. Você pode adicionar esses planos de hospedagem. Como falamos, o Editor é quem pode adicioná-lo. Planos e cobrança são que você pode adicionar os planos do site sobre os quais falamos. O SEO é algo que abordaremos um pouco mais tarde. Então, tags de certificação de sites do Google e assim por diante. Então, talvez você possa adicionar um mapa do site personalizado se você o tiver aqui. E você pode desativar a indexação de subdomínios do Webflow. Agora, por que isso é importante é que, se você quiser lançar este site para pré-visualização, ele não o indexará. Portanto, o Google não conseguirá encontrá-lo até que você permita que ele o encontre. Isso impedirá que seus usuários visitem o site antes que ele esteja pronto. Então é por isso que isso existe. Então temos os formulários. Então, aqui dentro de um formulário, você pode adicionar um nome estrangeiro, enviar envios para o e-mail que você deseja. Seus envios a serem processados, linha de assunto respondem a modelos de e-mail de endereço para que você possa inserir tudo isso, recapturar a validação para impedir spammers formassem a integração de formulários. Assim, você pode criar diferentes integrações de formulários de diferentes provedores on-line. Temos backups, integrações. Então, isso é o que eu mencionei para o Google Analytics, por exemplo, Google Optimize para Google Maps. A chave de API é necessária para usar o Google Maps em sites do Webflow, que é o que criaremos um pouco mais tarde. Assim, você pode criar uma chave de API JavaScript do Google Maps e colá-la aqui. E vou conferir nosso guia de mapas um pouco mais tarde, quando realmente chegarmos a ele, pixel do Facebook para rastrear o acesso à API, você pode gerar o token da API e conectá-lo a todos os tipos de diferentes provedores externos que então falarão por meio dessa API por meio do Webflow. Web hooks, você pode conectar seus web hooks, eles estão ao ar livre, eu autorizo os aplicativos. E, finalmente, o código personalizado é não é aqui que você vai exportar seu código personalizado. Vou compartilhar isso em apenas um segundo. Mas aqui, quando clico em Publicar, você pode ver do que falamos antes. Então, ele será publicado neste estágio de domínio gratuitamente. Ou você pode acessar o domínio personalizado e, em seguida, conectar o domínio que você comprou. O código personalizado está aqui. Se você quiser adicionar alguma funcionalidade personalizada, como talvez queira adicionar, sei lá, pop-ups adicionais ou pop-ups adicionais ou funções de bate-papo diferentes que falem sobre bate-papos externos e outras coisas assim. Então é isso que vamos importar aqui. Então, aqui você pode ver algo que é chamado de código principal. cabeça é o elemento que vai acima do corpo. Ele está localizado na mesma página e o corpo e cabeça funcionam em todas as páginas do seu site, mas acabam de sair. O conteúdo não entra na cabeça, mas o código entra na cabeça. O conteúdo entra no corpo da tag. E então temos o Código de Rodapé, que mais uma vez vai até o final e, por dentro, pode ser, você pode ver o código antes do corpo dos textos ou antes que a tag corporal termine, e ele vai para o parte inferior da página. Às vezes, você vai adicionar estilos diferentes no feed. Às vezes, você vai adicionar estilos diferentes e mais, dependendo do que você está tentando integrar ao seu site. O que nos interessa aqui são as fontes. Então, se eu clicar nas fontes, podemos facilmente integrar as fontes do Google aqui. Se o seu cliente tiver fontes personalizadas, você pode simplesmente descompactá-las e enviá-las aqui. Vamos mostrar a eles fontes da Adobe são um pouco diferentes porque, mais uma vez, você tem seu token de API e simplesmente cola aqui, salve o token. E ele vai extrair essa fonte das fontes da Adobe e mostrá-la no Webflow. Estamos interessados nas fontes do Google porque eu queria manter as coisas simples e o que precisamos é Poppins. Então, se eu for para Poppins, lá vamos nós. O que eu preciso é normal. Eu preciso disso em negrito, digamos, de várias centenas, o que é ousado. Isso é normal e isso é médio, por exemplo, então eu posso simplesmente clicar em Adicionar fonte. Foi adicionado e eu posso clicar aqui para voltar ao meu designer, vou carregá-lo aqui. E agora podemos começar a adicionar nossas fontes. Para fazer isso, o que vou fazer primeiro é criar as seções que mencionei. Então, se eu levar você de volta ao XD mais uma vez, criaremos essa seção que tem a largura total. E então vamos criar um contêiner com 1.200 pixels. Então, vamos pressionar a tecla Control e digitar, digamos, seção. Aqui, vou adicionar uma classe de seção. Pressione Enter. E essa classe de seção será a mesma para todas as nossas seções em nosso site. E ele conterá todos os tipos de elementos diferentes que vamos colocar dentro. Então, eu não vou abordar esses elementos em absoluto. Talvez o que eu possa fazer seja adicioná-lo em toda a largura. Então, largura máxima de, digamos, 100 por cento. E você pode simplesmente digitar a porcentagem, pressionar Enter. E o Webflow é inteligente assim porque apenas substituirá a porcentagem da largura dos pixels. E o que você também pode fazer é clicar aqui e ajustá-lo. E o que faremos agora é que agora que estamos dentro dessa seção, que é a classe da seção, vou pressionar Control K e colocar uma div. E você pode ver o diblock aparecendo nesse log de div, que está aqui. Vou dar a ele uma classe de contêiner. Então Kuan, Dana, aperte Enter. E aqui temos a classe de contêiner. O que vou fazer primeiro é clicar aqui para ver o espaçamento, que centralizará o elemento horizontalmente. E isso só vai colocá-lo no centro. E vou dar a ela uma largura máxima de, digamos, 1.200 pixels. Assim. E você pode ver que está no centro da minha página porque eu cliquei ali mesmo. Então esse é o meu contêiner. E para o meu contêiner, o que vou fazer é simplesmente incluir um pouco de preenchimento, que é o elemento interno. E isso vai me permitir design responsivo mais fácil mais tarde. Então, vou clicar aqui. Você pode ver que já temos algumas predefinições. Vou colocar 20 desse lado e colocar 20 desse lado. Aí está. E agora, quando começarmos a colocar o conteúdo, teremos o preenchimento de 20 pixels do lado esquerdo e direito, que você verá nas próximas lições quando realmente começarmos com o design deste lado. Mas, por enquanto, isso só nos dá espaço para respirar quando optamos por tamanhos menores. E isso nos permitirá design responsivo muito mais simples posteriormente. Então, dentro do contêiner, como você se lembra, nosso conteúdo. Então, vou me livrar disso por enquanto porque clicaremos no corpo. Controlamos K e digitamos título H e apenas escolhemos o título um aqui como está. E eu vou clicar aqui. E você pode ver que temos essa tag HTML que diz todos os cabeçalhos H1. Vamos selecionar isso porque agora, onde quer que você tenha suas configurações H1, elas traduzirão essas configurações em todo o seu site, não importa em qual página você esteja, que é o que realmente querer. Então, se eu rolar um pouco para baixo para você possa ver o que estou selecionando. Em vez de áreas, vou selecionar meus Poppins, que estão aqui. E o peso vai ser ousado. Vamos voltar ao XD e ver o que criamos. Então lá vamos nós. Agora temos, vamos ver, H1 Poppins, 64 parafusos e 86 é o espaçamento entre linhas. Então, se eu voltar lá, então vamos com 64, 86 volts é a cor. E, finalmente, essa é a cor que vamos escolher. Essa é muito escura aqui. Tão escuro, título, cor. Aí vamos nós. E agora nossa fonte está preparada e será alinhada à esquerda, o que é bom. Então esse será o nosso H1. Então, se eu digitar algo como o título um, só para que saibamos o que é. E se eu digitar Control K, h, use o título novamente. Desta vez, vamos escolher H2 e selecionar todos os cabeçalhos H2 porque alteramos isso para todos os cabeçalhos H1. E se eu clicar aqui, você pode ver que os valores vêm de todos os cabeçalhos H1. Então, está retirando esse estilo de todos os cabeçalhos H1, que são elementos HTML. E eles são os mesmos para todas as páginas do nosso site. Então, mais uma vez, este é o H2 e está surgindo de todos os cabeçalhos de H2 aqui. Então, em vez de área, vamos mudá-la para Poppins aqui. Vai ser ousado. E vamos ver, para o tamanho, temos 32 parafusos e 56 espaçamentos entre linhas. Deixe-me verificar a cor de um a dois a quatro. E se eu passar o mouse aqui para um, para dois ou quatro, então é o mesmo que essa cor. Então, mude para, e isso é 56. Então, aqui, 22, eu escondo que essa cor 56 vai ser aquela cor mais escura. Aí vamos nós. Aí vamos nós. Nosso H2 está pronto e afeta todos os cabeçalhos de H2. Agora, se eu pressionar Control K, digite o cabeçalho H e os cabeçalhos H3 e H4, H3. Vamos escolher Poppins mais uma vez. E vamos voltar ao XD. Então isso também é Bolt, mas 24. E é da mesma cor agora? Agora é a cor dos três parágrafos porque é o H3. Então, vamos trocar, ou desculpe. Então 24,40 é o espaçamento entre linhas. Então 24, isso vai ser 40. E essa cor será essa cor para H3 e parágrafo. Aí vamos nós. Portanto, estamos afetando todos os cabeçalhos h3. E vamos ver o que temos a seguir. Temos o bloco de texto. Então, vamos fazer isso. E vou digitar o bloco de texto Control K. Mas agora veja o que acontece quando eu clico aqui. Não temos essa opção de bloco de texto, então teremos que criar nossa própria caixa de texto. Então, basta digitar o bloco de texto, meu pintor, e isso afetará todas as caixas de texto. Então, aqui vamos selecionar Poppins. Aí vamos nós. Normal é o peso. E vamos ver a cor, o que temos. Nós temos esse 70, 70, que é cinza escuro, eu acho que aqui. E é 20 irregulares e 40 para o espaçamento entre linhas. Então, vamos dizer que esse é o cinza escuro. Aí vamos, e 20h40. E aí vamos nós. Agora temos nosso tamanho de fonte. Então, temos 24 aqui, e aqui temos 20, o que acho que talvez esteja um pouco demais na web. Eu não sei. Vamos, vamos mantê-lo lá. Então, temos nossos blocos de texto, e agora o que faremos é selecionar nosso parágrafo, que é um 16, 26 normal e tem essa cor h3. Então 16, 26 regulares. Então, vamos criar esse parágrafo K de controle. E vou selecionar todos os parágrafos aqui, Poppins, 16, 26. E para a cor, vamos usar o parágrafo de três anos. Aí vamos nós. Adorável. Vamos apenas dar um gráfico de texto. Aí vamos nós. Esse será o nosso H2. Esse será o RH três, esse será o nosso bloco de texto. Então, finalmente, o que precisamos para nosso parágrafo é todos os estilos foram preenchidos para as etiquetas de parágrafo antigas, você pode ver ali mesmo. E, finalmente, o que precisamos é que todos os textos, então basta pressionar Control K, digitar o bloco de texto. Aí está. Dentro da caixa de texto, eu vou chamá-la. Vamos ver. Então, rotulei textos, que serão Poppins 12.20. Então, vamos chamá-lo de texto do rótulo por isso. E será, como eu disse, Poppins, 12, 20 anos, normal para o tamanho. Assim, você pode ver que normal, médio e negrito é o que usamos para a cor. Vamos ver, vamos ver. Edite-o usando isso para D a e30, que se eu passar o mouse fica nessa cor. Então, H de três parágrafos é a cor que está usando. Então clique aqui, com três parágrafos. Aí vamos nós. E agora temos um texto rotulado, que escreverei aqui. Então, etiquetei textos, e lá vamos nós. Então, agora temos todos os nossos elementos. Lembre-se de que já incluímos todas as nossas imagens, então as arrastamos e soltamos dentro delas. E agora criamos nossa seção, nosso contêiner, toda nossa tipografia, todas as nossas cores. Então, agora estamos prontos para começar e realmente começar a criar este site. Em termos disso, não precisamos mais dele. Eu posso simplesmente voltar e clicar em Excluir em todos eles. E você pode se lembrar desse corpo, nós já usamos essa cor de corpo por dentro. Agora que estamos prontos no próximo vídeo, abordaremos o design desse site e mostrarei como recriar facilmente o que fizemos no Adobe XD agora no Webflow. Então eu vou te ver lá. 168. Construção da barra: Tudo bem, finalmente, vamos começar com a construção do nosso site Webflow. E vamos começar agora mesmo. Então, aqui estamos no Webflow e o que vamos fazer primeiro é selecionar meu corpo. Clique aqui mesmo. E o que temos aqui são todos os tipos desses diferentes elementos que podemos incluir. Mas, mais uma vez, como mencionei, vou usar atalhos para me movimentar mais rapidamente. E vou simplesmente usar o Control K mais uma vez e digitar nav, que vai me mostrar essa barra de navegação. Mas antes de colocar essa barra de navegação, o que vou fazer é criar uma seção, então, controle a seção K. E colocando a seção dentro dessa seção, vou colocar uma barra de navegação. Portanto, controle a barra de navegação K. Aí está. Vou chamar isso de barra de navegação de barra de navegação. Então dê uma aula como essa. E aqui podemos ter todos os tipos dessas configurações diferentes, mas não estamos, não nos importamos realmente com isso. O que nos importa é esse contêiner em que todas essas informações estão, porque esse contêiner tem algo em torno de 960 de largura. Então, vamos corrigir isso selecionando nosso contêiner, porque nosso contêiner, se você se lembrar, tem 1.200 para a largura máxima. Então, vou pressionar Control K mais uma vez digitando div e colocando meu div dentro daqui. Assim. Vou chamar essa barra de navegação div, algo parecido, ou navegação ou vamos chamá-la de barra de navegação principal na parte superior, barra ou algo assim, ou NAV. O desvio. Vamos chamá-lo, vamos chamá-lo assim porque teremos apenas uma navegação dentro da dívida. Vou colocar tudo isso n. E, em vez de navegação, vamos realmente renomear isso para contêiner. Assim. Na verdade, ainda melhor. Vamos remover a aula e começar tudo de novo. Então contêiner, porque já temos essa classe e vamos chamá-la de navegação, barra de navegação assim. Então, agora temos a classe de combinação. E o que é a classe de combinação, é sua classe principal, que neste caso é container. E ele já sabe que tem 1.200 pixels de largura porque é um contêiner. E nós já criamos esse contêiner. Desculpe, barra de navegação, porque queremos saber qual é o valor adicional adicionado a ela. Então, neste caso, sabemos que o contêiner tem, como eu disse, 1.200 pixels de largura e tem o emparelhamento de 20. Como você pode ver, nossa barra de navegação é porque é a navegação no topo. O que vou fazer a seguir é estilizá-lo um pouco. Então, vou selecionar meu contêiner. E aqui vamos, vamos manter esse contêiner por enquanto. Talvez possamos tirá-lo daqui completamente escrevendo. Agora, vamos mantê-lo. Vamos mantê-lo como eles o criaram. Porque acho que podemos agregar valor a isso dessa forma ou posso até mesmo adicionar, vamos ver, o contêiner 1.200. E nosso contêiner tem 1.200, então tudo bem. Então, acabei de adicionar essa classe de contêiner ao contêiner original. E dentro desse contêiner, acabei de criá-lo como uma barra de navegação. Então, é um pouco confuso, mas não se preocupe com isso. Tudo será explicado daqui a pouco. Então, o que vou fazer aqui é onde diz marca. Talvez eu possa acrescentar isso, mas antes disso, vamos começar com nosso recipiente e primeiro mudar a cor. Então, se eu rolar até o ponto em que diz cor, diz transparente. Vou selecionar a cor do corpo aqui. E eu vou fazer o mesmo com a barra de navegação. Então você pode ver que ela selecionou essa cor cinza claro DDD, mas vou apenas selecionar a cor do meu corpo. Lá vamos nós, e agora o temos lá. Então, primeiro de tudo , para a marca, vou navegar até nossos ativos aqui, selecionar meu logotipo, arrastá-lo e soltá-lo dentro. Aí vamos nós. E vou usar apenas textos alternativos do asset, que é o logotipo. Ou posso tocar em uma descrição personalizada e, por exemplo, em um logotipo do Spotter. Aí está. E eu vou colocá-lo ali mesmo. Agora, o que vou fazer é selecionar esse link de navegação. Na verdade, precisamos estilizar esses links de navegação primeiro. Então, vamos dar a ele uma classe de link de navegação como essa. E em termos de estilo, o que podemos fazer é se eu voltar ao meu design aqui, se eu selecioná-lo e pular aqui, você pode ver que temos o estilo do bloco de texto, então 20 irregulares e 40. Então, vamos aplicar essas configurações lá. Então, vamos com Poppins, onde estamos. E então vamos com 2040. sem nenhuma decoração aqui. Então, sem nenhum link. E eu vou colocar essa cor, que é essa, eu acho. Sim, então cinza escuro, essa é a nossa cor para o link. E como temos a classe de links de navegação, o que posso fazer é selecioná-los para me livrar deles. Controle C, controle V, controle V. Então, agora tenho três deles. Então, se voltarmos, teremos carros sozinhos e entraremos em contato conosco. Então, isso vai dizer carros. Isso vai dizer empréstimos, e isso quer dizer, entre em contato conosco. Aí vamos nós. Agora vamos ver o estilo, porque temos 20 em cada lado para este Fale Conosco. Eu queria ficar à direita da página. Então, o que vou fazer, na verdade, é adicionar outra, que é uma classe de combinação para o último I, que vou me livrar desse preenchimento no lado direito, dessa forma. Então, vai ficar firme aqui. Então, vamos agora criar o estilo. Então, aqui estamos, por padrão, selecionados. Então, vamos usar o estado de flutuação. Então, basta clicar nessa seta selecionar seu estado de foco. Tudo o que precisamos fazer aqui é mudar a cor de cinza escuro para a cor flutuante, assim. E então, aqui, vamos usar o estado deprimido e inserir um estado deprimido. Eu quero escolher nossa cor azul principal. Aí vamos nós. Isso é o quão fácil é criar isso. Agora tudo o que você precisa fazer é clicar aqui. Vou para o modo de visualização e passarei o mouse. Você pode ver que temos o efeito de flutuação imediatamente, é por isso que mencionei na seção de design não se preocupe muito com isso. Não gaste muito tempo com seus elementos. Acho que isso vai funcionar muito bem. Por fim, o que faremos é selecionar nosso contêiner com todos os nossos elementos e transformá-lo em um flexbox, horizontal. E digamos assim, e vamos selecionar nosso logotipo. Será nossa marca posicionando isso aqui e vai colocá-lo aqui. E vamos brincar com algumas configurações. Então, dentro do contêiner, vamos selecionar nosso menu de navegação. E aqui temos o alinhamento e a ordem, e eu posso clicar ali e selecionar isso para ser perdido, o que vai empurrá-lo aqui. Em seguida, selecione meu contêiner e talvez brinque com essas configurações como esta, por exemplo, e se você passar o mouse, poderá ver o que isso faz. Isso é para o final e esse é o espaço entre eles para distribuir uniformemente do início ao fim. Agora, quando clico em pré-visualização, você pode ver que meu logotipo está centralizado ao lado desses elementos. E quando eu passo o mouse aqui e clico, você pode ver que minha navegação funciona muito bem porque temos esse preenchimento de 20 pixels de cada lado. Então você pode ver como isso parece. E agora, quando clico aqui, você pode ver como estão meus links aqui, posicionados diretamente, para que tudo pareça bem e possamos ajustar ainda mais a dívida. Então, quando eu vou aqui, volte e talvez eu possa selecionar todo o meu componente. Talvez eu possa acessar o estilo e você ver o tipo no menu suspenso, como a abertura funciona. E funciona, funciona. Então, funciona para tablets, funciona para o cenário do telefone e funciona para o cenário móvel. Então, se eu disser mostrar, por exemplo dentro do tablet, agora posso começar a estilizar isso. Então, se eu clicar aqui, o que posso fazer com o meu logotipo. Então, vamos selecionar esse. E dentro do plano de fundo, você pode ver que esse plano de fundo está selecionado. Talvez eu possa selecionar esse fundo mais escuro. Acho que isso vai funcionar. Talvez um pouco melhor, eu acho que não. Então, podemos ver que isso está selecionado para o plano de fundo. Então, vamos usar o ícone. A cor é transparente nesse caso, então não sei de onde ela tira o jogo de estilo. Então, vamos ver o que podemos fazer aqui. Sim, então está tirando esse estilo daqui. Mas quando eu mudo para aqui, lá vamos nós. Então, é só pegar o estilo daqui. Então, quando eu o seleciono aqui, não sei por que ele não muda. Aí vamos nós. Então, finalmente, isso se aplica. Então, vou selecionar essa idade de três parágrafos, talvez mais, talvez até essa cor mais escura. Eu não sei. Mas mantenha-o cinza claro como está e, em seguida, entre no meu ícone e talvez mude a cor do meu ícone para essa cor. Mas por alguma razão , isso se transformou nisso. Então, o que podemos fazer é mais tarde, talvez possamos mudar o ícone em si porque ele tem essa caixa ao redor. Você pode ver a caixa ao redor do ícone. Então, talvez voltemos ao transparente e talvez possamos selecionar essa caixa. Talvez possamos aplicar algo diferente, talvez descolorido. Aí está. E em termos de links de navegação, vamos ver a transição de cores de navegação. Vamos ver onde estamos. Aí vamos nós. Então, vamos selecionar este. E aplique-o em todos os lugares. E por causa disso, sim, então vamos lá. Agora temos todos os três assim. Eu acho que está bem. E é para passar o mouse. O que podemos fazer é ir para o principal. Então você pode ver que isso tem um link de navegação. Agora vamos pintar e esta foi a última. Então, agora Lincoln menos. Então você pode adicionar qualquer um desses. E vamos selecionar o estado de flutuação. E dentro dos estilos, o que podemos fazer é ver a pré-carga. Então, para onde isso nos leva? Não acho que possamos, devemos realmente selecionar isso. Veja, eu acho que está bem. Na verdade, tudo bem, porque você não poderá cobrir qualquer maneira quando começar com seu design. Então eu acho que está tudo bem, isso parece bom. Isso também parece bom. Então, vamos falar sobre isso um pouco mais tarde, mas acho que, por enquanto, está tudo bem. Até substituirmos o ícone. Na verdade, o que podemos fazer é talvez possamos ir rapidamente para X d. Então, vamos fazer isso. Aqui dentro dos meus plugins. O que posso fazer com os exploradores de ícones, se ele carregar, vamos ver o que ele fará. Então, volte ao couro cabeludo Icon mais uma vez. E aqui o que posso fazer é procurar por perto. Aí vamos nós. Nós temos esse. Ou melhor ainda, já temos esse ícone próximo. Vamos ver o que é em algum lugar por aqui, eu acho. Mas eu não o adicionei como um componente. Aí está. É por isso que não está lá. Então, se eu selecionar este e pressionar Control C, posso fechá-lo. Eu não preciso disso. Em seguida, volte para minha iconografia, estamos aqui, pressione Control V, por exemplo e depois escolha, digamos, cor escura do título e feche o ícone, pressione Control K. E então o que eu posso fazer é abrir minha iconografia e dívidas e simplesmente coloque-as dentro dos meus ícones. Vai colocá-lo bem no final daqui. Aí está. Agora, eu só preciso alinhá-lo ao centro ou algo parecido. Clique em Control ou Command E como SVG em vez de imagens, vou exportá-lo para ícones. Selecione a pasta, clique em exportar como SVG. Isso é bom. Vamos fechar esse controle. Volte para o Webflow. E eu vou para aqui mesmo. E deixe-me abrir minha pasta mais uma vez. Portanto, temos ativos de observação. Lá vamos nós como ícones. E vou selecionar C, fechar o ícone, arrastá-lo e soltá-lo dentro. Aí vamos nós. E agora, quando vou para o tablet, posso ir aqui onde está escrito o ícone e selecionar isso. E vamos, vamos, vamos ajustá-lo à cor do corpo. Aí vamos nós. E selecione meu ícone. E vamos ver, selecione essas configurações. Talvez eu possa até arrastá-lo para dentro. Então, vamos verificar isso. Clique e arraste-o para dentro. Vamos ver se isso funciona. Você senta faz. Então, quando eu seleciono esse ícone e clico em excluir, ele o colocará ali mesmo. Então, quando eu clico aqui, clico aqui, aí está. Tudo está lá. E vamos clicar em Mostrar para ver como fica. Eu acho que isso parece muito bom. E agora podemos até mesmo seguir em frente e avançar com isso. Então, primeiro de tudo, acho que não precisamos mais dessa cor, cinza claro, então vamos mudá-la para a cor do corpo. Aí vamos nós. E tudo isso pode ser a cor do corpo, se você quiser, mas acho que cinza claro funciona muito bem. E vamos deixar isso assim. Então, como você pode ver, agora temos o ícone personalizado lá. Então, é assim que é fácil e parece bonito. E vai funcionar muito bem em todos os tamanhos diferentes. Então, agora que criamos nossa barra de navegação, demoramos um pouco porque eu queria explicar, porque vamos reutilizá-la em todo o nosso design. O que faremos agora é transformá-lo nesse símbolo. Para criar um novo símbolo, o que faremos é ter essa barra de navegação dentro da nossa seção. Então, vou simplesmente selecionar toda a minha barra de navegação. Porque mais tarde, vamos criar uma seção. Dentro dessa seção, podemos acessar a barra de navegação. Ou melhor ainda, podemos simplesmente colocá-lo do lado de fora. Vamos dar um nome a ele. Mas ele nomeou a classe de barra de navegação. Assim. Vamos remover a barra de navegação, barra navegação principal superior. É assim que nossa seção será chamada neste caso. Só para que possamos vê-lo na página com esse nome. Como você pode ver. Selecione nosso símbolo, crie um novo símbolo e eu vou chamá-lo de barra de navegação. E crie um símbolo. Aí está. Agora temos nossa barra de navegação principal, e agora, onde quer que estejamos no site, podemos prosseguir e editá-la e podemos simplesmente copiá-la e colá-la quando eu mudo para meus símbolos, você pode ver que agora nós tenha uma instância da barra de navegação. Se o usarmos em páginas, teremos quatro instâncias diferentes e assim por diante. Então, basicamente, isso é o que temos até agora. Agora, no próximo vídeo, deixe-me fechar isso por um segundo. No próximo vídeo, vamos passar para esta seção e criar essa imagem com um carro e, aqui, teremos um pouco de preenchimento em cima de 100 pixels. Então, nos vemos no próximo vídeo. 169. Seção de Herói: Tudo bem, então vamos continuar de onde paramos aqui temos essa seção de heróis. Então, vamos voltar ao overflow. E vamos selecionar nosso corpo, pressionar Control K e digitar S para esta seção. Vou voltar aqui, digitar uma seção para dar a ela aquela classe Control K digite div para o bloco do, vou chamá-la de C para o contêiner. Aí vamos nós. E agora, dentro desta seção, vamos chamá-la, vamos dar a ela uma combinação de classes de heróis. E dentro desse contêiner, o que podemos fazer talvez seja colocar em diferentes divisões. Acho que isso pode ser bastante benéfico. Mas, na verdade, antes disso, o que podemos fazer é colocar em uma embalagem. O invólucro é, na verdade, o elemento que vale, mas lembre-se de voltarmos ao XD aqui. Então, temos que embrulhar isso naquele invólucro. Então, o que eu posso fazer é usar isso como um contêiner e chamá-lo rapper ou criar um invólucro completamente novo. Então, vou fazer isso em vez de usar o contêiner como meu invólucro, vou pressionar Control K mais uma vez digitando div, e agora chamarei isso de invólucro de um herói. Aí está. E todo o propósito aqui é que ele envolva nosso conteúdo. Então você pode ver que o contêiner está aqui, invólucro do herói está dentro. Ainda temos esse preenchimento de 20 pixels porque ele empurra embalagem do herói e, dentro do rapper herói, o que realmente queremos é fazer divs adicionais. Então, vamos pressionar Control K, digitar div. Esse bloco div será, digamos, conteúdo de herói. Aí está. E você pode ver isso aqui. E eu quero selecionar outro, apertar Control K, digitar div. E esse bloco div pode ser hero.eg. Para a imagem do herói, por exemplo dentro do conteúdo do herói, o que podemos fazer é talvez possamos, antes de tudo, usar a embalagem do herói e transformá-la em uma caixa flexível. E isso vai colocar nosso conteúdo lado a lado, como você pode ver aqui. Agora, dentro desse contêiner, o que podemos fazer é, ou melhor ainda nesta seção, o que podemos fazer, digamos, dar a ele uma margem máxima de 100s. Então, aqui temos esta seção, herói. E vou usar a margem máxima de 100, e isso afastará esse conteúdo da minha navegação. Então, volte para o herói, rapper. O que vou fazer aqui é, por exemplo, eu posso, digamos, distribuir assim. Então, isso vai empurrar o conteúdo de um lado para o outro. Assim como fizemos aqui com a navegação dentro do conteúdo do herói, o que podemos fazer é digitar Control K, digitar o título H e escolher o H1. Vamos simplesmente usar o texto. Então H1 e use todos os cabeçalhos H1. Aí está. Não sei por que não entendi o que não está certo. Então, se eu for para Poppins e 64 e usar minha cor para a cor escura. Aí vamos nós. Agora, quando eu colo meu texto, sim, algo não está certo. Não sei por que isso não salvou as aulas que fizemos anteriormente. Então, se eu selecionar minha idade , você pode ver que é 86. Então, se eu voltar e digitar, 86, deve ser um bug ou algo assim. Então, seu parceiro para eu vou pressionar Enter para carros exclusivos. Aí vamos nós. Então, agora dentro da dívida, o que vou fazer é pressionar Control K para obter um texto, não um link de texto, desculpe, eu posso me livrar dessa chave de controle. Bloco de texto. Vou imediatamente dar a ele uma classe de bloco de texto. Aí está. Agora temos isso. Então, vou copiar meu texto e colá-lo aqui mesmo. Uma história documentada parece linda. E uma última coisa que eu quero fazer é adicionar um botão. Então aperte o botão Control K. Aí vamos nós. E vou dar a ele uma classe de btn principal, mesma que fizemos com o, com o design no Adobe XD. Então, imediatamente, o que vou fazer é usar a fonte de Poppins. Acho que foram 20. Então, deixe-me verificar meu design. Então, vamos ver. Isso é Poppins 20 normal e 40, e vai ser da cor branca. Então, vamos ver, 2040, Poppins, normal, é disso que precisamos. A cor será branca pura. Aí está. E agora, em termos de preenchimento, talvez o que possamos fazer seja colocar algo como, sei lá, talvez 16. Então, eu estou segurando Alt e segurando o botão esquerdo do mouse, 16. Ou você pode clicar aqui que eu tenho 16 anos. Clique aqui, eles têm 16 anos, se não funcionar para você. E por aqui eu vou usar algo como 52. Acho que isso vai funcionar bem. E para o raio do canto, você pode rolar até o fim e digitar algo como oito. Eu acho que isso vai funcionar muito bem. Aí está. Não vou lidar com nenhum tamanho no momento. Acho que tudo bem, pois o que faremos é selecionar nossa cor principal. E aqui o que faremos é digitar, explorar nosso curso e você pode ver que o botão cresce exatamente como no Adobe XD. Finalmente, vou selecionar aqui o estado do mouse, a cor. Vou mudá-lo para a nossa cor. Aí vamos nós. Remova-o daqui porque quero que meu estado atual seja esse. E agora, se eu clicar em pré-visualizar e passar o mouse, você pode ver como fica. Eu acho que isso parece ótimo. Isso parece bom. E agora vamos voltar a isso. E vamos ver o rapper herói. O que eu posso fazer, talvez, sim, talvez eu possa dar à minha embalagem de herói uma largura máxima de 1.200. Aí está. E por causa do conteúdo que está chegando, talvez eu possa dar um preenchimento adicional de 20, digamos algo assim. E agora, quando eu clico aqui, você pode ver que agora eles estão realmente alinhados. O submarino está apenas pegando esses 20 e dando mais 20 por dentro. Então, quando eu mudo para a direita aqui, você pode ver que agora temos 20 aqui e 20 aqui, o que está alinhado com nosso logotipo superior. Ou o que também podemos fazer é voltar e simplesmente removê-lo daqui. Mas acho que vai funcionar muito bem neste exemplo. Então aqui temos 20, aqui temos 20 ou melhor, eu posso me livrar disso aqui. Então, zero e depois zero aqui, porque temos o contêiner que tem o 20 dentro. E eu posso simplesmente ajustar a barra de navegação. Então, pressione Enter. E dentro da barra de navegação, o que eu posso fazer é para o meu contêiner aqui eu tenho 20. E quando eu entro aqui, mais uma vez, eu tenho 20. Então, aqui o que eu posso fazer é acertar zero. Aqui eu posso atingir zero, e agora esses dois vão se alinhar. Então, quando eu clico em pré-visualização mais uma vez, você pode ver que agora o conteúdo está alinhado e ainda temos 20 preenchimentos em cada lado. Então, é assim que é fácil consertá-lo e não se preocupar com isso. Vamos lidar com isso um pouco mais tarde com o responsivo. Vamos voltar ao nosso design e trabalhar com a seção de conteúdo do herói. Agora, o que eu posso fazer aqui conteúdo de um herói é talvez eu possa dar eles um pouco de preenchimento, margem ou algo parecido apenas para diferenciá-los, diferenciá-los de um pouco. Então, nesse caso, posso digitar e selecionar todos os cabeçalhos H1. E neste caso, vamos adicionar o herói H1 aqui em vez da margem superior. Eu vou me livrar disso. E para a margem inferior, vou adicionar 32. Aí está. Aqui, para o meu bloco de texto, o que posso fazer é, digamos bloquear texto e adicionar uma classe combinada de heróis. E dentro disso, podemos adicionar uma margem inferior de 32 laticínios por vez. E se eu levar você de volta ao nosso design, é exatamente isso que temos. Então, se eu selecionar minha chave antiga, 32, e depois 32 aqui, isso funcionará perfeitamente. Acho que isso vai funcionar muito bem para nós. Mas uma última coisa que talvez queiramos fazer é selecionar esse conteúdo de herói e talvez dar a ele uma largura máxima. Então, neste caso, eu vou vir aqui e diz largura. E opa, não aquele clique e depois reinicie. Vamos ver a largura. Eu posso dar uma largura de 60%. Então, eu não sei o que está acontecendo. Então, 60 e digite por cento. Aí está. Então, agora vai limitar a largura em 60%. Então, como mencionei, você pode usar pixels, você pode usar porcentagens, você pode usar todos os tipos desses valores diferentes aqui mesmo dentro do Webflow. Mas, neste caso, vamos usar 60. E para nossas imagens de heróis, o que podemos fazer é usar uma largura total. Então, o que podemos fazer é voltar ao nosso design. Vamos ver onde estamos. E se eu selecionar a caixa inteira, você pode ver que é 515 com 450. Então, se voltarmos para aqui, talvez eu possa escolher algo um pouco diferente, como cinco a dois e talvez 388. Aí está, algo assim. E dentro da nossa imagem de herói, porque isso está feito, vamos ver com o botão, não sei por que ele está me dando essa margem. Então, vamos ver o conteúdo do herói. Tem margem? Não. Então, aqui está nossa embalagem ou talvez possamos posicioná-la no centro. Aí vamos nós. Então, agora o texto vai ficar no centro com a nossa imagem. Então, com nossa imagem, o que vou fazer é pressionar Control K digite a imagem. Para minha imagem, eu gostaria de usar este carro. Aí está. Agora, digitando Control K mais uma vez, digite a imagem, mais uma vez, escolha a imagem. E vamos ver, precisaremos disso e do Control K mais uma vez, IMG, precisaremos de outra imagem. E essa imagem vai ser aquele círculo cinza, que é esse. Aí vamos nós. E agora você pode ver que, por causa do HTML, ele os posicionou abaixo. E eu realmente não quero fazer isso. Então, o que vou fazer é usar minha imagem de herói. E agora vamos falar sobre posicionamento. Então, se eu rolar um pouco para baixo, aqui, temos a posição estática em vez de estática, que está lá. Vou colocar isso para um parente. E o relativo basicamente permite que você aponte seu código. Porque lembre-se de que o Webflow escreve o código em segundo plano o tempo todo quando começamos a projetar, ele aponta para o código para uma tarefa específica que você deseja que ele realize. Então, para este caso, eu quero selecionar essa imagem. E em vez de, vamos ver, em vez da posição estática, vou colocá-la na posição absoluta. E você pode ver que é absolutamente a imagem do herói. Então, onde quer que esteja a imagem do herói, será absoluta nessa posição. Então, neste caso, vou colocar minha imagem azul no canto superior esquerdo e depois ajustar o posicionamento em um segundo. Mas eu também vou selecionar esse cinza e também selecionado para ser absoluto. Mas neste caso, canto inferior direito, assim. E agora eu posso selecioná-lo e vir aqui e talvez eu possa ajustar esse círculo azul. Vamos ver. Na verdade, vamos reiniciá-lo. E talvez eu possa ajustá-lo aqui e talvez até ouvir algo assim. E você pode ver como isso é simples de fazer com isso. Talvez eu não vá experimentar muito aqui. E acho que podemos encerrar o dia lá. E se você quiser ajustar o tamanho disso, basta ajustar assim, puxando do canto. E então talvez eu possa movê-lo um pouco para baixo, empurrá-lo levemente. Aí vamos nós. Temos nossa seção completa. Tenha em mente. Vamos ajustá-lo um pouco mais tarde quando se trata de responsivo. E esta seção está, vamos ver, 100 do topo. Então, vai respeitar isso. Então, quando eu faço uma prévia, esta é aparência do nosso site até agora. Não temos nenhum link aqui porque vamos criar uma página, escrevê-la um pouco mais tarde. A mesma história com essas páginas. Depois de terminarmos a página inicial, passaremos e posicionaremos essas páginas. E o que eu esqueci de dizer está prestes a me posicionar. Então, vou abordar isso em apenas um segundo. Mas quando se trata especialmente do tablet, tudo vai quebrar. Então, vamos lidar com isso um pouco mais tarde, quando começarmos a responder. Mas, por enquanto, vamos voltar para aqui. E o que vou fazer aqui é com essa imagem selecionada, ou melhor ainda com essa imagem selecionada com essa azul. E eu vou encontrar esse que é o índice Z. E, basicamente, você tem seu índice x, que é superior e inferior. Você tem seu índice y, que é esquerdo e direito. E, ao contrário, os índices y, índice máximo superior e inferior, são à esquerda e à direita. Aí vamos nós. E o índice z está na frente e atrás. Então, basicamente, é como olhar as coisas em 3D mais uma vez, porque o HTML coloca as coisas umas em cima das outras e não se importa com o espaçamento. É por isso que eles criaram esse índice z. Então, para que possamos apontar isso. Então, aqui você pode ver que essa imagem meio que a de Sean brilha. Então, vou selecionar esse azul, colocar um índice z de cinco, talvez. E agora eu vou saber se a imagem do carro é clara e direta. E eu vou fazer o mesmo com este. Então, basta usar o número cinco, pressionar Enter e agora eu saberei o que quer que aconteça. Estará na frente dessa imagem. Mas em termos de posicionamento, como a imagem principal é relativa e essas duas imagens são absolutas, ela as posicionará lá. Então aí está. Essa é a nossa seção de heróis. E eu vou chamá-lo aqui mesmo. Porque se eu selecionar meu invólucro de herói, você pode ver que o flexbox está posicionado na horizontal. Se eu mudar para vertical, isso é ótimo mais uma vez, para responsivo. Então você pode ver como isso é simples de ajustar. Mas, como eu disse, vamos ajustá-lo um pouco mais tarde e brincar com as configurações. Por enquanto, vamos apenas seguir em frente nessas seções. E como eu disse, este é o herói da nossa seção. E na próxima lição, vamos falar sobre a seção de largura sobre nós, e nos vemos no próximo vídeo. 170. Quem somos seção: Tudo bem, vamos agora criar a seção Quem somos. E eu vou selecionar o corpo. Porque se eu criar esta seção, ocorrerá um erro porque não consigo colocar uma seção dentro dela . Então, vamos selecionar o tipo K de controle corporal em C para esta seção. Selecione a seção e eu vou dar a ela uma combinação de quem somos. Digamos que. Em vez dessa tecla de controle div. Para o div, vou selecionar a classe de combinação do contêiner. Aí vamos nós. E agora, para esta, vou dar a ela uma margem máxima de, digamos, 200. E eu vou empurrá-lo para 200 a partir daqui. Porque se eu levar você de volta ao Adobe XD, você pode ver quando eu passo o mouse, temos 200 entre essas duas seções. Temos 100 entre isso e a navegação. Então, agora precisamos disso. Então, se eu selecionar essa seção e selecionar esse contêiner, o que precisamos é criar outro div, então Control K, digite o bloco def. E vamos chamá-lo, digamos quem somos. Rapper, algo parecido dentro desse contêiner. E para esse rapper, o que vou fazer é ligar a tela flexível porque vou criar o Control K, colocar uma imagem. E essa imagem vai ser essa imagem. Aí está. Vou então selecionar quem somos, rapper. E por dentro, vamos criar outra div de conteúdo. E vamos criar quem somos contentes. E dentro desse conteúdo, o que podemos fazer é talvez colocar, vamos ver, o título H2 e digitar H2. Vamos ver se está salvo nas configurações. Então, todas as configurações H2. Eu não sei. Por que eu simplesmente não sei. Então eu não entendo. Então, H12 aqui, ele não o salvou por qualquer motivo. Então, se eu escolher Poppins aqui e escolher a cor de H2, que é essa 132. E vamos ver, acho que estamos com 48 ou algo assim, 30 a 56. Vamos manter as mortes de 56. Todos os cabeçalhos H2. Aí está. Agora temos isso. Então, deixe-me selecionar meu texto e um carro exclusivo para observadores. Aí vamos nós. Antes de prosseguirmos, o que eu posso fazer é talvez dar uma margem à minha imagem aqui para que eu possa espaçá-la uniformemente . Melhor ainda. Quem somos, nosso invólucro, podemos fazer a mesma coisa. Então clique aqui, ele vai posicioná-los ali mesmo. E então imagem, eu posso colocar talvez 80, algo assim. E então nem precisamos disso. Talvez possamos posicioná-lo à esquerda. Aí está. E agora temos os 80 pixels. Se eu passar o mouse sobre minha imagem e passar o mouse aqui, você pode ver que temos o espaçamento de pixels do AD para a margem aqui. Agora, dentro do nosso conteúdo, vou pressionar Control K e digitar bloco de texto assim, dando a ele uma classe de bloco de texto como essa. E vou selecionar meu tipo de texto com paixão e dedicação, Control K. E vamos ver se temos algum estilo para o parágrafo. Mais uma vez, não, eu não sei por que isso acontece. Então selecione Poppins aqui. Então, vamos no tamanho 16, selecione a cor de H3 e do parágrafo. Aí vamos nós. E quanto à altura, vamos ver onde estamos com o Adobe XD, é 26. Então venha aqui para 26. Aí vamos nós. E eu vou selecionar meu conteúdo aqui. E estou apenas selecionando e colando. Você pode colar do Adobe XD porque eu tenho dois monitores. Estou simplesmente copiando e colando o texto de nossos designs. Então, se eu levar você para o Adobe XD, aí está. Então, eu apenas clico duas vezes para copiar o Control C e voltar para o Webflow e simplesmente colá-lo. Então, isso é basicamente tudo para esta seção. A única coisa que agora nos resta fazer é simplesmente estilizá-lo um pouco. Então, primeiro de tudo, quem chamamos de wrapper, porque é o flexbox. Vou clicar aqui, que centralizará meu conteúdo. E agora vou dar uma aula a essa imagem. Então, vou renomeá-lo para quem somos. Img, tipo, só para sabermos o que é. E aqui vamos ver o que podemos fazer. Então, talvez possamos dar isso. Ele havia contratado t2. Vou dar uma aula separada. Então, vamos dar a ele um Th2. Quem somos. Bem, vamos ver. H2. Escuro, talvez, porque você vai reutilizá-lo em todo o nosso site. E aqui, para a margem, vou escolher zero. Para a margem inferior, talvez eu vá com 24. Aqui, neste bloco de texto, o que posso fazer é adicionar uma classe combinada de quem somos. Aí está. E aqui vou adicionar outra margem inferior de 24 e o parágrafo está bom. Aí vamos nós. Agora temos esta seção concluída. E você pode ver como isso era super simples. Então, quando eu clico aqui, você pode ver que agora temos essa seção superior com o botão. E agora temos essa seção inferior. E quando eu mudei para um tablet, obviamente vamos trocar esses dois e a imagem vai para o topo. O texto vai para o final. Então, vai funcionar muito bem. E aqui temos essa soma. Na verdade, cometi um erro porque, em vez de colocar o ícone do Menu, coloquei o ícone da roupa. Então, vou consertar isso. Vamos voltar para aqui. Vamos voltar para nossa barra de navegação digitando Enter, vá até aqui e selecione nosso ícone. Deixe-me realmente ir para X d, e deixe-me realmente ir até aqui. E vamos ver, selecione nosso menu de pesquisa. Aí vamos nós. Menu e talvez possamos usar este. Acho que vai ser bom. Aí está. Vamos selecionar colá-lo aqui. E vamos dar a ele um nome de menu. Ícone. Vamos dar a ela aquela cor, que você usa com uma cor mais escura. Aí vamos nós. E eu vou colocá-lo aqui, no centro. Então, vai ser muito mais simples para mim colá-lo dentro dos meus ícones e posicioná-lo bem abaixo do ícone de fechar. Aí vamos nós. Certifique-se de que esteja no centro e pressione Control E, exporte-o para os ativos. Aí vamos nós. E agora, quando eu mudar para minha pasta, deixe-me descobrir onde ela está. Aí vamos nós. E eu vou até meus ícones e, em seguida, selecionar meu Webflow. Vá para meus ativos. Encontre esse ícone do menu. Aí vamos nós. Adorável. E então, para o ícone do menu, vamos clicar aqui para expandir isso. Então, eu não sei por que está me mostrando assim, mas isso não importa. Vamos acessar o ícone do menu aqui e adicioná-lo aqui. Aí vamos nós. E o que eu posso fazer talvez seja torná-lo um pouco maior. Então, largura, talvez possamos usar 16 por 16 ou 24 por 24 pixels. Aí vamos nós. Parece lindo. Selecione isso, livre-se dele. Por algum motivo. Você pode ver que ele não se livra dele imediatamente. Então, é muito irritante. Imagem do menu. Livre-se disso. Aí vamos nós. E eu vou dar esse ícone Renomear para menu. Aí vamos nós. Agora, parece ótimo. Então, agora, quando eu voltar para minha instância, selecione a área de trabalho, clique em Visualizar e vá para o tablet. Agora temos esse ícone de menu. Então, quando eu clico, você pode ver que agora tudo isso funciona como deveria. Então, volte e volte. Agora, na próxima seção, o que faremos é voltar ao XD para mostrar onde realmente vamos começar com nossos cartões. Então, como eu disse, e eu tenho isso aqui. Vamos criar esse cartão. Vamos colocar essas informações lá dentro e depois adicionaremos essas imagens um pouco mais tarde. Então eu vou te ver lá. 171. Seção de seleção de carros: Tudo bem, vamos criar esta seção para que você possa ver que temos o título no centro e, em seguida, temos essas três cartas com o botão Bot no fundo, na parte inferior. Desculpe. Então, vamos mudar você para o nosso fluxo de trabalho, certo? Então, deixe-me realmente fechar minha pasta para que não me distraia. Vou selecionar meu corpo, pressione Control K. Eu acrescento div, div block. E para esse bloco div, o que eu posso chamá-lo na verdade é não, vamos nos livrar dele. Desculpe, o tipo Control K foi seccionado primeiro, atribua a ele uma classe de seção e carro ou seleção. Seleção. Essa será a nossa seção. Dentro dessa div. Para o contêiner. Aí vamos nós. E dentro desse contêiner, o que podemos fazer é talvez criar um invólucro ou algo parecido. Mas aqui, vamos primeiro dar a ela uma margem de 200 para que possamos afastá-la desta seção, desta. E dentro desse contêiner, o que eu posso fazer é digitar Control K type em div, div block. E esta será a nossa embalagem de cartões de carro. Aí vamos nós. Então, dentro desse contêiner, o que vou fazer primeiro é digitar Control K, digitar cabeçalho. Vou usar o H2 para isso e vou usar todos os cabeçalhos. Aí vamos nós. Finalmente, agora estamos com isso e vou apenas adicionar o H2 centrado. Aí vamos nós. E dentro do H2 centrado, vou me livrar disso e disso. Aí vamos nós. E vou me certificar de que esteja centrado dessa forma. E por dentro, vou digitar como nossa coleção exclusiva. Aí vamos nós. E vou colocá-lo acima dos meus cartões de embalagem. E se eu selecionar minha seção, você pode ver que agora temos 200 para a margem dentro do rapper de conteúdo. O que vou fazer é transformar esse invólucro de conteúdo em uma grade um pouco mais tarde. Mas antes de fazer isso, pressione Control K digitando div para adicionar outro div que abrigará meus elementos. E essa div, vou dar a ela um nome de cartão de carro. Aí está. Então, dentro do cartão do meu carro, o que vou fazer é colocar todas as minhas informações. Então, vamos ver o que podemos fazer. Podemos dizer que, dentro do cartão do carro, eu possa pressionar Control K e digitar na imagem. E vamos deixar isso assim por enquanto. Imagem do carro porque vai tirar uma imagem do contêiner. Mas, na verdade, vamos, vamos ver o que podemos fazer. Então, por aqui, posso usar imagens de carros e talvez adicionar três imagens diferentes sobre a guiné hurrah Khan era uma. Então, deixe-me realmente selecioná-lo aqui. Então, quem é a conta será adicionada. Então, vamos ver, o escalar será adicionado. E o Lucid Air também será adicionado aqui dentro. Porque vamos adicionar imagens mais tarde quando realmente começarmos a mexer com nosso CMS. Mas, por enquanto, vamos colocá-lo aqui. Então, a imagem do carro, vou apertar o relógio, escolher a imagem e selecionar a conta do Twitter apenas para que possamos ver que obviamente é enorme porque precisamos adicionar todos esses elementos adicionais. E para fazer isso dentro dos cartões do carro, vou criar outro div Control K. Pense nisso como um tipo de pasta em div. E neste bloco div podemos nomear algo como informações do cartão do carro, cartão, informações do cartão. E dentro dessas informações, o que eu posso fazer talvez seja adicionar esses três anos, controlar o cabeçalho do pino do tipo K H3 e ver o que temos aqui. Então, todos os cabeçalhos h3 ainda não receberam as informações. Então, vamos pegar Poppins. Não sei por que, quando projetei isso pela primeira vez, isso não me causou nenhum problema, mas agora, por alguma razão, simplesmente acontece. Então, aqui temos essas três cores, então vamos fazer isso. Então, cor h, três e um parágrafo. Aí vamos nós. E eu estou selecionando isso só para que vocês possam ver o que estou fazendo. E o que vou fazer é usar todos os três parágrafos. Isso é bom. Aqui eu vou digitar Lamborghini ocorreria. Aí vamos nós. E aqui vou pressionar Control C, Control V para colá-lo. E esse h3 será H três azul. E tudo o que eu quero fazer é simplesmente mudar isso para a cor azul. E essa cor azul , na verdade, vai ter o preço. Então, vamos com 1949990, desculpe. E, finalmente, o que faremos é criar outro bloco div interno porque se eu mudar você para o meu design, se você se lembra, criamos quilômetros este ano e eu realmente vou para selecionar isso e dar isso como uma classe combinada. Este ano, o quilômetro tem o estofamento e tem uma distância de 24. Então é exatamente isso que vamos fazer aqui. Então, Control K mais uma vez digitando div of block, vou dar a ele aquela classe que acabou de ser copiada em anos-quilômetros. E vamos adicionar dois textos lá dentro. Então, controle K digite o texto. E vamos ver, talvez um bloco de texto. Acho que sim, bloco de texto, dê a ele uma classe de bloco de texto aqui. Bloco de texto, aí está. Este primeiro será em 2021. Aí está. Vou pressionar Control C, Control V para criar outro. E isso vai ser por quilômetros. Então, vamos com 63 a 4 km. E eu vou trocá-los e depois selecionar seus quilômetros anuais. Venha aqui mesmo para o display. Clique aqui para ver o flexbox, clique para ficar no centro e depois distribuí-los assim. Aí está. Agora, a única coisa que realmente nos resta fazer é brincar com as configurações de nossos elementos. Então, o que eu posso fazer com H três azuis aqui é dar, talvez, em vez dessa margem, eu vá com zero. Na margem inferior, podemos escolher 16 ou algo assim. Vamos ver. Ou talvez preenchimento, podemos atribuí-lo a 16 de emparelhamento. Aí vamos nós. E esse H três, vamos chamá-lo de h três escuro. Talvez. Aqui vamos remover isso, e aqui vamos remover isso e talvez dar 16 também. Mas agora o que podemos fazer é sim, sim, apenas dê isso. E para o nome do cartão do carro, o que farei é, na verdade , dar a ele um preenchimento de 24. Porque se eu levar você de volta ao XD e selecionar o texto do meu cartão de carro, neste caso, 24 aqui, 24, 24 aqui. Então, para fazer isso no Webflow, selecione e depois vá 24 aqui, quatro aqui. E, finalmente, 24 aqui. E aí está. Agora que nosso cartão está pronto, o que realmente faremos é dar a ele uma classe de quem o carro gosta e, nas cartas do carro, rapper, o que farei é transformar a tela de embutida em uma grade. E a grade funciona assim. Você tem suas colunas e suas linhas. Agora, essas são as colunas no momento, temos apenas duas colunas. Mas se eu for aqui e digitar esse sinal de mais, agora temos três colunas e agora temos duas linhas. Você pode ver que esta é a linha número um, essas três grandes colunas. E agora essa é a linha número dois, essas três colunas menores, para nos livrarmos delas porque não precisamos delas. Vou clicar em Remover aqui mesmo nas linhas. E agora vamos ter apenas uma coluna, super simples. Assim, você pode brincar com as configurações aqui para a grade e os tamanhos e assim por diante. Mas antes de fazermos qualquer coisa, temos o cartão do carro, que está localizado em uma coluna da nossa grade. Vou pressionar Control C, Control V, control V para colá-lo três vezes. E antes de prosseguir, o que eu quero fazer a seguir é pegar o cartão do meu carro, quero dar a ele esse histórico. Então, o cartão do carro, vá para o meu design como pano de fundo. Eu posso escolher a cor e escolher minha cor branca. Você pode ver isso aqui. Então, basta selecionar seu branco puro. Aí vamos nós. E vai colorir as cores de cada lado. Agora, o que temos aqui é o raio do canto arredondado. Então, vou selecionar a dívida e os auxiliares de digitação. Aí vamos nós. Agora temos o oito para o raio do canto e para imagens Vamos selecionar este primeiro, por exemplo, porque todos eles são exatamente iguais aqui para esta, acho que vamos tenha as escaladas. Então, vamos clicar com o botão direito aqui. Duplique o tipo de classe em escalado. Aí vamos nós. Vou substituir imediatamente a imagem para que não fique confusa. Aí vamos nós. E aqui para minha imagem, o que vou fazer com o raio é clicar aqui. Para o canto esquerdo, vou digitar oito. Para o canto direito, vou digitar oito e ele vai e os substituí por esses dois, mas não por este porque eu mudo. Então, quando eu seleciono minha escalada e faço o mesmo, então digite ajuda, digite oito. E vai virar esses cantos assim. E isso é exatamente o que eu quero. Mas a última coisa é para isso. Então você pode ver aqui com os anos, quilômetros, o que eu vou fazer é talvez, vamos ver, talvez eu possa colocar o par aqui ou 24 talvez. E eu acho que isso vai funcionar muito bem. Ou talvez ainda melhor com 16, porque não precisamos muito espaçamento aqui neste lado. E aí está. Nossos cartões estão prontos. Mas, melhor ainda, o que eu posso fazer é digitar zero aqui porque eu quero conseguir isso. E digitando em vez de blocos de texto, vou chamá-lo de ano do cartão do carro. E se voltarmos ao design, vamos ver aqui. Aí vamos nós. Temos uma pilha de 24 distâncias. Então, quando eu voltar ao nosso design, vamos pegar Q aqui. E para os blocos de texto, o que podemos fazer é selecionar o ano do carro deste blog de tecnologia e simplesmente adicionar uma margem de 24. Aí vamos nós. E agora, vamos configurá-lo para ser assim, para ser alinhado até aqui. E este ano, o quilômetro por qualquer motivo, não se traduziu para aqui. Então, vamos dar uma aula sobre isso. Então esse era o cartão de bloco de texto, o ano do cartão. Então, se eu adicioná-lo aqui, ano do cartão, ele vai aplicá-lo. Selecione este. Cartão, ano do cartão. Isso vai aplicá-lo. Aí vamos nós. E uma última coisa que nos resta fazer é simplesmente selecionar isso. Então Cadillac escalate, esse é o preço. Essa será a escalada da sorte. Acho que é assim que você escreve. Com a escalada de dois L em 2020 e essa será a quilometragem. Então, isso vai ser 2020. E essa será a quilometragem. Aí vamos nós. E, finalmente, esse será o Lucid Air. Vamos prosseguir e substituir. Primeiro de tudo, vamos clicar aqui. Duplique a classe, chame-a de Lucid para esta imagem e simplesmente substitua a imagem aqui. Aí vamos nós. E pelo preço, vamos voltar ao XD. Vamos ver. 2022 é o ano. Esse é o preço. Isso vai ser 22. 22, lá vamos nós. E para o ano de 40 km, desculpe, podemos voltar aqui e digitar uma dívida. Então, lá vamos nós. Agora temos nossos cartões. E a última coisa que eu quero fazer, na verdade , é primeiro recolher tudo isso e depois selecionar nosso cartão assim. Vou selecionar meu cartão e colocar uma borda aqui. Então, vou clicar na borda. Em vez da cor preta, vou escolher essa cor ou, melhor ainda, essa cor, e depois reduzi-la até zero para que não fique visível. Então esse é o nosso estado padrão. E agora vamos criar um estado de horror. E tudo o que precisamos fazer é simplesmente trazer isso de volta para 100, assim. Então, agora, quando eu clico na pré-visualização, espero que funcione. Aí vamos nós. Mas, por alguma razão , ele permanece aqui. Então, vamos ver como o chama. Faça isso. Aí vamos nós. Então, se eu remover isso, clique em pré-visualizar agora mesmo e passe o mouse. Você pode ver que tudo isso funciona muito bem. Mas agora temos um pequeno problema porque isso está muito próximo e eles estão muito próximos um do outro. Então, se voltarmos ao meu fluxo de trabalho e vermos o que podemos fazer aqui. Então, talvez possamos adicionar ao invólucro de cartas do carro uma margem superior de 64. Aí está. E, finalmente, para que a própria grade a edite, o que você pode fazer é clicar nesse ícone. Aqui temos esse FR, que é a fração da grade. E como você pode pensar nisso é que as colunas da grade são divididas por padrão em igual a quatro, então aqui temos três frações, então três frações iguais. E você pode ajustar essas frações clicando aqui, ajustando-as, tornando uma coluna, de curto prazo, tornando uma coluna maior. Mas o que eu realmente vou fazer no nosso caso é chegar a XD e C. Então, temos 38, então não precisamos necessariamente alcançar o mesmo resultado. Mas se tivesse sido 24, talvez para o espaço entre essas colunas, pressione Enter, você pode ver. Então, talvez possamos ter 32, até 38. Vamos ver. Então, sim, acho que isso parece muito bom. Talvez já seja tarde demais. Não acho que 38 seja totalmente necessário. Vamos lá, porque isso faz com que minhas imagens pareçam um pouco menores. E você pode ver que os efeitos de foco funcionam como deveriam. E aí está. Agora nós criamos isso. Agora, obviamente, porque esse será nosso conteúdo dinâmico. Quando realmente terminarmos esta página, começaremos a falar sobre esse conteúdo dinâmico antes de passarmos para a próxima página, porque obviamente precisaremos dele nas próximas páginas. Mas, por enquanto, vamos ver rapidamente o que fizemos. Então, aqui temos nossa navegação. Temos nosso botão e ele funciona. Temos essas duas seções. Então temos essa seção com nossa imagem e essa largura do texto. E, finalmente, temos nossa coleção exclusiva quando passamos o mouse, ela funciona exatamente da mesma forma, mesma forma que imaginávamos no Adobe XD. Então, estou muito feliz com a aparência disso. Na próxima seção, falaremos sobre o que oferecemos. E nos vemos no próximo vídeo. 172. Seção de oferta: Tudo bem, vamos continuar de onde paramos e começar com nossa seção de Ofertas. Então, pressione Control K na seção Tipo de corpo. E vou adicionar uma classe de seção. E talvez nossa oferta. Aí vamos nós. E dentro desse controle, digite K em div. Para o div, atribua a ele uma classe C de contêiner. Aí vamos nós. E para nossa seção, vamos ver, talvez possamos dar a ela uma margem de 200s para que possamos empurrá-la de baixo para dentro do contêiner Control K para ter sido div. Para a div, vou adicionar uma classe de oferta. Nossa embalagem de ofertas. Aí vamos nós. E dentro dessa embalagem, o que eu farei talvez seja, vamos ver o que podemos fazer. Talvez possamos colocar, vamos ver, vamos usar esse H2. Então aperte o Controle C aqui, feche tudo isso e pressione o Controle D aqui dentro do nosso contêiner. E vai colocá-lo logo abaixo da nossa embalagem. Basta colocá-lo aqui. E vou usar os textos do que oferecemos desta forma. Aí vamos nós. Dentro da nossa embalagem. O que eu vou fazer é talvez transformar isso em um flexbox. Porque lembre-se de que, se levarmos você volta ao nosso design aqui, volte para o que oferecemos. Ainda temos essas duas colunas, como fizemos com o herói e com qualquer outra coisa. Então, aqui nesta coluna, teremos esta seção. Então, deixe-me fechar isso para que não fique confuso. Então, aqui em nossa oferta, oferecemos em quatro e temos nossa imagem ao lado. Então é exatamente o mesmo que faremos com nosso design aqui. Então, vamos pressionar Control K, digite def, adicione um div. E essa divisão será algo como nosso conteúdo de oferta. Aí vamos nós. E talvez possamos clicar em Control K, digitar imagem e adicionar essa imagem para a oferta, que é essa. Aí vamos nós. Finalmente, como transformamos isso em um flexbox, certifique-se de centralizá-lo e espalhá-lo. Então, colocamos esse posicionamento igual entre nossos elementos. Então agora temos isso e temos isso. Finalmente, nosso rapper de oferta pode ter uma margem de 64. Talvez. Lá vamos nós para que possamos distingui-lo do texto. E se eu levar você de volta para aqui, como você pode ver, ainda temos esses 64 textos. Então, dentro do conteúdo da nossa oferta, o que eu quero fazer é, por exemplo , ver o que podemos fazer. Talvez crie, talvez crie três notícias diferentes. Porque se eu pegar aqui, talvez isso possa ser um div e todo o conteúdo deva entrar. Então, dentro dessa div, podemos ter mais três divs. Então 12.3 e dentro de cada um deles pode haver um div que vai conter isso, que tem a pilha de 16, ícone So e o texto, e o texto abaixo dele. Então, vamos estruturá-lo assim. Então, se eu voltar ao meu fluxo de trabalho aqui, teremos o conteúdo da nossa oferta, que é esse. E dentro da dívida, o que eu posso fazer é talvez pressionar o tipo Control K em div. E dentro dessa div, que vou chamar de Vamos ver, ofereço garantia. Ofereça garantia. O que vou colocar lá dentro talvez seja uma imagem. Para a imagem, vou usar o ícone de, vamos ver, vamos ver, vamos ver onde estamos para esse lote. Mas eu preciso daquele distintivo azul. Parece que não o exportou porque eles só têm essa versão branca. Então, vamos colocar isso por enquanto até irmos para X d, ícone de garantia selecionado, emblema, azul, exportações do Control X. Aí vamos nós. E agora deixe-me encontrá-lo na minha pasta. Aí vamos nós. Estamos em ícones. E vamos ver, eu posso clicar aqui em meus ícones. Então isso era garantia, crachá, ícone, azul, arrastar e soltar. Aí vamos nós. Deixe-me fechar isso para que não nos incomode. Substitua a imagem por esta. E agora está lá dentro. Então, se eu voltar aqui, aqui temos a garantia da oferta e aqui temos essa imagem. Então, vou digitar algo como guerra. Correu. T, ícone, azul. Aí vamos e decidimos que eu preciso ter um texto que será um h3. Então Control K, digite o título, selecione o H3. Vamos ver se está salvo. Minhas configurações, todos os cabeçalhos h3. Sim, funcionou. Finalmente, adorável. E você pode ver as configurações aqui. E o que vou fazer talvez seja adicionar uma classe de combinação de H3 e dark. Assim, só para sabermos o que temos. E vou me livrar desse rolamento por enquanto, porque não preciso dele neste caso. E aqui vamos escrever algo como garantia estendida. Aí vamos nós. Agora vamos usar essa garantia de oferta e transformá-la em um flexbox. Certifique-se de que esteja centralizado. E vou selecionar meu ícone aqui, ícone de garantia azul, e dar a ele uma margem de 16, porque era isso que tínhamos, se você se lembra em nossa pilha, em nosso design, em vez do conteúdo da oferta, o que eu posso fazer talvez seja, vamos ver. Talvez eu não queira fazer isso. Talvez eu possa renomear isso para oferecer um título, talvez. Então, renomeei a classe para oferecer um título. Aí vamos nós. E eu vou criar outra div aqui. Coloque isso no topo, coloque esse título dentro dessa div, assim, e então faça esta oferta. Oferta Vamos ver a garantia. Ofereça garantia. Dentro dessa garantia de oferta, vou colocar um bloco de texto, K, bloco de texto. Aí vamos nós. E aqui vou dar a ele uma classe de bloco de texto. E deixe-me pegar algumas mensagens. Aí vamos nós. E aqui para este bloco de texto, o que posso fazer é oferecer um título. Talvez eu possa abaixá-lo um pouco . Vamos ver o que podemos fazer. Talvez possamos dar a ele uma classificação de 24. Então, selecione o título da nossa oferta e ela vai para a margem 24 abaixo. Eu acho que isso vai funcionar muito bem. Aqui temos nossa garantia de oferta. Então, o que posso fazer com esta seção é o conteúdo da nossa oferta, que mais uma vez é a principal div que a mantém em vigor. O que eu posso fazer talvez seja transformar isso em uma pilha, mas talvez eu nem precise. Vamos dar uma olhada. Então, se aparecer como Control C, Control V, Control V, ele será colado três vezes, o que eu acho bom, porque nossa embalagem de ofertas é uma caixa flexível em si. Então, esse é apenas o filho do nosso Flexbox, esse conteúdo de oferta. Então, aqui o que vou fazer é oferecer garantia, tudo bem. A próxima será a manutenção. Então, vamos ver o que eu posso fazer aqui. Então, ofereça garantia, vou clicar aqui. Duplique a classe. Em vez de garantia, vou digitar manutenção. E então eu vou selecionar os textos aqui. Então, para o título está bom, mas isso, vou substituí-lo, o ícone e só precisamos encontrar esse ícone de manutenção. Então, vamos ver onde está. Aí vamos nós. E em vez do ícone de garantia florescer, vou duplicar a classe e tipo de manutenção. Ícone. Aí vamos nós. E manterá a mesma configuração de 16 que você pode ver, que é exatamente o que queremos. E, finalmente, vamos mudar essa última. Então, vamos clicar com o botão direito do mouse, clicar com o botão esquerdo, desculpe, dupliquei a classe. E isso vai ser oferecer empréstimos. E vamos clicar duas vezes aqui e digitar empréstimos. E isso vai duplicar a classe sozinha. Incêndio, lindo. E em vez desse ícone, vamos substituí-lo pelo ícone de empréstimos. Então, vamos encontrá-lo onde está. É a mão segurando um carro. Então, vamos encontrá-lo. Aí vamos nós. Ícone de empréstimos em todo o mundo. Ainda mantém esses 16 por distância. Agora, deixe-me pegar o texto e colá-lo aqui. E pegue o texto daqui, cole aqui mesmo. Adorável. E o que vou fazer a seguir, e finalmente, é que, se eu voltar para o XD, temos alguma distância entre cada um deles. Então, temos 40 e temos 40 aqui. Então, talvez seja isso que podemos fazer aqui também. Então, se eu fechar todas as minhas ... veja o que fiz anteriormente. Então, ofereça garantia, talvez eu possa aumentar para 40 e oferecer manutenção. Talvez eu possa aumentar isso para 40 também. Então, vamos ver como isso parece. Aí vamos nós. Quando clico na pré-visualização, acho que parece ótimo. Mas talvez 40 seja um pouco demais e queremos ter espaço para nossa imagem. Então, vamos com 32. Acho que vai funcionar muito bem. Então 32, lindo, lindo. Agora, esta seção está basicamente concluída. Então você pode ver o que fizemos e o quão rápido isso foi. E nos vemos no próximo vídeo, onde criaremos essa seção de benefícios. E isso vai exigir um pouco mais de trabalho por causa da sobreposição da imagem. Então, eu vou te ver lá. 173. Seção de benefícios: Tudo bem, vamos continuar e lidar com nossa seção de benefícios. Então, se eu levar você de volta ao fluxo aqui, vou selecionar o corpo pressionado Control K, digite C para nós, desculpe, S para uma seção. Seção. Aí vamos nós. Eles foram controlados por Kate e Div, e esse será nosso contêiner. Adorável. E agora, dentro desse recipiente, o que podemos fazer talvez seja colocar na embalagem. Então, digite Control K em div. E essa divisão pode ser, vamos ver, benefícios. Rapper. Assim. Dentro desse conteúdo, obviamente , estará nosso conteúdo de texto. Agora, em termos disso, vamos chamar esta seção de benefícios. Aí está, e dê a ela uma margem máxima de 200, como acontece com todas as outras que fizemos. E, finalmente, o que eu quero fazer aqui é fazer algumas mudanças. Então, para o contêiner, eu quero que ele realmente tenha a largura total. Então, vou digitar em largura total para minha classe de combinação. E para a largura aqui, vou digitar 100%. E vai ocupar toda a porcentagem da minha tela. Na verdade, os benefícios do invólucro serão de 1.200 pixels. Aí vamos nós. E vamos centralizá-lo exatamente como aquele contêiner. Então, o que vou fazer é em vez de onde diz fundos, imagem, gradiente, vou selecionar isso e colocar uma imagem. Eu vou escolher minha imagem. E a partir daqui vou selecionar meus benefícios. Aí vamos nós. Certifique-se de que esteja centralizado, certifique-se de que não fique lado a lado e certifique-se de que esteja configurado para cobrir. E dessa forma, tudo funcionará bem. Agora, finalmente, o que nos resta fazer a seguir é talvez, vamos ver, fazer algumas mudanças internas. Então, se eu entrar e vamos ver, talvez eu possa colocar algum conteúdo dentro da nossa embalagem de benefícios. E, por enquanto, vamos ver, vamos dar um tamanho a esse contêiner. Então, se eu levar você de volta aqui, o que temos para nossos benefícios é 469. Então, vamos realmente usar isso por enquanto como um espaço reservado. Vamos voltar para aqui. Portanto, os contêineres devem ter altura 469, assim. E agora temos isso. Portanto, esses benefícios: a embalagem e recipiente talvez possam viver um dentro do outro. Mas vamos trabalhar com o pacote de benefícios por enquanto. Então, vou pressionar Control K, digitar H para o título. E aqui, para o título, vamos usar, vamos ver, H12, talvez. Aí vamos nós. E isso manterá todas as nossas configurações. Então, vamos usar o H2 branco. E para isso, o que podemos fazer é nos livrar dessa margem. Livre-se dessa margem aqui. Podemos usar a cor branca e podemos usar a centralizada assim. E eu posso digitar algo como nossos benefícios. Adorável. E abaixo disso, o que podemos fazer talvez seja criar outro div Control K digitando div. Essa divisão terá uma classe de nossos benefícios. Algo parecido com isso. Dentro da dívida. O que eu posso fazer talvez seja criar outro. Portanto, nossos benefícios serão nossa principal divisão. E vamos clicar em Control K, digite div. Essa divisão será chamada de entrega gratuita. Entrega. Aí vamos nós. Vamos selecioná-lo aqui, aperte Control K para digitar uma imagem. E vou adicionar uma imagem rápida, que será aquele ícone de entrega, que é o carro com um alfinete na parte superior. Aí está, que é essa. E abaixo disso, o que eu vou fazer talvez sejam anúncios. Vamos ver, talvez um H3 Control K, h. Vamos usar H3. Salve as configurações. Não, não aconteceu por algum motivo. Todos esses três títulos, aí está. Adorável. E vou simplesmente adicionar H três brancos. Assim. Selecione-o aqui mesmo. Certifique-se de que seja branco. E também certifique-se de que esteja centralizado dessa forma. Aqui vou digitar algo como entrega gratuita, permitir loop. E dentro da nossa entrega gratuita, vou pressionar Control K mais uma vez e digitar P. Para o parágrafo. Todos os parágrafos. Pegou o estilo e vou digitar algo como parágrafo ou p ou p cor do corpo. Porque esse é o estilo que será necessário. E a partir daqui eu vou escolher a cor da cor do corpo, assim. Deixe-me copiar e colar esse texto. Vamos ver algo assim. Então, vamos copiar e colar um lindo dardo. E é basicamente assim que nosso conteúdo vai ficar. Agora, obviamente, não está centrado, então o Peabody College deve estar centrado. Aí vamos nós. E para centralizar todos esses elementos, posso transformá-los em um Flexbox, mas não vamos fazer isso porque vamos usar nossos benefícios e transformá-los em uma grade. E você pode ver que imediatamente centralizou esses elementos em seu interior. Então, vamos usar 32, mesma forma que fizemos anteriormente. E vamos adicionar mais uma coluna. Vamos nos livrar dessa linha. Adorável. E eu vou pressionar Control C, Control V, control V para colar mais duas vezes. Nessa entrega gratuita, o que posso fazer é transformá-la em uma flexbox com vertical e vou clicar aqui mesmo onde diz centro. E isso centralizará todo o meu conteúdo lá dentro. Adorável. Tudo está onde deveria estar. Você pode até mesmo aplicá-lo no centro, mas não acho que seja necessariamente apenas colocá-lo na parte superior. Então, o que podemos fazer a seguir é aqui no centro, não precisamos de entrega gratuita, então posso duplicar essa aula e chamá-la polonês de três estágios. Assim. E esta última será, vamos clicar aqui, vamos clicar aqui duplicar a parte da classe, trocar, trocar peças durante o loop. E vamos realmente adicionar o conteúdo. Então cole. Assim. Este último fará parte de uma troca e dos conteúdos que estarão nela. Aí está. Agora, em termos de H três brancos, que eu vou fazer é me livrar desse top. E para o último, o que eu posso fazer é digitar 24. Isso vai me dar aquele bom espaçamento que eu quero. E para a imagem, o que eu posso fazer é entregar o ícone. E talvez eu possa colocar a margem inferior de 24 também. Esse será o ícone polonês. E faça o mesmo com isso. Enquanto estivermos aqui, certifique-se de nos livrarmos desse e usarmos nosso polonês, que é esse, lindo. E, finalmente, vamos selecionar este que é parte do ícone de troca. E neste caso, vamos usar 24 também. Clique aqui e substitua-o pela troca de peças. O que é, vamos ver, ter certeza de vê-lo no meu design. Sim, aquele com a chave. Aquele com a chave, que é lindo. E o que podemos fazer a seguir? Agora que temos todo o nosso conteúdo, você pode ver que nosso pacote de benefícios está meio que no topo desta página. Então, o que vamos fazer é transformar um contêiner em um flexbox e, em seguida, usar nosso invólucro e simplesmente garantir que ele esteja no centro, assim. Então, o que podemos fazer é garantir que nossos benefícios tenham uma margem superior. Então, se eu selecionar aqui, você pode ver que aqui temos 64, então é isso que você vai criar aqui também. Portanto, nossos benefícios devem ter uma margem máxima de 64 e tudo se alinhará muito bem. Agora, finalmente, o que vamos fazer é usar nosso contêiner e rolar onde temos nossa imagem. Então, agora o que vamos fazer é selecionar a cor. Então, vamos ver a sobreposição de cores, talvez. E para a cor, o que podemos fazer talvez seja usar essa. Então, cabelos e cores escuros e simplesmente reduza em 10% ou mais, talvez até um pouco mais, algo assim. Então, nesse caso, como está invertido, talvez possamos ir para 80% apenas para que possamos ter o mesmo efeito que tivemos no XD. Então, se eu levar para o XD, você pode ver como fica. Então, se eu pressionar Control Enter aqui, desculpe, Control, Control Enter para ver a prévia e vá para a direita, aqui mesmo. Você pode ver que agora temos esse efeito. Então eu acho que isso funciona muito bem. A próxima etapa é nosso fórum. Então, vamos terminar com isso, porque acho que isso parece muito bom. E eu não acho que nenhuma outra mudança seja necessária nesta seção, para ser honesto. E vai funcionar muito bem porque é uma grade. Quando começarmos a redimensioná-los, obviamente vamos colocar o conteúdo um em cima do outro. Mas, por enquanto, tudo funciona como deveria. Esses empréstimos, vamos começar do início. Então aqui temos isso, temos isso, temos esses cartões que funcionam muito bem. Temos essa seção que funciona perfeitamente, e então temos essa seção. Então, estou muito feliz com a aparência disso. E na próxima seção, como eu disse, abordaremos no fórum. Então, eu vou te ver lá. 174. Formulário de contato: Tudo bem, agora vamos continuar com o formulário Fale conosco. E antes de passarmos para o fluxo de trabalho, vamos nos lembrar rapidamente de como ele é no XD. Então, aqui temos o texto que é Fale conosco e, em seguida, temos um campo de formulário completo ou InputField. Esta vai ocupar seis colunas ou três colunas acima, você deve chamá-la porque será uma grade. E esse vai ocupar um pouco mais de espaço porque será um pouco mais alto para a mensagem acompanhar o espaço da mensagem. Por fim, vamos reutilizar nosso componente do botão principal com a mensagem de envio. Então, vamos ao Webflow. E primeiro de tudo, sempre pressione Control K e digite a seção. E uma coisa que eu quero mencionar é que você pode ver que agora o fluxo de trabalho está sendo salvo. E quando eu clico na seção C, aqui e ali vamos nós. E isso vai nos mostrar essa marca de seleção. Você pode ver que ainda temos alterações não salvas, mas quando elas forem salvas, serão exibidas as alterações salvas. Em vez de aqui, o que vou fazer é pressionar Control, digite K em div, div block presenter. E para o bloco div, vou adicionar uma seção do contêiner, assim, vamos lá. Dentro desse contêiner, vou adicionar outro. Então aperte, e aí está. Agora ele salvou nossas mudanças. Pressione Control K , digite div, assim. E esse, eu vou chamar de wrapper de fórum, por exemplo, wrapper quente porque mais uma vez ele vai embrulhar esse formulário dentro do nosso campo. Então, vamos abri-lo. E dentro da dívida, vamos primeiro selecionar essa seção e chamá-la de fórum. Vamos ver o que podemos fazer. Chame isso de formulário de contato. Porque talvez você tenha fóruns diferentes em seu site. E para esta seção, mais uma vez, vamos usar 200 com a margem superior. Então, isso vai incluir muito bem esse conteúdo. Agora, dentro desse conteúdo, o que eu posso fazer é ver, talvez onde diz que o invólucro do fórum dentro deste contêiner eu possa pressionar o Controle K e M seja algo como um título H2 e procure por H2 centrado em voz alta. E aqui vou simplesmente escrever para entrar em contato conosco. E mais uma vez, como está diretamente em HTML abaixo do nosso elemento principal, vou posicionar o Form Wrapper abaixo, que empurrará o Fale conosco acima. Para o wrapper do fórum em si, vou dar a ele uma margem máxima de 64. Por isso, estamos mantendo a aparência agradável e consistente do nosso design. Dentro do Form Wrapper, o que eu posso fazer é pressionar Control e digitar K no formulário. E ele simplesmente adicionará esse bloco de formulário dentro dele. Quando eu clico nele, ele vai colocá-lo. E é assim que parece. Então, se eu fechar isso, temos o nome, temos o endereço de e-mail e temos o botão dentro. Então, dentro do Form Wrapper, temos nosso bloco de formulários. Em seguida, temos o próprio elemento do formulário. Aqui temos o rótulo do campo. E essa primeira, vamos chamá-la, por exemplo, eu não sei. Nome completo. Isso é o que era anteriormente. E dentro do nosso TextField, o que eu posso fazer é quando clico aqui, vamos dizer o nome, vamos dizer o tipo. E, finalmente, para o espaço reservado, vou escrever em digite seu nome completo. E você pode ver esse texto aparecendo aqui. Agora, em termos de estilo, o que posso fazer é usar esse rótulo de campo, o que posso fazer é me livrar desse. Mas, na verdade, não, vamos ver o que tínhamos no XD. Então aqui temos 16, e isso é obviamente 16, isso é 24. Então, vamos fazer isso no Webflow. Então, isso vai ter o preenchimento inferior de 16, um animado. E este vai funcionar, eu também tenho o preenchimento inferior de 16, assim. E nosso campo de texto, Vamos voltar ao XD, terá a distância de 32. Vamos ver, o rótulo do campo de texto pode ter 32, por exemplo, aí está. Finalmente, esse inferior, mas não, não aquele campo de texto deveria ter 32. Aí vamos nós. E TextField, este também deve ter 32, assim. Em vez do endereço de e-mail, o que eu preciso aqui é, sim, vamos digitar o e-mail e clicar no TextField. O que vou fazer é inserir espaços reservados, então insira seu e-mail. E agora vamos lidar com algumas aulas. Então, primeiro de tudo, este será um texto de campo. Vamos dar a ele uma classe de bloco de texto. Então, remova a classe e vamos dar a ela uma classe de bloco de texto, na verdade. Então, eu sou do estilo Qin, o que eu quiser aqui. Então, TextField e formulário. Desculpe. Então, aqui o que eu vou fazer é, em vez de parafuso, vou usar irregular. E em vez da cor do disco, eu poderia usar algo parecido com essa cor. Sim, acho que funciona bem. Vamos ver o que tínhamos aqui. Agora, aqui nós realmente tínhamos aquela cor cinza , mas simplesmente normal. Então, vamos voltar para aqui. Então, vamos com a cor cinza, irregular. Vamos lá, e vamos ajustá-lo para 16. Aqui. Aí vamos nós. Agora temos livros didáticos e um bloco de texto e um formulário. Então, vamos selecionar isso aqui. Portanto, remova o bloco de texto da classe e o formulário era a classe de combinação. E isso ajuda, mas não para isso, mas para isso. Remova o formulário do bloco de texto. Trabalho adorável. Então, agora temos isso. E vamos seguir em frente e estilizar isso. Então, no estilo do campo de texto, o que eu posso fazer é selecionar esse texto. E vamos ver como podemos estilizar isso. Então, talvez possamos ajustar isso. Digamos que o avião receba um e-mail de e você possa acessar todos eles pelo sucesso e pelo erro. Assim, você pode ver como é a sensação de sucesso, como são os campos de erro, mas vamos focar apenas no principal. Em termos de um TextField. Mostre todas as configurações aqui. E para o dimensionamento, vamos usar algo como Poppins. Poppins também com 16. E vamos com 24 aqui. E vamos escolher a cor desta. E esse. Vamos usar cores mais escuras. Acho que vai ficar bem. Em vez de TextField, vamos renomear a classe e chamá-la, por exemplo, campo de texto do fórum. Aí vamos nós. E por alguma razão , isso não mudou. Então, talvez a opacidade esteja desempenhando um papel nisso. Então, se eu clicar em pré-visualização rapidamente, aí está. Então funciona, mas por alguma razão , não mudou aqui. Então, o que podemos fazer dentro do quarteirão? Campos do formulário? Vamos ajustar isso para que fique parecido com o XD. Então, aqui temos 16 em cada lado, por exemplo, então vamos ajustar isso. Então, para o emparelhamento no campo de texto do formulário, vou usar o preenchimento de 16 aqui. Acolchoamento de 16 aqui, ou apenas deste lado. Deste lado vai ser zero. Mas, por qualquer motivo, isso vai acontecer, não vai permitir que eu faça isso. Então, talvez se eu selecionar minhas configurações de campo de texto , forme o campo de texto. Então, vamos continuar com isso e deixe-me mudar para talvez para oito. E isso também pode ser até oito. Então, estou muito feliz que isso possa ser 16, isso pode ser 32, então empurra para baixo e em termos de tamanho, vamos com a altura de 50. E agora temos o que precisamos. E o texto dentro de um look. Parece tudo bem. A cor deve ser branca, então tudo bem. Então, campo de texto do fórum, vamos aplicar esse formulário. Campo de texto. Aí vamos nós. Temos a mesma coisa por dentro e temos o estilo e a acompanha. Agora vamos fechar isso rapidamente porque temos esse botão de envio. Eu não preciso disso. Vou apertar o controle K e o botão de digitação. E por dentro vou apenas adicionar nosso botão principal, assim. Aí vamos nós. E para o nosso botão principal, um à direita é enviar uma mensagem como essa. E agora que isso está concluído, o que eu posso fazer é simplesmente colocar um div do tipo Control K em div. E esse bloco div pode hospedar esses dois grupos. Às vezes, eles podem ser um pouco teimosos. Basta colocá-lo dentro do bloco de texto, dentro. Aí vamos nós. E esse bloco de definição podemos chamar, por exemplo, campo de nome como esse. E esse campo de nome realmente não precisa ter nenhum estilo adicional. Eu acho que está bem. Agora vamos criar outro. Portanto, selecione o Form Control K para acrescentar div. Coloque-o logo abaixo do nosso campo de nome e coloque isso dentro dele. Assim. O que eu vou fazer é talvez chamar esse e-mail assim. Vou pressionar Control C, Control V neste e-mail, o que vou fazer é renomeá-la, mas primeiro duplique a classe e agora renomeie para telefone. Aqui eu vou selecionar este. Vou digitar o telefone aqui para o texto. Isso vai ser divertido. Será digitar seu número de telefone. Assim. Adorável. E aqui vamos ver, para o e-mail, vamos ajustar isso. Então esse é o e-mail, tudo bem. E esse é o nome, então nome, e-mail. E aqui temos o que? Nós temos o número de telefone, como o telefone, aí está. E, finalmente, o que eu vou fazer este é pressionar Control C, Control V. E este vai ser, então duplicar a classe vai ser uma mensagem como essa dentro da mensagem aqui. Digamos algo como mensagem. Aqui vamos digitar a mensagem em voz alta. E em vez de digitar seu número de telefone, talvez eu possa dizer algo como escrever sua mensagem. Finalmente, o que eu quero fazer é me livrar dessa fronteira. Então, selecione qualquer um desses e clique aqui e depois aqui, e isso eliminará todas as bordas. Então, quando eu clico, você pode ver como fica. Então eu acho que parece muito bom. Mas, obviamente, agora precisamos colocá-lo dentro de uma grade e alinhá-lo um pouco mais. Então, como podemos fazer isso? Na verdade, é muito simples. Vamos usar nosso wrapper de fórum, que será nossa grade desta vez. Então clique aqui. E então o que precisamos é, por exemplo, seis colunas diferentes. Então, digamos 123456. E digamos que, para as linhas, precisemos de algo como, sei lá, talvez cinco linhas. Então, nós já temos um aqui, então 12345. E por que precisamos disso? É muito simples porque vamos apenas gastá-los. Então, vamos selecionar o campo do nome. Vamos ver o que podemos fazer. Então, bloco de formulário de texto. Vamos ver como podemos ajustar a dose. Sim, acho que o que precisamos não está aqui. Então, vamos mostrar isso. Mas eu vou fazer isso no formulário em si, na verdade, vamos colocar essa como nossa grade. Então, mais uma vez, 23456. Sim, tudo bem. E aqui dissemos 12345. Aí vamos nós. Agora vamos selecionar Vamos ver nosso campo de nome e clicar aqui no canto com esse ponto e simplesmente abrí-lo. Para ocupar toda a largura da sua página. Em seguida, pegue o e-mail e coloque-o em três colunas. Então 123, isso é o que vamos fazer aqui. Aí vamos nós. Pegue o telefone 123 e pegue a mensagem, estenda-a até aqui. E em termos da mensagem, mas eu posso fazer isso é girá-la para pegar a largura de duas colunas. Aí vamos nós. E agora basta selecionar nosso botão. E o que podemos fazer talvez seja abranger toda a seção. Mas, na verdade, sei que o que vamos fazer é talvez abranger apenas uma coluna ou algo assim. E então talvez possamos ir aqui e digitar por último para que fique perdido e talvez posicioná-lo ao lado aqui e talvez simplesmente estender até aqui. Aí vamos nós. Agora temos nosso botão. Agora, a última coisa que precisamos fazer é simplesmente ajustar a largura dessa seção de mensagens. Então, como podemos fazer isso? É necessário ajustar a altura do mesmo para o campo de entrada de texto. Então, vamos voltar ao nosso campo de texto estrangeiro de mensagem. E vou adicionar uma classe de combinação de mensagens porque lembre-se de que é 50, mas aqui eu quero uma B17, por exemplo, Derek go. E agora o que eu posso fazer é, talvez, vamos ver. Preciso ter certeza de que meu texto está no topo. Então, talvez eu possa lidar com o preenchimento neste caso. Então, para este, o que eu posso fazer com o preenchimento inferior aqui, talvez eu possa usar 112. Aí está, 168. E para este, devo colocá-lo em zero? Sim, acho que funciona muito bem. Então, basta brincar com os valores de preenchimento. Brinque com um valor de margem c, onde você está em seu design. Então, agora, quando eu clico na pré-visualização, você pode ver o nome completo e eu clico aqui, vou extrair minhas informações, minhas informações de e-mail. E para a mensagem, talvez você possa digitar algo I Hello pessoal. Como você está? Mas antes de enviá-lo, eu realmente preciso conectar esse formulário dentro do meu designer, conforme já explicado para você. Lá, você pode colocar o e-mail do seu cliente e, portanto, ele poderá realmente enviá-lo para onde você quiser. Então, para qual endereço de e-mail? Eu ainda acho que esse botão talvez tenha sido tocado demais. Então, se eu clicar nele e ver 16, talvez se eu ajustar isso para oito, estejamos bem. Não. Não, acho que não vai. Então, vamos deixar como se estivesse ali. Acho que vai funcionar como está. Então, agora que criamos isso, porque vamos reutilizá-lo em todo o nosso design. O que vamos fazer é clicar aqui, criar um novo símbolo e chamá-lo, por exemplo, formulário de contato. Vamos lá, crie de forma simples e agora temos o símbolo do formulário Fale Conosco. Podemos voltar ao exemplo. E agora, quando clico na prévia, nada realmente muda, mas ainda assim a temos lá. Além disso, quando clico aqui, você pode ver porque temos um preenchimento de 20 pixels dentro do nosso contêiner ainda o contém dentro. Mas agora, quando eu ajusto isso, obviamente terei que ajustar essas colunas um pouco mais tarde, mas você pode ver que ela responde muito bem no responsivo. Então, lá vamos nós. Agora, a próxima seção que vamos fazer é a seção com o mapa. Então, nos vemos no próximo vídeo onde abordaremos isso. 175. Seção de mapa: Vamos agora lidar com o mapa. E aqui estamos no XD e você pode ver o conteúdo aqui. Então, teremos esse conteúdo à esquerda e à direita , o mesmo que fizemos anteriormente com a seção superior. E então teremos esse texto lá dentro e o endereço. Pois o endereço e o ícone serão os mesmos que criamos aqui. Então, se eu selecionar isso, você pode ver que isso tem a pilha de 16, a distância entre esses dois. E, obviamente, isso vai ter um pouco de espaçamento de 24, e aqui vai ter o espaçamento de 32, aqui, 24. Então, vamos entrar no PLO e começar a construir essa seção. Então, vamos ver o que podemos fazer aqui é ir até o corpo, pressionar Control K, digitar a seção e voltar para o designer, dar a ela uma classe de seção. Adorável div Control K, bloco div. E para esta seção, porque esse era o formulário para esta seção, eu vou opa, por que não funcionou. Espere, espere, espere, espere. Acho que dê a ele uma classe de seção por algum motivo. Não, não importa. E vou digitar algo como um mapa. Aí vamos nós. Agora, esse bloco def será um contêiner. E dentro desse contêiner vou dar a ele outro div, chamá-lo de wrapper de mapa. Aí vamos nós. E para esta seção, vou dar a ela uma margem, margem superior de 200. Aí está, para que eu possa distingui-lo um pouco. Agora, dentro desse invólucro de mapas, que vou transformar em um flexbox. Vou colocar o conteúdo no site. Então, colocando div e esse bloco div, podemos chamar algo como conteúdo de mapa ou algo parecido. Então, vamos ver onde estamos contentes, onde estamos contentes. E basta nomear esse invólucro de mapa. Então, talvez possamos renomeá-lo para We are rapper, porque poderemos ter mapas em lugares diferentes em nosso site posteriormente. Então, deixe assim, viva assim. Portanto, certifique-se de que esses dois estejam centrados. E o que vamos fazer aqui é simplesmente adicionar um mapa, então Control K digite o mapa. E aqui temos um mapa. Então, ele só vai adicionar seu mapa interno. E como eu já coloquei minha chave de API, você receberá sua chave de API criando sua conta do Google. Se você ainda não tiver um, deverá inserir as informações do seu cartão de crédito. Agora vamos ser construídos. O Google só precisa verificar se você é humano e se é uma empresa. Se você estiver fazendo isso como seu próprio negócio, provavelmente é sensato criar essa chave de API porque você a criará novamente para seus clientes. Mas se você não é, uma empresa, garante que seu cliente crie essa conta, basta digitar a chave de API do Google N para mostrar o mapa levará você a este Google Cloud. E, como já expliquei, quando você entra em Configurações aqui, vá para as configurações do projeto. Posso ir aqui mesmo? E vamos ver as integrações. Venha carregar, por favor. Aí está. Você tem o Google Optimize e depois o Google Maps. Então, você pode clicar aqui onde está escrito a chave da API JavaScript do Google Maps. E você receberá essa chave de API que você pode simplesmente copiar e colar. Ali mesmo. Você pode clicar em Salvar e ele mostrará este mapa. Mas, mais uma vez, é melhor que você, se estiver fazendo isso o tempo todo, porque será muito simples simplesmente copiar e colar a chave da API em seus projetos futuros e basta alterar o nome e o endereço mais tarde, quando precisar. Ou seu cliente, se precisar do mapa, poderá criar uma conta. Vai ser gratuito para eles. Basta colocá-lo nas informações do cartão de crédito que o Google possa verificar se eles são humanos. Obviamente, se eles começarem a receber tráfego diretamente desse mapa. Então, as pessoas pegam esse mapa, clicam nele, vão até o mapa e vão para a navegação, por exemplo , para o carro, para caminhar ou qualquer outra coisa, então o Google navegará por ele e verá quantas visitas o As empresas começaram a cobrá-las no final do ciclo, acho que são cerca de 200 visitas ou 300 visitas gratuitas e depois começarão a cobrá-las assim. Então esse é o nosso Google Map, essa é a nossa chave de API. Então, o que vou fazer é selecionar meu contêiner e selecionar meu mapa. Aí vamos nós. Clique em selecionar aqui porque eu quero inserir o endereço. Então, deixe-me voltar ao XD. Aqui eu tenho o endereço em Belgrado, Sérvia. E deixe-me voltar para aqui. Obviamente, você pode pegar o endereço que quiser. Então, temos esse apresentador e ele atualizará esse endereço mais tarde, quando você realmente for ao vivo e assisti-lo. E você pode ajustar isso para estrada, terreno ou satélite híbrido, mas vou deixar isso na estrada. Então, vamos ver. Você pode deixar isso assim. Você pode ampliar se quiser, mas vamos deixá-lo assim como padrão. Então, o que podemos fazer aqui nesse caso é, vamos ver, talvez possamos dar a largura do conteúdo de 40%. Assim. Vamos apenas empurrar nosso mapa e talvez possamos dar a ele a margem aqui de, vamos ver, 64. Talvez. Aí vamos nós. E acho que isso vai melhorar nosso mapa muito bem. Mas aqui, neste caso, temos os mapas mais amplos, então é 683 por padrão. Então, se eu for aqui no meu mapa, obviamente posso adicionar a largura máxima, por exemplo, é 683, algo assim. E isso só vai impulsionar meu conteúdo desse jeito. Acontece que a alta tecnologia pode combinar com algo como 100%, o que ocupará 100% do meu conteúdo aqui. Mas como eu não tenho nenhum conteúdo, provavelmente deveria começar a adicionar esse conteúdo. Então, vamos clicar aqui e redefinir isso apenas para que possamos ver nosso mapa. Então, onde estamos contentes, o que vamos fazer é, por exemplo, colocar os cabeçalhos H2. Então, digite Control K no cabeçalho, selecione nosso H2. Lá vamos nós e vamos ver o que temos. Então H2, dark Live. E para isso, o que eu posso fazer é ver, talvez por que, por que ele não mantém as configurações. Não sei por que o que está acontecendo. Então, vamos remover a classe, todos os cabeçalhos H2. Ele ainda mantém a área por qualquer motivo. Então, espero que você esteja tendo esse problema. Então H2 e nós apenas selecionamos isso, então 32. E vamos ver onde estamos aqui. Então, estamos em 56. Então 32,56, aqui. Aí está. Esse será o nosso título H2. E vamos estilizar isso para que fique muito escuro. Sim, está fazendo aulas de todos os títulos do H2, mas isso não me mostra que isso importa. Então, vamos clicar aqui, então onde estamos, assim. E, abaixo disso, vamos pressionar Control K, digitar no bloco de texto, dar a ele uma classe de bloco de texto, assim. E vamos simplesmente selecionar copiar nossos textos, colocá-los dentro. Aí vamos nós. E agora, para as distâncias, vamos ver o que podemos fazer é com esse bloco de texto, o que eu posso fazer é colocar onde estamos. Por qualquer motivo, ele mantém o espaçamento de 20. Vamos dar um espaçamento de 32, na verdade, neste caso. Então, mas mude para onde estamos, como se estivéssemos endividados. E em vez de 20 torr, vamos com 32. Aí vamos nós. Então isso empurra isso para baixo. E em termos disso, o que eu posso fazer é bloquear texto onde estamos assim e a parte inferior deve ser 24, 32. Aí está. Porque se levarmos você de volta ao meu design, você pode ver que aqui temos 24 e aqui temos 32. Então, vamos voltar para aqui. Na verdade, deveria ser 24, desculpe por isso. Isso deve ser 32. Agora estamos bem. Então, o que vou fazer a seguir é colocar um diblock Control K digitando div, div block. E o primeiro será para o endereço, o endereço dentro desse bloco div. O que vou fazer é digitar outros blocos de controle div. Kate estava dividida em quarteirões, e esse será o título, por exemplo vamos ver, vestir, título como esse. E dentro disso, clique em Control K, digite a imagem. Para a imagem, vou escolher aquele ícone de alfinete, que será, obviamente, você pode usar a pesquisa, mas não quero te confundir ainda mais, que é esse lindo. E dentro do título desse endereço, o que vou fazer é pressionar Control K, digitar parágrafo e usar todos os parágrafos. Vamos ver, por qualquer motivo, isso não mudou isso. Poppins 16, 24, e essa cor deve ter três parágrafos. Então, como eu disse, por qualquer motivo, isso não alterou a dívida. Então, vamos com o aqui. Então, vamos usar um vestido assim. E aqui vou adicionar o ícone da classe de endereço. Aí vamos nós. E o título do endereço. Vamos colocar dentro do flexbox, garantir que eles estejam centralizados. E certifique-se de que vamos ver o que podemos fazer aqui. Para isso. Por qualquer motivo , eles não estão centrados. Vamos ver o que podemos fazer aqui. Parece um parágrafo. Sim, isso mesmo. Então vá para zero. Aí vamos nós. Porque era isso que estávamos preenchendo o parágrafo. Então, onde está o ícone do endereço? Basta dar uma margem de 16 no lado direito, porque só queremos imitar nosso design. Eu tenho esse espaçamento. Então, se eu selecionar isso, você pode ver que a pilha tem 16 pixels, mesmo que fizemos aqui. Então, o que vou fazer a seguir é usar esse endereço. E, na verdade, temos o título, então pressione Control K digite P para o parágrafo. E dentro desse parágrafo, vamos tentar todo o H1. Aí vamos nós. Agora ficou e vamos simplesmente colar em nosso endereço um lindo título endereçado. Vamos ver o que podemos fazer aqui. Então, estamos a distância de 16, então podemos dar a ela um preenchimento inferior de 16. Então, abordei o título, preenchimento inferior de 16, o que vai empurrar nosso endereço um pouco para baixo. Em seguida, selecione nosso endereço, pressione Control C, Control V, Control V duas vezes. Adorável. E aqui o que podemos fazer é que esse do meio deve ser um número de telefone. Então, duplique o número de telefone da turma. Esse interior deve ser duplicar o título do fórum da classe e eliminar esse texto de cópia dessa forma. E isso deve ser duplicado. Então, deve ser divertido. Adorável. Então, vamos começar a substituí-los. Então, isso deve ser divertido. Vamos encontrar o telefone onde ele está. Aí vamos nós. Então, em vez de endereço, deveria dizer número de telefone. E em vez de mortes, deveria ser mais 381-123-4567. Então, apenas um número aleatório. E, finalmente, para esta última, deveria ser o horário de funcionamento, duplicar a aula. Horário de funcionamento como esse. E dentro da dívida, que podemos fazer é duplicar. Então, talvez possamos chamá-lo de algo como horário de funcionamento, título, animado. E mais uma vez, finalmente, para o ícone interno, em vez de um vestido, duplique. Vamos dar a ele a classe de relógio, ícone de relógio, porque é isso que será apresentado lá. Vamos localizá-lo aqui. Vamos ver onde está. Então, ícone do relógio, lá vamos nós. E, finalmente, vamos fazer isso. Então, horário de funcionamento. E aqui vamos digitar algo como de segunda a sexta-feira, das 14h às 16h. Sim. Acho que isso vai funcionar muito bem. Agora que você fez isso, o que precisamos é colocar o espaçamento entre eles. Então, se eu clicar aqui, você pode ver que o espaçamento é 24, então vamos lidar com isso agora. Portanto, o endereço deve ter uma margem inferior de 24. O número de telefone deve ter a margem inferior de 24. E o horário de funcionamento deve permanecer o mesmo. Agora, quando eu seleciono meu mapa e o renomeio para mapa, opa. Renomeie para main, nosso mapa principal. Experimente isso. Aí vamos nós. E agora a altura pode ser alterada para preencher isso, ou pode ser 100% para preencher o espaço desse conteúdo. Mas, por alguma razão , não preencheu isso. Eu não entendo o porquê. Então, vamos voltar ao padrão e deixar que ele se aplique. Ou podemos voltar ao XD e ver a altura de 507. Então, talvez possamos ajustar isso. Portanto, o mapa principal deve ser 507. Aí vamos nós. E agora ele se encaixa muito mais bem. Então, se eu clicar em pré-visualizar muito rapidamente, esta é uma visualização prévia genérica do mapa, mapa real em sites publicados. Portanto, temos que publicar nosso site, seja um domínio de dois estágios, que é esse, ou dois domínios personalizados, que é esse, para poder ver a localização, mas não nos importamos realmente com isso no momento. Vai funcionar muito bem porque já o configuramos dentro do Google e dentro do Webflow. Então, aqui está tudo, como deveria estar, tudo está posicionado corretamente. Tudo funciona como queríamos. E aqui podemos definir isso para horizontal ou vertical. Você pode ver como isso ficará mais tarde para ser responsivo. Então, tudo funciona muito bem. Então esse é o nosso mapa. A última coisa que quero fazer é voltar aqui, onde diz símbolos, criar um novo símbolo. Vou chamá-lo de mapa. Crie um símbolo. Lá vamos nós, e agora temos esse símbolo. E aí vamos nós. Uma última coisa que acho que devemos fazer é seguir em frente e criar nosso rodapé. E nos vemos no próximo vídeo onde faremos exatamente isso. 176. Seção de rodapé: Tudo bem, vamos agora criar esse rodapé e finalizar nossa página inicial. E, mais tarde, na próxima lição podemos abordar a página de coleção de CMS, que será o ponto central de nossa página. Mas, por enquanto, vamos lidar com o rodapé em si. Então, o que eu posso fazer é voltar ao Webflow aqui. E acabamos de criar nossos mapas. Então, vamos selecionar nosso corpo na seção de pinos do tipo Control K. E volte para o designer, dê a ele uma classe de seção como essa. Dentro desta seção, vou colocar o bloco div, que chamarei de container de animado. E esta seção será Rodapé. E terá a margem de 200 no topo. Adorável confusão. E dentro do contêiner, o que vou fazer é pressionar Control K para abrir o div e chamar esse rodapé de rapper. Assim. E dentro do rapper do rodapé, o que eu posso fazer é colocar na minha imagem. Então, tecla de controle, imagem. Para minha imagem, vou escolher meu logotipo, que é esse. Vá. E a embalagem de rodapé só tem a imagem agora. E o que eu também posso fazer é colocar os textos no fundo, então Controle K, digite P para o parágrafo e herde todos os parágrafos. Agora funciona muito bem, o que é ótimo. Deixe-me copiar esse texto, posicioná-lo aqui. E vamos dar a ela uma classe de p. Vamos ver a cor do corpo p, centrada em p. Seja centralizado para centralizar o parágrafo. E eu vou clicar aqui e ele centralizará esse texto abaixo. Mas eu também preciso desses quatro ícones e da navegação na barra de navegação. Então, eu vou trapacear um pouco. Então, basta abrir sua barra de navegação e encontrar seu contêiner. E vamos ver o menu de navegação. Posso pressionar o Controle C para copiá-lo daqui, posso simplesmente voltar para minha instância, voltar ao meu rodapé, pular até lá e colá-lo logo acima do parágrafo em si. Então você pode ver, talvez eu possa voltar e ajustá-lo aqui. Então, vamos ver. Em vez do menu nav, posso renomear sua classe renomeada para itens de navegação. Aí vamos nós. E eu vou pegar todas elas e talvez posicioná-las na parte inferior. Vamos tentar isso mais uma vez. Então aperte o Controle C, volte para aqui, controle V, não funciona. Então, vamos voltar aqui e ver o que podemos fazer porque eu sempre tento navegar por isso. Portanto, temos uma classe de link de navegação. Então, vamos voltar aqui, e eu vou pressionar Control K para transformar esse texto em um link de texto. Agora vamos tentar com o link de navegação. Agora pisque. Aí vamos nós. E isso só vai nos dar o mesmo texto que fizemos antes. O primeiro serão os carros. Aí vamos nós. E vamos colocar isso em um bloco div, div. Coloque o texto dentro dele chamado bloco div. Digamos que o nav vincule o rodapé. Rodapé de links. Aí vamos nós. E vamos duplicá-lo mais duas vezes. Então Controle C, Controle V, Controle V, Aí vamos. esse link de navegação deve ter a margem de 24, Acho que esse link de navegação deve ter a margem de 24, então vamos verificar rapidamente. Agora o link de navegação dos itens. Na verdade, tem o preenchimento de 20. E esse último. Está bem? Então, vamos lidar com dívidas. Então, se eu voltar para o link de navegação aqui, vamos realmente dar a ele o emparelhamento de 20 aqui. Então, todos eles têm um par de 20, bom. E no lado esquerdo também. Adorável. Portanto, nem precisamos disso no lado esquerdo. Então, vamos usar zero e este, vou dar a ele uma classe de combinação de último e último, e ele removerá esse par de zeros. Então, carros, vamos ter empréstimos aqui. E, finalmente, vamos entrar em contato conosco, entre em contato conosco. Aí vamos nós. Agora que temos isso, vamos posicioná-lo aqui. Uma última coisa que eu quero fazer é pressionar Control K digitando div. E essa div, eu vou chamar ícones sociais assim. E dentro disso, vou pressionar Control K digite na imagem. E então talvez eu possa copiá-lo imediatamente. Então, Controle C, Controle V, Controle V, Controle V, porque sabemos que temos quatro desses. E todos os quatro deveriam realmente ir aqui. Então, não, esse não cometeu um erro. Eu deveria copiar este. Controle C, controle V, controle V, controle V. Aí vamos. E eu vou entregar um flexbox e na imagem, vamos dar isso, vamos ver o Facebook. E vamos ver o que temos no conteúdo em si. Nós temos 24. Então, vamos voltar aqui e dar uma margem de 20 para que o próximo seja o Twitter. E vamos dar uma margem de 20 , pois próxima deve ser YouTube, margem de 24. E esse último deveria ser o LinkedIn, eu acho. E não deve ter nenhuma margem. Nesta ocasião. Para o Facebook, clique aqui, depois escolha a imagem e deixe-me escolher o ícone do Facebook, seja, que é esse lindo. Então, para este , temos o Twitter. Então, vamos escolher o Twitter. Para este, temos o YouTube. Aqui vamos nós. E, finalmente, para este, temos o LinkedIn. Então, vamos localizar nosso LinkedIn. Aqui vamos nós. Agora que temos todos os nossos ícones, o que vou fazer é colocar esses dois em outra div para que eu possa espaçá-los uniformemente. Então, vamos dar um controle. K mais uma vez digitando div. Isso será o conteúdo do rodapé. E dentro do conteúdo do rodapé, vamos posicionar esses dois dessa forma para garantir que estejam aqui. Selecione o conteúdo do rodapé, ative o fluxo e ative-o para que eu possa distribuí-los uniformemente, assim. E ícones sociais, o que podemos fazer é, eu acho que eles são um pouco grandes. Então, por qualquer motivo , eles têm a largura máxima. Porque para todas as imagens, se eu digitar zero, vamos ver, as larguras devem ser. Talvez a melhor opção seja ter a altura porque eles terão a mesma altura de 24. Então, vamos voltar a este. Assim. Portanto, a altura deve ser de 24 pixels. É isso? É isso mesmo? Sim, olá para 24. Selecione este. A altura deve ser de 24 px. Assim, você pode simplesmente digitar o que quiser dentro do Webflow. Então, 24 px dentro da altura e você pode ver como isso os ajusta facilmente. Então, 24 p x. Aí vamos. E agora vamos posicionar isso no centro, assim. E aí vamos nós. Agora parece que deveria. Estou feliz com isso. E agora, finalmente, o que podemos fazer é selecionar nosso rodapé, transformá-lo em um flexbox e garantir que esteja na vertical desta vez. E certifique-se de centralizar todos os nossos itens. Aí vamos nós. E agora, o que eu posso fazer, talvez exagerar. Saiba, vamos ver o que podemos fazer aqui. Talvez possamos ajustar alguns desses itens. Então, vamos ver. Talvez possamos dar a isso a largura de 100%. Isso não funciona. Na verdade, não, vamos nos livrar desse. Digamos que fique com a exclusão e com a imagem. Então, sim, na verdade, podemos colocar na grade, mas antes de fazermos, o que eu preciso aqui é substituir isso pelo link. Então, o que eu posso fazer é entrar aqui e usar a marca porque a marca é na verdade, nosso logotipo, clique em Control C. Vou substituir minha imagem aqui, que é a marca que acabei de pegar. Então clique em Excluir, porque quando realmente corrigirmos a marca, ela será vinculada a uma parte específica da página. Então, aqui, o que posso fazer com minha embalagem de rodapé, em vez desse conteúdo de rodapé, como acabei de mostrar, o que posso fazer é realmente empurrá-los para fora. Assim. Aí vamos nós. E agora podemos criar nossa grade. Então, para fazer isso, basta selecionar o invólucro do rodapé e criar nossa grade. E o que eu vou fazer aqui talvez seja também. Sim, podemos ter duas colunas, mas podemos ter, por exemplo, quatro linhas. Então, a primeira será porque o logotipo vai passar a linha inteira. Esses dois vão ter o seu próprio, e esse vai ter seu próprio tipo C3, acho que vai ficar bem. Pegue uma extensão maior, toda a largura dela. Mas não, é como se a marca realmente abrangesse a largura da própria coluna. Garante que esteja assim no centro. Então, esses dois vão ficar bem porque estão absorvendo, cada um está recebendo esse tamanho, mas esse. Deve se alinhar para a direita, assim. E, finalmente, temos centros de parágrafos. Então, vamos apenas contornar a luz aqui. E vamos colocar o rodapé central do parágrafo. E talvez possamos dar a ela essa margem inferior de 64. Peste negra. Então, isso vai impulsionar ainda mais nosso conteúdo. Finalmente, o que eu quero fazer é talvez dar a eles um pouco mais de espaçamento. Então aqui temos, vamos ver, 64, eu acho 69, mas vamos com 64. E aqui também temos 64. Então, vamos fazer isso rapidamente. Então, aqui o que eu posso fazer é talvez o rodapé do logotipo da marca. E eu vou pular para dentro da barra de navegação. Em vez de uma marca. Vou chamá-lo de logotipo. Apenas logotipo. Ok. E vindo aqui mesmo. Veja esta pasta de logotipo, vou dar a ela a margem inferior de 64. Adorável. E vamos ver o que podemos fazer aqui. Talvez os ícones sociais sejam links de navegação no rodapé ou até melhor. Podemos seguir o parágrafo e dar a ele a margem máxima de 64, o que apenas os manterá autônomos e rastreáveis. Então aqui temos nosso rodapé e lá vamos nós. Tudo parece lindo. Tudo parece como pretendemos. Então, uma última coisa a fazer aqui é transformá-los em estados flutuantes. Então, para fazer isso, o que vou fazer é testar dívidas. Então, pairamos. Tudo o que preciso fazer é substituir a cor por isso. Mas agora são apenas substituições e conteúdo por trás de alguns. Vamos lidar com isso um pouco mais tarde. Mas, por enquanto, vou deixar como está. Porque, como você viu com a barra de navegação, você sempre pode voltar. E aqui vou criar um novo símbolo e chamá-lo de rodapé assim. E aí vamos nós. Uma última coisa que eu quero fazer é dar a esta seção uma margem máxima de 20. Aí vamos nós. Então, parece lindo voltar às aulas. E aí vamos nós. Então, agora todo o nosso site está concluído. Então, a página inicial está pronta. Sei que estou divagando muito, mas estou apenas tentando dar a vocês muitos detalhes para lembrar, porque será muito mais fácil para vocês navegarem mais tarde. Então aqui temos o carro , os empréstimos e entre em contato conosco. Aqui temos isso por qualquer motivo que mude isso. Então, terei que voltar e ajustar esse H1 porque isso me deixa louco. Tudo isso parece bom. Só isso terá que se ajustar mais uma vez. Isso parece bom. Isso parece bom. Isso parece bom. Isso parece bom. Aí vamos nós. Então, temos que ajustar cada um e temos que ajustar esses. Então, vamos fazer isso. Em primeiro lugar, vamos selecionar este. Então, temos h três cartas escuras, cartas de cartas. Aí vamos nós. E selecione este, adicione cartão, cartões. Então, se este anúncio cartões de carro, e esse azul tem 160 aqui, então 16, e esse carro, carro, ele também deveria ter 16. Aí vamos nós. Então, agora isso está resolvido e os finalistas lidam com isso. Então, H, um herói, por qualquer motivo, ele muda para Poppins, cor 64 em negrito é essa. Vamos ver o espaçamento. Aqui. É 86. Então, vamos voltar para o nosso herói. 86 deveria estar aqui. Aí vamos nós. E agora parece que deveria. Então, agora parece bom. O espaçamento parece bom aqui e aqui. E aqui. Isso é bom. Isso é bom. Mais uma vez, ele será exibido quando for publicado e o rodapé estiver como deveria. Então, lá vamos nós. Nossa página inicial está concluída. Como eu disse, vamos entrar em colapso clicando aqui. O que fizemos até agora foi recriar a página inicial que será muito mais simples a partir daqui, porque é a mesma coisa que no XD. Depois de projetá-lo, podemos realmente copiar e colar esses símbolos em nossas páginas. E podemos gerenciar e começar a criar de uma forma muito mais rápida muito mais rápida. Então, nos vemos no próximo vídeo, quando realmente falaremos sobre isso aqui, que é o CMS. Vai ser extremamente complicado começar, mas na verdade não é muito complicado quando você realmente pega o jeito, como o próprio Webflow. Então, nos vemos no próximo vídeo e começaremos com o CMS. 177. Como criar a coleção de CMS: Neste vídeo, falaremos sobre coleções de CMS no Webflow. E vou mostrar como criar um, especialmente para este projeto, e como conectar todos esses itens de coleção de CMS e CMS em seu projeto. Então, vamos começar. E aqui estamos no Webflow e é isso que temos até agora. Então, se atualizarmos nossa memória um pouco, agora, aqui temos a navegação, temos nosso botão, temos essa seção com a imagem. Temos esses cartões aqui. Depois, temos o que oferecemos com esses ícones ao lado. Nossos benefícios parecem bons e, em seguida, temos um formulário de contato que funciona e você pode inserir mensagens e botão de enviar mensagem aqui. Então temos o mapa e eu mostrei como integrar o mapa interno. E, finalmente, temos o rodapé na parte inferior. Então, como vamos incluir a coleção CMS? Vamos clicar aqui, onde diz coleção de CMS, clique aqui. Portanto, antes de começarmos com todas essas informações, vale a pena nos lembrar do que realmente devemos incluir nela. Então, aqui temos nosso arquivo XD e devemos realmente criar a página do curso. Mas antes disso, porque essas três cartas e essas oito cartas serão todas conectadas à nossa coleção de CMS. E o que isso basicamente significa é que ele extrairá todos esses dados da coleção do CMS. E se eu te mostrar isso muito rapidamente, esse será o nome, esse será o preço, esse será o ano. Esse será o número de quilômetros que o carro percorreu. Ele extrairá todas essas informações e será o conteúdo dinâmico e mostrará tudo isso dentro de nossa coleção de CMS. Em seguida, vamos criar essa página. E esta página, na verdade será para os detalhes do carro. Mas antes de inserir todos esses detalhes, primeiro precisamos criar a coleção CMS e, em seguida, apontar os elementos para essa coleção de CMS e basicamente, conectá-los todos juntos. Então, vamos realmente começar com esta página e extrair as informações desta página. Então, para nos ajudar a começar o que realmente precisamos aqui, deixe-me verificar rapidamente se eu conectei isso. Então, super carro, SUV e Saloon. Então, esses são os ícones. Se eu voltar ao nosso Webflow, volte aos nossos itens muito rapidamente e apenas para verificar se os temos. Então, sim, SUV, insulina de supercarro. Se voltarmos ao meu CMS, como eu disse, clique aqui. Então, primeiro de tudo, precisamos criar a coleção CMS em si. Então, nome da coleção, vamos chamá-la de carros, por exemplo, e aqui temos os campos de coleção. Agora, nome e slug são o que será incluído como básico. E você pode ver que o URL da coleção é carros. Então você pode ver no site website.com quatro carros de corte para a página Slash Cart. E é isso que vamos incluir lá dentro. Então, em primeiro lugar, o que vamos incluir é adicionar um campo. E você pode adicionar todos os tipos de campos diferentes e, para não perder muito tempo com esta lição, você pode passar o mouse sobre qualquer um desses campos para aprender mais sobre isso. E você pode ver nessas lições quais são algumas delas. Vamos usar textos simples, talvez algumas imagens de texto rico e várias imagens sejam o que vamos usar aqui. Mas você pode ver que pode ter links, e-mail, números e números de telefone, data e hora, seletores e opções de cores. Então, por exemplo, esse menu suspenso de opções é ótimo se você tiver várias seleções ou categorias diferentes ou algo parecido. Então, vamos começar com o texto simples. E eu vou chamar esse nome de texto. E vamos chamá-lo talvez de Carney. Nome do carro, algo parecido. Vou clicar em Salvar campo. Então eu vou, vamos ver, adicionar um novo campo, texto sem formatação. Vou chamá-lo de preço do carro. Aí vamos nós. Clique em Salvar campo. Então, o próximo campo será, vamos ver, imagem. E essa será a imagem do cartão do carro. Clique em Salvar campo. E você já pode ver aqui, no lado direito, a prévia que está sendo construída. E se eu clicar aqui, o que realmente precisamos e o que estamos criando é essa imagem de cartão de carro. Assim, ele pode extrair essa imagem da coleção de imagens que criamos aqui e mostrá-la onde queremos mostrá-la. Então, mais uma vez, temos o nome atual, temos o preço do carro e aqui temos a imagem do carro. Então, vamos nos concentrar agora em todos esses outros detalhes que temos. Vamos voltar ao Webflow. Então, imagem do cartão do carro, o que podemos fazer a seguir é incluir outra imagem. Então, vamos usar a imagem. E aqui vou chamá-la, por exemplo, etiqueta de tipo de carro. E esse rótulo é o ícone real que vai aparecer aqui. Então, aqui temos o ícone do SUV. Então, vamos clicar em Salvar campo. Agora, abaixo disso, o que podemos fazer é colocar o texto simples e esse chamado tipo de carro. Tipo de carro, ele diria campo. Então, abaixo disso, o que podemos fazer é adicionar outro, chamá-lo de ano de produção. Ele dizia Phil, eu quero que o carro produzido, acrescentaria outro. E digamos que quilometragem, quilômetros ou qualquer outra coisa, atinja outra. E isso vai ser do tipo abastecido. Clique em Salvar. E se eu levar você de volta ao nosso documento do XD, esses são na verdade esses. Então, quilometragem, tipo de transmissão de campo, tipo de motor, portas, assentos, garantia. Então, tudo isso será atualizado automaticamente em nosso site. Então, o último era o tipo de combustível do que a transmissão, a transmissão. E aqui você pode ter todos os tipos de personagens diferentes. Você pode limitar os caracteres se esse campo for obrigatório. Então, vai colocar a estrela muito parecida com esta. E vamos clicar no campo Salvar porque isso vai ser bem simples. O tipo de motor é o próximo. Opa, desculpa. Então, textos simples e tipo gin. Aí está. A próxima será, vamos ver, portas. Quantas portas o carro tem? O próximo será, vamos ver, assentos. Aí está. Salve o campo. A próxima será, vamos ver, garantia. E agora as dívidas foram concluídas. O que vamos fazer a seguir é colocar o texto rico porque eu quero incluir a descrição do veículo, que é essa. Então, agora terminamos com esta seção e terminamos com essas informações. Então você pode ver que o ano do carro vai chegar daqui e mostrá-lo aqui também. quilometragem vai aparecer aqui e aqui. nome atual e o preço do carro são o que está aparecendo aqui e aqui, bem como aqui e aqui. E a imagem do carro vai aparecer aqui. E também incluímos o SUV, que é o tipo de carro, e o ícone que combina com o próprio tipo de carro. Aqui, incluiremos um texto rico e eu chamarei essa descrição do veículo para este curso. Vou usar a mesma descrição, os mesmos dados, mas obviamente seus clientes incluirão informações diferentes, obviamente com base no carro. Então, agora vamos mais longe e adicionar novos campos. E você pode ver que sobraram 16 de 30. Então, a web for limita você com 30. Então, vamos com zero a 100 km/h. Então, essa é a velocidade com que o carro vai chegar a essa velocidade. Vamos incluir vogais, por exemplo, você pode incluir todos os tipos de informações diferentes. Eu só vou concordar com isso. Essa será a velocidade máxima. E se eu levar você de volta ao XD, na verdade estamos usando essas informações aqui. Então, apesar do torque de potência, todo tipo de coisas diferentes. Então, a última foi a velocidade máxima. O próximo é o poder. Aí está. Clique em Salvar em um novo. Vamos ver os cilindros. E, obviamente, para os carros elétricos vai escrever algo como um “a”. Então, são cilindros. Isso é torque. Deveria dizer campo. No novo. Isso vai ser a altura. Salve o novo. Isso vai ser peso. Clique em Salvar e adicione um novo. Isso será vinculado. Vinculado. Vamos ver se fizemos, certo, sim, fizemos. Ótimo trabalho e adicione um novo. Isso vai ser espaço de inicialização. Espaço de inicialização. Vamos ver. Um novo. Vamos dizer distância entre eixos. Digamos, campo. Eu sei que isso é chato, mas isso é basicamente o que você vai fazer por seus clientes. Então, vamos basear e a próxima é carregar pesos. E dependendo do projeto em questão e no que você está trabalhando, você adicionará as diferentes informações aqui e ali. Então, vamos ver. Vamos incluir qual foi o último peso de carregamento. O próximo ponto é a largura. Então, largura. Em seguida, incluiremos a capacidade do tanque de combustível. E, finalmente, o que faremos talvez seja reduzir algumas delas. Então, talvez carregando pesos, eu possa me livrar deles ou algo assim. Não tenho certeza porque ainda tenho dois campos e preciso de mais três. Então, se você clicar em Adicionar campo, o que vou incluir é a imagem. E vamos chamá-lo de herói do carro. Imagem. Clique em Salvar. E se considerarmos o XD, será essa imagem que será nossa imagem de herói automotivo. Isso é o que realmente vai acionar a caixa de luz real. Todas essas imagens serão conectadas dentro da caixa de luz, mas isso só vai acioná-la. Então, vamos ver de que tipo de informação podemos nos livrar. Porque se eu voltar aqui, preciso adicionar mais um campo para a imagem múltipla. Então, vamos chamá-la de Car Gallery One. Aí está. E você pode ver que ficamos sem campos, mas ainda precisamos incluir o campo. Assim, posso me livrar dessa descrição do veículo ou de um desses detalhes. Então, vamos ver do que podemos eliminar aqui. Então, talvez possamos nos livrar do peso de carga. Vamos nos livrar disso, porque o espaço na inicialização é basicamente o que mostra esse peso de carga, afinal. Então, quão grande é o peso da sua bota, isso é o quanto você pode colocar dentro. E, obviamente, você pode colocar todas essas informações mais tarde, se quiser. E vamos colocar isso e seu cliente poderá adicioná-lo manualmente a cada página que criar. Então, como estamos falando de um projeto menor aqui, uma vez que eles adicionam uma página, eles podem entrar manualmente e adicionar a página. Porque, mais uma vez, estamos falando de um pequeno lote de cartas. Nesse caso, eles têm apenas oito carros à venda. Então, isso vai ser muito fácil para eles. Caso contrário, você pode contornar isso simplesmente e verificar do que eliminamos e qual capacidade eu acho que estava carregando peso. Então, deixe-me voltar para aqui. Deixe-me clicar em Salvar e encontrar o peso da carga, que é este. Clique aqui e clique em Excluir. Aí vamos nós. E agora temos mais um. Então clique aqui, várias imagens, carro, galeria também. Aí está. Agora, como isso vai parecer, essa será a imagem do herói, então a imagem número um, então isso será 234 e isso vai ser ou talvez cinco e depois 678. Preciso fazer isso por causa dos propósitos do layout porque é algum tipo de bug no fluxo de trabalho. Eu e meu amigo meio que terminamos isso. E aqui está um guru do Webflow, na minha opinião, porque ele está fazendo isso há anos e anos e anos. Então, basicamente, o que acontece no Webflow é que ele vai me mostrar todas as oito imagens. Você pode querer limitá-los. Não é muito fácil conectar essas imagens por meio de uma caixa de luz. Então, quando alguém clica em uma das imagens, ela abre a caixa de luz e todas as oito imagens aparecem. Portanto, se você estiver usando esse método, é melhor saber o que fazer. Então, nesse caso, o que vamos fazer é porque temos oito imagens para cada carro. Obviamente, seu cliente pode ter muito mais imagens. Então, nesse caso, número um, que é se dermos uma olhada aqui, a imagem atual do herói será essa. Então, imagem número um. Então, para a próxima, que será, vamos ver, essa. Então, na galeria 1 da Carrier, o que vamos incluir em nossas imagens, 234.5. E então, na verdade, vamos incluir mais um desses e escondê-lo. Ainda vai estar lá, mas nós vamos escondê-lo e eles vão entrar nesta galeria. Portanto, as imagens restantes serão enviadas para seu projeto específico. Se você tiver, por exemplo, 40 imagens diferentes, poderá colocar as imagens restantes. Então, os primeiros cinco, esse é o número 12345. Então, cinco imagens no total. E então as imagens restantes simplesmente são colocadas nesta galeria de carros, conectam todas elas e elas aparecerão dentro da caixa de luz. E eu vou te mostrar isso em apenas um momento. Mas basicamente terminamos aqui. Finalmente, sei que foi uma lição chata, mas o que você pode fazer? É o que você precisa fazer com as aulas de CMS. Então lembre-se, nós batizamos nossos carros de coleção. Então, quando clico em Criar coleção, você pode ver que está prestes a fechar essa coleção. Agora salve as alterações. Você gostaria de salvar essas alterações? Sim, salve as alterações. E agora nossa coleção foi criada. No entanto, não temos nenhum item. E você pode ver que o Webflow é inteligente porque eu chamo meus carros de coleção. Ele me pede para fazer um carro novo, para criar um carro novo. Então eu posso fazer isso agora. Posso clicar em um carro novo e dar um nome a ele para poder simplesmente copiar as informações que criei anteriormente. Vamos dar esse furacão Lamborghini e você verá como isso vai ficar , como website.com slash cars, Lamborghini, Horeca. Então, temos um nome personalizado. Então o nome do carro será furacão. O preço estará nesta imagem de um cartão. Deixe-me mostrar como as imagens ficarão. Esta é a dobra que você vai colocar. Cada um deles obviamente tem todas essas imagens. Vamos precisar do número três para este exemplo específico. Portanto, arrastar e soltar a imagem dentro da etiqueta do tipo de carro é o que precisamos arrastar e soltar da nossa pasta. Então, todos esses ativos que você exportou anteriormente, se você se lembra. Então, vamos ver. Este é um supercarro, então digite S, aqui está o ícone do supercarro. Vou apenas arrastá-lo e soltá-lo aqui. Aí vamos nós. Agora, vamos seguir em frente com os campos para que o tipo de carta seja um super carro. Obviamente, é isso que seu cliente criará todas as vezes. Então, quando eles clicam em um novo cartão, como você viu aqui, todos esses campos estão esperando por eles. Eles só precisam seguir em frente e inserir as informações. E, na maioria dos casos, você receberá essas informações do seu cliente. E vou realmente mostrar nosso site em apenas um segundo, de onde obtive a maioria dessas informações. Obviamente, tudo isso é de conhecimento público e , obviamente, você pode encontrar isso online. Mas se você não puder, existem esses sites que serão de grande ajuda para você. Então, basta colar algum texto. E como eu disse, esse texto será o mesmo para todos os carros, que eu vou criar. Então, basta copiar e colar essas informações aqui. Deixe-me abrir isso aqui. Portanto, a potência de alta velocidade, como eu disse, para cilindros, carros que funcionam com baterias, basicamente não tem cilindros, obviamente. Portanto, você vai colocar NA, por exemplo e eu vou mostrar isso um pouco mais tarde. Tão ligado, aí está. capacidade de litros estará lá, vamos, peso de carga. Opa. Então, vamos basear o espaço de inicialização. Nós sempre, opa, eu perdi isso. Peso de carregamento espacial. Portanto, sem carregar peso do que largura. E, finalmente, a capacidade do tanque de combustível. Aí vamos nós. Então, agora finalmente, estamos chegando a essa seção que acabamos de criar. Então, o que vamos fazer aqui é se eu levar você de volta ao XD, o que temos é essa imagem número um. Então é isso que vamos criar aqui. Então, deixe-me levá-lo de volta às minhas imagens. E, convenientemente, todos eles são chamados de furacão 123 e assim por diante. Então aqui temos o herói número um, então arraste-o e solte-o dentro. Então temos a galeria de carros. Então, se eu levar você de volta ao XD mais uma vez, temos a imagem 234.5. Isso é o que você incluirá aqui. Então 234,5 vão para cá e então as imagens restantes vão para cá. Então, basicamente 67,8. Como eu disse, isso ficará oculto da página, mas ainda estará conectado. E, basicamente, é isso. Criamos nosso primeiro carro. Obviamente, ainda não podemos vê-lo, então precisamos conectá-lo. Vamos lidar com isso mais tarde, mas deixe-me clicar em Criar agora mesmo. E vai criar nosso primeiro carro. Porque temos oito carros. Agora vou embora, criar os sete carros restantes e depois voltar para você. Mas basicamente vou fazer a mesma coisa que mostrei aqui. Então, o que podemos fazer a seguir é, digamos, para a escalada do Cadillac, talvez. Então você pode ver, recriar esse furacão. Quando eu clicar no carro novo, ele ainda terá tudo isso, todos os campos que criamos, tudo o que preciso fazer agora é simplesmente entrar com meu nome e depois entrar com meu preço, que é o que meu cliente forneceu a imagem do cartão do carro. Volte para minha pasta aqui e localize minha escalada. Então, vou usar a imagem número três para este exemplo. Arraste e solte aqui, e aí está. Então, deixe-me voltar a isso e deixar eu criar as cartas restantes e eu entrarei com você quando eu fizer isso na próxima lição. 178. Usando a coleção de CMS: Tudo bem, então aqui estamos. E eu criei todos os nossos oito carros. E se eu passar por eles muito rápido para que você possa ver o alcance ou caminhar. Então, exatamente a mesma configuração que mencionei, é exatamente a mesma e permanecerá exatamente a mesma, como você vê aqui. Se apenas levarmos você para testar o modelo X, por exemplo , porque é um carro elétrico. Você pode ver, por exemplo, que, no caso dos votos, ele não tem válvulas, obviamente. Então, NaNs para cilindros porque ele não tem apenas um a. Então foi assim que eu lidei com isso. E agora temos oito carros, todos preenchidos com informações mais uma vez, e você viu isso com as imagens que são fornecidas a você. Você pode simplesmente colocar as imagens, como mencionei. Então, vamos analisar rapidamente a mesma McLaren, mais uma vez, a mesma história. Então, para a imagem do herói do carro, colocando a imagem número um, depois as imagens 234.5, todas elas estão rotuladas. E para esta galeria final, que é multiimagem 67.8. Agora que temos todas essas informações, o que podemos fazer sobre isso? Então, vamos clicar em salvar alterações. Então, ele salvou. Então, se eu voltar para minha coleção de CMS, você pode ver que temos todas essas mudanças. Mas se formos para, digamos, páginas e depois para nossa página inicial, porque essa é a única página que temos. E o que podemos fazer aqui é inserir as informações aqui. Então, aqui temos essa embalagem de cartão de carro. E porque é uma grade simples, e se eu clicar aqui, as distâncias entre elas são 32. Então, vamos recriar isso rapidamente. Então, o que eu preciso fazer é onde estão meus elementos? Você pode ver que temos as listas de coleções. Então, o que posso fazer é clicar na lista de coleções, arrastá-la e soltá-la aqui, logo abaixo da minha coleção exclusiva de carros, e aqui está completamente vazia. Então, o que posso fazer é clicar duas vezes para conectar uma coleção. Você pode clicar duas vezes aqui ou clicar aqui, onde diz fonte. E essa janela de diálogo vai aparecer. Basta clicar aqui. E com as coleções CMS , só temos carros. Então veja o que acontece agora quando eu faço isso. Quando eu clico em carros, ele extrai as informações de todos esses detalhes que extraímos. Então, o que vou fazer a seguir é simplesmente deixá-lo lá. E digamos que o que eu posso fazer é se eu abrir isso, você pode ver que temos a lista de coleção e eu vou dar a ela um nome, chamá-la de coleção de carros, uma lista só para que saibamos que esses são os carros lá dentro. E quando abro o interior, você pode ver que finalmente temos itens de coleção. Então, dentro desse item de coleção, o que vou fazer é pegar uma dessas cartas, simplesmente pressionar o Controle C, entrar no item de coleção de carros e pressionar o Controle V. E você pode ver, obviamente, ele vai colar as informações que eu incluí dentro. E parece exatamente o mesmo para todas elas porque ainda não dissemos a elas o que fazer. Vamos até o topo. E o que podemos fazer na verdade é pela lista de coleções ou até mesmo pelo contêiner, o que podemos fazer, vamos ver. Para a lista de coleção de carros, deixe-me criar essa grade. Então, quando eu clico aqui, eu posso incluir o espaçamento de 32 líquidos se eu posso incluir outra coluna, e então eu vou remover essa linha. Então, só vamos ficar com três, como temos na linha logo abaixo. E porque não precisamos deles, porque já incluímos a placa do carro dentro, que já tem o efeito de flutuação. Você pode ver que ele está herdando um seletor. Se eu clicar lá, você pode ver que é o cartão do carro. Então, quando eu clico em pré-visualização aqui, você pode ver que meus efeitos de foco ainda funcionam. Então, basicamente, a embalagem de cartões de descarte não precisa mais estar aqui. Então, vamos clicar em Excluir e nos livrar dele. E para a lista de coleção de carros, rapper, o que vou fazer neste caso é dar, por exemplo não quero dar nenhuma aula. O que vou fazer é dar a ela a margem máxima de 64. E isso só vai diminuir um pouco. Então, para a lista de coleção de carros, neste caso, o que vou mostrar e adicionar uma classe combinada de, digamos, para casa. Só para sabermos que estamos na página inicial, por exemplo , mas eu posso ir é acessar Configurações. E se eu selecionar, vamos ver. Não sei, podemos filtrá-los , podemos fazer qualquer coisa. Mas, neste caso, o que vou fazer, vamos primeiro conectá-los. Então, ao selecionar o item, você tem essa opção e pode ver obter imagem de carros, que é nossa coleção. Então, quando você clicar ali, ele perguntará qual campo. Então, a imagem do cartão do carro é o que vamos extrair. E imediatamente você pode ver que está me mostrando carros diferentes da minha coleção, o que é fantástico. Então, quando eu clico ali mesmo no escuro do H3, o que vou fazer é pegar textos de carros, selecionar o campo e vou apenas selecionar o nome. Assim, você pode ver automaticamente que ele sabe qual nome eu quero usar, porque foi isso que dissemos que ele fizesse. Em qualquer um deles, posso selecionar este, por exemplo, e obter texto de imagens. Obviamente, esse será o preço do carro. Aí está, você pode ver as atualizações dos preços reais em todos os meus carros. Isso me permite conectá-lo. Clique aqui, selecione o campo. E isso vai ser, vamos ver, vamos ver, vamos ver preço do carro, nome, tipo, ano de produção, eu acho. Sim, produção aqui. Aí vamos nós. E, finalmente, esta última será a quilometragem. Então, vamos conectá-lo aqui. Então, vamos ver onde estamos aqui, quilometragem, aí vamos nós. Então, agora temos todos os nossos carros incluídos conectados corretamente à nossa lista de coleções. Esse efeito de foco funciona em todos eles. Então, o que podemos fazer neste caso é eu ter esse invólucro. Posso limitar meus itens e mostrar três itens, por exemplo, e aí está. Agora temos nosso layout original, mas você pode ver que isso está meio errado. Então, o que posso fazer é clicar e adicionar uma nova ordem de classificação. Portanto, posso usar o alfabético inverso ou alfabético ou posso nomear texto sem formatação. Então, vamos ver o que posso fazer ou adicionar um novo filtro. Vamos ver o que podemos fazer aqui. Como podemos encomendá-los? Talvez por ordem de classificação. Aqui vamos nós. Então, ordem ordenada, vamos reduzir essa ordem de classificação, ir até o fim. Criado do mais antigo para o mais novo, do mais novo para o mais antigo hit Salvar. Deveria fazer isso. Não. Vamos do mais antigo para o mais novo. E aí vamos nós. Finalmente, finalmente, temos esse pedido que precisamos incluir aqui. Então, lá vamos nós. Temos Lamborghini Cadillac e Lucid Air. E se eu voltar para cá, teremos o mesmo efeito aqui. O que falta aqui é esse botão. Então, deixe-me apertar o botão de pinos do tipo Control K. Clique em estilizar nossos botões. Então, botão principal, principal. Aí vamos nós. E esse botão deve escrever C. Todos os carros. Veja todos os carros. Aí está. E tudo o que eu quero fazer aqui é talvez colocar esta seção como uma pilha vertical e talvez centralizar meus elementos assim. E esse botão terá uma classe de combinação ou ainda melhor. Eu posso porque eu já usei o wrapper da lista de coleções. E onde eu coloquei isso? Eu adicionei aqui. Portanto, também posso adicionar um embrulho de lista de coleções aqui. Aí está. Porque temos a margem 64 e deixe-me criar a margem de 64 na parte inferior desse botão. E se eu selecionar esse botão ao passar o mouse no XD, você pode ver que agora temos 64. Então aí está. Agora você sabe como conectar seus itens à sua lista de coleções. E dentro das configurações, você pode brincar com todas essas configurações diferentes. Você pode até mesmo adicionar atributos personalizados como valor do nome e coisas assim. E basta clicar em excluir. Se você não quiser colocar algo dentro, você pode paginar itens. Então você vai adicionar as setas aos pontos para a paginação. E você pode mostrar um limite e mostrar quantos itens deseja limitar. Aqui temos três na próxima página que vamos criar, teremos oito. Então é isso que vamos abordar no próximo vídeo, porque agora isso está concluído. Vamos ver a prévia. Aí vamos nós. E agora isso não nos leva a lugar nenhum porque primeiro precisamos criar uma página e atribuí-la a uma coleção específica, que então nos levará a esse lugar. Então, para o final deste vídeo, vamos criar rapidamente uma nova página. Crie uma nova página. Chame isso de carros, que será esta página aqui para os carros. E basta clicar em Criar. Algo aconteceu aqui na navegação. Então, deixe-me voltar para minha página inicial. Deixe-me ver o que acontece. Então, por qualquer motivo, ele o posiciona aqui. Então, talvez eu mude de classe ou algo assim. Deixe-me verificar o contêiner. Deduza algo não. Lado do contêiner, barra de navegação. Vamos escolher uma horizontal. Vamos até aqui. Não sei por que fez isso. Deixe-me ver meu logotipo. Certifique-se de que seja o primeiro. Itens de navegação, garante que estejam perdidos por qualquer motivo que tenha feito isso. Então, deixe-me voltar à minha instância e ver o que aconteceu aqui. Porque eu acabei de fazer isso para minha barra de navegação. E você pode ver que ele quebrou alguns layouts aqui e ali. Então, deixe-me ver o que eu fiz. Deixe-me, deixe-me realmente descobrir isso e eu voltarei para você no próximo vídeo. E essas coisas acontecem, especialmente quando você tenta conversar ao mesmo tempo e descobrir essas coisas. Então, no próximo vídeo, vou mostrar qual foi a solução real. Mas eu acabei de adicionar uma classe de combinação que quebrou um pouco nosso layout. Então, nos vemos no próximo vídeo. 179. Construção de páginas de carros: Tudo bem, então, como mencionei, vou te mostrar o que fiz e o que fiz de errado. Então, você sabe, quando algo assim acontece, o que fazer. Normalmente, porque essas classes herdam umas às outras, porque usamos um contêiner de classe para todos os nossos contêineres. Aqui mesmo. Acabei de adicionar o flexbox e ele quebrou todos os meus contêineres. Então, o que vou fazer aqui é porque temos esse contêiner, vou simplesmente adicionar uma classe combinada de cartas. Cartões. Aí vamos nós. Para esta classe combinada. Agora, vou colocar a flexbox vertical e garantir que ela funcione exatamente aqui. Você pode ver se eu começo do topo, temos a navegação, temos essa seção, essa seção. Então, tudo funciona como deveria. Parece ótimo. Isso funciona bem. Isso parece bom. formulário de contato funciona bem. Tudo funciona bem porque acabei de adicioná-lo ao próprio contêiner e não percebi porque estou falando com a gravação e com todo tipo de coisa. É por isso que isso aconteceu. Agora que esta página inicial finalmente está pronta, o que podemos fazer é, como mencionei no vídeo anterior, acessar a página do curso que acabamos de criar. Então, se eu clicar aqui, você pode ver que o fundo é herdado para o corpo. Então, se eu clicar ali e vir aqui, você pode ver por qualquer motivo. Mas as páginas antigas devem ser aplicadas a essa cor cinza claro, cor do corpo. Aí vamos nós. Na verdade, deixe-me voltar à página inicial e selecionar meu corpo por qualquer motivo que tenha criado isso. Então, vamos remover essa classe e selecionar o corpo das páginas antigas. E vai herdar a cor do corpo, que é o que eu realmente quero. Então, tudo aqui funciona como deveria. Vamos voltar à página do curso mais uma vez e começar a usar o poder desses símbolos. Então, primeiro de tudo, preciso realmente mostrar a vocês o que vamos projetar aqui. Então, vai ser bem simples. A única seção que vamos realmente criar é essa seção aqui. Então, vai ter apenas isso copiado, esse texto. E só vai ter o círculo e a imagem de um carro lá dentro embaixo. Teremos basicamente essa mesma seção mas sem nenhum limite em nossos itens. E vai mostrar todos esses itens sem o botão. E então vamos simplesmente reutilizar esses elementos abaixo. Então, vamos começar com isso. Então, o que vou fazer primeiro é deixar eu te levar de volta para aqui. Vamos começar com a barra de navegação. Arraste e solte-o dentro. E deixe-me usar o, vamos ver o que faremos. Primeiro, entre em contato conosco e depois o mapa. Então, eu também posso bater no corpo, pressionar o botão Control K no mapa. Vai mostrar o símbolo do mapa, clique aqui, pressione Control K, digitando rodapé. E vai mostrar símbolos de rodapé. Então, basta clicar aqui e você verá que está herdando o espaçamento que definimos para a margem superior. Portanto, funciona como qualquer outra ferramenta de design, como XD, figma, sketch ou qualquer outra coisa. Quando você configura seus componentes e os cria, isso só vai te mostrar isso, tudo isso. Então, primeiro de tudo, vamos começar com a criação de uma seção. Selecione seu controle corporal, Kate, já estive na seção e dê a ele uma classe de seção. Aí vamos nós. Vou posicionar esta seção logo abaixo da minha barra de navegação porque é ela que vai conter o texto, a imagem, essas duas imagens dentro. Então, em seguida, vamos prosseguir e pressionar Control K digite em div. Essa div será nosso contêiner. Assim. E dentro desse contêiner, o que podemos incluir é, por exemplo Control K no cabeçalho do pino. Vamos usar o Título H1, usar todos os cabeçalhos H1. Vamos ver, por qualquer motivo, não incluía isso. Então, vamos com Poppins. A cor do parafuso 64 será dessa cor, mais escura. E deixe-me me lembrar da altura. A altura será de 86. Aí vamos nós. E vou adicionar uma classe de combinação centrada em H1. Aí vamos nós. aqui eu vou fazer essa mudança. Então, basta clicar para que fique no centro. Aí está. E, por enquanto, vou apenas colar esse texto. Agora abaixo desse texto está meu controle div Kate, mas div, esse bloco div, vou chamá-lo de carro herói. Cartão de herói. Aí vamos nós. E dentro desse carro herói, o que vou fazer é simplesmente colocar essas duas imagens, então Control K, aquela imagem. E essa primeira imagem pode ser daquele carro do lado. Aí está. E eu posso usar todos os textos dos ativos. Aí está, porque se chama Mercedes Benz, eu acho. Por fim, pressione Control K, digite uma imagem e adicione uma nova. E esse vai ser esse círculo azul. Adorável. E, finalmente, o que faremos por esses dois é, vamos ver, talvez. Talvez eu possa transformar isso em um flexbox como esse e garantir que meus itens estejam centralizados verticalmente. Talvez para a posição desses, o que eu possa fazer talvez seja pelo próprio carro do herói, eu possa ir aqui, enquanto a posição lá está, e clicar em relativa. E esse carro pode ser absoluto, por exemplo, mas acho melhor fazer isso primeiro com esse círculo. Tão absoluto, aí está. E vamos ver, acho que o carro pode ser relativo. Por exemplo, vamos ver. Em primeiro lugar , vamos chamá-lo de carro, herói, IMG. Aí vamos nós. Vamos ver. Aqui, o que podemos fazer, na verdade, é ver. Sim, vamos colocar o carro como relativo. Na verdade. Em vez de estático, vou dizer que é relativo. E eu vou dar a ele um índice Z de cinco. E esse círculo, eu vou dar um índice Z de um, talvez algo assim. Então, tudo ficará bem centrado por dentro. Agora, em termos de nosso carro herói, não vamos dar a ele nenhuma dimensão. Vamos ver. Esta carta de herói. Vamos dar a isso uma margem, margem superior de talvez 64, o que só nos dará um layout distinto e distinto e apenas reduzirá layout distinto e distinto e apenas um pouco nosso conteúdo. Agora, isto é, vamos renomeá-lo e vamos chamá-lo de cars hero, BG circle. Aí está. E aqui o que faremos é simplesmente centralizá-lo um pouco melhor em algo assim. Então eu posso até mesmo movê-lo um pouco para cima ou para baixo. Na verdade, tudo depende. E esse carro vai dançar um pouco, mas não se preocupe. Como você pode ver, agora temos nosso layout. Obviamente, mais tarde. Vamos brincar com isso e reduzir o tamanho desse círculo. Obviamente, é muito grande agora, mas tudo funciona como deveria, mesmo nesta segunda página, por qualquer motivo que esses links tenham chegado ao site. Então, deixe-me corrigir isso muito rapidamente. Se eu acessar minha página inicial, clique aqui, vá para as configurações do tablet. Vá para dentro. Vamos ver se eu clico em mostrar. Sim, então esses links não têm o emparelhamento. Então, agora vou incluir o emparelhamento de 20 acolchoamentos esquerdos. E isso só vai movê-los um pouco. E isso deve funcionar para o problema, mas aqui temos um novo problema. E vamos abrir os itens de navegação. E para a cor de fundo, talvez eu possa me livrar da cor de fundo. Aí vamos e fazemos o mesmo com este último. Clique aqui, livre-se dele. Então, basta clicar aqui, onde está vazio. E agora resolvemos o problema. Então, se eu clicar aqui e depois aqui, tudo funciona como deveria, e agora eles estão prontos para começar. Se voltarmos para a página do nosso curso e testarmos isso aqui. Se eu visualizá-lo muito rapidamente, clique para abrir. Agora você pode ver que temos esse espaçamento intermediário. Agora que esta seção está concluída, eu realmente posso fazer é passar para a próxima seção, que em nosso design, se você se lembra, são esses carros. Então, nossa coleção exclusiva. O que posso fazer é voltar ao fluxo de trabalho. Clique em minhas páginas, vá para a página inicial e isso é ótimo sobre o Webflow. Posso clicar aqui e usar essa seção inteira. Então você pode ver por qualquer motivo que eu o dei para a classe de seções. Então, vamos renomear essa classe e chamá-la de coleção ou são exclusivas. Não consigo digitar, por exemplo, coleção colusiva. Aí vamos nós. Eu só vou pressionar o Controle C nessa seção. Volte para a página do meu curso. Selecione meu controle corporal V, e ele será colado nessa seção na parte inferior, aqui está aqui. Eu posso arrastá-lo até aqui. E você pode ver que ele manterá o mesmo espaçamento de antes. Mas agora vou clicar em duplicar a classe e depois simplesmente renomeá-la como carros. Porque eu quero ter certeza de que está aqui nesta página. Então, esta é a página do curso e esta é a página inicial. Então, se eu selecionei aqui, você pode ver se eu fecho esta seção é apenas uma coleção exclusiva, que é o que eu quero. Então, quando eu fizer alguma alteração, ela não será propagada para esta página, mas permanecerá somente na página do curso. Então, quando eu seleciono isso, primeira coisa que eu quero fazer é me livrar desse botão. Em seguida, selecione minha embalagem da lista de coleções, clique aqui e então temos a casa aqui. Então, vou duplicar a classe aqui também e dar a ela um nome, carros. E vamos ver o que mais temos. Acho que temos uma nova lista de coleções. Nós fazemos. Então, vamos duplicar isso e chamá-lo de carros aqui também. Aí vamos nós. E item de coleção. Não temos nada, então agora tudo funciona bem. Sim. Então, na embalagem da lista de coleções, vou até as configurações e mostrarei meus oito itens. Aí vamos nós. E agora está apenas aparecendo como deveria aparecer em primeiro lugar. Então, se eu clicar em pré-visualização aqui, você pode ver que agora temos a página do curso, então temos essa imagem na parte superior. Não sei por que ele continua pulando para cima e para baixo, mas não deveria. E aqui temos isso. Então, tudo funciona como deveria. Eu acho que isso é ótimo. E vamos ver, para isso, talvez possamos limitá-lo. Então, para o contêiner, vamos ver um aqui, um carro. O que eu posso fazer é adicionar algumas margens para que eu possa usar o automático e eu posso usar o automático aqui à esquerda e à direita. E espero que isso acabe com o salto. E para a imagem do herói, esta, posso dar a ela uma largura máxima de 100 por cento, o que ela já tem. E eu acho que é isso. Acho que isso vai resolver o problema a longo prazo. Como você pode ver, assim que eles entram no modo de visualização, rolam para cima e para baixo, ele se corrige sozinho. Mas quando estamos pré-visualizando, ele vai pular para a esquerda e para a direita. E quando eu clicar para abrir essas novas páginas posteriormente, você verá esse problema acontecendo novamente. Mas com essa nova página e com todas essas imagens diferentes que criamos e falando sobre a nova página, vamos voltar para a página inicial. E aqui o que temos nas páginas é que temos nosso modelo de carros, que é a página que vamos criar a seguir, e nos vemos no próximo vídeo quando abordaremos isso. E isso terá muitas informações diferentes que já criamos. Então, eu vou te ver lá. 180. Construir modelos de carros: Para que possamos incluir todas essas informações que colocamos em nosso CMS. Precisamos usar esse modelo de curso, que é criado automaticamente. Então, quando eu clico ali, você pode ver que nada realmente acontece. Então, quando eu seleciono o corpo, deixe-me verificar. Ele herda esse corpo todas as tags de páginas. Então, a cor do corpo, o que é bom, mas como você pode ver, não há elementos internos. Então, deixe-me pressionar Control K e digite na barra de navegação. Vamos adicionar nossa barra de navegação e criar esta página da mesma forma que fizemos anteriormente. Então, o que vou fazer a seguir é pressionar Control K e digitar o formulário, Fale conosco controle do formulário K, digitar no mapa e Control K e digitar no rodapé. Aí está. Agora temos todos os nossos elementos regulares como fizemos em todas as páginas anteriores, mas ainda temos as informações aqui. Então, se eu voltar para o XD, o que precisamos incluir é um monte de informações nele. Então, vamos começar. Vamos fazer isso e criar todas essas informações. Se eu voltar aqui, o que eu preciso obviamente é de uma nova seção. E eu vou colocar na classe da seção, da mesma forma que eu sempre faço. Coloque-o logo abaixo da minha barra de navegação. E dentro dessa seção, vamos primeiro chamá-la, por exemplo, detalhes do carro como esse. E dentro dessa seção, vamos ver o que podemos fazer é colocar um bloco div, div, chamá-lo de container. E, imediatamente, forneça a ele outra classe de detalhes do cartão. Recipiente como esse. Então, esses são os detalhes do cartão, descarte o contêiner de detalhes apenas para que saibamos o que estamos fazendo. E então vamos ver. Podemos fazer mais mergulhos. Então Control K, digite def. A primeira será a informação do cartão. E essa é a informação que estará no lado esquerdo da página. Imagens e todo o texto abaixo. E você pode ver isso aqui. E, finalmente, pressione Control K mais uma vez e adicione outro div. E essa div, eu vou chamar de carta de ação de carro, que é aquele carro que estará do lado direito e ficará no topo e depois nos seguirá estará do lado direito e ficará enquanto rolamos para baixo. Então, o que podemos fazer aqui com o contêiner é ligar o flexbox, usar minha horizontal. E vamos ver, podemos colocá-lo no topo e posicioná-lo desta forma. Então, para as informações do carro em si , elas precisam ter um pouco de largura. Então, vamos com 65 por cento. Aí vamos nós. Para o Cartão de Ação do carro, o que podemos fazer é usar talvez 30%, algo assim. E, obviamente, terá esses cinco por cento no meio, assim. Então, finalmente, o que eu quero fazer é talvez usar uma pequena margem aqui no contêiner. Talvez use algo como 40 no topo só para nos diferenciar um pouco da navegação. E então vamos começar com o Cartão de Ação do carro, na verdade. Então, o que eu posso fazer primeiro é, vamos ver. Vamos primeiro dar uma olhada no design. Então aqui temos esse rótulo, temos textos, esses textos e dois botões e um fundo branco com um raio de canto de oito, eu acho. Sim, aqui vamos nós. Então, deixe-me voltar ao meu design. Vamos selecionar o Cartão de Ação do carro. Vamos começar a colocar o conteúdo lá dentro. Então, vou pressionar Control K. Mas antes de realmente fazer isso, vamos voltar aqui, onde diz imagem e gradiente e onde diz Cor, vou selecionar uma cor branca. E vou escolher o raio do canto para ser de oito pixels, valor y. Em seguida, ele tocava a tecla Control e tocava em h3, cabeçalhava e selecionava h3 aqui. Para esta idade de três anos, vamos ver. O que eu posso fazer é dar. Vamos ver todos os cabeçalhos h3. Vamos ver como isso parece. Mais uma vez. Então, vamos nos livrar desse h3c, o que temos escuro. Mais uma vez, não herdou nenhum estilo. Não sei, não sei o que aconteceu. Então, livre-se de todo esse H3 para este, Poppins. Eu realmente não sei o que acontece com 24. E vamos ver, isso deve ser 40 e a cor deve ser aquela cor de três anos. Aí vamos nós. Agora vou digitar algo como o nome do carro. Aí está. Vou pressionar o Controle C, Controle V. E esse H três vai ter h três azul. Aí vamos nós. Estamos herdando dívidas. E abaixo disso, incluiremos o Controle K p para o parágrafo. Vamos colocar todos os parágrafos. Mais uma vez, ele não herdou o atributo de estilo. Não sei o que acontece porque toda vez que você faz isso, ele herda o estilo que deveria. Então, vamos com 16. E vamos continuar, o que podemos fazer aqui? Vamos ver, 26 talvez. Então 26. E neste caso, deixe-me escolher essa cor escura, por exemplo, assim deveria ser. E diga que está disponível para retirada agora e você poderá ver como a placa está realmente se expandindo. Então, o que vamos fazer nesse caso é talvez possamos colocar isso em um div agora mesmo. Então aperte Control K. Eu fui div e coloquei tudo isso dentro de um div. Assim. Então, essa div deve ser chamada de algo como ação do carro, conteúdo, conteúdo do cartão de correção, algo parecido. E deveria ter um acolchoamento dentro de talvez 24 neste lado. Porque eu quero removê-lo da borda esquerda da minha tela, algo assim. Dentro da dívida, o que eu posso fazer é pressionar Control K, digitar B para o botão. E vou selecionar meu botão principal aqui. E esse botão principal também pode ter uma classe separada de botão de ação do carro. Aí vamos nós. Talvez eu possa simplesmente digitar algo como reservar. Esse carro. Aí vamos nós. Acho que isso vai funcionar muito bem. Então, o que vou fazer é pressionar Control C, Control V para colar nesse botão. Eu vou me livrar dessas aulas. Para esta aula, vou duplicá-la e simplesmente chamá-la de “ Vamos ver o esboço de Batson”. Para o esboço do botão, teremos a mesma coisa aqui, mas C, opções de empréstimo. Aí vamos nós. E o que temos aqui, vamos ver. Reserve este carro para que ele tenha a mesma largura. Então, talvez eu possa ter 47 estofados aqui. Então, vamos reduzir isso um pouco para 47 apenas para que possamos combinar o tamanho desses dois botões. Esse contorno do botão deve ter, digamos, a cor branca porque o fundo é branco. O texto interno deveria ser, vamos ver, não esse, mas talvez esse. E deveria ter um esboço como esse. Mas em vez de preto, vamos dar esse esboço. E o raio do canto ainda é oito, e vamos preenchê-lo. Vamos ver o quanto os separamos aqui de 24. Portanto, o rolamento superior deve ser algo como 24 e o acolchoamento inferior também deve ser 24. Então, isso apenas nos dá esse espaço para nosso cartão na parte inferior. Então, aqui o que podemos fazer é dar a este parágrafo algo como pickup, P pickup. Agora vamos ver o que temos para as distâncias em nosso design. Temos 24 e depois temos 24 aqui. Então, vamos fazer isso. Então, vou selecionar aqui e digitar algo como s104. Estou segurando a tecla Alt e fazendo isso ao mesmo tempo. Então, isso parece bom. E, finalmente, para o contorno do botão, o que eu quero fazer é mudar isso para passar o mouse. Dentro da capa. Vou mais uma vez mudar isso para branco, depois mudar a cor do meu texto para talvez este parágrafo h3, digamos e vamos ver, mudar a cor desse contorno para três anos de idade parágrafo também. Deixe-me me esconder para que você possa ver um pouco melhor. Assim. N herdará toda essa largura. Então, quando eu clico na pré-visualização muito rapidamente, você pode ver o que temos até agora. Então reserve este carro, adorável. E temos apenas opções de C. Sim, eu acho que isso funciona bem. E em vez de eu ir e voltar com o texto aqui, o que eu posso fazer é simplesmente conectar. Então você se lembra de como criamos essa coleção de CMS anteriormente, e esse é o modelo de cicatrizes. E aqui você pode ver o carro que quiser . Atualmente, estamos em uma página de furacões da Lamborghini, mas você pode mudar isso a qualquer momento. Assim, você pode obter textos do campo de seleção de carros e eu vou selecionar o nome. Então, como estamos no furacão Lamborghini, ele vai trazer esse nome para dentro. Então este também vai aparecer, selecione o preço do carro de campo. E este é apenas o normal que vai para lá. Agora, como esse azul tem o preenchimento na parte inferior, vou me livrar dele, mas H3 azul e eu vou chamá-lo de carros, modelos de carros, porque está localizado aqui. Eu vou me livrar dele porque isso está herdando esse espaçamento aqui. E o conteúdo do carro. Talvez possamos ter um pouco de acolchoamento desse lado. Então, talvez possamos digitar algo como oito ou algo do lado direito. Vamos ver. Sim, acho que oito vai dar certo, só porque quer escalar em tamanhos menores e apenas se endividar. Bem, basicamente esse conteúdo de carro está quase pronto, mas o que precisamos, além disso, é que precisamos desse rótulo. Então, vamos criar outra div. Então aperte Control K digite def. E coloque isso em cima, aqui mesmo. E para isso, o que podemos fazer é, por exemplo, chamá-lo de carro ou etiqueta. Aí vamos nós. E para o carro e a etiqueta, o que posso fazer é dar um pouco de largura. Então eu vou dar 108. Então essa será minha largura e a largura máxima será algo como 140. Talvez. Podemos verificar isso mais tarde e ver se funciona. Para a cor de fundo. O que podemos fazer é escolher a cor do corpo. Assim. Porque se eu levar você ao nosso design, você pode ver que é isso que está fazendo. Aqui. O que faremos é incluir esses elementos em. Então, primeiro o que eu preciso é colocar esses elementos dentro. Então aperte Control K digite a imagem. Para a imagem, o que eu quero é obter imagens de carros, digamos, de campo. E vamos ver a etiqueta do tipo de carro, que é o que precisamos. E neste carro, por ser um supercarro, você pode ver que ele está chegando desse campo. Desculpe. E agora, no rótulo atual, o que preciso fazer é incluir o texto do parágrafo. Então, o que eu posso fazer é pressionar Control K, digitar P, entrar com o parágrafo. E vamos dar um parágrafo. Vamos ver, vamos ver textos rotulados. Porque, na verdade, é menor e temos essa classe simplesmente chegando ali mesmo. E eu posso selecionar isso. Vamos ver, dê para o supercarro do Texas. Mas antes disso, quero selecioná-lo e receber mensagens de texto de carros. E esse será o tipo de carro. Então, ele virá do próprio tipo de carro. Aí está. Agora, para fazer isso grudar um no outro, vou ligar o flexbox. Certifique-se de que eles estejam centralizados aqui. E vamos ver, certifique-se de que nossa imagem não tenha nenhum emparelhamento estranho, mas nossos textos têm. Então, vamos nos livrar disso. Vamos com zero. Agora, estão centralizados e esse será, vamos ver, o ícone da etiqueta do carro. Eu entendo. E se eu voltar ao nosso design, você pode ver que temos a distância de oito entre esses dois. Então, terá apenas a margem direita de oito. E, finalmente, vamos colocar um pouco de acolchoamento lá dentro. Então, o que eu posso fazer é, talvez, para o carro, uma etiqueta aqui, eu possa entrar com 16 em cada lado. Eu acho que isso parece bom. Mas para as larguras, vamos usar 140 aqui também. Aí vamos nós. Eu posso até mesmo fazer um reset. Vamos ver como isso parece. Ótimo. Ok. Vamos ver 24 de cada lado, aqui. Então, vamos com 24. Mais uma vez, segurando minha tecla alt. Aí está. E desse lado, vou colocar 24 apenas para que corresponda ao meu conteúdo abaixo. Mas aqui você pode ver que temos esse problema, então precisamos dar um pouco de largura. Então, vamos com 140, eu acho, porque esse é o mais longo. Vamos ver, algo como um e trinta e dois, talvez. Podemos dar a largura máxima de um terço e, acho que vai funcionar muito bem. E a largura aqui será, digamos, 132. Então eu acho que vai ser bom. E eu não vou lidar com a altura porque eu já coloquei esse par, mas talvez eu possa adicionar uma proibição adicional de oito. E isso só vai me dar um espaço adicional lá dentro. E, finalmente, isso tem um raio de canto de quatro, então vamos lidar com isso muito rapidamente. Então, aqui no rótulo atual, vou rolar para baixo digitar quatro e adicionar esse preenchimento dentro. Então, lá vamos nós. Agora temos nosso cartão. Então, se eu alternar entre essas páginas, aqui estamos em um furacão Lamborghini. Você pode conferir este, por exemplo, e ver como fica para o Maclaurin porque o texto é um pouco mais longo. E se eu mudar para este, por exemplo, você pode ver que tudo muda, incluindo este. Mas eu não sou realmente fã de como isso parece. Então, talvez possamos mudar isso. Portanto, não é o mesmo, mas de qualquer forma, ele apenas mantém o espaçamento muito bom. Portanto, temos o rótulo atual e talvez possamos ajustá-lo para algo ainda menos como 128, talvez algo parecido. Então, agora, quando alternamos entre eles, sim, parece um pouco melhor. Então, quando eu clico em pré-visualização aqui, você pode até mesmo fazer isso aqui e ver como são todas elas. Então, vou parar o vídeo aqui porque já estamos a 16 minutos. E quando voltarmos, começaremos a abordar esta seção, que é um pouco mais exigente do que esta. Então, eu vou te ver lá. 181. Parte 2 da construção do modelo de carros: Tudo bem, vamos continuar de onde paramos e lidar com a parte mais difícil desse projeto, porque agora temos que criar essa página e esses elementos dentro daqui. E eles vão ser bem complicados, mas tente me acompanhar. Caso contrário, você sempre pode simplesmente clonar esse projeto ou abri-lo e tentar fazer isso mais uma vez. Então, primeiro de tudo, vamos começar com uma div. Então, pressione Control K digite em div. E essa divisão será chamada de carro. Galeria de carros. Talvez as informações do seu carro, digamos. Deixe-me verificar meu projeto original e ver. Então, galeria de carros, porque essas são as informações do carro. Sim. A galeria de carros. E dentro dessa galeria de carros, o que vou fazer é clicar em Control K type in div. E essa div será chamada de car hero image, IMG. E dentro da dívida, o que eu posso fazer é colocar na minha caixa de luz. Então aperte Control K, digite a caixa de luz. Aí vamos nós. Com a caixa de luz. Está completamente em branco, então você precisa obter informações de algum lugar para primeiro configurar. Então, obtenha mídia de carros. E o primeiro campo que vou fazer é selecionar, digamos, a imagem do herói do carro. Então, volte para aqui. Vamos ver, minha caixa de luz funciona. E vamos dar a ele o nome de herói do carro, lightbox. Imagens. Aí está. E agora o que eu preciso fazer é onde diz imagem, vou selecioná-la e vamos ver, precisamos configurá-la para que ela extraia imagens. Então, pegue imagens de carros e selecione o campo, digamos, a imagem do herói das cartas. E como estamos no furacão Lamborghini, ele funciona, mas não o cartão do carro, mas a imagem do herói do carro. Aí está. Então, número um. E agora que isso está concluído e está pronto, o que precisamos fazer é colocar esse rótulo que vimos aqui, que diz c todas as imagens. Então, vamos lidar rapidamente com isso. Então, o que vou fazer aqui dentro da imagem do herói do carro é pressionar Control K, digitar def e posicioná-lo logo acima da minha caixa de luz. E eu vou lhe dar o nome de C. Todas as imagens. E vamos dar um acolchoamento de 12 em cada lado. 121 de cada estilo, como este. 12 em cada lado. Vamos ver algo assim. E vou dar a ele uma cor de fundo de branco puro como dívida. E dentro disso, o que eu posso fazer é talvez você ter a largura máxima. Largura máxima de 145, só para não ir até o lado. A altura será automática. E dentro disso, vou adicionar rapidamente um parágrafo. Então aperte Control K, digite P para o parágrafo. E vou digitar meu texto e ver, ver todas as imagens. Aí vamos nós. E veja se o estilo funciona. Sim, porque é herdado para todos os parágrafos que funciona perfeitamente. Agora, nas imagens do herói do carro, o que eu posso fazer , vamos ver, é colocar isso, vamos ver. Portanto, a imagem do herói do carro será relativa. Essa. Tão relativo. E esse interior será absoluto. Então, vamos mudar a posição para absoluta, assim. E basta colocá-lo neste canto direito. Agora, em termos deste parágrafo, acho que sim, está mantendo isso. Então, se eu chegar a zero, ele deve permanecer o mesmo que é. E, finalmente, aqui o que posso fazer é brincar um pouco com o posicionamento. Então, talvez eu possa escolher um e talvez eu possa ir com um na parte inferior ou talvez dois. Vamos ver aonde isso nos leva. Sim, acho que dois funcionam bem neste caso. Mas se eu clicar em pré-visualizar, clicar aqui, você pode ver que agora temos apenas essa imagem dentro da nossa caixa de luz, então precisamos adicionar mais. E para fazer isso, vamos dar uma olhada aqui mesmo neste carro e na galeria desta imagem de herói automotivo. Aí vamos nós. E dentro das informações do carro, o que vou fazer é clicar em Control K e digitar a lista de coleta. Aí está. Esta lista de coleções será conectada à galeria de carros um. E terá essas quatro imagens, se você se lembrar. Então, se eu for até aqui e lhe der um nome de, digamos, carros, galeria. Um. Assim. Vá para minhas configurações e certifique-se de obter as imagens delas. Então, a fonte é essa. Então, carros Gallery One, o que é bom, voltem para aqui, e eu obviamente preciso atribuí-lo. Então, lista de coleção, item de coleção. Aqui você pode ver que temos essas imagens, então temos 234,5. Eles não estão na ordem correta. Então, o que podemos fazer muito rapidamente é ver, vamos ver. Talvez possamos lidar com a lista de coleções e mostrá-la como uma flexbox como esta. E talvez tenha certeza de que somos um espaço intermediário. Por aqui. Vamos ver o que podemos fazer. Coleção, lista, item, carro, galeria um. Por algum motivo. Não me mostra as imagens. Galeria um. Aí está. Ele me mostra as imagens , mas me mostra as imagens de fundo. Então, sim, eu deveria realmente colocar a caixa de luz dentro. Então, vamos nos livrar desse. O que eu posso fazer é dentro do item da coleção, ou vou fazer é pressionar Control, digitar K na caixa de luz e colocar a caixa de luz dentro. Então agora você pode ver que temos essa caixa de luz assim. Vou dar a ele basicamente o mesmo nome do primeiro. Então, eu vou direto para cá. Herói do carro, imagens da caixa de luz. Então selecione esta, imagens de herói de carro ou talvez de caixa de luz de carro. Bem, melhor ainda, agora vamos dar a você as mesmas imagens de car hero lightbox. Aí vamos nós. Então, exatamente a mesma classe. E, finalmente, temos que conectá-lo. Então, se eu abrir a imagem e obter imagens dela, você diz galeria de carros um. Então clique aqui e pronto. Agora temos todas as nossas imagens lá dentro. Agora, uma coisa em que devemos trabalhar é um pouco de espaçamento aqui. Então, vamos ver, obtenha mídia de carros. Galeria de carros 1, tudo bem. Então, agora tudo está conectado. Mas, na verdade, eu não quero isso. Porque se eu clicar em pré-visualização, agora você vê que não está se conectando, então preciso conectá-la a outras caixas de luz. Eu acho. Então, vinculado a outras caixas de luz aqui, o nome do grupo deve ser galeria de carros ou restaurante ou galeria. Ok, se eu clicar em pré-visualização, agora ele ainda está mostrando esta galeria de cursos. Deixe-me realmente ver qual é o problema aqui. Então, galeria de carros, vamos tentar essa. Aí vamos nós. Então, agora temos esse 1.234,5. Tudo funciona como deveria. Você pode ver como fica. E agora o que eu posso fazer, eu acho, é em vez disso, vamos brincar um pouco com algumas configurações. Então, em vez de ser um flexbox, talvez eu possa transformá-lo em uma grade. Crie quatro colunas aqui e livre-se dessa segunda linha. Pressione pronto. E eu acho que está tudo bem. Então, esta lista de coleções, vamos ver, a galeria de carros número um. Sim, a galeria Keras pode ter alguma margem na parte superior e a margem deve ser 24. Então, vamos com 24. Margem. Aí vamos nós. Então, agora temos a galeria de carros um. O que podemos fazer nesse caso é tentar um atrevido e duplicado. Então aperte Control C, Control V. Agora vamos renomear isso para duplicar essa classe, chame-a de Gallery to. E dentro desta galeria também. Na verdade, vamos tentar vinculá-lo com aquela outra caixa de luz. Então, lista de coleções. Vamos ver o que podemos fazer. Podemos vinculá-lo de alguma forma? Não podemos. Então, vamos ver o que mais podemos fazer? Então, vamos nos livrar disso. E o que eu posso fazer nesse caso é simplesmente adicionar uma nova coleção. Controle K, comece tudo de novo. Então, digitando coleção ou lista assim, e devemos vinculá-la também à galeria de carros. Na verdade. E isso vai lhe dar um nome. Então, o que podemos fazer é voltar para cá, para a galeria de carros, neste caso. Aí vamos nós. E isso vai nos mostrar isso. Então, 67,8. Então, lembre-se do que fizemos com este dentro do item da coleção que temos que colocar na caixa de luz. Então, vamos fazer isso aqui. Então, lista de coleção, coleção, item Control K digite na caixa de luz. Eu te disse que isso vai ser difícil. E agora temos que conectá-los. Portanto, uma caixa de luz deve se conectar a essa. Então, vamos selecioná-lo aqui, acho que pegue uma imagem da galeria de carros também. Aí vamos nós. Está mostrando isso. Então, 5678. Sim. Vamos ver o que podemos fazer nesse caso. Então, acho que podemos ter na lista de coleções, podemos colocar as grades da mesma forma que fizemos anteriormente, colocar na grade e dar a ela uma grade de três colunas de largura, talvez quatro colunas de largura. Portanto, ele permanece na mesma dimensão, livra-se dele aqui, clique aqui e vá para Configurações. E preciso ter certeza de que ele conecta a outras caixas de luz. Link de link da caixa com outras caixas de luz. E qual era o nome? Mais uma vez? Galeria de carros. Aí vamos nós. Então, vamos fechar tudo isso. Vamos até aqui. Galeria de carros. Aí vamos nós. Agora, quando eu clico na pré-visualização rápida, clique aqui. Não, ainda não foi vinculado por algum motivo, então vamos tentar isso mais uma vez. Assim, você não pode ver nenhum item encontrado por qualquer motivo. Então, vamos ver no link da caixa de luz de configurações. Talvez eu possa dar uma aula. Vamos ver, esta caixa de luz está recebendo mídia da mídia da galeria de carros 2. E vamos tentar. Agora. Aí vamos nós. Então, deveria ter obtido a mídia de. Agora, quando clico nessas páginas, você pode ver que temos todas as oito imagens. E quando eu os mudei, você pode ver que tudo funciona perfeitamente. Agora, uma etapa final é tentar fazer com que isso fique oculto. Então, o que posso fazer é fechar tudo isso, voltar ao meu estilo, selecionar a Ferramenta da Galeria de Cursos e tentar ocultar esses elementos e ver se isso funciona. E isso acontece. Então 2345678. Então, está na página, simplesmente não está visível. Então, eu posso até usar minhas setas aqui e listar para a esquerda e para a direita. Você pode ver neste caso, para que eu possa alternar entre eles. Tudo funciona como deveria. Simplesmente não é visível. Então, espero que sejam 14 minutos neste vídeo, você perceba que às vezes eu tenho minha abertura projetada aqui, mas às vezes nem isso vai funcionar corretamente. Então você tem que ser criativo com isso. Você tem que imaginar isso, você tem que superar isso. E às vezes esses problemas vão surgir. Mas mais desses problemas que você resolverá melhor como designer e desenvolvedor, você enfrentará com o tempo. Vou parar esse vídeo aqui. E no próximo vídeo, continuaremos com as informações abaixo. E eu vou mostrar como adicionar essas diferentes seções. E, basicamente, isso vai se repetir novamente. Vamos conectá-lo. Mas antes disso, vamos entrar rapidamente aqui. Então, vamos mudar para o Cadillac escalate, por exemplo, e você pode ver que ele está trocado. Então, se eu clicar em pré-visualizar aqui, clique em escalar. Tudo está conectado como deveria, o que é lindo de ver e nos salva várias vezes. Então, agora estamos criando um layout para nossos clientes pela primeira vez. E então, uma vez que eles trocam, você pode ver que ele deve ser atualizado. Acho que, por algum motivo, ele não foi atualizado. Então, vamos tentar este. Eu desenho uma caminhada. Portanto, ele é atualizado aqui, mas não aqui. Agora me mostra essas cores fortes. Então, se eu mudar para o próximo, talvez ele me mostre um alcance ou caminhada por causa da atualização. Então você pode ver que me mostra o Range Rover, vogue. Mas se eu voltar para a Vogue e clicar na prévia, agora ela me mostra o range Rover Vogue, que eu queria em primeiro lugar. Então, funciona. Só precisa de um pouco de tempo para ser atualizado, para que você possa ver que tudo funciona como deveria, como queremos. Vamos voltar para a Lamborghini porque foi aí que começamos. E, como eu disse no próximo vídeo, vamos começar com a próxima seção. Então, eu vou te ver lá. 182. Parte 3 da construção do modelo de carros: Agora vamos continuar de onde paramos. E acabei de perceber que isso não está dentro de uma div. Então, vamos pressionar Control K digite div e dentro porque deveria ser uma galeria de carros, mas eu apenas a coloquei do lado de fora para que não importasse. Vamos chamá-lo de topo da galeria de carros , talvez ou Kalgoorlie principal ou como você quiser chamar de seu. E vamos colocá-lo aqui. Isso deve ir aqui. Isso deve ir acima, isso deve ir acima disso e tudo deve funcionar conforme o esperado. Vamos dar uma olhada. Sim. Então, tudo funciona como deveria. E ainda não vamos lidar com o responsivo , porque essa seção ocupará toda a seção, toda a largura da seção e terá apenas o preenchimento 12º 20 interno. Também vamos esconder essas imagens e ter apenas uma imagem principal. Mas quando você clica, obviamente você também pode ter seu layout aqui. Você pode ver como fica em páginas diferentes porque esse é apenas um componente principal e só vai aparecer bem em todas as telas. Então, vamos voltar aqui e voltar à edição porque precisamos criar a próxima seção, que será essa seção de visão geral. Então, vamos fazer exatamente isso. Agora que temos o topo da nossa galeria atual, o que eu preciso aqui é pressionar Control K e colocar uma div, que chamarei de visão geral. Assim. Dentro da visão geral, o que vou fazer é colocar a altura máxima de 196, que é a altura máxima do que criamos anteriormente. Eu vou ter a cor de branco puro, assim. E eu vou ter o raio do canto de oito, eu acho. Sim. Então vamos entrar e ver o que precisamos. Portanto, precisamos do tipo H3 Control K em H para o tipo de cabeçalho em H três. E finalmente vai tirar a topografia de que precisamos, então vamos mantê-la e eu vou digitar uma visão geral. E para isso, vou adicionar uma classe combinada aqui, e vou chamá-la, por exemplo, de três anos. Informações sobre o carro. Aí vamos nós. E aqui o que faremos talvez seja colocar um pouco de preenchimento ou margem. Vamos ver. Vamos usar a margem zero aqui. Vamos usar a margem zero aqui. E vou colocar o par superior de 24. E vou colocar, digamos, margem esquerda de 24. Isso só vai me dar um pouco de espaço em termos disso para a visão geral, o que eu posso fazer é talvez vamos ver. Eu posso simplesmente colocar minha margem máxima de 24. Vou simplesmente empurrar esta seção aqui. Vamos ver, talvez, sim, seja isso. Então, vamos pressionar o Controle K mais uma vez porque agora precisamos inserir essas informações. Então, crie outra div, o bloco. E esse bloco eu vou chamar de Visão geral do carro porque é isso que é. E essa será a nossa grade. Mas antes disso, temos que lidar com essas pequenas seções chatas. Então, se eu levar você de volta aqui, aqui teremos uma grade de quatro colunas e duas linhas contendo oito itens no total. Cada item estará dentro de uma div separada. E essa div será a real. Então, vamos ver isso, que é o flexbox. Então, vamos começar. Vou pressionar o Controle K mais uma vez. Houve uma divisão. E dentro desse bloco div, que vou chamar de produção aqui. Opa. Eu não percebi que estava mudando isso. Então, vamos voltar para aqui. Portanto, desbloqueie a produção de cláusulas. Aqui. Aí vamos nós. E dentro dessa div, o que vou colocar é o controle de imagem K digitar na imagem, assim. E eu vou obter uma imagem do campo selecionado. E vamos ver o que podemos fazer. Na verdade, não, não vou tirar uma imagem porque já temos essas imagens. Então, isso vai ser, vamos ver, calendário, um ícone como esse e deixar que ele o insira imediatamente. Então escolha a imagem, deixe-me encontrar o ícone do meu calendário, que é aí, este ao lado. O que teremos é, vamos ver, um parágrafo, tipo Control K no parágrafo PIE. E ele conterá as configurações de parágrafo, o que é ótimo. Aqui. Vamos pegar textos do campo selecionado, e isso será no ano de produção. Vamos ver, ano de produção, produção aqui. Aí vamos nós. Produção aqui. Isso parece ótimo. Então, finalmente, o que vou fazer é transformar isso em uma pilha e garantir que eles estejam alinhados assim e garantir que meu parágrafo esteja definido como P. Vamos ver o que posso fazer. Talvez todas as avaliações sejam de carros P. Sim, vamos fazer uma revisão e nos livrar dessa margem inferior. E aí está. Agora, eles irão direto para lá. E o que vou fazer com este é ver quanto custou aqui. Acho que o espaçamento foi 16. Adorável. Então, vamos voltar aqui e simplesmente inserir 16 para a margem direita, que só vai empurrar isso para dentro. Não se preocupe com isso agora, porque vamos colocá-lo dentro de outra embalagem. Então, vamos ver. O que podemos fazer é para obter uma visão geral do curso, o que eu posso fazer é virar uma grade. Então, vamos usar quatro colunas. Como falamos, anelídeos têm duas funções, o que é bom, já as temos. Então selecione essa produção aqui, clique em Control C. Mas antes disso, deixe-me verificar uma coisa. Eu só vou colocá-lo no centro. E vamos ver, porque é uma criança da grade, mas o Flexbox acha que não parece muito bom aqui. Sim, acho que está bem, na verdade. Então, Controle C, Controle V. E a próxima é o que chamaremos de classe duplicada. Vamos ligar para a quilometragem. Para a quilometragem. Isso será um ícone de quilometragem de classe duplicado e substituirá a imagem pela quilometragem. Então, mais uma vez, você pode usar a pesquisa se quiser. Vou colocar isso e, para o texto, em vez da visão geral, o que vou fazer é usar a quilometragem. Aí vamos nós. Agora aperte Control C, Control V. No próximo, o que faremos é duplicar a classe. Será o tipo de combustível. Vamos imediatamente ouvir um substituto pelo tipo de combustível em voz alta. E vou substituir esse tipo de combustível de classe duplicada ICN pelo ícone do tipo de combustível. E substitua-o pelo ícone do tipo de combustível, que é o ícone de uma bomba. Deixe-me ver onde está. Aí vamos nós. Ótimo. Um último que eu quero adicionar é o controle C. controle V nesta linha é se eu duplicar a classe, ela será transmissão. Transmissão. E vamos selecionar o texto para isso. Transmissão, onde está, onde está o nível de transmissão. E para este, vamos duplicar isso e chamá-lo de ícone de transmissão. Ótimo. E vamos substituir a imagem pela transmissão, que é essa. E aí vamos nós. Então, agora vamos adicionar um novo. Controle C controle V, Controle C Controle V e Controle C, Controle V. Vamos agora lidar com esses. Primeiro de tudo, vamos duplicar esse. E será o tipo de motor. Vamos duplicar esse. E serão portas. Este vai ser um assento. E a última será a garantia. Aí está. Então, agora vamos um por um e substituí-los aqui. Então, isso vai ser uma garantia. Vamos substituir esse ícone de garantia e substituí-lo pela garantia, que é esse grau. O próximo deve ser, vamos ver, uh, assentos. Então, digite assentos de pintura. E isso deve ser substituído aqui. Então, sementes, ICN, substitua a imagem pelo assento, que está aqui. Essa é uma porta. Então, selecione-o aqui. Mais uma vez, quando você fizer isso, uma vez, ele se conectará e o que quer que seu cliente crie uma nova página, ele apenas conectará esses elementos em n, tudo funcionará perfeitamente. Então, é chamado de portas. Ícone. Para o ícone, para que ele saiba o que queremos. Encontre o ícone da porta, e aqui está, aqui. E, finalmente, esses serão os tipos de motor. Então, vamos substituí-lo aqui. Aqui, as notas do tipo de motor, e vamos substituí-las, obtiveram notas ICN de classe e gene. E vamos finalmente substituir isso. E estaremos prontos para usar o motor, que é esse. Isso é ótimo. Agora, finalmente, o que eu quero fazer é porque temos essa visão geral do grid car. O que você pode fazer é colocar um pouco de acolchoamento. Então, vamos colocar o emparelhamento de ambos os lados, algo como 20 aqui. E vamos dar uma margem na parte superior e inferior. Então, vamos ver aqui. Então, nós já temos, temos 24 e abaixo disso temos 32. Então, vamos fazer isso. Então, se eu voltar para aqui, o que posso fazer é voltar para o top 24, voltar para o fundo. Ou talvez ainda melhor eu possa colocar uma margem aqui. Então 24 porque eu quero o espaço externo e 32 porque eu quero que ele empurre para dentro. Mas por alguma razão ele não entrou. Vamos ver uma visão geral. Então, talvez eu precise colocar isso no próprio cartão. Então, acerte zero aqui. E eu posso clicar em todos vocês, na verdade, e digitar automático para a margem inferior e isso deve resolver o problema. Também não há nenhum pedido de pin aqui. Normalmente, o corrige automaticamente, mas isso não importa. Vamos lidar com isso aqui. Então, aqui vou digitar zero, mas para o emparelhamento vou usar 32 na parte inferior. E agora isso realmente resolve tudo bem. Quando a última coisa que quero fazer é ter certeza de que esse espaçamento está correto. Então, o que vou fazer aqui é que temos 24. O que eu posso fazer é editar minha grade um pouco. E aqui, para as linhas, eu posso usar 24 e isso vai empurrá-las um pouco aqui. Talvez possamos ter esse espaçamento de 32. Acho que isso vai agrupá-los muito bem. E agora eu tenho, nós temos, acho que temos muito mais espaço para todos os nossos ícones e todo o nosso conteúdo serem exibidos. Então, uma última coisa que eu quero te mostrar aqui, porque eu quero encerrar este vídeo aqui. E então vamos passar para a próxima seção no próximo vídeo. Então, quando eu alterno entre o refrão, digamos que estamos em 2021 e tem tantos quilômetros. Lucy está lá. Você pode ver que tem tantos quilômetros, mas tem 22. O tipo de motor é bateria. Temos dois anos de garantia. Então, se eu mudar isso para o Porsche Cayenne, por exemplo, temos cinco portas. Temos essa quilometragem, temos um ano, tudo é atualizado em tempo real. E essa é a pura beleza desses modelos de CMS do Webflow porque você cria um modelo de uma vez e todo o conteúdo que você ou seu cliente criou, ele será atualizado automaticamente. Então, vamos voltar ao nosso furacão porque foi isso que editamos. E como eu disse, vamos parar aqui porque no próximo vídeo, vamos criar a descrição do veículo que estará logo abaixo. Mas, na verdade, porque isso é bem simples, vamos fazer isso neste vídeo. Então, pressione Control K digite def e chame a descrição do veículo chamada descrição. E o que vou fazer é usar a cor branca aqui, assim. Vamos usar oito para o raio do canto. E em termos de dimensões, vamos ver o que podemos fazer aqui é, antes de tudo, dar 24% da margem na parte superior. Aí vamos nós. Eu só vou roubar esse texto e colá-lo aqui. Ele manterá as mesmas configurações de antes. E, finalmente, o que eu quero fazer é colocar o texto rico em seu interior. Então, pressione Control K, digite para enriquecer o texto e apenas certifique-se de conectá-lo a partir de carros. E eu vou selecionar uma descrição do veículo, e ele vai colocar a descrição desse veículo. E, finalmente, vamos chamá-lo, digamos, de texto de descrição do veículo. Aí vamos nós. Eu só quero ter certeza de que tenho acolchoamento no lado esquerdo de 24, 24. E isso só vai empurrar isso para dentro. E eu posso colocar no estofamento superior, bem como 24, talvez. Para a descrição do veículo em si, posso usar 32 na parte inferior. Aí está. Esta seção foi concluída e extrairá as diferentes informações que você inseriu e as você definiu ali mesmo. E como essa é uma configuração assim, talvez possamos entrar e fazer algumas alterações adicionais. Mas acho que é aqui que eu realmente quero encerrar este vídeo, porque no próximo vídeo vamos lidar com as especificações dos veículos. E se eu mostrasse isso, agora temos que lidar com isso e esse vídeo já tem 15 minutos de duração, então nos vemos no próximo vídeo. 183. Parte 4 da construção do modelo de carros: Vamos continuar de onde paramos com a especificação do veículo. E basicamente é a mesma seção. Ele só tem essas grades preenchidas por dentro. Então, deixe-me voltar ao Webflow. Selecione o div Control K de informações do meu carro para ter sido div. E isso será chamado de especificação do veículo. Especificação do veículo, imediatamente, margem, topo 24, margem inferior 32. E podemos dar a ele essa cor de fundo branca. E podemos usar um raio de canto de oito. Então eu posso entrar, guardar isso e colar aqui. Opa, vamos tentar isso de novo. Aí vamos nós. Aqui, onde diz toda a avaliação, vou alterá-la para uma descrição do veículo. Aqui abaixo. Vou digitar as informações do veículo. Desculpe, especificação do veículo. Aí vamos nós. Isso é o que eu queria. Então, vamos fechar tudo isso para que não nos incomode. Então, agora, quando eu abro isso, o que eu preciso fazer a seguir é colocar em um bloco de texto. Então, pressione Control K digite texto, bloco de texto, dê a ele uma classe de bloco de texto. Aí vamos nós. E agora vou incluir a classe de combinação de talvez, sei lá, carros, modelos. Aí vamos nós. E eu fiz isso porque vou poder adicionar um preenchimento de 24 neste lado. Adorável. E talvez possamos fazer algumas mudanças adicionais no estilo. Então, vamos ver o que podemos fazer aqui. Talvez possamos adicionar a margem na parte superior de 24, na parte inferior de 32. E porque temos essa classe de combinação isso só vai afetar aquela. Agora, abaixo disso, pressione Control K digite em def, adicione um novo div, que será chamado de desempenho. E esse desempenho será a grade, que abrigará todos os nossos itens. Mas antes de começarmos, o que farei primeiro é talvez incluir um pouco de acolchoamento em cada lado, talvez 24, como fizemos em cima com este. Então, se eu selecionar esse, deixe-me verificar. Sim, temos 20. Você pode aumentar isso para 24. Então, isso é lindo porque aqui temos 24 e agora tudo funciona como deveria. Agora, com esse desempenho definido, o que posso fazer é pressionar o tipo Control K em div. E dentro desse bloco div, o que vou precisar é colocar esse texto. Então, eu só vou precisar de blocos de texto dentro daqui. Então, vamos ver. Dentro da performance, vou colocar de zero a 100 km/h, exatamente como esse K h. E dentro disso, vou pressionar Control K, digitar um bloco de texto. E use a classe do bloco de texto. E use uma classe adicional de, vamos ver, carro, dos modelos do carro e descrição modelo do curso. Porque o que eu quero aqui é usar o normal, tudo está como deveria ser. Mas aqui ele deve incluir alguns textos. Então, vamos ver, talvez eu possa até diminuí-lo em tamanho. Então, talvez 16. Este em 40 é demais. Vamos com 32. Como estamos na descrição de um modelo de curso, ele funcionará perfeitamente e você poderá inserir o texto. Então, primeiro de tudo, vamos selecionar isso e digitar de zero a 100 K M H. Pronto. Pressione Control C, Control V. E depois no próximo, basta conectar esse campo. Então, lá vamos nós. Agora, neste caso, o que vou fazer é transformar isso em uma pilha, então certifique-se de que eles estejam assim. Então, conectando em cada lado. E agora o que posso fazer é selecionar meu desempenho e transformá-lo em uma grade. E o que vou fazer é criar duas colunas, o que é bom. E aqui eu vou ter três linhas. Então, adicione uma linha adicional aqui. E vamos ver, a distância deveria ser 32, isso deveria ser 24, eu acho. Pressione OK e vamos voltar ao XD e verificar rapidamente. Então, esses são 24 e isso é bom. Vamos voltar para aqui. Então, vou clicar em Control C Control V. Control C Control V. Basta preencher todos os meus campos muito rapidamente para que eu possa prosseguir e adicionar mais informações. Então, o que eu posso fazer aqui é zero a 100. Vamos duplicar esse. A próxima será de válvulas, assim. E vamos selecionar isso e chamá-lo de vogais. E escolha este. E vamos ver onde estão nossas válvulas? Eles são, eles são adoráveis. O próximo deve ser de alta velocidade. E o campo em si deve ser de alta velocidade. Então duplique este, em velocidade máxima. E basta alterar esse bloco de texto para a velocidade máxima dentro de onde estamos. Vamos ver a velocidade máxima, máxima e máxima em voz alta. Então, o próximo abaixo disso deve ser potência. E eu vou digitar Power. Na verdade, digite todos eles, então eu sei o que são. Então, cilindros. E esse último deve ser torque. Então, vamos conectar a alimentação. Vamos ver onde estamos. Poder, poder, poder, lindo. E isso deve ser cilindros. Então, vamos duplicar essa classe. E isso deve ser cilindros. E, finalmente, esse último deve ser torque. Então duplique-o. E vamos conectar isso com um torque desse tipo. Agora, esta seção está concluída. O que posso fazer a seguir é porque temos o desempenho pronto. Vou ver o espaçamento e a distância é 32. Então, talvez eu possa fornecer, então selecione o desempenho e forneça a margem inferior de 32, talvez assim. E vamos ver, essa especificação de veículo tem a margem inferior de 32, mas eu não quero isso. Eu quero que o preenchimento tenha 32 graus severos. Então, segue tudo o que eu faço aqui. Vamos selecionar esse texto, pressionar Control C, Control V e movê-lo abaixo do meu desempenho. E a próxima deveria dizer segurança, segurança como essa. E, basicamente, vou fazer o mesmo pela segurança que fiz aqui. A diferença é que, na verdade, vou ter uma configuração um pouco diferente. Então, vamos selecionar esse bloco de texto, apertar Control K digitando div. E dentro desse bloco div, que vou chamar de entrada de segurança em 24 de cada lado. Assim. Vou transformar isso em uma grade. Mas agora ele terá duas colunas, mas 245 linhas diferentes. Então, 2345 linhas diferentes. Aí vamos nós. Agora, dentro disso, você pressiona Control K digite def. E essa primeira deveria ser, vamos ver, segurança em forma. Talvez eu possa chamá-la de coluna esquerda ou coluna direita. Na verdade, tudo depende de você como você quer fazer isso. Mas acho que isso vai funcionar muito bem para este. Mas eu posso fazer isso talvez eu possa simplesmente colocar alguns blocos de texto. Eu nem preciso bloquear. Então, vamos ver o que podemos fazer aqui. Então, pressione Control K digite no bloco de texto. Assim. Vamos dar a ele um estilo de bloco de texto e uma descrição combinada do modelo de curso de aula. Sim, isso funciona bem. Deixe-me dar uma olhada nos textos. O que temos aqui. Isso é ótimo. Então aperte Control C, Control V, Control V, Control V, v, V, v, V, V, até eu preencher todo o meu texto. E agora o que vou fazer é copiar e colar o texto. Agora, esse texto é muito importante porque refletirá todos os elementos que seu carro realmente tem. Então, por exemplo você pode ver um freio tão adaptável que ajuda na retenção e coisas assim. Mas porque não usamos o sistema de gerenciamento de conteúdo para isso, porque obviamente alguns carros, especialmente carros mais antigos, podem ter talvez dois ou três recursos de segurança diferentes enquanto carros mais novos, especialmente com esses carros clássicos, ou digamos, carros de luxo, como neste caso, terão cerca de 1.000 características diferentes. Portanto, é muito difícil julgar o que você pode fazer dentro de onde. Mas, nesse caso, o que podemos fazer é talvez fazer com que nossos clientes preencham essas informações por si mesmos. Então, neste caso, como você pode ver, agora temos essa grade. Então, segurança, temos 24 em cada lado, o que é fantástico, mas eu posso fazer a seguir é pressionar Control C, Control V. Mova isso para baixo. Espero não aqui, mas aqui. Por alguma razão , ele não fez isso. Vamos controlar um bloco de texto em voz alta. E vamos mover o campo de segurança logo acima. Então, eu tenho alguns bugs claramente com o Webflow. Aí vamos nós. Então, segurança, a próxima será a conveniência do motorista. O que eu queria dizer antes é talvez seu cliente não que talvez seu cliente não tenha essas informações prontas para você incluir no CMS. Então, talvez a melhor opção para eles seja colocar essas informações manualmente mais tarde, porque, como eu disse, alguns carros têm exatamente os mesmos sistemas como o ABS, como freios de estacionamento, como câmeras nos dias de hoje, mas outros carros não. Então, talvez seja uma decisão sábia do que ter isso à sua disposição para seu cliente e simplesmente inserir essa visão para que ele possa manualmente, dentro do site, ativo, clique duas vezes e simplesmente substitua, remova ou edite campos do design ER e não quebrá-lo. Porque aqui vamos ter apenas uma grade interna. Então, vai ser muito simples. Vamos duplicar esse. Isso será a conveniência do motorista. E eu adoro trabalhar com redes por esse mesmo motivo. Então você pode ver que estou apenas usando a mesma grade, mas estou apenas substituindo o texto dentro de outro texto. Vamos ver. E porque estamos usando apenas uma classe de combinação para isso, que é a descrição do modelo de carros. É só herdar aquela classe de competição. E está apenas nos mostrando o que queremos ver em primeiro lugar, que é o espaçamento na parte superior e na parte inferior, que é exatamente o que eu realmente quero. Vamos com este. Vamos com este. Integração com smartphones. Lá vamos nós e temos mais dois assim. E, finalmente, assim. Aí vamos nós. Agora que isso foi concluído para a conveniência do motorista, o que eu tenho a seguir é outro. Então aperte Control C, Control V. E eu vou tentar posicioná-lo logo abaixo do que eu sei. Então, vamos tentar fazer isso dessa maneira. Pressione Control C, Control V neste. E vou posicionar meus blocos de texto logo acima. Isso vai ser segurança. Remova a classe. Mas remova a duplicata. Isso vai ser segurança. E aqui vou simplesmente digitar com segurança. E para a segurança, mais uma vez. Então, vamos duplicar essa classe e renomear a classe segurança já existe. Vamos ver. Isso vai ser realmente externo. Exterior. E isso deveria dizer exterior assim. Então, aqui no exterior, teremos um pouco menos de itens. Então, porque temos uma classe combinada aqui de exterior, a classe que acabamos de copiar. Eu vou te mostrar como lidar com isso também. Clique duas vezes aqui. Em seguida, clique duas vezes aqui, controle C, controle V. Eu tenho a estrela roubando crianças, que eu tenho no meu carro também. Eles nem te dão mais o pneu sobressalente. Você só precisa consertar seu pneu, comprar ou vender. Basicamente, se você estiver preso na ponta da corda. Então, agora que temos isso para o exterior, você pode ver que esses quatro estão faltando. Então, eu vou fazer é simplesmente me livrar deles assim. E agora ficamos com esses campos vazios. Então, como isso tem sua própria classe, o que eu posso fazer é simplesmente remover as linhas. E é por isso que adoro trabalhar com essas grades, simplesmente super simples de fazer. E como o interior tem exatamente o mesmo que este, o que vou fazer é pressionar Control C Control V. E apertar Control C Control V aqui mesmo. Mova-o logo abaixo. Ou mova-o para cima para onde quisermos. Aqui. Vamos apenas digitar o interior. E terminaremos em apenas alguns segundos. Porque a última seção realmente precisa de alguns ajustes. Não vai ser tão simples quanto este, mas vou mostrar um pequeno truque de como você também pode acelerar isso. Então, vamos clicar aqui, controlar C, controlar V, clicar duas vezes em Controle V, Controle V. Aí vamos. E uma última coisa, que é essa, Controle V. Agora que isso está feito, vou selecionar isso porque esse é o nosso interior. Então, duplique o interior da classe. Você pode ver porque esse é o exterior, esse é o interior. Funciona muito bem. E uma última coisa que quero mostrar a vocês é isso porque temos essas dimensões, que é isso aqui. E temos que retirá-los do CMS. Então, como podemos lidar com dívidas? Na verdade, vamos fechar tudo isso. Deixe-me. Basta ver o que eu fiz aqui. Então, o que posso fazer aqui é pegar essas informações. Então, vamos ver, isso foi desempenho. Então, eu posso pressionar Control C, Control V para colar essa seção e arrastá-la até aqui. E eu posso então mover esses dois para cima, assim. Depois, posso usar meu livro didático Control C Control V e colá-lo logo abaixo do meu interior, assim. E como isso vai ter um pouco mais, vou usar esse desempenho e vou duplicar a classe e chamá-la de dimensões. Dimensões. E agora porque precisarei de quatro de cada lado, exceto aqui, mas ainda precisarei de quatro. Vamos continuar e adicionar porque agora estamos em dimensões, você pode clicar aqui e simplesmente adicionar uma nova linha. E isso vai ficar em branco, mas isso vai ter uma quantidade dentro. Então, vamos lidar com isso. Então, esse primeiro, vamos duplicá-lo. Vai ser chamado de altura. Este vai ser chamado de pesos. Essa. Então, vamos apenas duplicá-lo. Vai ser chamado de vinculado. O próximo será chamado de espaço de inicialização. Este será chamado de distância entre eixos. Este será, vamos ver o que realmente removemos aqui. Então tanque de combustível, então uma renomeação, tanque de combustível assim. E vamos copiar e colar mais um. E a última na parte inferior vai estar molhada. Então, vamos trazer isso de volta quando a cena tiver uma largura duplicada. E, finalmente, vamos clicar duas vezes e digitar tudo isso em altura. Isso será vinculado. Essa será a distância entre eixos. Isso vai ser peso. Essa será a Brightspace. E isso será a capacidade do tanque cheio. E, finalmente, vamos conectá-los. Então, este, vamos conectar com a largura. Então, vamos ver onde estamos aqui. Acho que, aqui mesmo, lá vamos nós. Essa é a largura. Essa é a capacidade do tanque de combustível, que é essa. Isso será para a distância entre eixos. C será base, a base será base, onde está. Poder. Distância entre eixos. Ótimo. Isso será para o espaço de inicialização. Vamos começar pelo espaço de inicialização superior. Então, por qualquer motivo, isso simplesmente substitui a posição deles. Então, o comprimento, o comprimento está aqui. Isso vai ser para os pesos. Vamos ver, espere, espere, espere, espere, espere, espere, espere. E, finalmente, isso vai ser para a altura, assim. E agora tudo está concluído. Deixe-me derrubar tudo. Então, se eu clicar em pré-visualizar agora mesmo nesta página, aqui temos nossas imagens conforme explicamos à medida que fizemos algumas. Esta visão geral. Temos, temos uma descrição igual, temos especificações dentro das quais temos desempenho. Talvez possamos ajustar isso um pouco apenas para obter um espaçamento um pouco melhor. Acho que temos isso , o que é ótimo. Temos a conveniência do motorista, exterior, interior e interior. E isso finalmente deveria dizer dimensões. Então, vamos corrigir isso muito rapidamente. Dimensões. E como esse é um modelo de curso de livro didático, o que farei é mudar sua cor para essa cor apenas para diferenciá-la um pouco, como você vê aqui. Portanto, combina um pouco mais com esses títulos no topo. E eu acho que isso é basicamente, a última coisa que resta a fazer é conectar esta placa para seguir. E como podemos fazer isso é realmente muito simples. Assim, você pode selecionar a carta de ação do carro. E você pode voltar ao topo aqui. E para a posição, vou escolher o sticky. E você tem que dizer onde você quer que fique? Então, vou dizer para ficar com talvez 20. Você pode ver que já temos essas opções padrão. Então, agora assista a essa mágica. Deixe-me realmente me encontrar para que você possa ver um pouco melhor. Então, aqui temos tudo que funciona, tudo está como deveria ser. Mas agora, quando eu começar a rolar e chegar a 20%, ele vai ficar preso. E vai ficar. E isso seguirá tudo o que fizermos. Agora, quando chegar ao final da seção, simplesmente vai parar. E agora, quando eu começar a rolar, tudo vai funcionar bem. Então você pode ver como isso é super simples de fazer. E eu realmente amo esse recurso. E se mudarmos para o cálculo de Carol, por exemplo e quando eu começar a rolar, você poderá ver que o efeito já ocorre. Já está rolando. Uma última coisa que precisamos fazer se eu levar você de volta ao XD é que temos essa, nossa seleção exclusiva, e só precisamos colá-la e eu a conectarei mais tarde. Então, vamos voltar para nossa página inicial aqui. Então, as páginas iniciais usam essa seção exata. Então, vamos começar a partir daqui. Coleções exclusivas. Então, clique em Control C e, em seguida, vá para as páginas do nosso modelo de curso, controle V. E eu vou colocá-lo aqui. Mas, neste caso, vou renomear essa classe duplicada carros e modelos exclusivos de seleção. Aí vamos, porque precisamos fazer algumas mudanças aqui. Então, o que vou fazer aqui é dentro do contêiner, vamos até o invólucro da lista de coleções. E é aqui que vou duplicar os modelos de classe e digitar carros. E aqui vamos às configurações muito rapidamente. Aqui. O que eu posso mostrar é começar do zero. Vamos começar às oito, por exemplo, desta vez ou não, comece com Vamos começar com uma. Mas para este, vamos ordenar a ordem. Então, vamos ver o que podemos fazer aqui. Então, vamos fazer um pedido aleatório. E deve funcionar muito bem. Por que não escolheu isso. Então, vamos com o pedido aleatório, clique em Salvar. E agora, quando eu clico na prévia, você pode ver que estamos aqui, mas ainda temos nosso Lamborghini, que é o que não queremos ver. Na verdade. O que eu posso fazer aqui é uma confusão aleatória. Vamos com outra coisa. Então, talvez possamos escolher algo um pouco diferente. Você pode usar o nome. Algo um pouco diferente. Talvez criado do mais novo para o mais antigo. Talvez possamos mostrar isso. Então, vamos tentar isso. Então, quando eu clico em pré-visualização aqui e quando mudo para, digamos que aumente. Vamos ver se isso ajuda. Sim, mas quando mudei para a McLaren, por exemplo, agora ela deveria atualizar e mudar isso. Então, talvez devêssemos descobrir isso por meio de um pouco mais. Então, temos que mostrar que talvez filtros ou iguais não sejam iguais, talvez o nome não seja igual. Clique em Salvar, especifique um valor válido. Talvez eu devesse investigar isso, mas acho que trabalhos mais antigos para os mais recentes, exceto no caso de quando o carro é exibido. Então você pode ver aqui. Então, funciona. Na minha opinião, a melhor versão é essa. Então, faça o pedido aleatório, clique em Salvar. Então, tudo o que você puder, vai mostrar que eu posso até mesmo adicionar um novo filtro aqui e criá-lo que eu posso até mesmo adicionar um novo filtro e talvez mostrar ainda mais abaixo. Então, eu não sei, você pode fazer o que quiser basicamente aqui, mas ver todos os carros é o botão que vamos vincular em uma das próximas lições. Mas, por enquanto, deixe-me deixar você assim. Então, finalmente, vamos recapitular rapidamente o que fizemos porque já estamos com 25 minutos, que é uma das aulas mais longas até agora. Nós fomos em frente e criamos isso, que funciona, criamos isso, que fica, criamos esses elementos, todos esses elementos. E, finalmente, criamos isso. E acho que essa margem superior deveria ser um pouco menor na minha opinião. Então, vamos ver o que ele fez originalmente. Sim. Eu adoraria os anos 200, então acho que está tudo bem. Entre em contato conosco. Então, tudo funciona como deveria. E, como eu disse, vamos lidar com responsividade um pouco mais tarde nesta aula, e vamos corrigir esse espaçamento. Agora que isso está concluído, podemos passar para as próximas páginas, que são empréstimos, e entrar em contato conosco. E quando terminarmos essas páginas, talvez possamos lidar com os problemas de resposta que temos. E talvez então possamos nos adaptar um pouco mais a questões como essa e como podemos mudar isso? Então, ele nos mostra uma ordem aleatória, que não é a página em que estamos no momento. Então, nos vemos no próximo vídeo, onde abordaremos a página de empréstimos. Te vejo lá. 184. Como fazer a ligação de cartões: Antes de prosseguirmos com nosso trabalho adicional no Webflow, primeiro precisamos vincular todos esses cartões, cartões às páginas reais. Então, quando nosso usuário clica em um desses cartões, na verdade ele vai precisar ver a página real do carro e aprender mais sobre o carro em si. Então, aqui estamos no Webflow e como podemos fazer isso. É realmente muito simples. Eu propositalmente não fiz isso porque queria mostrar como essas correções podem ser alcançadas. Então, aqui estamos em nossos cartões de carro, em nossa página inicial. Então, quando eu clico aqui, você pode ver que eu não tenho nenhum link. Portanto, você precisará vincular todas as suas páginas e todos os seus ativos se quiser que eles levem a algum lugar, para que levem seus usuários a algum lugar. Então, como podemos fazer isso dentro da própria placa do carro, vou pressionar Control K e digitar o bloco de links. Agora, basta clicar no bloco de links. Ele vai colocá-lo aqui e não se preocupe muito com isso. Vamos anexar os valores em apenas um segundo. O que vou fazer é posicioná-lo aqui, por exemplo, e depois usar as informações do meu cartão do carro, colocá-las dentro desse bloco de links e, em seguida, a imagem do cartão do carro também colocá-las dentro do bloco de correspondência. E agora você pode ver que o estilo está totalmente errado. Agora temos isso sublinhado em nossos textos, o que não queremos. Então, selecione seu link para o blog. Vá aqui, onde está, onde está a topografia? E você pode ver que a declaração é definida por padrão. Basta clicar aqui, onde diz nenhum. E isso removerá todo o seu estilo de lá. Então, agora temos um bloco de links número quatro. O que eu vou fazer é digamos que renomeie essa classe e a chame de car, hard link, block, assim. E agora ele terá o mesmo valor para todos os três porque eles estão conectados. A última coisa a fazer é realmente conectá-lo a algo. Então, ao selecionar o bloco de links do cartão do carro, clique aqui e vá direto aqui, onde diz a página de coleta. Quando você clica lá, ele levará ao carro atual. Então, basta clicar lá e ele abrirá o cartão que você realmente selecionou. Então esse é o nosso carro atual. Você pode configurá-lo para abrir uma nova guia, se quiser, mas eu não vou fazer isso. E vamos lembrar que este é o bloco de links do cartão de carro. Então, o que precisamos fazer é configurá-lo para todas as nossas páginas. Mas antes de tudo, vamos testá-lo e ver se funciona. Então, tudo funciona como deveria. Essa é a escalada, por exemplo, se eu clicar nela, ela me levará para a página de escalonamento, que é realmente o que eu quero. Mas aqui mesmo, quando eu rolo até o final e clico, você pode ver que eles não funcionam. Então, o que vamos fazer é sair do modo de pré-visualização, voltar às nossas páginas, ir para os carros, porque é aí que temos todos os nossos carros conectados. E quando clico aqui, você pode ver que não temos nenhum bug de link porque também precisamos conectá-lo aqui. Portanto, selecione o cartão do seu carro, pressione Control K, digite o bloco de links, coloque-o dentro e, em seguida, simplesmente coloque seus itens dentro. Selecione seu bloco de links. E vamos dar a ele uma classe de cartão, bloco de links de cartão. Aí vamos nós. E você pode ver imediatamente isso removerá o estilo que fizemos anteriormente. E a única coisa que nos resta fazer aqui é conectar essa coleção. Escolha a página da coleção. Então, basta clicar aqui onde diz página de coleção, escolha uma página de coleção, escolha o carro atual. E agora todos esses carros estão conectados. Então, se eu clicar na pré-visualização muito rapidamente e selecionar algo como o Porsche Cayenne, clicar com o botão direito para abrir a página do Porsche Cayenne, mas ainda temos o mesmo problema aqui. Então, temos que fazer isso também. Então, enquanto estamos em um modelo de curso, não importa qual página. Nesse caso, estamos na Bosch novamente. Temos que fazer isso mais uma vez. Então, se eu clicar lá, apertar Control K, digitar o bloco de links e colocá-lo lá. E, mais uma vez, traga as informações do meu cartão de carro dentro e a imagem do cartão do carro. Então, você pode imaginar isso como uma sobreposição com o bloco de links, cartão, bloco de links de cartão do site Lincoln . Aí vamos nós. E vai herdar o mesmo estilo. Vamos clicar aqui, depois aqui, escolher a página de coleção, carro atual e pronto. Mas agora temos outro problema. Então, temos esses três. Então, quando eu clico na prévia, lembro que estamos no Porsche Cayenne. Então, esses três funcionarão muito bem. Então, quando você clica ali, vai me levar até Lucy. E vai ser atualizado. Então, espere um pouco de tempo. Mas ainda assim, temos o Lucid Air aqui. E estamos em Lucy, a página deles, que não queremos porque não faz nenhum sentido. Então, quando clico ali para sair do modo de pré-visualização e clico na embalagem da lista de coleções desta coleção exclusiva de carros na página de modelo do meu curso. O que posso fazer é voltar às minhas configurações aqui. E aqui eu tenho minha ordem de classificação e meu filtro. Então, vou adicionar um novo filtro. E aqui vou montar algo parecido com um carro. E eu vou escolher se não é o carro atual. Então, eu não quero que isso seja nada que eu esteja vendo. Então, por exemplo, estou olhando para Lucy lá. Eu não quero que esteja aqui porque eu já estou vendo. Então me mostre outro carro. Então, quando eu cliquei em Salvar, como você pode ver, ele simplesmente trocou esses elementos. E agora eu posso fazer, acabei de escolher aleatoriamente shuffle. Então, eu posso fazer isso se eu quiser ou posso ir em frente e escolher outra coisa. Eu já te mostrei como fazer isso anteriormente. Então, agora, como você pode ver, estamos em uma página de erro lúcida. Então, tudo funciona como deveria. Todos nós temos oito imagens. Eles funcionam e ficam no topo. Então, se eu rolar até o fim, você pode ver que temos nossa coleção exclusiva e agora não há Lucid Air. Então, vamos testá-lo. Quando clico em Cadillac escalate, por exemplo, somos apenas uma página de escalonamento. Então, quando eu rolo até o final, não vemos mais escalar. E é assim que é fácil conectar essa casa de forma super simples. É para configurar. E é por isso que é importante. E, como eu disse, eu propositalmente deixei isso de fora porque queria mostrar a vocês o poder dos blocos de links. Você pode colocar esses blocos de links nas imagens. Você precisa, você pode criar uma imagem como um link. Mas se você quiser, por exemplo na página de empréstimos, temos essa imagem com três imagens diferentes. Talvez você queira colocar tudo isso como um único bloco de links. Então, você pode simplesmente colocar um link de blog como um estilo de sobreposição. Já está explicando isso aqui e levará seus usuários a algum lugar se clicarem nela, ou você pode fazer o contrário e simplesmente estilizar as três imagens para serem links separados. E, portanto, você obterá os mesmos resultados. Portanto, tudo depende de você e layout que você deseja obter em seu design. 185. Página de empréstimos: Agora vamos criar uma página de empréstimos. Então, em páginas escuras, clique aqui e digite empréstimos. Aí vamos nós. Clique em Criar e verifique se o corpo herdou o estilo que tem. Então, o que vamos fazer é pressionar Control, digite K na navegação, controle, tipo K, N no Formulário, controle K digite no mapa e controle o tipo K no rodapé. Agora que você fez isso, o que podemos fazer é selecionar o corpo que atingiu o tipo Control K na seção. Adicione uma classe de seção. Então, mova a seção logo abaixo da nossa barra de navegação. E dentro dessa seção, se você controlar K, digite def e atribua a ele uma classe de contêiner, assim. É ótimo. E o que eu posso fazer é dentro desse contêiner, na verdade , eu posso colocar esse texto, mas eu vou realmente criar outro dentro dele. Então aperte Control K digite def. E esse eu vou chamar de um rapper herói solitário como esse. E dentro desse invólucro de herói, deixe-me pressionar Control K, digitar título de audição H1 e digitar H1, que já criamos, que está centrado. Aí vamos nós. Assim. Deixe-me realmente copiar e colar um texto dentro desse jeito. E então o que eu posso fazer é criar outro, digamos que Control K digite em div. E essa divisão dá a ela um nome de empréstimos, imagens de heróis. E, na verdade, vou transformá-lo em uma grade. Mas antes de fazer isso, deixe-me adicionar minhas imagens Control K para fixar a imagem. E essa imagem, eu vou dar a ela o Audi RS five. Vamos dar a ele o nome de Audi S5. E mais uma vez Control K digite a imagem. E essa imagem será aquela Range Rover, que é essa. E chame isso de alcance sobre Voc, assim. E, finalmente, o que eu quero fazer é transformar isso em uma grade com boas notas. E, finalmente, o que eu posso fazer aqui é talvez aumentar isso para 24, talvez não. Vamos mantê-lo em 16 porque ele manterá a mesma consistência para este. O que vou fazer é alinhá-lo no canto inferior direito aqui. E este já está alinhado na parte inferior. Mas só para ter certeza, e eu acho que isso é bom. Isso é ótimo e é disso que precisamos para esta seção específica. E vamos dar a ele uma classe de empréstimos de heróis que, agora, selecione o corpo atingido pelo tipo Control K como seção. Assim, podemos adicionar a nova seção. Vamos dar a ela uma classe de posição de seção logo abaixo desta seção, desta forma. E a próxima chamaremos de título. Empréstimos são empréstimos assim. E dentro disso, vamos clicar em turn div, digitar container. Digamos que os empréstimos sejam os principais porque dizem que são as principais linhas do mercado. Linhas principais, aí vamos nós. E dentro disso, o que podemos fazer talvez seja colocar em outra embalagem ou algo assim. Vamos ver o que podemos fazer. Deixe-me criar outro div, então Control K digite def. E em vez de chamá-lo de invólucro, vamos chamá-lo assim de empréstimos líderes de mercado. E dentro disso, mas eu posso fazer isso é pressionar Control K digite no título. Escolha h três. E h três deveria ter h três. Vamos ver, escuro. Vamos centralizá-lo. Então centralizado e apenas centralizado como TO. Então, deixe-me copiar e colar o texto lá dentro. E para esta seção, o que vou fazer é dar a ela uma distância de 200, talvez ou até menos. Eu não sei. Vamos ver como fica depois de pré-visualizado. Sim, 200 é bom porque ainda estará legível e ainda será uma cena daqui. Então, vamos continuar assim e criar outro. Então, Control D div. E essa divisão, eu vou chamar empréstimos para reduzir benefícios, como dívidas. E dentro disso. Vamos criar o primeiro. Então Control K digite def dentro dessa div, que vou chamar de, vamos ver, conveniência simples. Vou incluir a imagem do Control K. A imagem será simples e conveniente. Vamos encontrá-lo aqui. Então é esse ícone. E abaixo desse ícone, vou colocar o h três mais uma vez, então controle K para fixar o arenque. Use a idade de três anos, e sim, podemos usar qualquer uma. Então, vamos usar o simples inconveniente para o texto. E abaixo disso, o que vou fazer é pressionar Control K mais uma vez digitando p para o parágrafo. E esse parágrafo vai ter esse texto. Mas para o parágrafo, vamos usar P em cinza porque eu vou dar a cor cinza a partir das notas aqui. E, finalmente, o que posso fazer é colocá-los em um flexbox vertical, garantir que estejam centralizados dessa forma. O que eu também posso fazer é talvez porque isso é da esquerda, talvez eu possa dar a essa idade três centrada que temos bem em cima. Ou foi o que foi? H3 centrado no escuro. Ok, então H três escuros e depois centrados. Ótimo. Então, agora que temos dívidas, mas eu posso fazer aqui, talvez com isso, possamos dar a ela uma distância de 24 até o topo. Vamos pressionar para nos livrar desse. E no topo, podemos dar a ela uma margem máxima de 24, assim. E, finalmente, com esse ícone que será chamado, vamos ver, conveniência simples. Icm. Vamos dar a ela a margem inferior de 24, por exemplo, ótimo. Agora que isso está concluído, vou pegar esses benefícios do empréstimo e transformá-los em uma grade, dar a eles outra coluna, livrar dessa linha e talvez adicionar algo como, sei lá, 24 aqui, 32. Vamos ver como isso parece. Bom por enquanto. Então, vamos fechá-lo. Clique em Control C, Control V, Control V neste caso e em empréstimos , benefícios, vou dar uma margem máxima de 64 para apimentar um pouco. Agora, nesta, vou duplicar a classe e renomeá-la para opções de pagamento. E deixe-me realmente copiar o texto e ver se ele se encaixa. Faz. Aí vamos nós. Vamos mudar este último imediatamente para ter paz de espírito. Então, duplique a grade de paz de espírito. E vamos mudar isso. Pagamentos duplicados. Ícone. E vamos substituí-la por uma imagem de lugar e encontrá-la aqui. Então, vamos ver onde está. Aqui vamos nós. Então, a nota do ícone de pagamento. E, finalmente, vamos substituir este. Então, basta duplicá-lo e chamá-lo de paz de espírito, ICN. E vamos encontrá-lo e ver onde está. É aquele com o escudo, que é esse. Aí vamos nós. Agora que isso está concluído, o que podemos fazer é brincar ainda mais com essas configurações, se quisermos. Mas eu acho que está tudo bem. Mas o que vou fazer em seguida é criar essa seção se eu a levar para o nosso design, que é para isso. Então, o que podemos fazer nesse caso é copiar essa seção que temos em nossa página inicial e ajustar um pouco e brincar com esses posicionamentos um pouco mais tarde. Então, para economizar um pouco de tempo, mas eu posso fazer isso é voltar para a página inicial. Use esta seção. Controle C. Em seguida, acesse nossa página de empréstimos. Selecione nosso controle corporal V e posicione-o aqui. Aí vamos nós. Agora, em vez de quem somos, vou duplicar essa classe e chamá-la de parceira. Assim. Aqui, o que vou fazer é duplicar isso. Como imagem do parceiro, clique na engrenagem, substitua a imagem e encontre a imagem do meu parceiro. Aí vamos nós. Adorável. Finalmente, vamos pegar o texto e substituí-lo aqui. Assim. E, finalmente, o que temos é experiência de quem entre empréstimos? Eles são você, seus próximos? Aí vamos nós. Isso é bom. Finalmente, o que precisamos é que talvez precisemos colocar isso em um div sozinho. Ou podemos até mesmo colocar imagens lá dentro. Então, vamos tentar isso primeiro e ver como isso funciona. Ou o que podemos fazer é fazer isso. Pressione Control K digite def. E eu vou colocar essa imagem em um div como esse. Agora, esse bloco div precisa de uma altura de 100% de seus pais e precisa de uma largura de 60%, eu acho, era essa a largura da imagem? Vamos ver. Agora, a largura máxima é de 100 por cento. Então, vamos fazer isso. A largura máxima é de 100%. Mas por alguma razão, isso simplesmente não me permite fazer isso. Vamos tentar esse truque mais uma vez. Então isso vai ser, digamos, 60%. E vamos nos livrar desse. E esse conteúdo. Em vez de estarmos contentes, vou duplicar a turma e dizer parceiros. Conteúdo, assim. E eu vou dar a ela uma largura de, digamos, 30% ou talvez 40%. Sim, acho que vai funcionar muito bem antes de prosseguir, deixe-me dar uma olhada na casa e ver se ela quebra aqui. Não funcionou. Então, vamos ler. Então, vamos voltar aos pulmões. E agora que fizemos isso, o que vamos fazer é usar esse bloco div, chamá-lo, renomeá-lo, chamá-lo de nervos parciais, imagens. E para o posicionamento, vamos escolher um parente. E dentro disso, clique em Control K, digite a imagem. Escolha a imagem. E eu vou escolher um desses. Então, isso é mais 1.1 vezes, então aperte Control K digite na imagem. Para esta imagem, vou escolher o outro parceiro. Espero não ter exportado. Aí vamos nós. E agora vamos brincar com eles. Então, isso vai ser como um leasing. Então, vamos chamá-lo assim. Isso vai ser o Santander. E para ambos, obviamente, colocaremos o posicionamento. Então, em vez da posição estática, vou mudá-la para absoluta. E isso vai me mostrar que o absoluto é para as imagens dos parceiros, que é isso aqui. Assim como o leasing, faça o mesmo absoluto. Então, vamos brincar com o posicionamento. Então, vamos ver algo assim. Talvez eu possa colocar o desafio do bronzeado no topo. Certo. Foi assim? Sim, foi. Então, no canto superior direito, ns leasing estará no topo, no canto inferior esquerdo. Então, às vezes, vai para o canto superior direito e o leasing S vai para o canto inferior esquerdo. E vamos brincar com algumas configurações. Então o Santander pode ir até aqui, algo assim. Talvez. Talvez possa ir até aqui. Então, mais uma vez, esses bugs com o posicionamento. Então, vamos usar a margem inferior desta vez, assim. E vamos com a esquerda que quer algo assim. Então, vamos tentar imitar isso. Então, temos 20 na lateral e cinco. Vamos fazer cinco aqui. E vamos fazer 20 aqui. Opa. Então, agora vamos com dez. Vamos ver por que isso está acontecendo. Então, se eu clicar aqui e depois aqui, vamos lá, funciona muito bem. Quando você clica em pré-visualização, ele funciona novamente, então tudo parece como deveria. E, basicamente, essa é a nossa página concluída. Você pode ver como é fácil quando você tem todos esses elementos e pode simplesmente agrupá-los. Eu realmente não entendo por que isso está acontecendo com essas imagens. Só pulando para a esquerda e para a direita. Se eu clicar aqui e depois aqui, você pode ver que está tudo bem. Mas então, quando eu rolo para cima e para baixo e faço outra coisa, ela simplesmente volta ao lugar. Então você sempre tem que descobrir essas coisas. E isso é basicamente a vida de um desenvolvedor. Então, isso é basicamente tudo para nossa página de empréstimos. A única página que nos resta realmente criar é essa página de contato, que será muito simples de fazer. Basicamente, adicione uma imagem. Então, nos vemos no próximo vídeo em que vamos terminar isso. 186. Página “Entre em contato conosco”: Vamos agora criar a página final. Então, aqui o que vou fazer é clicar na nova página, digitar Fale conosco e clicar em Criar. E aqui vamos verificar o corpo mais uma vez, cor do corpo, tudo bem. Então, aqui, vamos fazer o mesmo para controlar o tipo K na navegação. Controle o tipo K no Formulário, Controle o tipo K no mapa, controle K digitando o rodapé. E uma última coisa que eu quero fazer aqui é pressionar Control K digite em div. E vamos chamar esse bloco div, digamos, um showroom de observadores como esse. E dentro dessa div, que será a largura de 100%, a largura máxima está em 100% porque eu quero que essa imagem assuma o controle total da largura. Kate, fui fotografada. E vamos escolher uma imagem que será essa. Aí vamos nós. E vou chamá-la de imagem de showroom de aranhas. E essa imagem vai ocupar 100% do espaço. E basicamente isso para esta página, você pode ver como é super simples de criar. Talvez você possa colocar alguma sinopse aqui, mas eu realmente não acho que isso seja necessário. E acho que isso é bom o suficiente para nossa página. Basicamente, agora podemos seguir em frente e começar a nos conectar. Esses são links. Então, vou parar o vídeo aqui e vou falar com você no próximo vídeo. Vamos conectar todos esses links e conectar todos esses botões e na verdade, fazer com que eles nos levem algum lugar e não apenas estejam na página vazia. Então, nos vemos no próximo vídeo. 187. Adicionando links: Neste vídeo, vamos criar nossos links. Vamos vincular nossas páginas na navegação e conectar nossos botões às páginas reais. Então, aqui estou no Webflow, aqui estou na página inicial. E isso é realmente muito simples de fazer, especialmente porque estamos usando esses símbolos no Webflow. Como mencionei, você pode ver que esses símbolos se conectam em todas as nossas páginas, portanto, podemos ajustá-los e, uh, fazer com eles o que quisermos. Então, aqui estamos nos carros, e eu vou selecionar este link de navegação. E quando eu o seleciono aqui, eu queria me dizer nas configurações para onde eu queria ir. Então, aqui vou levá-lo para minha página. Escolha uma página, carros. E ele pode abrir nessa guia ou em uma nova guia, e você pode escolher uma opção de carga útil diferente. Então, pré-busca, pré-renderização padrão, vou escolher o padrão. Você pode até mesmo usar atributos personalizados aqui, para poder nomear seus atributos como quiser. Mas eu não vou incomodá-lo muito com isso. Isso na vinculação de páginas é muito útil, especialmente se você tiver páginas de destino longas. Você pode imaginar que a navegação ficará fixa, pois estará sempre no topo da página. E terá, digamos, seis itens de navegação diferentes dentro dessa navegação. Portanto, esse ID para vinculação de página é muito útil porque nessa página você pode ter, digamos, depoimentos, formulário de contato, galeria, portfólio. Você pode ter todos esses itens em sua navegação. Então, quando você clica neles , você será direcionado para essa seção do seu site. É muito útil e você também pode fazer isso no XD e no Figma. Mas aqui é muito útil porque, em suas próprias seções, você pode selecionar essa seção e dizer: “ Isso é quem somos”. Vou citar se tivéssemos quem somos aqui na navegação, eu nomearia uma seção de mesa daria a ela uma identificação de quem somos. E então, quando meus usuários clicam em quem somos aqui, o site inteiro rolava para baixo até aquela seção específica. Portanto, esses IDs são realmente úteis quando você deseja usá-los. Mas aqui vamos deixar como está. Então, em seguida, temos empréstimos, então eu vou fazer a mesma coisa. Então, página e aqui você pode ver, podemos nos divertir. Portanto, ligar para alguém diretamente por e-mail, enviar e-mail diretamente por meio de provedores de e-mail externos como a seção Gmail ou Hotmail , para vincular diferentes seções e arquivos. Se você quiser fazer o upload de um arquivo e, em seguida, seus usuários possam fazer o download desse arquivo. Obviamente, existem limitações arquivadas. Eu vou sair da página. Como eu mencionei. Isso vai nos levar a empréstimos, essa conta. Então, ele abrirá nesta guia. E, finalmente, vamos fazer o mesmo para entrar em contato conosco. Então, vamos para a página, escolha a página. Vamos entrar em contato conosco. Essa guia. Aí vamos nós. Agora que isso foi corrigido, vamos primeiro testá-lo. Vamos ver a prévia aqui. Vamos para os carros. E isso vai me levar para a página do meu curso, pegar empréstimos. Isso vai me levar à página de empréstimos e está me mostrando uma fuga ruim por algum motivo. Aí está, porque não foi possível salvar, clique em Fale conosco. E isso me leva aos carros da página Fale conosco. Mas quando volto para casa, quando clico no meu logotipo, ele não me leva a lugar nenhum, então, preciso vinculá-lo. Então, vamos para a página, vamos para casa. Vamos para o modo de edição. Dentro da nossa barra de navegação, você pode pressionar Enter para poder editá-la. Selecione seu logotipo, que é essa coisa aqui. E o que eu quero fazer é fazer a mesma coisa. Então, em vez de um URL externo, o que eu quero fazer é me vincular à página. Posso escolher uma página que seja a página inicial e o pré-carregamento será o padrão. Agora, vamos voltar e testá-lo rapidamente. Então, quando eu clico em pré-visualização, vou até empréstimos e seleciono meu logotipo, clique nele. Isso vai me levar até aqui. Mas se eu voltar aos meus pulmões, vamos testá-lo no rodapé. Você pode ver que isso ainda está acontecendo. Vou tentar consertá-lo. Talvez eu possa adicioná-lo como uma grade. Dessa forma, não vai ficar fora de linha. Então, aqui temos o mesmo logotipo e você pode ver que quando eu passo o mouse sobre ele, ele muda. Então, o link se propaga porque o retiramos de nossa navegação. Então, quando eu clico lá, deveria me levar, mas não funciona. Então, vamos ver qual é o problema. Então, quando eu seleciono meu rodapé e quando eu escolho o rodapé do meu logotipo, acessa o URL externo de seleção. Então me leve até a página, me leve para casa. Aí vamos nós. E vamos ver isso. Então isso é nab, um link. Então, quando clico em Configurações aqui, ainda preciso editá-las aqui. Então, vamos fazer isso. Esta é a página de carros, esta é a página de empréstimos, e esta última é a página de contato conosco. Então, lá vamos nós. Agora temos tudo isso e certifique-se de definir os ícones de mídia social como você quiser. Vou deixá-lo em branco por enquanto porque não acho que seja necessário vinculá-lo a esta página. O que eu quero fazer, como eu disse, é que vou embora, como você pode ver agora, está resolvido, mas quando eu clico na pré-visualização , estou apenas brincando comigo. Então, eu vou fazer isso. Então, quem somos rapper em vez de flexbox, vou escolher a grade. Essa grade, digamos que eu vou posicionar isso para ser um pouco mais estreita, algo assim. E eu vou me livrar da segunda fila, algo assim. Aí vamos nós. E então, lá dentro, vou selecionar isso. E vamos tentar com isso ou com a altura. Vamos nos livrar da largura. Aí vamos nós. Mas agora também temos que ajustar isso. Conteúdos. Livre-se da largura também. Aí vamos, agora funciona. E, finalmente, vamos ajustar essa grade. Então, quando clico aqui para ajustar minha grade, ajusto esse texto para ficar um pouco mais estreito do que essa imagem. Assim, você pode ajustá-lo ainda mais. E você pode ver que temos a margem aqui porque você pode ver onde a imagem está terminando desse lado. E aí está. Então , agora vai ser muito mais simples para nós fazer isso. Quando você clica aqui na grade de edição e está no modo tablet, o que você pode fazer é simplesmente adicionar outra linha e se livrar da coluna. E isso só vai se propagar e se expandir aqui, como você pode ver. E agora temos que adicionar um pouco de espaçamento aqui e garantir que essa margem seja removida desse lado. Acerte zero. Assim. E posso selecionar as imagens do meu parceiro e garantir que minha largura seja 100%. Aí vamos nós. E agora tudo o que preciso fazer é simplesmente ajustar isso. Então, vamos ver que essa imagem do parceiro é, digamos que a largura seja de 100 por cento. Aí vamos nós. E vou apenas selecionar este e ajustar manualmente. Então, acalme-se aqui, por exemplo, e você pode ver o espaçamento no lado esquerdo e direito que é o acolchoamento que incluímos anteriormente. Assim, você pode ver como isso é útil quando você começa a trabalhar com o tablet. Estou me empolgando um pouco, mas não vou fazer isso muito aqui. Deixe-me incluir uma margem de 64 aqui. Aí vamos nós. E agora você pode ver como isso fica em um tablet e será o mesmo no celular. Só precisaremos fazer algumas alterações adicionais em nossas imagens. Mas, como eu disse, não vamos nos deixar levar por enquanto. Este é o vídeo sobre os links. E você acessará esses designs responsivos um pouco mais tarde. Aqui, o que temos é a página atual é de empréstimos e você pode ver que ela é azul, que é o que queríamos mostrar aos nossos usuários onde eles estão no próprio site. Então, se eu voltar aos carros, vamos clicar em Preview. Volte para os carros e selecione um deles. Vamos com a Lamborghini. Você pode ver que não estamos nos carros porque esta é aquela página externa. Então, se eu voltar e disser algo como Cadillac Escalade, talvez lá vamos nós. Isso não me mostra isso, mas quando eu clico nos carros e visito carros, agora temos aquele link azul e a mesma história para o Fale Conosco. Então, vamos voltar para a página inicial. E o que eu quero fazer é começar a vincular esses botões. Esse botão. Vamos levá-lo para algum lugar. Então, se eu clicar na página, escolher uma página, me levar até carros e você pode abrir uma nova guia se quiser. Não vou me preocupar com novas abas no momento. Vamos manter isso aqui, ver todos os carros. Vamos deixar o link para a mesma página. Então carros, porque eu quero que eles vejam todos os carros, o que oferecemos Benefícios Entre em contato conosco. E então isso, você precisa ajustar em seu painel. Portanto, você precisa ajustar para onde você está enviando links e para onde está enviando mensagens. E vai funcionar dessa maneira. Então, se eu levar você até as Configurações do projeto, você pode ver os formulários aqui para receber notificações de quem é. Então você pode mudar isso para o seu nome. Então, defina o rótulo e assim por diante. Envios de formulários Cent Atualmente, tenho meu próprio endereço de e-mail aqui. É claro que, ao enviar esse projeto para seu cliente, você inserirá o e-mail do seu cliente aqui e, portanto, ele enviará a linha de assunto. Você pode ver, por exemplo, o nome do site como nome, apenas para que eles saibam de onde vem o formulário. Responder ao endereço. Assim, você pode inserir endereços personalizados, seu modelo de e-mail. Você pode inserir uma dívida e o envio do formulário não pode ser incluído no e-mail de notificação formal. Então, qual é? E você pode até incluir a recaptura. No momento, você pode clicar aqui para ativá-lo e, em seguida, ajustar essas configurações como quiser. E, como mencionei anteriormente, você pode integrar formulários adicionais aqui. Vamos voltar para o designer e voltar para Lincoln porque não temos muitos elementos, então vamos terminar em breve. Como mencionei, nós já fizemos isso. Então, quando eu vou para Configurações, você pode ver que vamos amaldiçoar, o que é bom. Eu já expliquei sobre isso. Para o mapa, você não precisa vincular nada porque, ao clicar nele, ele os levará ao Google. Então, tudo bem. E se você for aos carros aqui, não precisamos vincular nada. É muito simples. Nos pulmões. O que podemos fazer é entrar em contato conosco. Então, a mesma história, por exemplo, digamos que eu vou digitar meu nome completo, meu e-mail, meu telefone e a mensagem, ei, estou interessado em seus pulmões e assim por diante. Assim, você pode ver por que esses fóruns de contato são realmente úteis em cada página porque o que quer que o usuário esteja fazendo, ele tem o formulário de contato lá. Assim, eles podem simplesmente enviar o formulário de contato sobre o que estão fazendo no momento, o que quer que eles estejam interessados, neste caso sobre os empréstimos. Então, estou interessado em seus pulmões. Como isso funciona? Quem é seu parceiro? Com quem posso falar e assim por diante. Então é assim que isso está funcionando. E vamos para o Fale Conosco. Por fim, entre em contato conosco. Não precisamos fazer nada aqui. E a última coisa que eu quero fazer para este vídeo é o modelo de carros, porque aqui dentro temos três botões. Então, vamos voltar aqui primeiro, porque já sabemos o que queremos fazer isso. E aqui você pode ver a página da coleção. Não quero que vá para a página da coleção. Eu queria levá-lo para a página da ferrovia. E a página normal será carros porque ver todos os carros os levará até lá para ver a lista de carros. Você pode abrir uma nova guia. Você pode fazer isso por padrão. E o que vou fazer nesse caso, na verdade, é abrir uma nova guia. Por que eu quero fazer isso? Porque talvez eu queira comparar os dois carros. Digamos que eu esteja interessado, vocês precisam de modelos BMW, por exemplo, estou olhando para um ângulo. Quero ver todos os carros para ver outro e simplesmente comparar os dois em duas abas. Ou você tem exatamente os mesmos carros, mas com uma cor diferente. Então, talvez eu queira abrir imagens no lightbox nas duas guias. E eu quero comparar a aparência do carro em cores diferentes. É por isso que isso é útil. Aqui. O que temos está reservado para este carro. O que podemos fazer agora é, por exemplo acessar o URL e enviá-lo para o formulário, ou podemos ir para a seção Páginas e escolher uma seção de página. E digamos que uma mensagem para talvez, vamos ver o que isso faz. Então, quando eu clicar em pré-visualização, reservo esta mensagem de carro para, ela vai me mandar para lá. Mas talvez eu possa vinculá-los a algum lugar por aqui. Então, vamos até aqui. Vamos usar o formulário de e-mail, talvez vamos tentar isso. Então, quando eu ouço que reservamos este carro, aí está. Isso me levará ao formulário de e-mail, que é exatamente o que eu quero. Então, eu não quero que eles percam muito tempo. Eu quero que eles, se estiverem interessados, eles podem simplesmente clicar aqui. Ou é por isso que usamos uma boa experiência de usuário nesse caso. Se eles estiverem aqui no topo da página e quiserem reservar o carro rapidamente, podem clicar aqui, ele os levará até o formulário. Mas se eles estão em algum lugar por aqui, isso ainda os está seguindo. Se eles rolarem até aqui e disserem, você sabe, o que, eu quero reservar aqui é o formulário de contato, para que eles não possam perdê-lo. É uma boa experiência de usuário, é uma boa solução de design thinking. Finalmente, o que queremos é C, opções de empréstimo. O que eu quero é levá-los a uma página de empréstimos como essa. E mais uma vez, você pode abrir isso em uma nova guia. Por quê? Porque talvez eu queira que eles leiam tudo sobre esses empréstimos, mas em uma nova guia para que possam comparar o carro que estão procurando no momento e os empréstimos que oferecemos, talvez estejam com Santander neste caso ou com leasing, seja qual for o caso. É sempre um bom processo de pensar em oferecer opções a eles. E, nesse caso, a opção seria abrir duas guias para que eles possam comparar as duas opções e ver o que funciona melhor para elas. Então, lá vamos nós. Agora, com isso concluído, vinculamos tudo. Tudo funciona como deveria. Então, quando eu clico em pré-visualização aqui, clique aqui. Tudo isso funciona muito bem. No próximo vídeo, falaremos sobre design responsivo. E eu vou te mostrar como transformar alguns desses designs em responsivos. E será um vídeo bastante rápido porque já fizemos alguns preparativos, mas se tivermos algumas falhas, talvez eu o divida em dois ou três vídeos, só para que seja fácil para vocês para seguir. Então, nos vemos no próximo vídeo que abordaremos o tablet. 188. Tablet responsivo: Tudo bem, então vamos começar com o design responsivo e começar com o tablet. E vamos lidar com a página inicial primeiro. E então, à medida que avançarmos, quero passar para as próximas páginas, mas tudo será exatamente o mesmo. Você só vai ajustar alguns desses elementos aqui e ali. E você já viu no vídeo anterior como é super simples fazer isso sem mais delongas, vamos começar. Portanto, já por padrão, temos nossa navegação, que funciona em todas as nossas seções, o que é totalmente bom. O que eu quero fazer aqui é entrar aqui, onde diz tablets. Abra esta seção. E primeiro de tudo, eu não quero que ele tenha tanto espaço no topo. Então, deixe-me abrir minha seção e reduzi-la para talvez 40 pixels. Aí vamos nós. E vamos abrir a embalagem do herói. Porque temos esse layout flexível ativado. Eu vou escolher vertical neste caso. Aí vamos nós. E agora tudo o que preciso fazer é simplesmente fazer alguns ajustes. Então aqui eu tenho meu herói. Conteúdo. A largura é de 60%. Vou colocar em 100% porque, dessa forma, ocupará todo o espaço disponível oferecido. E quando se trata dessas porcentagens, é realmente muito simples de memorizar. Pense nisso, onde seu conteúdo está localizado. Nesse caso, nosso conteúdo de herói está localizado dentro da embalagem do herói, mas esse herói da embalagem está localizado dentro do contêiner, e esse contêiner tem o emparelhamento de 20 em cada lado. Então, quando eu passo o mouse, você pode ver onde esse emparelhamento está localizado. Então, o que quer que esteja dentro do meu contêiner não será mais largo do que esses, essa largura do contêiner é de -20% de acolchoamento em cada lado. Portanto, é muito simples de calcular e entender. Agora, vamos fazer algo um pouco diferente. Então aqui temos a largura, temos a altura da nossa imagem de herói. O que vou fazer é abaixar isso. O que eu posso fazer é talvez definir isso como, digamos, centenas. Vamos ver se isso é demais. Aí está. E eu não quero que seja 100%. Acho que vai ficar bem. O que eu posso fazer aqui é talvez colocar esse conteúdo no centro , porque será muito mais fácil escalar dessa forma. Então, vamos chamá-lo de centro. E lembre-se de que quaisquer alterações feitas em um tablet não afetarão o tamanho da área de trabalho. Então, quando ele vai direto aqui e clica na área de trabalho, tudo parece exatamente o mesmo. Mas quando eu troco o tablet, isso afetará o tablet e o tamanho do telefone. Mas quando você fizer a mudança na área de trabalho vai afetar tudo. Portanto, ele cai em cascata do desktop para baixo, não o contrário no Webflow. Então, vamos voltar para o centralizado e colocar nosso texto no centro. O que você também pode fazer é talvez transformar isso em um flexbox e transformá-lo em um centro dessa forma. Mas, neste caso, vamos chamá-lo de centrado. Agora vamos posicionar isso para ficar centrado. Na verdade, você sabe o que, podemos fazer isso, então vamos, vamos fazer isso na verdade, vamos colocar isso como uma vertical do Flexbox. E eu vou colocar tudo em um centro assim. será muito mais fácil para mim tarde, será muito mais fácil para mim ajustar essas coisas. E, na verdade, vamos o tamanho do telefone e ver como ele se adapta ao texto. E, finalmente, para esses tamanhos menores teremos que ajustar o tamanho de nossos textos, mas chegaremos a isso em apenas um segundo. Vamos primeiro lidar com o tablet. Para esta seção específica, aqui. De certa forma, já fez o trabalho para nós. Então, vamos selecionar nosso invólucro neste caso, para que tenhamos a grade, que ele saiba o que fazer. Deixe-me ajustá-lo porque temos essas duas colunas, isso é ótimo. Só precisamos ajustar o conteúdo aqui dentro com a imagem. largura máxima é de 100 por cento. Vamos usar 100% para a largura e ele vai preencher isso. O que você pode fazer é ajustar a altura, ajustar a largura ou algo parecido, mas não acho que isso seja necessário. O que posso fazer aqui é também alinhar meu conteúdo para que você possa justificar seus itens no centro, mas não quero que você faça isso neste caso. Eu quero que eles se estiquem para preencher todo o espaço. Aqui, para este texto, o que eu quero fazer talvez seja adicionar uma margem de 64. E eu acho que vai ficar bem. É legível, é legível, está tudo bem. N Quando comecei a reduzir, você pode ver como isso se ajusta. Então, quando clico aqui, quando clico aqui, você pode ver como ele se segue facilmente e como se ajusta facilmente e tudo funciona como deveria. Gostar. Ali. Aí vamos nós. Então, vamos agora passar para esta seção. E aqui também temos uma grade para o invólucro da lista de coleções. Então, o que vou fazer nesse caso é ver. Na verdade, temos o Flexbox, mas isso não importa. Mas aqui temos uma grade. Apenas deixe-me ver. Sim, na própria lista de coleções. Então, se eu ajustar essa grade, o que vou fazer aqui é me livrar de algumas delas até que eu tenha apenas uma e adicionar mais duas aqui. Aí vamos nós. E vou ficar com o botão porque ainda preciso dele. Eu ainda preciso que eles vão para lá. E quando eu começo a escalar aqui, você pode ver que ele se ajusta automaticamente e se encaixa no espaço restante. E você pode ver que o espaçamento é mantido. E é por isso que adoro grades porque são super fáceis de trabalhar. Se analisarmos um pouco o que oferecemos, vamos corrigir esta seção. Aqui no contêiner. Não temos nada , mas aqui na nossa embalagem, na verdade temos um flexbox. Então, vamos colocá-lo na vertical. E o que eu preciso fazer é definir minha imagem e ir direto aqui até as margens, definir minha margem, é 64, por exemplo e vamos ver o que podemos fazer com esses textos. Há muitas, muitas opções diferentes que você pode fazer aqui. Mas o que eu posso fazer aqui, digamos que talvez eu possa esticá-lo ou aumentar minha largura em 100 por cento. Experimente, algo parecido e depois tente centralizá-lo ou não. Eu não sei. Talvez o que eu possa fazer seja porque eles estão no centro, talvez eu possa colocá-los todos como um flexbox para ficarem na vertical. E então talvez eu possa centralizar o conteúdo lá dentro. Então, selecione cada um deles. Clique no centro vertical do flexbox do conteúdo. Clique aqui, no centro vertical do Flexbox para o conteúdo. E aí vamos nós. Agora temos o conteúdo no centro. E, mais uma vez, quando você começa a escalar, você pode ver como ela se encaixa e como ela se ajusta perfeitamente ao tamanho disponível para cada ponto de interrupção específico. Essa imagem parece ótima. Nossos benefícios, agora vamos lidar com isso também. Vou buscar meus benefícios. Vai ser um pouco diferente. Então, quando eu pressiono Vertical, na verdade, vamos usar horizontal, porque isso era para o invólucro real de benefícios da imagem. Vamos ver o que podemos fazer aqui e nossos benefícios. Vamos virar essa grade. Então, quando eu o ajusto aqui, temos três colunas e nenhuma linha. Então, vamos adicionar mais duas linhas e nos livrar dessas colunas. Aí vamos nós. Então, agora temos o conteúdo no centro. Mas agora o que precisamos fazer é ajustar o tamanho real do nosso contêiner. Então, quando eu clicar aqui e segurar minha tecla shift e minha seta para cima, ela vai se ajustar para, digamos, 800. Eu acho que isso vai ser muito bom. E é muito bom. Aí está. Então, essa seção está concluída. E, finalmente, para o Fale Conosco, porque mais uma vez, essa é a grade. Lembre-se, mas eu posso fazer isso imediatamente, o que vai me poupar muito tempo, é clicar em editar imediatamente porque ele se propaga por todas as minhas páginas. Lembre-se, eu posso ir até o meu contêiner e posso ir até a embalagem do meu formulário. Posso selecionar meu bloco de formulários. Dentro disso. Eu tenho esse formulário para lembrar, e aqui temos essa grade. Então, quando eu clico em editar na minha grade, o que eu precisarei fazer talvez seja, vamos ver. Talvez eu possa adicionar mais uma linha como essa. Volte para fora. E eu vou selecionar meu e-mail aqui. Eu vou estender tudo. Isso vai empurrar o telefone para baixo, passar o telefone do outro lado. E aí vamos nós. Agora temos cada um desses campos ocupando toda a largura da nossa grade e o botão permanece o mesmo. Mas o que você pode fazer com o botão? Lembre-se de que justificamos esse direito, aqui mesmo. O que posso fazer é justificar a saída. E eu posso simplesmente clicar nele e expandir o tamanho dele. Ou eu posso colocá-lo no centro, algo assim e ele pode ocupar toda a largura. Posso usar a largura total e chamar esse botão de btn, apenas para que tenhamos um estilo diferente. Talvez eu possa escolher a largura de 100% neste caso. E eu posso usar o texto que está no centro. E tudo bem, porque temos em um fórum btn, que só vai ter essa largura. Aí vamos nós. Agora, quando você muda para o tamanho que quiser, ele ainda ocupará toda a largura da tela. E temos que voltar à instância para que possamos ver todo o formulário acontecendo. Então você pode ver que ele é cortado aqui porque temos 20 estofos em cada lado, que na verdade é o que queremos em primeiro lugar. Tudo funciona bem aqui. O que podemos fazer nos tamanhos menores e menores é, na verdade, cortar nesse tamanho. Então, vamos lidar com o tablet. E vamos vir aqui, onde diz mapa, entre por dentro. O que eu posso fazer com o mapa. Vamos ver o que temos aqui na embalagem. Temos o fluxo girando na flexão vertical. E o que podemos fazer é talvez colocar esses três em uma grade ou simplesmente deixá-los assim, talvez um por um. Então, quando estamos contentes, vamos ver, talvez eu possa elevar a largura para 100 por cento. Assim. Mas porque a embalagem está em, vamos ver, 100 por cento e o conteúdo está dentro. Eu realmente não sei por que está ocupando aquela sala. Tem o acolchoamento de 20. Deve manter esses 20 pares, mas isso não acontece por algum motivo. Vamos ver 2020 em cada lado dessa forma, onde somos a porcentagem de conteúdo e vamos alinhá-la à esquerda. Aí vamos nós. Agora funciona. E agora, para o texto interno, o que eu posso fazer é talvez dar a ele essa classe de centrado, porque eu quero centralizar meu título. Saltando aqui, clique no centro e centralize este também. Clique aqui. E então, como eu disse, você pode fazer com eles o que quiser. Você pode colocá-los em uma grade e, em seguida, verificar se há três colunas de largura. E então você pode ajustar essa grade ou simplesmente colocá-la no centro de qualquer maneira. Então, o que podemos fazer aqui é, vamos ver, talvez possamos colocar nosso conteúdo no centro. Não, eu preciso colocar um novo div aqui. Então, vamos fazer isso rapidamente. Vamos selecionar nosso controle de caixa de texto Eu digite deve, eles bloquearam. E vamos chamar isso de formulário ou mapa. Informações do mapa. E eu vou colocar o horário de funcionamento lá dentro. Vá lá, número de telefone e endereço. Aí vamos nós. Em seguida, transforme as informações do mapa em uma grade. Eu vou ter três colunas. Eu não vou ter filas. Aí vamos nós. Agora, como você pode ver, tudo funciona como deveria e se encaixa muito bem no interior. E embrulha muito bem. E isso me dá esse preenchimento na parte inferior porque eu não tenho um para o meu mapa, mas acho que funciona muito bem. Então, quando eu o troco aqui, ele ainda funciona, mas não no menor tamanho. Então, talvez possamos corrigir isso no menor tamanho. Em algum lugar por aqui, ele começa a quebrar, mas vamos lidar com isso em apenas um momento. Mas, basicamente, para o nosso mapa, é basicamente isso. Então, voltando ao exemplo, isso agora está corrigido. E, finalmente, para o nosso rodapé, vamos lidar com o rodapé em si. Acho que isso funciona muito bem, mesmo nessa escala. Mesmo nessa escala. Talvez, talvez em algum lugar por aqui. Então, talvez aqui no tamanho do telefone, o que podemos fazer é dividi-lo um pouco. Então selecione o rodapé e pressione Enter. Lembre-se de que isso propagará a mudança em todo o nosso design. Então, vamos passar para o nosso invólucro de rodapé porque isso é uma grade. Podemos clicar em Editar na grade. E o que podemos fazer aqui é talvez, vamos ver, talvez possamos adicionar uma linha adicional como essa. E talvez possamos nos livrar de uma coluna. Aí está. Então, agora só temos, agora vamos ter, vamos ter duas colunas só por causa disso. O que vou fazer a seguir é vir aqui e ajustar meus ícones sociais para aqui. Isso vai se propagar. Vamos ajustá-lo para aqui. E aqui eu vou colocá-lo no centro. Use meus ícones sociais, verifique se eles estão no centro. Aí vamos nós. Por padrão, isso está no centro. E o que eu posso fazer é ajustar essas mudanças porque você pode ver que estamos na margem 64, superior e inferior. Demasiado, na minha opinião. Então, talvez possamos reduzi-lo para talvez 32 ou algo assim. 33. Vamos usar 30 para manualmente porque ele não me escuta. 32. Adorável. E aqui o que podemos fazer é talvez usar nosso rodapé de ícones sociais e fazer essa alteração adicional. Vamos ver. Nossos links. Não tenho nenhum valor. Então, aqui podemos dizer algo como 32, eu acho, ou 24, talvez. Aí vamos nós. Finalmente, o rodapé do logotipo tem apenas o preenchimento no lado esquerdo, por qualquer motivo, vamos reduzir isso para zero. E esse acolchoamento, vamos ver. Sim, eu acho que está bem. Acho que vamos deixar as coisas assim. Então, quando eu verifico no meu tablet, eles ainda estão assim e eu posso rolar para baixo até o menor tamanho possível. Então, quando eu clico aqui e começo a rolar, você pode ver que ele continua lá e você pode ver os diferentes dispositivos aqui ao lado. Então, deixe-me me esconder só para que você possa ver isso um pouco melhor. Então, aqui estão, quando eu começo a rolar, você pode ver um mais três Kindle Fire Galaxy Note. Quando pararmos e começarmos a rolar por aqui, ele me mostrará novos dispositivos. Então, o Kindle Fire Galaxy Tab para, quando eu começar a mudar, Surface Pro Tools, o Surface Pro. Então, quando eu ando aqui, você pode ver todos os tipos de iPads e Microsoft Surface. Então, esses são todos os seus tamanhos. E a mesma história vale para o telefone. Em algum lugar por aqui você pode ver o Nintendo Entertainment System. Este é o iPhone SE, o Phi of S e o iPod touch anterior. Então, dispositivos muito, muito pequenos. E quando ele começa a subir, você pode ver todos esses diamantes no canto inferior direito aqui. Você pode vê-los aparecendo e me mostrando todos esses valores. Então, mais uma vez, a versão para tablet está basicamente pronta. Então, quando vou direto aqui no topo, a navegação ainda funciona porque corrigimos desde o primeiro dia. E esse efeito de foco não será visível de qualquer maneira, porque você usará sua guia em primeiro lugar. Aqui, não precisamos passar o mouse, mas, mais uma vez, ele não ficará visível porque não reagirá ao seu dedo. Aqui. O que podemos fazer é porque tudo está meio que, sim, vamos manter esses textos onde estão. Mas talvez estenda este parágrafo para preencher o espaço. Então, como fazer isso? Clique no seu parágrafo. E vamos com uma largura de 100%. Ou teremos que, eu acho, ajustados manualmente por qualquer motivo. Então, vamos lá. Sim, aí está. Às vezes, funcionará muito bem. Outras vezes, você terá que ajustá-lo manualmente, mas você pode ver como isso é super simples. E agora, quando eu começar a rolar, ele realmente será recortado nesse parágrafo e o ajustará como você pode ver para que caiba no espaço disponível que eu tenho. Mas primeiro preciso ajustá-lo manualmente, porque é muito importante que seus usuários não entendam, não peguem o trem de gelo. que significa que se as duas fileiras forem ótimas, elas ficarão muito cansadas em breve. Então, uma última coisa que quero fazer aqui para o espaçamento é que não acho que precisemos de muito espaçamento aqui. Então, aqui está tudo bem. Aqui, talvez esteja tudo bem. Então, vamos ver o quanto temos aqui. Então, somos uma seção de contêineres embalados, temos 200. Então, talvez possamos ter 200, talvez 150, algo assim. E aqui nesta seção talvez também possamos ter 150. Só para que possamos restringir um pouco nossas seções. Aqui nesta seção, também podemos ter 150 assim. Não sou muito fã desse layout por enquanto, mas talvez o que possamos fazer aqui seja fazer o mesmo que fizemos com nossos parágrafos. Então, simplesmente estenda os textos. Algo parecido com isso. Você vê se o texto está centralizado, não está. Então esse é o problema. Então, vamos voltar e selecionar nosso bloco de texto e vou dar a ele uma aula separada sobre o que é isso, oferta, centrada assim. E eu vou apenas centralizá-lo. E aqui, vou usar a oferta centrada. Certifique-se de que esteja centralizado. Lá vamos nós, e aqui a oferta é centrada. E agora, quando eu começar a escalar esses tamanhos menores, ele preencherá o espaço restante. E, na verdade, vai espaçar o texto muito bem. Você pode ver como isso funciona aqui. Uma última coisa que eu possa fazer é talvez fazer com que, vamos ver, a garantia do software não tenha nenhuma largura. Então, talvez esse bloco de texto possa ter uma largura de 100 por cento. Vamos ver se isso funciona. Isso não acontece. O que você também pode fazer é limitá-lo a algo chamado CH, que é personagem. Então, se escolhermos 60 CAH, isso só vai estendê-lo para que não funcione. Você precisa ajustar manualmente aqui, mas isso não importa. Acho que ainda funciona bem. O que eu gostaria de fazer é ajustar o espaçamento aqui, você pode ver na parte inferior que temos 32, oferecemos garantia, temos 32. Então, talvez eu possa ajustar isso para melhorar um pouco minha legibilidade para poder usar 40. Acho que selecionei minha oferta de manutenção, clique aqui, 40 e ofereço empréstimos. Não tem nenhum, mas ainda tem muito espaço aqui. Benefícios. Tudo parece bem. Talvez eu possa fazer o mesmo aqui, mas acho que é legível. Acho que é legível. Isso parece bom. Isso parece bom. Talvez possamos adicionar um pouco de preenchimento adicional aqui, mas vamos lidar com essa margem. Então, aqui nesta seção, a margem é 150, isso é ótimo. Vamos passar para a próxima seção. Margens de até 100. Então, vamos passar para 150. E, finalmente, o formulário de contato conosco , se eu clicar nele, vamos para 150 e lembre-se de que ele o ajustará para cada página. Vá até o mapa e ajuste seu 2150. E, finalmente, vá para o meu rodapé, aperte Enter e ajuste para 150 também. Uma última coisa que eu quero fazer aqui é ir até o mapa. E aqui eu quero fazer esse ajuste e empurrá-lo um pouco para baixo. Então, talvez eu possa ir com 40. Aí está. E esse H2 dark em quem estamos centrados ou onde estamos centrados, talvez eu possa escolher 40 também. Aí vamos nós. Então, agora isso é bonito e centrado e temos um pouco mais de espaço para respirar lá embaixo. O que eu posso fazer com dois mapas é que talvez eu possa manter a altura em 450 ou algo assim, não 150, mas para 50. Aí está. Acho que fica muito melhor em telas menores. E então você também pode ir até aqui, talvez 50 realmente não funcione. Tudo isso ótimo. Então, quando eu clico dentro, seleciono meu mapa, talvez 350. Aí está. Eu acho que isso funciona muito melhor. Quando eu vou para o menor tamanho possível. Talvez aqui, eu possa ir com 250. Aí vamos nós. E eu acho que isso funciona muito bem. Então, lá vamos nós. Nosso tablet está basicamente completo para nossa página inicial. O que podemos fazer a seguir é talvez ir para a próxima página dos carros e consertar isso imediatamente. Então, isso basicamente funciona como deveria. Tudo o que eu quero fazer é talvez ajustar o posicionamento desse círculo. Então, estou apenas clicando no canto, arrastando-o um pouco para baixo. E acho que está tudo bem até agora. Sim. Então, é bom para essa coleção exclusiva. O que podemos fazer, vamos ajustá-lo. Então, primeiro de tudo, nesta seção. O que temos no contêiner é que não temos nenhum emparelhamento, o que é ótimo. Então, vamos deixar as coisas assim. Não temos nenhuma margem. Mas aqui, para esta, quero mantê-la às 01:20, talvez algo assim, ou talvez 150, mas não, nem mais do que isso. E, finalmente, para isso, há uma seção de coleções exclusivas. Mas lembre-se de que temos essa grade dentro da lista de coleta de carros. Então, o que vou fazer é ter oito carros. Eu vou bater aqui mesmo. E em vez dessas, o que eu posso fazer é , digamos, colunas, vou me livrar delas e manter duas colunas por enquanto. Então você pode ver que agora temos duas colunas e acho que muitos detalhes em 768, o que é ótimo. Muitos detalhes. Você pode tocar nele, você pode tocá-lo, você pode fazer qualquer coisa. Formulário de contato conosco. Quando eu entro, ainda tem 150. Mas aqui eu tenho essa margem inferior. Então, talvez aqui o que possamos fazer é selecionar esta seção. Vamos ver de onde vem a margem. Vamos ver o embrulho da lista da Car Collection. Aqui temos a margem de 64, então vamos nos livrar dessa margem e descer para zero. E agora temos esse espaçamento bem fixado, o que eu acho que funciona muito bem. E aqui você pode ver todas as mudanças que fizemos. Tudo funciona como deveria, incluindo a navegação. Então, isso é bom. Não precisamos fazer realmente nada aqui. Vamos agora ver o discurso do empréstimo e ver como isso parece. Então, o que podemos fazer aqui, porque lembre-se de que tínhamos esses carros em uma grade. Vou mantê-los assim. Eu quero fazer edição basicamente. Eu não vou tocá-los. Eu só vou ficar com eles. E eu quero que ele escale como está, para se assemelhar a uma única imagem. Então, vamos deixar como está. Para a próxima seção, o que vou fazer é ajustar isso para 150, talvez um a vinte. Porque agora temos espaço suficiente, então o que vou fazer é pular para dentro daqui. Lembre-se de que temos essa grade para empréstimos, benefícios. Vou clicar aqui mesmo. Eu simplesmente adiciono mais duas linhas assim. Eu vou me livrar dessas colunas. Vai preencher o conteúdo, tudo parece como deveria. E vamos ajustar um pouco o espaçamento para que o espaçamento entre as linhas, vamos com 32. Acho que funciona muito bem e vai se adaptar muito bem a todos os tamanhos. Como você pode ver, ele preencherá essas informações. O que podemos fazer é nos tamanhos menores, você pode ver que ele empurra o texto para a esquerda. Então, o que eu posso fazer aqui é selecionar P cinza e adicionar uma classe de combinação de centrado. Aí vamos nós. E eu vou centralizar meu texto assim. E eu vou adicionar essa classe de combinação a todas elas. Então, basta selecionar Adicionar centrado. Aí vamos nós. E agora, quando eu começo a escalar, você pode ver que ela escala a partir do centro e não se alinha com o lado esquerdo, então tudo funciona como esperado e como deveria. Já fizemos essa seção anteriormente. Talvez o que possamos fazer aqui seja ter um pouco mais de espaço para respirar porque temos essas imagens inscritas. Então, lembre-se de que adicionamos 64. Vamos usar 80 neste caso. Eu acho que está bem. E vamos ver se temos algum emparelhamento adicional aqui. Acho que não temos. Portanto, o invólucro não tem nenhum recipiente, não tem nenhum. Na seção inferior não tem nenhum, então tudo bem. Entre em contato conosco está bem. Aí vamos nós. E a última página que eu quero abordar neste vídeo é “Fale conosco”. Então, vamos lidar com isso porque já estamos a 27 minutos. Então, para entrar em contato conosco, realmente não há muito o que fazer por aqui porque tudo já está configurado como deveria. Então, aqui temos a imagem do showroom. Você pode ajustar o tamanho se quiser, mas eu não vou me preocupar aqui. Isso é às 01:50, então vou deixar assim. Então, se eu apertar Enter, você pode ver 150. Talvez possamos adicionar a classe de combinação aqui e ajustá-la um pouco, mas eu realmente não vou me preocupar. Você pode entrar em uma margem negativa com esta e o tamanho, mas não acho que seja necessário. Eu acho que isso parece muito certo. Uma última coisa que quero abordar para o tablet é, na verdade, vamos lidar com o CMS, com o modelo de carros. Então, aqui o que podemos fazer é realmente posicionar isso para baixo. Então, vamos fechar tudo isso assim. Portanto, temos informações sobre o carro e temos o Cartão de Ação do carro. E é isso que planejamos inicialmente. Então, quando eu seleciono meu contêiner, você pode ver que temos um flexbox. Então, quando eu bater na vertical, ela vai empurrar aquela carta até o final. Então, o que eu posso fazer é clicar no centro aqui, ou posso mantê-lo à esquerda. Posso usar as informações do meu carro e usar a largura. Você pode ver que é 65 por cento. Eu posso ir com 100%. Aí vamos, e ele vai preencher o espaço restante. Meu layout será consistente, mas agora temos um problema com nosso cartão. Aqui. Eu também vou digitar 100 por cento. Ele vai preencher essas informações. Eu vou usar esse botão. O que eu possa fazer talvez seja dar uma margem de, digamos, 40 ou algo assim para essa dimensão de tablet. E eu quero manter esse layout voltado para a esquerda. Aqui, o que precisamos é que a posição seja estática. Não está mais pegajoso, como se estivesse aqui. Então, mais uma vez, você pode ver que ele fica aqui. Continua sendo o que queremos. E em um tablet vai simplesmente empurrar esse conteúdo até o fim. Isso escalou bem, então não precisamos nos preocupar com isso. Temos três carros, isso é ótimo. Essa escala, essa escala, então tudo está como deveria e como queremos que seja. Uma última coisa que quero fazer é selecionar conteúdo do meu cartão de leilão de carros. Venha aqui e adicione uma margem de 64, por exemplo, e acho que não o conteúdo, desculpe, mas o carro Action Card. Venha aqui para o top 64. Aí vamos nós. E agora temos essa separação. 64 talvez seja demais. Então, vamos com 32,32 que funciona bem. Acho que neste caso em particular, em termos dessas imagens, o que podemos fazer é talvez selecionar isso. E vamos ver, porque esta é uma lista de coleções. Eu posso ir até a lista de coleções e escondê-la. Agora, quando eu clico em pré-visualização, vamos ver se funciona. Isso acontece. Então, ainda está escondido, mas ainda me mostra todas essas imagens diferentes. E ainda posso usar minhas setas para a esquerda e para a direita, rolar entre todas as minhas oito imagens, que na verdade é o que eu queria. Então, veja todas as imagens quando você usar uma parada aí, ela as levará para esta página. Então eu acho que isso é fantástico para o nosso layout. E tudo funciona muito bem, até tamanhos muito pequenos , que você abordará no próximo vídeo. Mas basicamente para o tablet e na maioria das vezes aqui no modo retrato móvel, tudo funciona como deveria. Vamos então ajustar isso um pouco mais tarde e ajustar isso e ajustar todas essas coisas. Mas, por enquanto, tudo funciona como deveria, inclusive isso , exceto em tamanhos muito, muito pequenos, pequenos, que vamos lidar em apenas um momento. Então você pode ver aqui. Então, quando estou em um desktop, temos três cartões. Imediatamente quando mudei para o doublet, agora temos apenas um cartão e ele funciona até os menores tamanhos possíveis. Mas vamos lidar com eles em apenas um momento. Então, lá vamos nós. Essa é a nossa resposta. Tudo está conforme o esperado, tudo funciona conforme o esperado. Então, no próximo vídeo, talvez possamos abordar esses tamanhos de retrato móvel e paisagem móvel. Porque existem alguns pontos de interrupção adicionais e algumas dicas que posso dar para esses tamanhos. Mas já fizemos a maior parte do trabalho, então tudo ficará bem exceto pelo retrato móvel, quando realmente precisaremos começar a fazer algumas alterações em nossos tamanhos de fonte. Então, eu vou te ver lá. 189. Paisagem móvel: Agora vamos trabalhar em nossos tamanhos responsivos de telefone. Então, quando vou aqui, tablet que já fizemos. E quando vamos ao telefone, podemos começar a ajustar algumas dessas coisas. Então, dentro da paisagem, acho que tudo isso funciona bem, mas talvez eu possa começar a fazer mudanças aqui, mas eu quero, quero fazer algumas mudanças adicionais aqui. Então, vamos primeiro começar com isso. Vamos ver o que temos aqui. Então, talvez possamos começar a fazer algumas mudanças aqui dentro. Então, talvez essa seção deva ter uma margem menor. Então, vamos com 100. Veja como fica. Eu acho que está bem. Então, talvez possamos manter todas as nossas seções em 100. Por uma questão de consistência. Eu acho que isso é bom. Benefícios. 100, aí está. O tamanho é bom e válido. Formulário de contato conosco. O que eu posso fazer aqui é o apresentador saltar para 100. Lembre-se de que isso se propagará por todo o nosso design. Vamos até aqui, digite o tipo 100 aqui, já temos isso como uma configuração. Andrew já ajustou o tamanho desse mapa. Então, quando eu entrar aqui, finalmente, vamos para 100. Lá, voltamos à instância. E acho que tudo funciona bem até certo ponto aqui, mas vamos corrigir isso no próximo tamanho. Mas, por enquanto, acho que tudo parece bem na tela inicial , exceto aqui. Então, talvez eu possa começar a fazer algumas mudanças aqui. Então, aqui estamos aqui, centrados em 1s. E eu posso te dar a classe combinada de, digamos, telefone. Aqui. O que posso fazer é começar a fazer algumas mudanças. Então, para o H1, eu posso ligar aqui em vez de 64, talvez eu possa ir com 56, ver como isso parece. Ou talvez 48. 48 parece bom aqui para esta imagem. O que eu posso fazer, se você se lembrar, se formos até aqui, temos largura e altura fixas. Então, talvez possamos ajustar isso. E vamos usar a largura de algo menor, como quando t, algo parecido com isso. E podemos ajustar manualmente esses dois, algo assim e isso para algo parecido com isso. E então podemos ajustá-los ainda mais manualmente , movê-los para baixo, selecionar este e movê-lo um pouco para cima até algo assim. Aí vamos nós. Finalmente, o que posso fazer nesta seção específica é em vez de um quinto, vamos com 100. N vai funcionar muito bem. O mesmo que todos esses outros. Então, aqui dentro do telefone, do telefone ou da paisagem, você pode ver como é. Isso é ótimo, isso é ótimo. Vamos reduzi-lo ao menor. Eu acho que isso é bom. Aí vamos nós. Então, isso parece bom. Então, dentro do maior cenário de telefones, mesmo assim, isso funciona muito bem. Então, quando eu clico em pré-visualizar e restringi-lo, tudo parece muito bom. Então eu acho que isso é bom. E vamos voltar aqui e ajustar algumas dessas outras páginas. Então, vamos até os carros e ver o que temos aí. Então, primeiro de tudo, vamos ajustar esse círculo. Reduza um pouco para ver como fica. Isso é bom. Então, vamos manter o círculo onde está. Este H1 é centrado. Parece bom. Vamos ver essa coleção exclusiva. Em primeiro lugar, nesta seção, vamos mantê-la como está. Mas nesta seção, abordaremos 100 lados principais da embalagem lançada pelo curandeiro e nossa lista de coleções, porque essa é nossa grade, clique em Editar grade. E eu vou me livrar das minhas colunas. Então, basta colocar uma coluna lá. Porque isso são carros. Ele deve exibir todos os oito carros. Então, vamos simplesmente contá-los. 12345678. Aí vamos nós. Então isso funciona perfeitamente. Fale conosco é bom porque já o configuramos. Isso é bom. Isso é bom. Então, agora esta página está completa. Você pode ver como isso é simples. Vá para empréstimos. Como mencionei, vou manter isso como está. Mas aqui eu vou ter essa aula. Vamos rapidamente acessar a página inicial e ver o que fizemos com o H aqui. Portanto, temos o telefone centrado no herói da classe telefônica H1. Então, vamos para os pulmões. Selecione este. Vamos ver o H1 centrado. Deixe-me ver o que posso fazer aqui. Então, deixe-me voltar para casa. E comece a explorar um pouco. Então, aqui temos um telefone centralizado e, para o telefone, ajustamos para 48,86. Nesse caso, não acho que precisemos de um T6, então podemos baixá-lo para talvez 56. Agora, talvez 64. Vamos ver. O que podemos fazer. Eu não sei. 70 a 72 funcionam bem. Então 48, 72, isso é ótimo. Vamos aos pulmões. E vamos dar a esse H um. Veja, já são 38. Então, vamos ver, talvez possamos te dar esse 48. Isso pode ser 60, 72. Aí vamos nós. Acho que funcionará muito bem para esses tamanhos menores até atingirmos esse tamanho. Então, vamos mudar isso. Então, aqui funciona bem. Aqui, para essas imagens, talvez possamos adicionar um pouco de espaço para respirar, talvez 40 pixels, algo assim. Acho que funcionará muito bem para este. Vamos reduzi-lo para 100. Já corrigimos isso. Portanto, funciona muito bem nesta seção. Em vez de 200, vamos com 100, que vai crescer muito bem. E aqui o que podemos fazer é talvez começar a centralizá-los. Então, talvez nesse tamanho, talvez possamos centralizá-lo, centralizar este e centralizar nosso parágrafo também. Vamos ver se isso muda. Sim, você pode ver que isso não afetou essa mudança, é disso que eu estava falando. Você pode ver no tablet isso afetou apenas esse ponto de interrupção porque foi aí que começamos a mexer com ele. Então, tudo isso funciona. Bem, parece ótimo. Se agora formos para a página Fale conosco. Nós realmente não precisamos mudar nada aqui. Tudo é feito para nós. E, finalmente, vamos até o modelo do curso e vamos ver o que podemos fazer aqui. Então, aqui, vamos deixar isso nesta fase. Acho que isso funciona. Ok. Não é fantástico, mas funciona. Ok. Você pode ver que são 480 pixels, então vamos alterá-lo aqui porque ele se decompõe muito. Então, aqui o que faremos é talvez possamos deixar tudo isso. Sim, vou realmente deixar tudo como está porque está dentro de uma grade. E o que eu posso fazer aqui neste caso é talvez, talvez eu possa ajustar isso ou algo assim. Então, vamos ver, porque isso está dentro de um contêiner que é chamado de conteúdo do cartão de leilão de carros. Então, talvez possamos começar a brincar um pouco com eles ou agora vamos mantê-los no menor tamanho. Vamos deixar como está aqui. Ou talvez eu possa posicionar isso no centro. Vamos ver como fica. Então, isso está em um centro e isso permite transformá-lo em um flexbox, garantir que tudo esteja centralizado. E agora você pode ver o problema que temos aqui. Então, se eu posicionar isso no centro e isso no centro, não funcionará corretamente. Então, o que eu posso fazer com esse botão é talvez eu possa dar a ele uma largura de 80%. Vamos ver e centralizar o texto lá dentro. Em seguida, use esse botão, dê a ele uma largura de 80 por cento e centralize o texto dentro dele. E veja o que eu posso fazer aqui. Então não. Vamos ver se isso resolve. Isso não acontece. Sim, você pode ver qual é o problema? Eu tenho uma margem aqui, então vamos nos livrar dessa margem. E agora eles estão centrados aqui para o rótulo atual, o que eu posso fazer é ter uma margem aqui, para que eu possa me livrar dela. E este carro Action Card. Na verdade, vamos ver, vamos ver o que podemos fazer aqui. Talvez eu possa saber. Talvez eu possa colocar isso, garantir que meu conteúdo esteja no centro. Vamos ver se configuramos como automático neste lado e configuramos como automático neste lado, isso colocará esse conteúdo no centro. Mas agora o que eu quero fazer talvez seja ajustar esse conteúdo, mas temo que ele quebre a largura dele. Então, vamos mantê-lo onde está. E aqui o que vou fazer talvez seja adicionar um pouco mais. Espaço para respirar. Pode ser 40 ou 20. Talvez 20 aqui também. Vamos ver. 20. Não, porque isso tem 24. Vamos aqui com 24 também. E aqui, para obter uma margem superior, nós realmente não precisamos dela, então acho que vai funcionar muito bem. Aí vamos nós. E agora, finalmente, vamos lidar com essa última seção, que é essa, e vamos ajustá-la para 100. E aí está. Concluímos o design e mudança para o cenário móvel. No próximo vídeo, abordaremos retratos móveis. Então eu vou te ver lá. 190. Retrato móvel responsivo: Tudo bem, então finalmente, vamos lidar com o retrato móvel. Então, estou na página inicial. Vou clicar ali mesmo. E primeiro de tudo, vamos ajustar isso. Então, aqui o que vou fazer é reduzir muito o tamanho. Talvez 32. Vamos ver como isso parece. E isso pode ser 48. Talvez. Isso é bom. Tudo bem, tudo bem, mas a imagem não está boa. Imagem do herói. O que podemos fazer nesse caso é, para obter uma largura, eu posso segurar minha tecla shift e a seta inferior, como você pode ver, ela vai reduzi-la para talvez 270. Acho que isso vai funcionar muito bem. Isso podemos reduzir isso, podemos diminuir como muitos. E o que podemos fazer é colocar isso automático e nos certificar de posicioná-lo aqui, mas ajustá-lo aqui. Aí vamos nós. Aí vamos e talvez ajustemos isso um pouco para algum lugar por aqui. Acho que isso vai funcionar muito bem. Quando eu escalo até mesmo para os menores tamanhos possíveis, você ainda poderá ver pelo menos um pouco. Então, talvez algo assim funcione um pouco melhor. Então, quando eu chego ao tamanho menor, você pode ver como é. Então, finalmente, a imagem do herói. E o que podemos fazer é, vamos ver, altura não é algo. Vamos definir a altura como automática. Algo parecido. E eu vou consertar isso agora e reduzi-lo até o fim. À medida que a largura aumenta, a altura aumenta automaticamente. É isso que eu quero para os tamanhos. Aí está. Portanto, esse é o menor tamanho possível. Esse é o nosso maior tamanho. Então, talvez possamos até mesmo diminuir com uma largura para algo assim. Aí vamos nós. Então, vamos para o tamanho maior. Vamos ver o que podemos fazer. Talvez essa não seja a solução certa. Então, para minha imagem, vou escalá-la aqui. Vamos ver. Ele só tem uma largura. Então, se eu chegar a 100 por cento assim, espero que isso resolva o problema. Ou até 80%. Talvez possamos escolher a imagem do herói. Talvez possamos incluir o preenchimento de, digamos, dez pixels. Então isso vai impedir que ele saia. Aí vamos nós. E acho que isso resolveu o problema muito bem. Aqui, o que podemos fazer é deixar como está. Temos uma margem de 100, o que eu acho muito grande. Mas isso não importa. Podemos simplesmente deixá-lo como está lá. Em termos desse botão, o que podemos fazer é talvez definir algumas alturas em algumas larguras ou algo assim. Então, vamos usar uma altura mínima de talvez 50 pixels, algo assim. Portanto, ele sempre manterá os 50 pixels de altura mínima. E por dentro vou centralizar meu texto. Então, não importa o que esteja acontecendo, sempre vai escalar assim , algo assim. Portanto, não é muito pequeno e nem dois, nozes muito cheias. Isso funciona muito bem , exceto pelo texto. Vamos centralizá-lo assim. E quando você começar a escalar, tudo vai funcionar bem. Talvez esses espaçamentos não precisemos que eles sejam tão grandes. Então aqui temos 64, talvez possamos descer para 40. E em termos de toda a seção, temos centenas. Então, vamos continuar assim. Eu acho que isso funciona bem. Isso funciona bem em todos os tamanhos, então não precisamos fazer muita coisa. Aqui. Aí está. Este botão, altura mínima de 50. Então, ele herdará aquele estilo que já definimos. Isso é bom. Tudo isso funciona bem, as imagens funcionam bem. Isso funciona bem. Lembre-se, este é um dispositivo muito pequeno, 240 pixels. Então isso é realmente, realmente, vamos ver o que é isso. Então, Nintendo Entertainment System, N E S. Então, vamos ver. Talvez vá para algo como um S. Sim, então é isso. Isso é isso. Esse é o tamanho para o qual estamos projetando aqui. Portanto, lembre-se de não prestar muita atenção a esses tamanhos extremamente pequenos e ninguém os está realmente usando. Mas por qualquer motivo, ruim ou pior, ainda podemos ajustá-lo e fazer alterações, se necessário. O que eu quero fazer aqui, porque isso funciona como deveria. Eu quero ajustar isso. Então entre no meu mapa aqui, lembre-se de que incluímos essa grade. Então eu vou para onde somos rapper, onde estamos contentes, adoráveis. E aqui temos nosso mapa em quatro. Eu vou bater ali mesmo. E vou ajustá-lo em três linhas, assim, e adicionar apenas uma coluna. Aí vamos nós. Agora, essa dívida fixa e para o mapa em, o que eu posso fazer é adicionar uma margem inferior de 40, talvez, só para que eu possa reduzir um pouco esse texto. Então, quando eu diminuo a escala , tudo funciona como deveria. Por fim, para o rodapé, vamos ajustar e fazer algumas alterações lá também. O que eu posso fazer é pressionar Enter aqui. Então, mesmo nos tamanhos menores e menores, isso funciona. Mas deixe-me pegar esses links. E o que eu posso fazer porque eles são uma criança da grade. Talvez eu possa transformá-los em um flexbox aqui. Ligue na vertical, verifique se eles estão centralizados. E agora isso funciona, não importa o tamanho em que você esteja. Tudo se expande muito bem assim. Não importa o tamanho em que você esteja. Agora que isso funciona, o que podemos fazer é ir para outra página, que é carros neste caso. Isso funciona como deveria, até o menor tamanho possível , exceto este. Então, o que podemos fazer aqui neste caso é reduzir isso para 32. E esse 248. Aí vamos nós. Ou talvez até mais, mas não acho que seja necessário. Vamos mantê-lo onde está. Então, esses 32, 32, então ele apenas herda isso. O que podemos fazer nesse caso é abaixar um pouco o círculo, mas não acho que isso seja necessário. Eu até acho que isso aumenta um pouco de charme. Então, tudo funciona mesmo nos tamanhos menores, o que é ótimo. formulário funciona muito bem. Isso funciona muito bem. Exceto aqui. Vamos ver para onde vamos até o fim. O que podemos fazer é centralizar essas informações. O que vocês acham? Então, se eu clicar aqui, sendo o endereço e centralizar o conteúdo, use a coluna do número de telefone aqui. Centralize o conteúdo lá dentro, venha aqui, centralize o conteúdo. Agora, quando eu começo a escalar, parece meio que bom, exceto por este. Agora, vamos mantê-lo à esquerda. Vamos apenas mantê-lo alinhado à esquerda. Não quero que funcione muito nesse caso, porque esse é um conteúdo mais longo, esse conteúdo mais curto e a centralização dele pode parecer um pouco estranha nesse caso. Então, vamos mantê-lo assim porque ele se encaixa bem. Vamos voltar ao exemplo. Vamos para nossa página de empréstimos. Veja onde estamos aqui. Eu não acho que as mudanças necessárias aqui, talvez aqui o que possamos fazer é mudar isso para 30 para que já esteja em 32. Então, isso é bom. Tudo funciona como deveria ser uma dívida já configurada. Isso funciona muito bem. Isso funciona bem, entre em contato conosco. Tudo isso funciona bem, exceto esses dois. Então, o que podemos fazer é definir alguns, você pode ver que a largura máxima é de 100 por cento. Então, o que eu posso fazer é, digamos, uma largura mínima de talvez 50 pixels. Use este, com largura mínima de 50 pixels, para que não caia abaixo de 50 pixels de largura. E você pode ver como isso parece. Então, talvez 50 seja demais. Talvez possamos usar 20 pixels e 20 pixels. Algo parecido. Vamos ver. Sim, então meio que começa a desmoronar por aqui. Então você pode ver o iPhone mini, 13 mini. Então, abaixo disso, em algum lugar por aqui, são 310 pixels. Então, o que podemos fazer é ajustar talvez a largura mínima de dez pixels dessa forma. E eu vou me livrar disso. Então, vamos até aqui. Larguras máximas. Digamos que eu não saiba 100% aqui ou talvez 100 pixels. Sim, vamos com 250. Essa é uma largura máxima. E essa é a largura máxima de 250 pixels. Adorável. Então, agora, quando eu começar a escalar, ele vai diminuir. Vamos usar uma largura de 250. Isso pode chegar a 50 mortes. E agora, quando eu começo a escalar, tudo parece o mesmo. Então, vamos tentar 150. Veja o que isso faz nesses menores tamanhos possíveis, como esse. Sim, acho que 150 funciona melhor porque ainda mostra a imagem e mantém o posicionamento delas onde queríamos que elas estivessem. E em vez de uma largura mínima de dez pixels, posso usar uma largura mínima de talvez 80 pixels ou algo assim. Então, só para que não seja muito pequeno. 80 pixels, e aí está. Então, agora isso está concluído. Isso é bom. Está tudo bem. Temos aquela página de contato. Vamos resolver rapidamente as dívidas. Então, vamos ver, não precisamos fazer nenhuma alteração aqui. Está tudo bem. E, finalmente, vamos acessar o modelo do curso e ver o que podemos mudar aqui. Então, primeiro de tudo, temos que ajustar isso porque ele continua quebrando. Então, o que eu posso fazer nesse caso, lembre-se de que temos o preenchimento inferior em cada um desses fundos é que eu posso ajustar o espaçamento das minhas linhas para que eu possa usar 24 ou algo parecido. Então, o que eu vou fazer é dividi-lo em dois. Então, teremos 2468 em dois. Então, teremos quatro linhas diferentes como essa. E teremos duas colunas diferentes como essa. Aí vamos nós. E por alguma razão , não respeitou isso. Então, vamos manter essa curtida ou visão. Nós temos o emparelhamento. Vamos ver a visão geral do carro. Talvez possamos introduzir esse emparelhamento e ver o que acontece. Na verdade, não muito. Então, talvez tente com uma margem, não muito. Então, o que podemos fazer talvez seja estender isso para baixo. Então, talvez precisemos de alguma altura porque estamos limitados com uma altura máxima de 196. O que podemos fazer é escolher algo como 500 ou algo assim e tentar aumentar isso. Aí vamos nós. Então, vamos usar 32 aqui também. Agora, quando eu começo a escalar, ele funciona até os menores e menores tamanhos até algum lugar por aqui, talvez. Então, o que é isso, mais uma vez, aquela coisa da Nintendo. Então, em algum lugar por aqui ainda funciona. Então, vou manter esse layout. Não vou me preocupar muito com isso. O que podemos fazer na verdade é dentro daqui, o que nos dará um pouco mais de espaço para respirar, é reduzir essa lacuna para 24. Então, o que isso vai me permitir fazer é que vai ficar muito mais próximo, mesmo nesses tamanhos menores, algo assim. Então, somos chamados de descrição que funciona bem. especificação de veículos não. Então, vamos mudar isso. Então, vamos para a descrição da especificação. Isso é bom. Essa ação específica. Agora vamos ver onde estamos. Então, aqui vamos nos ajustar porque temos seis deles. Vamos ver o que podemos fazer aqui. Talvez possamos ajustar a largura deles, algo como 0,75 PARA 0,754. E vou reduzir isso para 24. Aí está. Então, agora as frações dessas colunas são, na verdade, muito mais estreitas. Assim, você pode ver que o conteúdo vai ficar muito melhor. Ou se você não quiser ver isso, o que você pode fazer é vir aqui e simplesmente se livrar de uma coluna e ela vai empurrá-la para baixo. Então, eu preciso de seis deles no total. Então 123, lá vamos nós. E esse FR, vai ser, digamos, um FOR assim. E agora temos o layout completo da largura do conteúdo e vamos mantê-lo assim. Então, basta se livrar da segunda coluna e ficar com uma coluna para a mesma história de segurança. Então, vamos ver o que podemos fazer. Podemos passar pela coluna quente e ver quantas precisamos. Portanto, precisamos de 123451 FR. Então 12345, lindo, sucesso, pronto. E porque seu texto vai escalar muito bem. Vamos fazer o mesmo aqui. Então, seja muito perspicaz. Livre-se desse. Em quantos precisamos. Animado. Passe para o próximo, que é o exterior. Livre-se desse. Adicione os novos aqui também. Ok. Vá para o interior. Mesma história. Portanto, verifique se você está em um FR, para a largura. Porque dessa forma, tudo vai se encaixar muito bem e fazer o mesmo aqui. Vamos ver as linhas 123. Isso é ótimo. Agora, tudo vai ficar muito mais bonito e parecer muito mais coerente, natural aqui. Finalmente, para descartar o que temos está no menor tamanho possível, temos isso. Então, vamos ver se o texto aqui dentro está centrado, aqui, está centrado. Então, o que eu posso fazer é porque ele herdando esses 50 pixels, eu posso até adicionar a classe de combinação, o que eu não vou fazer porque estou muito feliz com esse layout, com a aparência dele. Acho que está tudo bem porque quem realmente usa algo abaixo desses tamanhos? Algo como este iPhone SE Phi of S, lançado anteriormente. Não acho que alguém use algo pequeno. Então, aqui temos nossa coleção funciona bem, tudo funciona bem. E é basicamente isso. Esse é o nosso design responsivo concluído. E na próxima lição, vamos realmente começar e abordar algumas animações. Então, vou mostrar como configurar tantos pacientes para brincar com animações. Vou explicar como as animações funcionam dentro do Webflow e no que você deve pensar ao criar essas animações no Webflow. 191. Animações no fluxo de internet: Neste vídeo, abordaremos a animação, mas eu só quero mostrar o pequeno erro que cometi anteriormente. Então, se eu voltar para o Webflow aqui, o que fiz anteriormente foi tentar diminuir o tamanho dessas imagens aqui. Mas o que posso fazer é adicionar classes separadas e depois ajustar a largura e a altura aqui. Isso manterá esses tamanhos consistentes. Portanto, não importa o que eu esteja fazendo aqui em todo o meu design, vou mantê-los consistentes. Então, deixe-me realmente mostrar isso aqui. Então, vamos fazer algo como Hiro, hiro, key, image phone aqui. Então, quando eu ajusto a largura e a altura para talvez o metrônomo 80 pixels, vamos ver o que isso faz. E altura de 80 pixels. Porque eu estou nesse telefone, ele não deve se propagar para aqui. Então você pode ver o que ele faz. E a mesma história aqui. Então, se eu for me livrar dessa, remova a classe e vamos usar o telefone de garantia Hero. Agora vamos usar a largura de 80 pixels, altura de 80 pixels. E vai se propagar bem e manter a mesma consistência que propusemos que fosse. Aqui. Talvez eu possa mover isso um pouco, talvez mais ou menos por aqui, para que você possa ver como isso fica entediante de vez em quando quando quando você brinca com esses elementos. Então eu acho que isso funciona bem. Agora, finalmente, o objetivo deste vídeo é a animação no Webflow. E a animação pode ser muito complexa às vezes, mas não precisa ser. Você pode torná-lo tão simples quanto quiser. Então, o que queremos aqui é que, se eu mudar para a animação, você pode ver que temos o acionador do elemento e o gatilho baseado no gatilho da página se você pode ver aqui o que ele faz. Ele apenas aciona a página inteira quando ela é carregada. E o gatilho dos elementos acionará esse elemento em si. Então, vamos mudar para aqui. E deixe-me colocar isso aqui. Portanto, permanece consistente. Então, aqui temos esse conteúdo de herói. Então, o que vou fazer é acionar os elementos, vou clicar neste Plus. E você já tem algumas animações preparadas e , em seguida, algumas animações que você mesmo precisa preparar. Então, aqui você pode ver quando eu pressiono e aciono, você pode ver o clique ou toque do mouse. O que acontece então? mouse, que é o que já temos basicamente quando passamos o mouse com o botão, você pode ver o que temos. Em seguida, você tem o mouse movendo sobre o elemento. Então, quando eu movo meu mouse, o que acontece? Você pode definir e ter milhões de exemplos diferentes on-line. Eu queria propositalmente que o discurso fosse o mais direto possível, mas, mais uma vez, o mais complexo possível. Mas o ajustável para todos e eu não vou fazer muita coisa, mas você pode ir para award.com com três w. Então, um www.com. E você pode ver todos os tipos de animações diferentes como essa. Quando você passa o mouse, você tem esses gradientes que se movem em segundo plano. Você pode acompanhar meu canal no YouTube Alex sobre design, onde, no futuro, abordarei muitos desses tutoriais, porque muitos designers estão pedindo por eles, então não vamos falar muito sobre é agora. Navegue até a exibição. Então, o que acontece quando esse elemento aparece? Isso é o que vamos fazer. E enquanto navega até a tela, o que acontece então? Temos a barra de navegação aberta. O que acontece então? Mudança de etapa aberta aberta, slide de mudança. Então, todas essas coisas. Então, vamos usar, digamos, o gatilho de página. Vamos ver o que temos lá. Portanto, mova o mouse na janela de exibição enquanto a página está rolando, página é carregada e a página rolada. Vou clicar aqui para ativar o elemento e digitar scroll into view. E o que eu posso fazer aqui é selecionar a ação. E você pode ver que estou selecionando apenas esse conteúdo de herói. Então, minha ação será rápida. Vou deslizar pela esquerda. Talvez minha compensação seja algo como oito, e o atraso pode estar errado em três milissegundos ou algo parecido. Quando eu clico em pré-visualização, você pode ver como fica. Então 8.3 e eu vou selecionar minha imagem de herói, e vou fazer exatamente o mesmo. Então, vá até a exibição. Em vez de deslizar da esquerda, vou escolher da direita. E eu vou dizer algo como oito e talvez cinco. Então, vai ser um pouco mais lento. Então você pode ver como isso parece. Vou clicar em Preview. Você pode ver como isso parece. Então, quando voltarmos, vamos agora lidar com toda essa seção. E o que podemos fazer é navegar até a visualização e selecionar uma ação. Vou escolher um slide. De baixo. Aí está. Deslocamento. Vamos com oito e adiamos. Vamos usar dez milissegundos desta vez. Então, quando eu clico em pré-visualização, você pode ver que isso se chama entrevista porque estava um pouco acima da dobra. Então, vamos agora lidar com essa seção quando ela for exibida. Eu vou fazer o mesmo. Mas talvez possamos nos alimentar, por exemplo , para aparecer e desaparecer. Então, talvez possamos diminuir o deslocamento de oito, atraso de talvez dez. E vamos ver o que isso faz. Então, temos apenas fade in ou fade out. E você também pode mudar ao sair de você. Também podemos iniciar fade, Fade Out offset de oito, atraso de dez. Então, vamos ver o que tudo isso faz. Vamos rolar até o topo. Então aqui temos isso, então temos isso. Então, talvez você esteja rolando para a exibição e saindo da exibição. Você não pode nem mesmo vê-lo porque ele já está desaparecido. Então, isso é basicamente o que eu quero. Mas talvez possamos definir esse deslocamento para zero milissegundos. E talvez isso possa ser, sei lá, 3% ou algo parecido. Então, quando vou a algum lugar por aqui, desaparece e desaparece mais ou menos por aqui. Assim, você pode até mesmo reduzir esse deslocamento completamente. Volte ao zero e veja o que isso faz aqui. Então eu acho que está tudo bem. E, finalmente, o que eu queria te mostrar é isso. Assim, podemos fazer essas configurações de gatilhos. Isso é basicamente para que você possa lidar com os elementos ou com a classe. Para que eu possa participar da aula. Então você pode ver a coleção exclusiva, essa é a minha seção, seção coleção exclusiva. Eu vou abordar toda a turma. E não vou carregar essa animação em tablet, paisagem e retrato. Por quê? Porque eu quero que as pessoas salvem sua conexão com a Internet, talvez nos tablets. Vamos mantê-lo em um tablet, mas não no telefone, paisagem e no retrato, o que só tornará nosso site um pouco mais rápido ao carregar. Você pode fazer o mesmo com este. Então eu posso me livrar disso daqui e daqui. E para esta principal, na verdade, vou mantê-la dentro de casa só por causa dela O que podemos fazer é talvez fazer algo um pouco diferente. Então, temos nossa oferta de embalagem, depois temos conteúdo e temos essa imagem para começar, porque estamos em um desktop O que podemos fazer é dar um nome a essa imagem, para que possamos renomeie essa classe e podemos chamá-la de nossa oferta, IMG, só para sabermos o que é. Podemos ir para a animação e o elemento acionar. E podemos fazer isso enquanto rolamos a ação de exibição. E então podemos nos livrar desses. Assim, você pode selecionar uma animação de rolagem de ação enquanto navega na exibição Os limites da animação são esses quando o elemento está totalmente invisível e quando um elemento está totalmente visível. Assim, você pode até mesmo ajustar a dívida. Assim, você pode adicionar offset, você pode começar a sair. Então começa a sair. E você pode adicionar um pouco de chateação, talvez algo como 20 por cento, algo assim. Aí vamos nós. O que podemos fazer é não ter nenhuma animação, então temos que começar uma animação. Então, essa será a nossa oferta ou a animação da imagem da nossa oferta. Aí vamos nós. Então, a zero por cento, vamos dizer, digamos, opacidade, que será algo como zero por cento. Aí vamos nós. E aqui, deixe-me me livrar de mim mesmo só para que você possa ver o que estou fazendo. Então, eu apenas reduzo a opacidade aqui em 0% e, facilitando, vou configurar o quádruplo de duas entradas e saídas. Aí está. Isso está em 0%. Então, quando eu acessar a pré-visualização ao vivo e chegar a algo em torno de seis por cento, vou estilizar a opacidade mais uma vez. E vai estar em 100%, e isso vai entrar e sair do quadriciclo. Então você pode ver como isso parece. Então, quando eu começar a rolar, ele estará aqui. E quando eu sair do caminho, ele vai desaparecer completamente. Então, talvez seis por cento seja um pouco menos. Então, vamos reduzi-lo para talvez 20 por cento. Então, quando ele começa a rolar, você pode vê-lo aparecendo facilmente talvez cerca de 40 por cento ou algo assim. Aí está. Ou talvez até vá para 80. Vamos ver o que isso faz. Não muito, então está em 100 aqui. Então, talvez possamos definir mais um e dar opacidade aqui em talvez 40%, algo assim. Então, quando começarmos a rolar aqui e depois aqui, clique em Salvar. Vamos clicar na prévia e ver o que isso faz. Aí vamos nós. Então você pode ver que é realmente um slide. Você pode ver isso aqui na parte inferior. Apareceu um pouco, assim. E você também pode fazer as alterações no fade out. O que eu quero para esta seção específica ou para o conteúdo da oferta é que eu só quero que ela seja implementada. Então, vá até a exibição. Ação, talvez desapareça, desaparecendo. Offset, talvez eu possa configurá-lo para talvez cinco e atrasar talvez dez milissegundos, algo assim. Então, quando eu clico aqui, você pode vê-lo aparecendo, então é apenas um pequeno atraso como esse, então desaparece. E quando sair da vista, o que você pode fazer é o destino, mais uma vez simplesmente desaparecer. E eu não quero que ele faça nenhum deslocamento, então vamos testá-lo ver como isso parece um fade in. E quando sair do jeito que vai desaparecer. Essa. O que podemos fazer é talvez, não sei, talvez possamos continuar não gostando do que é, mas talvez eu possa simplesmente usar esses elementos de benefícios para acionar a exibição. Eu posso deslizar de baixo. Aí vamos nós. E talvez eu possa mover um pouco de compensação e um pouco de atraso, algo assim. Vamos ver se um grande atraso faz alguma diferença. Sim, é verdade. Como você pode ver. Você pode ver como isso parece. Então, quando eu clico mais uma vez, lá vamos nós. Um grande atraso está ocorrendo. Então, algo como 460. Acho que funciona muito bem. Em termos do formulário de contato, o que podemos fazer é fazer com que os mesmos elementos façam com que ele se propague por todo o nosso design. Então aperte enter para que possamos editá-lo. Os elementos são acionados, vamos rolar até a visualização. E eu posso deslizar e atrasar. Talvez vamos com 350 milissegundos. Aí vamos nós. Em vez da esquerda, vou de baixo. Deslocar, talvez cinco, só para que possamos ter pelo menos alguma coisa. E vamos clicar em Visualizar e dormir o que fazemos. Então, benefícios. E você pode ver o formulário. E vamos fazer o mesmo com isso e com nosso rodapé. Então, vamos ver Mapa, Kit e inserir o mesmo pergaminho para exibição. E eu posso usar algo como slides de baixo, 400. E isso pode ser às cinco. Aí vamos nós. E eu não vou mostrar isso no celular e no retrato. Vamos lá, voltando ao exemplo, e eu vou fazer o mesmo por aqui. Então clique na sua animação e simplesmente remova-a daqui mais uma vez, só por uma questão de velocidade, faça o mesmo com o rodapé. Para a pasta, vá até a exibição. Sem eles, o que eu posso fazer é talvez ver, podemos voar, podemos cair, podemos fazer todas essas coisas. Talvez desapareça. Vamos com 400. E isso pode ser cinco. Desapareça. Aí vamos nós. Agora vamos voltar à instância. Vamos, vamos voltar ao topo. Clique em pré-visualização. Estes para se encaixar. Isso ainda funciona bem. Então, quando eu chegar aqui, isso vai desaparecer. Isso vai desaparecer. Isso vai desaparecer. Você pode ver o quão atrasadas essas seções estão, que é o que queríamos em primeiro lugar. E isso é ótimo. Então, a página inicial está pronta. Vamos para os carros. Então, para o carro, o que podemos fazer é talvez fazer uma animação um pouco diferente. Portanto, esse elemento é acionado quando a rolagem para a exibição será alimentada e o atraso será muito grande. Então, 600, por exemplo, neste caso. E vamos com dez. E esta imagem do cartão é exibida, pode deslizar, deslizar de baixo para cima. E vamos com algo como 100s. E isso pode ser tipo cinco. Então, vamos fazer uma prévia. Então você pode ver como isso parece. E eu não vou mostrar isso nesses dois, algo assim. E você também pode definir as ações personalizadas aqui ou definir a Facilitação personalizada. Mas acho que isso vai funcionar muito bem. Assim, talvez possamos ajustar isso um pouco mais. Como xarope para tosse. Talvez possa ser cinco, só para que seja um pouco mais rápido assim. E nossa coleção exclusiva já está lá. Então, talvez possamos acabar com isso também. Então, toda essa seção é exibida ou, ao navegar na entrevista, você pode até mesmo configurá-la para que seja uma interação contínua, animada enquanto os elementos crescem. Viewport. Não vou fazer isso porque temos oito elementos, então basta rolar até a exibição funcionará bem. Vamos clicar em fade aqui e vamos com algo como 400 milissegundos desaparecendo. Aí vamos nós. Clique e aí está. Então, agora temos esses dois. E temos que entrar em contato conosco. Temos isso até o fim. Funciona bem. Talvez para o rodapé, talvez possamos ajustá-lo para ser um pouco lento porque é mais rápido, não mais lento. Em vez de 400, talvez 300. Aí vamos nós. Então, agora isso está concluído. Vamos agora passar para os empréstimos. E o que eu quero fazer com os pulmões é fazer três animações diferentes aqui. Então, por aqui. Mas antes que eu faça , realmente me desculpe por isso. Vamos voltar aos carros e ajustar alguns deles. Isso, tudo bem. E isso é para esses dois. Lá vamos nós e consertamos o resto deles. Então, vamos aos empréstimos. E aqui o que vou fazer é entrar na visualização. Eu vou dizer selecione o slide. De cima para baixo. Aí vamos, algo como 100s. E então eles podem deslizar de cada lado. Então vá até a exibição, slides da direita, 300. E isso deve ser rolar para ver os slides da esquerda, 300, algo assim. E, finalmente, vamos lidar com esta seção abaixo. Então, primeiro vá até a tela. Eu vou escolher o destino, não o deslize, mas o destino. E algo como 400. Vai ser bom e a compensação será algo como cinco. Então, vamos testá-lo. Aí vamos nós. Acho que vai ficar bem. E então, para esses dois, o que podemos fazer, porque essa é basicamente nossa última seção. Talvez possamos deslizar isso de um lado para o outro e encerrar o dia. Eles não estão perdendo muito tempo e, é claro, você pode brincar com esses elementos da maneira que quiser. Então, enquanto navego na tela, vou definir a ação. E antes de tudo, vamos nos livrar desses. E antes que eu faça isso, vamos ver se o configuramos para eles. Nós não fizemos isso. Então, vamos nos certificar de corrigir isso. Aí vamos nós. E os textos podem permanecer os mesmos porque não consomem muita largura de banda. Então, associe as imagens enquanto navega na tela, selecione a animação de rolagem do jogo de ação. Aqui, o que podemos fazer é suavizar em 50 por cento a animação de imagem. Vamos adicionar um novo. Então, isso vai ser parceiros, animação, animação de imagem de parceiros como essa. Então, em zero por cento, vamos dizer, digamos que a opacidade será de 0%. Com nove por cento , será opacidade em 40%. E aqui está 13%. Talvez possamos ter a opacidade em 100% IN, OUT quad para atenuar, selecionar este em nosso quadriciclo e selecionar este quad de entrada e saída. Deixe-me ampliar um pouco, clicar na prévia e ver o que temos até agora. Então você pode ver que é apenas um pouco, um pouco de alívio. Basta prestar atenção nesse canto da tela. Aí está. Então, um pouco de animação e tudo funciona bem. E eu quero empurrar esse texto para o lado. Então, vamos configurá-lo aqui. Você pode clicar em salvar aqui e depois voltar para sua animação. Então, quando eu seleciono o conteúdo do meu parceiro, ele me levará até aqui. Então, aqui, ao rolar sua visualização, podemos fazer isso, mas vou usar apenas um scroll into view. E vou dizer algo como slide porque já usamos os da direita. Algo como cento e 50 milissegundos. Talvez. Clique em pré-visualização. Aí vamos nós. Então, parece bom e eu acho que está tudo bem. E, finalmente, o que nos resta fazer é entrar em contato conosco. Eu não vou animar nada aqui. Já está feito para mim. Mas vamos lidar com a página do modelo de carros e eu não vou fazer muita coisa aqui. A única coisa que talvez eu possa mencionar aqui é isso. Então, sobre animação, porque você pode imaginar que as pessoas estão percorrendo essas páginas para a esquerda e para a direita e estão ficando um pouco cansadas de suas animações, especialmente se você estiver usando-os forma imprudente em cada seção. Portanto, pode ser um pouco entediante de vez em quando. Portanto, nesta seção, tudo o que eu quero fazer talvez seja animar este cartão. Talvez um pouco, mas também não acho que seja necessário. Eu não sei. Talvez eu possa editar essa seção inteira. Então, vamos ver. Os elementos acionam, rolam até a visualização, agem, desaparecem e atrasam talvez 50 milissegundos. Vamos ver como isso parece. Aí vamos nós. Então, nada muito importante. Talvez eu possa ajustar esses 200 milissegundos ou algo assim para que pareça um carregamento de página assim. E eu acho que isso é realmente tudo o que existe aqui. Eu quero que talvez até animasse isso, mas vamos, vamos fazer isso. Para esta seção. Vamos entrar na exibição, ou digamos que desaparece, desaparecendo 200 milissegundos. Acho que isso vai ser bom o suficiente. Então, quando eu clico em pré-visualização. Vindo aqui, você pode ver como isso parece . Está tudo bem. Aí vamos nós. As animações do nosso site estão concluídas. E, claro, você pode continuar e brincar com isso com muito mais detalhes. O que eu não mencionei é que você pode combinar vários elementos diferentes. Então, vamos ver se eu quero animar essa imagem por qualquer motivo, eu posso ir até o gatilho do elemento. E então eu posso dizer algo como enquanto navego na tela, o que eu já mostrei para você. E então vá, role, coloque a animação de rastreamento. Vou me livrar deles, conforme já mencionado, e então posso adicionar uma nova animação aqui. O que eu não mencionei é que você pode adicionar tudo isso ao mesmo tempo. Você também pode filtrar e fazer animações em filtros, clique aqui e exclua a animação. Então, quando você for aqui, role até o fim. Deixe-me me esconder para que você possa ver. Você tem essas transformações 2D e 3D. Então, o que você pode fazer com a dose é se eu te mostrar algo como transições, você tem essa opacidade. Então, quando você adiciona, passe o mouse sobre a opacidade, por exemplo, aqui o que temos é opacidade. Aí vamos nós. Mas se eu continuar e adicionar um estado de foco a essa imagem, agora posso ajustar essa opacidade e movê-la para que eu possa mudar para um estado não estatal. Então, vamos ver quando eu clico em pré-visualização, você pode ver um pouco de opacidade, mas é claro, você pode ajustá-la , movê-la e posicioná-la como quiser. Então, basicamente, digamos, 275 milissegundos, eu posso ajustar isso para ser algo assim. Aí vamos nós. E eu posso até adicionar uma nova animação lá dentro. Então, quando você passa o mouse, diz mudar para o não estado para adicionar uma transição para que eu possa mudar para lá. Mas eu realmente não preciso disso no momento. E eu vou me livrar disso. O que eu queria mostrar a vocês, nossas transformações em 2D e 3D. Então, o que você pode fazer também é passar o mouse ou carregar, você pode alterar os valores de x. Então, esquerda e direita, que aumentarão a escala por meio valores que aumentarão a altura e os valores Z. Você se moveu, tem escala, gira, tem inclinação, todo tipo de coisas diferentes. Então você pode ajustar isso. Você tem suas sombras de caixa para o fundo para soltar sombras, você tem seus vários filtros. Então você tem sua pleura aqui. Brilho, contraste, matiz, saturação, todo tipo de coisas diferentes. E você pode adicionar um para aparecer em determinados quadros e depois adicionar outro para aparecer em quadros diferentes. E, finalmente, você tem esses filtros de fundo, que são basicamente os mesmos que este, mas para o seu plano de fundo, não para a imagem em si neste caso. Então você pode combiná-las com as animações básicas que eu já mostrei. E, finalmente, o que podemos fazer é usar o gatilho da página. Então, vamos voltar para casa aqui. Então ele carrega mais uma vez, assim. E então assim. Então, gatilho da página, carregamento da página. E podemos começar uma animação. Agora você pode ajustar a animação de carregamento para toda a carga. Então, isso acontece apenas no desktop, por exemplo, e você pode iniciar um horário de animação. As animações não existem. Então, eu posso clicar aqui e começar a animar isso. Então, digamos, animação da página inicial. Aí vamos nós. E aqui eu posso clicar aqui mesmo. E então digamos, não sei, textos, cor, tamanho ou pele mostram algo ou algo assim. Ocultar Mostrar, eu posso selecionar o elemento que eu quero ocultar. Então, digamos que esse. Esconda, mostre. E eu posso definir isso como o estado inicial. E agora, quando começo a animar, por exemplo aqui no final, posso ocultar os elementos do show. Posso selecionar o elemento após a sessão anterior com a redução do atraso. Assim, você pode escolher Exibir. Você pode fazer todo tipo de coisas diferentes aqui. E você pode realmente se aprofundar na animação e no fluxo de trabalho. Tem um ótimo curso na Webflow Academy em seu site. Então, talvez você possa dar uma olhada e ver como fica. Mas, por enquanto, vou deixar isso como está. E vou encerrar o dia dessas animações porque já estamos em 26 minutos e podemos realmente avançar mais uma hora falando sobre essas animações, mas lembre-se, seja o que for crie melhor no software de design de sua escolha. Isso é Adobe XD, figma, sketch, qualquer coisa. Você pode recriar isso no Webflow e adicionar muito mais. Portanto, transições entre páginas, efeitos de foco em elementos, animações em elementos diferentes, animações de fundo nesses diferentes planos de fundo, por exemplo, aqui temos esses círculos. Então, talvez, enquanto estão à vista, esses círculos possam se animar e se mover. Então, se eu mostrar isso, talvez eu possa selecionar este para ser o estado inicial. E então, enquanto meu usuário está olhando para a tela, isso pode se animar e seguir esse caminho até aqui e depois voltar para aqui ou algo parecido. Talvez essa imagem de carro possa crescer, diminuir e voltar. Portanto, todos os tipos de animações diferentes podem ser obtidos aqui mesmo no Webflow. Mas, basicamente, este vídeo abordará apenas o básico, como mencionei, porque ficaremos aqui o dia todo. 192. Publicar e exportar códigos: Aí está, chegamos ao final desse Webflow construído. Espero que você tenha se divertido muito. Agora é a hora de lançar este site e exportar nosso código. Como mencionei anteriormente, você precisa ter o plano pago para fazer isso. Mas você ainda pode iniciar o domínio Webflow, que é o que vamos fazer, mas você não pode exportar código em um plano gratuito. Deixe-me mostrar como fazer exatamente isso. Então, quando eu clico aqui e te levo aqui, você tem essas opções. Então você tem essa opção Compartilhar. Assim, você pode ter seu link exclusivo para compartilhar e copiar esse link e convidar editores convidados. Se quiser que outra pessoa o edite, você precisa ter seu plano pago para fazer isso. Ou você pode simplesmente copiar e compartilhar esse link com seus clientes. Portanto, essa é uma ótima opção. O mesmo que em seu software de design ou escolha. Você pode compartilhar o link e seus clientes poderão ver o que você fez. Eles podem brincar com as animações. Eles podem ver a resposta que você fez. E eles verão essa prévia aqui para que possam até mesmo clicar nesses diferentes pontos de interrupção. E eles podem ver que essa animação está acontecendo em tempo real, o que é ótimo para eles fornecerem feedback. E você pode até mesmo convidá-los a colaborar com você nesse projeto específico. Aqui ao lado, o que temos é um código de exportação, portanto, ele não inclui funcionalidade ou conteúdo do CMS. Você pode exportar o conteúdo da coleção do painel de coleções. Então foi sobre isso que conversamos. Você pode hospedar com o Webflow para aproveitar ao máximo o CMS, o formulário de comércio eletrônico é um recurso de pesquisa. Mas se você imaginar que, por exemplo para este projeto, não tínhamos CMS, só tínhamos páginas estáticas e queremos exportar algo assim. É assim que o código vai ficar. Então, basta clicar aqui onde você tem esse ícone de código. Você tem seu HTML, você tem seu CSS, você tem seu JS, que é para as animações. E, finalmente, você tem seu ativo. Então, vai empacotar todos os nossos ativos muito bem. Já os temos em um desktop, mas você precisa desses ativos se quiser mover este site para outra hospedagem. Então, digamos que eu não queira hospedar com o Webflow. Quero hospedar com hospedagem aqui ou Bluehost, que mencionei anteriormente. É por isso que você precisa de todos esses ativos. O que você vai receber então é clicar em preparar zip. Vamos preparar seus arquivos em uma pasta zip em cerca de dois ou 3 minutos Dependendo do tempo de processamento, ele preparará esses arquivos para você. E então você pode pegar esse arquivo zip e enviá-lo diretamente para a pasta raiz da sua hospedagem já fiz isso muitas vezes antes, mas mais recentemente para meu sistema de design chamado Sistema de design Inception, essa página é totalmente projetada e a prepara no Webflow, exporte-a do Webflow e basta enviá-la para minha própria hospedagem. Essa página eu não hospedo no fluxo de trabalho. E isso é muito simples. Basicamente, você pode ver o HTML, você pode ver dentro da tag body aqui o que temos. Então, temos todos esses divs básicos. Então, coloque uma seção de barra de navegação de contêiner, todas essas. Então, temos a embalagem do herói que adicionamos. Você pode ver o texto aqui. Você pode ver o bloco de texto de quebra Siqueiros centralizado, Essa é a classe e esse é o nome do div. E então temos isso em termos de CSS, o que temos é que temos essas margens, seções, todos os tipos de coisas diferentes. Então você pode imaginar o que fizemos visualmente. Teremos que digitar tudo isso dentro do nosso código. É por isso que o Webflow é incrível, porque você pode adicionar tudo isso dentro. Então você pode ver que para o flexbox, para os itens de alinhamento, para a margem, você tem tudo isso. E em JS, você tem todas as animações que você fez para a introdução, para o carregamento das páginas, todo tipo de coisas diferentes. E aqui você pode ver que tem essa licença de fluxo de trabalho, mas se quiser se livrar dela, precisará pagar esse plano de agência. Acho que $35 por mês ou algo parecido, o que vai colocar um rótulo branco em seu código e não vai mostrar o fluxo da web lá. Finalmente, quero mostrar isso publicado. Assim, você pode escolher o destino de publicação. Você pode optar por publicar no link Webflow IO. E você pode fechar, acessar as Opções avançadas e ativar o SSL, que é basicamente, se você estiver vendendo alguma coisa em seu site, ele apenas mostra aquele cadeado seguro ao lado do seu navegador. HTML minimizado, que apenas reduzirá o código interno e o tornará organizado e compactado. Css e JS farão a mesma coisa. E você pode usar cabeçalhos de quadro seguros, que, se você passar o mouse aqui, protegem seu site de vários tipos de ataques de roubo de cliques , restringindo que vários lados possam ser incorporados. Portanto, nem todo mundo pode incorporar seu site em seus blocos, por exemplo, ou algo parecido. Então, eu vou usar isso. Não vou usar um domínio personalizado, então você pode clicar em Publicar para selecioná-lo. Os domínios levarão alguns instantes e, quando estiverem prontos, serão publicados. E então você é publicado com sucesso. E agora o que podemos fazer é ajustar algumas de nossas configurações de SEO. E, geralmente, quando faço isso, gosto de trabalhar e ajustar o SEO ao mesmo tempo. Ou, ao ajustar, basta começar. Eu gostaria de preparar meu SEO, mas propositalmente não queria confundir vocês porque nem todo mundo vai se importar com SEO. Obviamente, quando você trabalha por conta própria, você quem é responsável por isso, a menos que seu cliente contrate um especialista em SEO. Mas se você quiser e souber como fazer isso, você pode aprender um pouco de SEO básico muito rapidamente, mesmo no YouTube, e simplesmente aplicar esse conhecimento diretamente no seu Webflow. Sites. O SEO é, obviamente, a otimização de mecanismos de pesquisa é a forma como você ajuda o Google a encontrar, indexar e otimizar seu site. E quanto melhor você for em SEO e as habilidades de bateria ou SEO forem, melhor o site do seu cliente será classificado na pesquisa. Então, no próximo vídeo, abordaremos um pouco de SEO. E vou mostrar algumas configurações básicas que todos podem fazer. 193. Otimização de SEO: Tudo bem, então deixe-me mostrar algumas configurações de SEO que você pode fazer e que todos podem fazer no Inside Buffalo, não importa o quão experiente você seja ou não. Então, quando vou direto ao nosso site, o que posso fazer é clicar aqui, onde está escrito páginas. E aqui você tem as configurações da página de edição. Quando você clica ali, provavelmente percebeu isso quando criamos essas páginas, mas essas são apenas as configurações básicas do SEO, porque a forma como você escreve seu código afeta diretamente o SEO. Mas como não escrevemos código no Webflow, usamos apenas os componentes pré-fabricados e usamos apenas o construtor de páginas e essa estrutura quando você está usando as melhores práticas, obviamente não importa, porque as melhores práticas ajudarão você quando se trata de SEO. Mas se você está apenas bloqueando elementos em uma página sem nenhuma estrutura, sem usar, digamos, seções, porque essa seção diz ao Google indexa seu site que, ok, esse é o seção desta página. Dentro desta seção, temos o contêiner. Então eu sei que ele contém alguns elementos internos. Dentro desse contêiner, temos um invólucro. Então, eu sei que o invólucro envolve algum conteúdo. E dentro dessa embalagem, eu disse que tenho, por exemplo eu não sei o conteúdo do herói, então eu sei que esse é o herói que deveria chegar ao topo. Também usamos esse H1, H2, H3, H4 e assim por diante para os títulos. E usamos propositalmente H1 no topo da página, H2 abaixo dos três anos abaixo disso. E então usamos blocos de texto para os elementos de texto e, para os menores elementos de texto, usamos parágrafos. Tudo isso é uma boa prática a se fazer. Porque o Google se divertirá muito melhor indexando seu site e otimizando-o para uma pesquisa, porque ele entenderá o que você está fazendo também com as imagens sobre as quais falamos, essas tags alternativas, quando você otimiza seus textos antigos para cada imagem, o que você deveria fazer. Mas eu pulei muitas delas propositalmente neste curso porque levará horas e horas a fio. Mas você deve fazer isso para cada imagem que vai ajudar suas imagens a serem mostradas na pesquisa de imagens. Então, cada imagem que você faz, que você carrega cada ícone, cada foto. Certifique-se de sempre usar os textos alternativos e sempre usar o texto descritivo, se necessário, dependendo da imagem, conforme expliquei. Então, o que temos aqui, se descermos até o fim, classificaremos até o fim. Temos uma página inicial, então podemos ter proteção por senha, o que não faremos porque não precisamos dela em um plano de site. Assim, você pode adicionar um plano de site para descarregar dívidas. Então, configurações de SEO, o que podemos fazer aqui é a aparência do resultado da pesquisa. Então, tag de título, título da página. Esse é o título ideal da página. Então, o que eu posso fazer aqui é chamar isso de salão. E aqui você pode ver como fica no Google, na pesquisa, uma aranha, carros exclusivos. E então Meta Description. Descreva a página. tamanho ideal da descrição é de 155 a 300 caracteres. Então, showroom exclusivo de carros, concessionária exclusiva de carros. Vamos consertar isso. Concessionária exclusiva de carros no centro de Belgrado. Portanto, sabemos que podemos nos conectar diretamente usando a meta-descrição. Podemos conectar o mapa porque já nos conectamos usando o Google Maps. Por isso, saberá mais uma vez nos publicar e nos mostrar mais para as pessoas que estão na área de Belgrado ou na área de pesquisa. Agora, o título em gráfico aberto é algo quando você está compartilhando seu site em algo como mídias sociais como Facebook, Twitter, LinkedIn, Pinterest. Então, o que você pode fazer é o mesmo que a tag de título de SEO, mesmo que a meta descrição em algum lugar. E alguém que compartilha sua página nas redes sociais, será exatamente o mesmo que isso. E você pode adicionar o URL da imagem aberta, o URL da imagem do Open Graph, que você deve carregar. Abra o Graph se você quiser que seu site seja compartilhado nas mídias sociais. Então, basta acessar este site e fazer o upload da imagem nessas dimensões do seu site, você pode simplesmente fazer o upload de uma captura de tela, por exemplo, e essa captura de tela é quando você está compartilhando algo, digamos no Facebook histórias ou postagens no Facebook, qualquer que seja a imagem que ela extrai do site, essa é essa imagem. E você pode excluir essa página dos resultados de pesquisa do site. E você pode dizer o título da pesquisa, o mesmo, o mesmo. E, finalmente, código personalizado. Se você precisar inserir algum código personalizado dentro da etiqueta principal antes da etiqueta corporal. Você pode fazer isso aqui. Normalmente, você faz isso para alguns scripts, como, digamos, o Google Pixel, por exemplo, quando você está fazendo isso sozinho. Mas aqui temos a integração direta, então ela surgirá sozinha. Ou se você tiver alguma conversa externa, por exemplo , você vai se endividar. Eles geralmente estão dentro da etiqueta da cabeça. Se você estiver usando algo como Google Analytics, talvez ou algo parecido. Então, o que vou fazer é simplesmente copiar isso. E ele diria aqui. Então, onde diz carros, pasta principal, sabemos como vou usar isso aqui. etiqueta do título diz carros. Então, vamos ver. Carros de vaca. Sim. Vamos ver. Tag de título. É isso que você vê no topo da página? Então, talvez possamos usar algo como carros-aranha, carros estacionados. Portanto, esse é o URL real, website.com forward slash cars. Mas talvez mostraremos algo como um carro-aranha. Então, tudo isso ficará intocado para que não mudemos a dívida. Então poderíamos ir para os pulmões. E para os empréstimos, posso fazer a mesma coisa aqui. Mas talvez possamos simplesmente mudar isso. Então, concessionária de carros exclusiva no centro de Belgrado. Talvez possamos fazer algo como os melhores empréstimos exclusivos de automóveis no centro de Belgrado , porque se trata de empréstimos. Então, podemos falar sobre uma aranha, empréstimos de carros. Pronto, clique em Salvar. E, finalmente, entre em contato conosco. O que podemos fazer é voltar para o Pages. Clique aqui, entre em contato conosco. O que podemos fazer é entrar em contato como parte dos carros. Aí vamos nós. A meta-descrição garante que seja a mesma coisa. Entre em contato conosco e dirija o carro dos seus sonhos hoje. Talvez algo assim. Então você pode ver como isso é simples. todo mundo pode fazer isso, mas isso realmente ajuda o Google a indexar suas imagens, realmente ajuda a encontrar n porque essa imagem é chamada de showroom de aranhas, como você pode ver aqui. sobre isso que conversamos e você pode até apontar isso. Então, entre em contato conosco. Talvez possamos ajustar isso um pouco. Então entre em contato conosco e talvez visite nosso showroom para dirigir o carro dos seus sonhos ou algo parecido, apenas para conectar ainda mais a imagem e a própria descrição do Meta. E aqui o que temos é que podemos fazer isso. Então, podemos usar a tag de título. Talvez. Não sei, usando o campo de coleta conforme necessário. Então, talvez possamos adicionar um campo de nome. Aí está, meta descrição. Talvez possamos adicionar lesma, que é essa linha laranja ou Vogue. Aí está. Ou você pode adicionar campos adicionais. Então, vamos ver talvez, talvez o nome também. E não precisamos de lesmas, então vamos nos livrar disso. Podemos adicionar um nome. Então, vou desenhar nosso Voc. Aí está. E talvez possamos ter o Slash aqui ou algo parecido. Um carro-aranha como parte de carros ou aviste carros exclusivos ou algo parecido. Portanto, não queremos que seja muito grande. Descubra carros exclusivos. Então, quando mudar, porque agora é ranger ou walk, quando mudar mais tarde para Lamborghini, o furacão ainda terá um observador de carros exclusivos, mas terá apenas um furacão Lamborghini antes disso. E o nome abaixo também será otimizado. Use as configurações do Open Graph. O mesmo, o mesmo, o mesmo. Isso é o mesmo, o mesmo, o mesmo. Isso é o mesmo que eu mencionei. Então aí está. Você pode ver como isso foi super simples. Essas poucas coisas realmente nos ajudaram a otimizar o SEO da nossa página. E é basicamente isso. Isso é tudo que você pode fazer. Em apenas alguns minutos. Você pode ver que demorei apenas 8 minutos para conseguir algo assim em um nível realmente básico. Mas você pode se aprofundar muito nisso. Quando se trata de assuntos gerais, o que eu recomendaria é, como mencionei, fazer o upload do Fab Icon, fazer o upload do clipe da web. Você pode definir o fuso horário, certifique-se de fazer exatamente isso. Então temos a hospedagem. Se você quiser esperar aqui, você precisa comprar o plano. Como mencionamos, temos os editores. Então, quem será seu editor pode editar e publicar. Depois, temos o faturamento, temos o SEO, então podemos ajustar isso. Então, indexando, eu não quero que seja indexada porque esse é basicamente o site de prática. Portanto, não quero que seja exibido nos resultados da pesquisa. Mapa do site. Você deve adicionar um mapa do site se não souber como fazer isso, é muito simples de fazer. Existem sites por aí. Você pode simplesmente acessar seu arquivo de design e ver todas as suas páginas ou simplesmente voltar aqui para o site. Você basicamente tem uma casa, você tem carros, você tem empréstimos, entre em contato conosco e você tem apenas uma página. Então, isso é tudo o que você precisa fazer dentro do seu mapa do site, a verificação do site do Google. Assim, você pode acessar o Google Search Console, criar sua conta lá e reivindicá-la como sua propriedade. E você vai obter esse ID de verificação e colá-lo aqui. Esses dois vão falar um com o outro em segundo plano. E você tem esse URL de tag canônico. Você pode aprender mais sobre isso aqui. Apenas essas poucas mudanças aumentarão ainda mais seu site. Em seguida, temos os formulários, como já mencionei, certifique-se de incluir o e-mail do seu cliente lá e não suas próprias fontes de e-mail. Já fizemos as fontes do Google, então tudo bem. Os backups farão ótimas integrações e códigos personalizados. Então, basicamente, isso é tudo o que existe. Nós temos isso, então está publicado. Vamos publicar para selecionar os domínios. E aí está, ele vai publicar aquele site publicado com sucesso, clique em fechar. E quando volto para o meu designer, posso ver como é. E agora, no meu perfil, você poderá ver este site e cloná-lo. Porque eu vou torná-lo colonial para vocês. Acho que talvez não seja porque temos essas imagens. Então, talvez porque você tenha o conteúdo deste curso, talvez não seja a melhor opção para fazer isso. Talvez no futuro. Deixe-me saber se você gostaria que eu fizesse isso, escreva-me um e-mail e me avise se você gostaria que eu criasse esse arquivo completamente em branco para que você possa incluir suas próprias imagens e depois clonar esse arquivo . Porque eu não tenho certeza, porque todo mundo da web, toda a comunidade poderá clonar isso. E temos esses direitos de licença sobre essas imagens. Então essa é a única razão pela qual eu queria, eu gosto de fazer isso. Mas, basicamente, é isso. Você pode ver como esse SEO é super simples de fazer. No nível iniciante. Obviamente, você tem agências de SEO que lidam com isso em tempo integral. Eles estão otimizando para palavras-chave e, em seguida, você está usando essas palavras-chave dentro de seus textos. Portanto, você otimizará todas essas coisas. Então, preste atenção a isso. Mas o que você pode fazer como designer, como designer de UX de UI, é lidar com essas técnicas básicas de SEO e acho que você ficará bem no final do dia. 194. SECÇÃO 17 ATRIBUIÇÃO: Sua tarefa para esta seção é obviamente construir ao meu lado e tentar criar o que projetamos anteriormente. Agora, no Webflow, se você estiver tendo problemas, fornecerei um link para o arquivo colonial para que você possa simplesmente agrupá-lo e usá-lo em seu projeto, separá-lo e ver o que eu usei, o que eu criado se você ficar confuso a qualquer momento. Mas, e isso é um grande mas que eu quero mencionar. Sempre tente seguir em frente, porque, como mencionei anteriormente na seção de design desta aula, essa é a melhor maneira de aprender se você apenas usa arquivos finalizados, se nós basta substituir as imagens, entrar lá e chamá-las de suas. Você nunca, nunca aprenderá design. Você nunca aprenderá o desenvolvimento dessa forma. E é sempre a melhor maneira e sempre a melhor abordagem de seguir em frente. Se você ficar preso em algum lugar, se cometer um erro, certifique-se de sempre assistir a essas aulas em um ritmo um pouco mais lento. Alguns desses jogadores têm essa opção. Caso contrário, você pode pará-lo, retroceder, assisti-lo várias vezes. E, finalmente, se você simplesmente não tem uma resposta, não se preocupe, você sempre pode entrar em contato comigo e eu estou sempre disponível para ajudá-lo com qualquer uma dessas lições da turma. 195. SECÇÃO 18 Estudos de caso: Os estudos são uma parte crucial do seu portfólio porque, na verdade, você não quer mostrar aos seus clientes a imagem final e o resultado final. Você quer mostrar a eles o processo. Isso é o que chamamos de estudo de caso. Qual é o problema que você realmente resolveu durante este projeto? Qual é a abordagem que você realmente adotou para este projeto? Você começou com a pesquisa que começou com wireframes? Você começou com seu software favorito de escolha? Você começou com imagens? Qual foi o seu processo durante esse projeto? Porque contratar gerentes e especialistas em design que estão procurando ajuda em design e contratando designers. É isso que eles estão interessados no seu processo, não nos resultados finais, porque todo designer, Altair, pode criar um design bonito mas ao mesmo tempo funcional. Por que você realmente tomou essas decisões? Por que você fez isso e não aquilo? isso que servem os estudos de caso. Então, eles são incrivelmente importantes. 196. O que é um estudo de caso: O estudo de caso nada mais é do que uma longa apresentação do seu trabalho. Seu trabalho pode ser seu trabalho de design ou pode ser nosso produto para criá-lo. E abordaremos essa parte um pouco mais tarde nesta aula. Mas, para todos os efeitos, é apenas uma apresentação do seu trabalho. Agora, por quê? Forma longa e qual é a diferença entre a forma longa e a forma curta? Bem, é abreviado. A apresentação é algo que você vê no Dribble todos os dias. E sites como o dribble são basicamente uma captura de tela da parte do seu trabalho , para que possa ser uma seção de cabeçalho do seu site, por exemplo, ou uma imagem de maquete do seu aplicativo, que é já concluído. Bem, o estudo de caso é uma apresentação longa que você costuma ver em beacons. É um estudo de caso porque ajuda seus usuários e espectadores desse estudo de caso a estudar seu processo, estudar suas etapas e estudar como você alcança esse resultado final, que é, por exemplo design de produto ou aplicativo design, web design ou algo parecido. Não se limita estritamente ao design de UI UX. Também pode ser ótimo em branding. Pode ser ótimo em design de logotipo, seja apenas o comprimento dele. Isso vai variar dependendo do projeto em questão. Por exemplo, se você acabou criar um logotipo, será um pouco mais curto porque não há muitas etapas na criação de um logotipo. Enquanto estiver no design de UI UX, se você estiver, por exemplo criando um site com 20 páginas diferentes, todas elas são responsivas e você precisa criar wireframes de papel. wireframes em seu software favorito, é claro, vão variar e você terá muito mais etapas do que, por exemplo, no design de logotipo. Então, basicamente, esse é um estudo de caso em poucas palavras. E nas próximas aulas desta aula, vamos explorar o que você deve incluir em seu estudo de caso. Quais são algumas etapas que você deve seguir e alguns ótimos exemplos de apresentação para começar seus estudos de caso. 197. Elementos para incluir: Há muitos elementos diferentes que você pode incluir em seus estudos de caso. E ao longo dos meus mais de 15 anos neste negócio, descobri que alguns elementos funcionam melhor do que outros porque alguns elementos realmente ajudaram a contar uma história de como esse design se desenvolveu ao longo do processo, processo de criação atrasado e/ou o processo em que você trabalhou neste projeto em particular e alguns outros realmente distraem seus espectadores de irem direto ao assunto. Porque o objetivo principal de um estudo de caso é atrair espectadores em potencial que possam se transformar em clientes. Espero que isso seja algo que você esteja procurando ou se queira apenas mostrar aos seus colegas e que eles entendam seu processo e como você chegou aos resultados finais. Então, neste vídeo, discutiremos alguns elementos importantes a serem incluídos, na minha opinião, porque vejo esses elementos se espalhando o tempo todo em algumas ótimas apresentações que encontrei on-line. Então, aqui temos esta pequena introdução rápida e alguns elementos importantes para incluir em seu estudo de caso. Mais uma vez, isso vai variar dependendo do seu setor, dependendo do nicho em que você está. Porque nem todas as indústrias precisarão desses elementos e nem todos os estudos de caso precisarão desses elementos. Se o projeto for mais curto, por exemplo , se o projeto for mais longo. Então, a primeira coisa que você precisa fazer é incluir textos, descrever o que cada seção e elemento faz. Portanto, não sobrecarregue seus espectadores, mas forneça informações suficientes sobre o projeto. Então, por exemplo, se você fez um design de site, não entre em muitos detalhes. Por exemplo, eu acordei uma manhã e depois o cliente entrou em contato comigo. Ninguém quer ouvir isso. Vai direto ao ponto. Seja breve, conciso, mas seja preciso sobre os elementos que você está tentando descrever com seu texto. Faça com que as imagens contem a história principal aqui. Mas o texto existe apenas para ajudar a consolidar a ideia oral, o design oral, sua apresentação oral. Então, está aí apenas para ajudar suas imagens a trabalharem para você. Então, fale o idioma do seu público e não seja muito técnico. O que quero dizer com isso é quem é seu público-alvo? Seu público-alvo são designers? Depois, você pode falar em termos como eu usei o redimensionamento responsivo no Adobe XD e uso diferentes tamanhos de pranchetas e coisas assim. Mas se você está tentando atrair clientes do que falando o idioma, eles entenderão porque provavelmente não sabem o que é o Adobe XD em primeiro lugar. Então, talvez você não deva mencionar isso como uma dívida com destaque em seu projeto. É claro que você deve mencioná-lo algumas vezes ao longo do seu estudo de caso. Certifique-se de seguir o que seus clientes entendem. Então, por exemplo, se for uma empresa de beleza, não deixe de falar sobre produtos de beleza, sobre o processo de obtenção desse design específico. Use a linguagem que eles entenderão se esse for o público-alvo que você está segmentando. claro que, se isso for visto pelos diretores de arte, claro que eles conhecem o Adobe XD e todas essas ferramentas, mas também não seja muito técnico com os textos que você está tentando contar aqui. Então, mais uma vez, se você estiver em uma indústria de beleza, certifique-se de manter esse equilíbrio. Então, descreva quais ferramentas você está usando e também descreva o nicho em que você está. Descreva o processo em que você está e use alguns jargões técnicos dentro desse nicho específico, mas não exagere e não complique demais as coisas. Mais uma vez, os textos existem apenas para ajudar suas imagens, contar uma história melhor. Em seguida, temos imagens. Então, como mencionei, use imagens para complementar seus textos. As imagens devem estar conectadas à história que você está contando. Uma imagem de notícias que ajuda sua história, não qualquer imagem. E se você mesmo puder tomá-los. O que quero dizer com isso é, por exemplo se você está em uma empresa de automóveis e está falando sobre carros, não mostrou apenas a imagem de uma montanha. Porque qual é o objetivo dessa imagem? Não ajuda contar essa história. Não ajuda vender a ideia desse design específico. Portanto, não use isso. Use imagens que combinem bem com suas apresentações e que façam sentido. Como eu disse aqui, tire qualquer imagem, se puder. Todo mundo tem um desses, então você pode simplesmente usar seu telefone e tirar uma foto do seu processo sobre você mesmo trabalhando neste projeto, sobre a criação, por exemplo, sobre a criação, por exemplo estruturas de arame de papel. Ou você pode pegar seu telefone e entregá-lo a alguém, você sabe, por exemplo, seu familiar ou seu melhor amigo ou algo parecido. Ou você pode até mesmo fazer isso sozinho. Se você não quiser que ninguém o ajude, basta posicionar o telefone atrás de você. Por exemplo, tire uma foto, algo assim. Então, por cima do ombro de você trabalhando em seu computador, por exemplo ou deste lado. Ou, se você estiver dando uma olhada na prévia desse design, você pode simplesmente mostrar seu telefone assim sob um ângulo de você segurando o telefone e mostrando esse design. Isso realmente ajudará a contar uma história porque mostrará aos seus clientes-alvo e ao seus clientes-alvo e público-alvo que você realmente se importa com esse projeto. Que você realmente dedicou muita atenção e esforço a este projeto. E que você realmente preste atenção aos detalhes de nossos diretores, especialmente aqueles que desejam contratar designers. Isso será crucial em suas decisões, porque eles podem ver imediatamente que você é o designer que está prestando atenção a esses pequenos detalhes. E isso realmente valerá a pena a longo prazo. Portanto, preste atenção a pequenos detalhes como esse. Mas, mais uma vez, não exagere. Não tire fotos de si mesmo aleatoriamente e simplesmente as coloque em seu estudo de caso. Não ajuda contar uma história, mas poucas imagens aqui e ali realmente ajudarão você a vender a ideia desse design específico. Em seguida, temos o guia de estilo e o sistema de design. Então, mostre seu guia de estilo ou sistema de design para mostrar que você está organizado e estruturado. Mais uma vez, para nossos diretores, isso é extremamente crucial, mas também para nossos clientes, porque eles podem ver todos esses elementos se unindo no design final, o que mais apresenta elementos importantes que você usa, mas não exagere. Coloque os gradientes para cortar sua imagem na parte inferior, se ela for muito longa. Isso é especialmente importante para projetos muito longos e estudos de caso muito longos , porque em seu estilo guia os sistemas InDesign, em muitos casos, você pode ter centenas de elementos diferentes, mas nem todos os elementos são importantes. Por exemplo, você pode mostrar cores, você usou fontes, talvez alguns botões, talvez alguns fóruns, elementos, coisas maiores como essas. Em seguida, basta introduzir um gradiente de luz, que simplesmente alimentará esse sistema de design enquanto seus espectadores rolam para baixo até a parte inferior. Portanto, você não os está sobrecarregando porque, mais uma vez guia de estilo e o sistema de design não são o resultado final, são apenas uma ferramenta que o ajudará a chegar ao resultado final, o que, obviamente, deveria ser na parte inferior do seu guia de estilo. Mas falaremos sobre isso um pouco mais tarde nesta aula. Por fim, use as cores do seu projeto e do guia de estilo em sua apresentação, assim como a marca está correta. O que quero dizer com isso é, por exemplo se suas cores principais são azul e cinza, não use simplesmente rosa porque rosa nunca é mostrado em seu design, nunca é mostrado em seu processo. Então, por que colocá-los em sua apresentação? Certifique-se de usar as cores do seu guia de estilo e sistema de design. Se você tiver um, se você não tiver um guia de estilo ou sistema de design, seu projeto é muito pequeno, é simplesmente trabalhado em uma página de destino. Independentemente disso, eu realmente recomendo que você comece a usar guias de estilo e sistemas de design porque eles são extremamente importantes para o desenvolvimento futuro desse produto específico. Mas se você não as tiver, certifique-se de usar as cores que você tem em seu design, em sua apresentação. Porque dessa forma, a marca estará correta. Você ficaria surpreso com a quantidade de vezes que vejo isso em apresentações on-line, especialmente quando procuro designers contratarem para me ajudar em meus projetos. Então eu vejo isso o tempo todo. Certifique-se de não repetir esse erro porque, mais uma vez, para nossos diretores, especialmente isso mostra que você presta atenção aos pequenos detalhes. Em seguida, temos wireframes de papel, então apresente-os em uma descrição do problema. Desafio nas fases conceituais de seu estudo. Falaremos sobre fases um pouco mais tarde nesta aula. Mas basicamente o que isso significa é que você precisa apresentar seu estudo de caso em etapas. Então, o começo está aqui em cima e o fim está aqui embaixo. Portanto, os usuários precisam rolar até o final para chegar ao resultado final, basicamente um método de progresso. Portanto, os usuários estão progredindo à medida que rolam para baixo e partem dos estágios mais difíceis de idealização desse projeto, talvez alguns textos em páginas em branco e wireframes de papel porque forneça molduras para suas ideias. Então, mostre imagens da criação, bem como imagens digitalizadas com uma impressora ou seu telefone. O que quero dizer com isso é o que expliquei anteriormente, quando outra pessoa está tirando uma foto sua criando esse wireframe, você pode fazer isso sozinho. Você pode simplesmente usar uma caneta e um papel e usar um formulário como esse. Eu simplesmente tiro uma foto de você criando esse wireframe. Mais uma vez, não exagere, mas certifique-se de incluir algumas delas aqui e ali, apenas para ajudar a contar uma história melhor e ajudar a vender o conceito oral para seus espectadores. Dê detalhes suficientes para complementar a história que você está contando, mas não sobrecarregue seu público. Foi exatamente o que eu disse. E certifique-se de ser moderado em todas essas seções. Então, se dermos uma olhada no guia de estilo e no sistema de design, que mencionei pelo gradiente, quero dizer a mesma coisa para estruturas de arame de papel, por exemplo, você pode usar uma faixa de imagens que será horizontal ou pode mudá-lo para o lado apenas para mostrar esses wireframes de papel e mostrar seu processo. E, claro, você pode fazer algumas imagens aqui e ali sobre você criando esses wireframes de papel. Em seguida, temos um wireframe, então mostre-o nos conceitos e nas partes de teste do seu estudo de caso. Mais uma vez, vamos falar sobre isso um pouco mais tarde. E, claro, você sempre pode voltar a essas aulas e estudá-las um pouco mais. Apresente-os como uma imagem em perspectiva, em imagens e em maquetes. Mais uma vez, você pode simplesmente salvar seu wireframe do Adobe XD como uma imagem. Você pode colocá-lo em perspectiva em 3D, por exemplo, você pode mostrá-lo em imagens. Então, como mencionei, você pode mostrar isso. Alguém tirando uma foto de você, por exemplo, daqui ou da lateral ou wireframe do seu telefone, por exemplo , dessa perspectiva, digamos que você esteja usando esse wireframe no modo de protótipo do Adobe XD, por exemplo , e finalmente, em maquetes, você pode usar a maquete de um dispositivo desktop, laptop, dispositivo de telefone, não importa o que esteja fazendo e apresentar uma maquete dessa forma de seu wireframe. Se você puder criar algumas telas, faça parte do seu design clicável e incorporada à sua apresentação. Não importa qual ferramenta você esteja usando, você pode fazer isso. Mas como estou usando o XD, ele é nativo do XD Você pode simplesmente compartilhar a parte do seu protótipo para compartilhar um único quadro de arte, por exemplo, e depois incorporá-lo ao seu site, se tenha essa função ou, se não, você pode simplesmente fazer isso em beacons. Como o começa se integra bem ao Adobe XD porque faz parte da família Adobe, é o It's Adobe Product Beacons. Assim, você pode simplesmente usar esse link do seu Adobe XD e incorporá-lo à sua apresentação de beacons. E então as pessoas podem clicar nele e depois navegar . Isso. Garante que ele conte uma história e complemente seu texto, imagens, papel, wireframes e outros elementos. Então, isso vale para tudo o que mencionei anteriormente. Portanto, não sobrecarregue seus espectadores dezenas desses wireframes, porque lembre-se esse não é o resultado final. Essa é apenas uma parte da sua parte até o resultado final. Design de interface de usuário finalizado. Aí vamos nós. Portanto, certifique-se de mostrá-lo nos estágios de teste e resultados do seu estudo de caso. O que quero dizer com isso é que você pode mostrar que está sendo testado para seus usuários. Então, se você tiver usuários na sala, por exemplo, você pode ir em frente e tirar fotos de pessoas usando seu design no telefone, no laptop ou em dispositivos desktop, seja o que for. E você pode mostrá-lo na fase de resultados, que geralmente é a última etapa do seu estudo de caso. Então, como parece no final, como parece um produto acabado, talvez seu aplicativo ou site já tenha sido lançado. Em seguida, você pode fornecer um link para que as pessoas possam vê-lo. Em todo o seu estudo de caso. Eles estão aprendendo sobre como você o criou, como você resolve problemas ao longo do caminho. E agora há um link ativo para que as pessoas possam acessá-lo se você estiver trabalhando em um projeto privado. Então você não está planejando codificá-lo, você não está planejando lançá-lo, então está tudo bem. Você pode apresentá-lo em protótipos clicáveis, modelos 3D e imagens, como mencionei anteriormente, para todos esses outros elementos. E você também pode gravar alguns vídeos de suas telas em ação e anexá-los ao nosso estudo de caso. Mais uma vez, se você estiver usando o Adobe XD, você pode simplesmente gravar um protótipo e fazer o upload desse vídeo para ser uma apresentação de latas ou para o seu site. Assim, você pode simplesmente incorporar esse vídeo nele e as pessoas podem clicar nele e você pode mostrar a elas , por exemplo , sua estrutura de navegação ou navegação entre duas ou três telas ou algo parecido. Esse é o resultado final do seu trabalho. Portanto, certifique-se de que seu design de interface de usuário se destaque em sua apresentação. Esse é o ponto de venda. Esse é o ponto final do seu estudo de caso. Então, as pessoas rolam até o final para ver seu design de interface de usuário finalizado, para ver o produto final. Portanto, certifique-se de que ele se destaque mais do que outras partes do seu estudo de caso. Porque, mais uma vez, essa é a parte que realmente vende você como designer e realmente célula do estudo de caso e do seu processo como designer. Portanto, certifique-se de fazer com que ele se destaque. Finalmente, temos outros elementos a considerar. Portanto, dependendo do nicho, você é independente do projeto em que está trabalhando. Esses elementos podem funcionar ou não. Portanto, tenha cuidado com o estilo oral do seu produto, com o nicho geral em que seu cliente se encontra. Maquetes, 2D e 3D em vários estágios. Então, o que é 2D? O que é 3D? Obviamente, 2D é isso e isso. 3D é isso e isso , por exemplo , então você pode usar qualquer tipo de ângulo diferente de suas maquetes e também de seus designs. O Adobe XD tem esses recursos 3D para que você possa usar seu quadro de arte e torná-lo 3D. E você pode salvar a imagem como um PNG desse tipo e depois enviá-la para sua apresentação se quiser ter protótipos clicáveis. Então, mencionei que, se você estiver trabalhando no XD, basta incorporar o protótipo do think video. Então, mais uma vez, você pode fazer uma gravação de tela no estilo passo-a-passo de você segurando um telefone ou atrás do laptop. Então, o estilo de passo a passo é o que eu mencionei. Você pode simplesmente gravar no XD se estiver usando. E esses outros estilos são, por exemplo outra pessoa pode pegar o telefone e simplesmente posicioná-lo assim sobre seu ombro, por exemplo , aqui você está usando seu design em seu dispositivo para que você possa iniciá-lo protótipo clicável no final do projeto e, em seguida, você pode simplesmente usá-lo em seu telefone e outra pessoa poderá gravá-lo. E, claro, você pode fazer o mesmo em seu laptop ou dispositivo desktop. Elementos de fundo. Então, isso é o que diz: BG Elements apenas para mantê-lo um pouco mais curto, ajudar com interesses visuais, bem como para orientar seu estudo de caso. Claro, isso vai depender do seu projeto. Portanto, se você tiver folhas, por exemplo, se estiver trabalhando em um ambiente e em uma empresa baseados na natureza, poderá usar as folhas como elementos de fundo. Você pode usar flores, pode usar diferentes elementos gráficos e elementos geométricos, por exemplo, círculos, quadrados e triângulos, e alguns elementos gráficos diferentes, por exemplo, diamantes . E, finalmente, você pode usar ícones para corresponder bem a todos esses elementos de fundo. Mais uma vez, não exagere. Eles são apenas para ajudar a manter o interesse do público e fazer com que interesse do público e fazer com ele vá um pouco mais longe. Gradientes e desfoques, se eles se encaixarem no estilo do projeto, mas não exagere, porque muitas vezes vejo gradientes em todo o estudo de caso e isso realmente machuca seus olhos. Isso realmente te entedia depois de um tempo e não se esqueça, muitas pessoas têm deficiência visual. Então, vai ser muito difícil para seus olhos ver esses gradientes. E basicamente para distinguir seus gradientes do seu design, especialmente se eles são daltônicos, coisas assim. Portanto, certifique-se de usar gradientes e desfoques em alguns lugares apenas para apimentar um pouco seu design. Temos adesivos e emojis. uso depende do projeto de nutrientes, é claro. Então, digamos que você esteja trabalhando em um projeto para um banco. Obviamente, você não incluirá adesivos ou emojis. Ou talvez o banco seja para um público mais jovem e é isso que eles estão tentando atingir. Então, talvez nesses casos, adesivos e emojis possam fazer sentido. Então, use seu bom senso sobre o que você está tentando criar. Então, esses são apenas alguns dos elementos que eu gosto de usar em meus estudos de caso ao longo dos anos. E esses são os elementos que descobri que algumas das principais empresas e designers usam o tempo todo para complementar sua apresentação de design e contar uma história melhor. Você pode usar alguns deles. Você pode usar todos eles, mas o que quer que esteja usando, certifique-se de que isso o ajude a contar uma história e garantir que funcione com sua marca e seu nicho. Porque, caso contrário , ele apenas cola elementos e torna mais difícil para as pessoas entenderem. E, claro, se você está tentando conseguir um emprego usando seu estudo de caso, isso simplesmente afastará diretores de arte e pessoas do RH porque estão vendo centenas de designers no diariamente e eles podem realmente dizer quem é bom, quem não é sobre essas pequenas mudanças. Então, certifique-se de prestar atenção a eles. 198. Como criar estrutura de estudo de caso: No último vídeo, falamos sobre quais elementos você deve incluir em seu estudo de caso, mas como estruturá-los para facilitar o entendimento e facilitar o consumo? É disso que trata este vídeo. Então, temos uma estrutura de criação para seu estudo de caso. Organize seus estudos de caso para que sejam mais fáceis de consumir e entender , porque realmente não adianta simplesmente colocar esses elementos em uma página. Eles realmente precisam ter uma estrutura coerente que faça sentido e mostre aos espectadores que você realmente presta atenção a este estudo de caso e acima de tudo, presta atenção ao seu trabalho de design. Portanto, projeto, introdução e resumo, na minha experiência e na minha opinião, deveriam realmente vir em primeiro lugar. E no topo da página, talvez em sua apresentação, você deva ter algo como a imagem da capa, talvez apresentando o resultado final, o resultado do seu projeto e desse estudo de caso. Talvez, se houver um aplicativo móvel, talvez você deva posicionar uma bela maquete com aparência 3D com um título ao lado, apenas para mostrar e contar a história o que isso realmente é. E talvez uma frase sobre o que o aplicativo ou site realmente faz. Abaixo disso, na minha opinião e na minha experiência, os problemas entram diretamente no design. Resumo. Descreva do que trata o projeto, mas mantenha-o curto e conciso. Não forneça muitos detalhes caso você esteja sob o NDA. Então, por exemplo, o que quero dizer com isso é que, se você trabalha para uma montadora, não diga que a montadora foi fundada em 1954, por exemplo, e descreva os detalhes da história da fundação. Ninguém se importa com isso. Você pode mencionar esse detalhe. Então, por exemplo, empresas fundadas em 1954, digamos que tenham 20.000 funcionários. Então você entende o que eu quero dizer? Seja breve e conciso e continue com a história, porque ninguém tem tempo para ler tudo sobre isso, eles podem simplesmente acessar o site em questão em que você trabalhou, por exemplo, ler tudo sobre a história deles ou se for uma empresa conhecida, eles podem simplesmente acessar a Wikipédia se estiverem realmente interessados em aprender mais sobre a própria empresa. Seu projeto não é sobre a empresa em si. É sobre os produtos que eles estão vendendo, sobre um serviço que estão oferecendo ou sobre as boas ações que estão fazendo se forem sem fins lucrativos ou algo parecido. Então, mais uma vez, certifique-se de mantê-lo breve em seu design. Resumindo, basta dar a essência para que seu público seja informado e conte uma história por meio de seu estudo de caso. O que quero dizer com isso é o que mencionei no vídeo anterior. elogiar seus textos com suas imagens e o que quero dizer com NDAs, não mencione detalhes pessoais dos funcionários. Por exemplo, John é o diretor aqui mora nestes três e este é seu número de telefone. Obviamente, isso é idiota. Não faça isso também. Não mencione seus detalhes pessoais. Então, por exemplo você pode mencionar os fundadores se eles concordarem com você, e geralmente concordarão porque é um bom PR, mas não mencione outros funcionários se eles não estiverem satisfeitos com isso. Nunca mencione seus detalhes pessoais, como números de telefone, endereços de e-mail, páginas do Facebook, páginas do LinkedIn, não faça nada disso. Essas pessoas querem fazer isso. Eles farão isso em seu próprio site, mas não cometa o mesmo erro tantos designers, o que eu vi colocando isso em seu estudo de caso, além de não mencionar nenhum lucro se não o fizerem. eu quero isso. Porque isso realmente mostrará à concorrência como eles estão se saindo e realmente funcionará contra a vantagem deles neste caso. Então, por exemplo, você pode dizer algo como se eles tivessem um aumento de 20% no último trimestre, mas não faça isso. Por exemplo, eles ganharam $20.000 a mais no último trimestre do que antes, porque isso realmente mostrará à concorrência essas informações confidenciais. Então, preste atenção a coisas assim. Mais uma vez, não se esqueça de ser conciso e ir direto ao assunto. Em seguida, estamos aqui. Problema que você vendeu. Qual é o principal problema que você enfrentou neste projeto e como você o resolveu? Projetar o site não é o principal problema. É um problema e é um trabalho que você aceitou e foi projetado por você. Então você criou esse design de site, mas qual é o problema do design desse site? Então, por exemplo, se eles têm nossa praia de produtos, por exemplo e as conversões não são tudo isso. Bem. Esse é o problema que você está tentando resolver. Por exemplo, se a imagem do produto não for muito grande e os potenciais compradores não entenderem o que é o produto. Talvez você aumente o tamanho dessa imagem. Ele posicionou os botões aqui e ali e depois aumentou a conversão a longo prazo, por exemplo , nos próximos seis meses em 20 por cento. Então esse é o problema que você resolve. Esse deve ser o ponto-chave que você está mencionando em seu estudo de caso, porque, mais uma vez , mostra aos seus futuros empregadores que você realmente está cuidando de coisas pequenas e pequenas como esta, o que na verdade se transformará em um grande problema se não for resolvido a tempo. Não diga como criar um aplicativo, mas sim qual problema você usou e como seu aplicativo o resolveu. Isso é exatamente o que eu mencionei. Então, por exemplo, digamos, vamos nos ater à página do produto. Se não funcionar bem, não responda. Digamos que, no desktop, no celular, desculpe, no desktop, no laptop e nos duplos, digamos que o botão Compre agora funcione bem, mas no celular ele se perde. Então, talvez você aumente a conversão em, digamos, dez por cento nos próximos três meses simplesmente mantendo o botão fixo e fazendo com que, dessa forma, ele comece a engatinhar quando os usuários começam a passar de um determinado ponto. Então esse é o problema que você resolve e aumenta a conversão em dez por cento. Esse é apenas um dos exemplos. É claro que cada projeto existente terá problemas diferentes e que você precisará resolver como designer. Esse é apenas um deles. Em seguida, temos os desafios que você enfrentou. Houve algum desafio específico que você enfrentou ao criar seu design? Os desafios podem ser prazos curtos, problemas com o usuário, desenvolvimento de novas ideias, testes longos, implementação e coisas assim. Seja conciso e deixe seu estudo de caso contar uma história, mas forneça informações suficientes para que os espectadores possam entender do que você está falando sem revelar muitos detalhes. Então, digamos que depois de criar os conceitos iniciais, os usuários tenham problemas em navegar pelo aplicativo. Então, por exemplo, o desafio que você enfrentou é que você teve que simplificar a navegação. Assim, você tornou mais fácil para os usuários entenderem e chegarem mais rápido aonde precisam ir. Então, esse é apenas um dos desafios, por exemplo desenvolvimento de novas ideias, neste caso, digamos, digamos que você raramente cria conceitos originais e os usuários gostaram deles. Mas os fundadores, por exemplo, tiveram essa nova ideia e realmente acham que precisavam no momento. Portanto, você precisa desenvolvê-lo muito rapidamente e introduzi-lo no design existente e nos conceitos existentes que seus usuários já gostaram. Portanto, esse é apenas um dos milhões de exemplos diferentes. Portanto, não deixe de mencionar desafiar seu rosto, mas, mais uma vez, seja conciso. Não fale sobre seus espectadores, com esta parte do seu estudo de caso. Em seguida, temos os conceitos que você criou. Portanto, conceitos não são produtos acabados, mas ideias e versões do seu design. Os conceitos podem ser estruturas de arame de papel. Eles podem ser wireframes. Mais uma vez, o que mencionei no vídeo anterior, você pode mostrá-los no seu telefone se os estiver usando, você pode mostrar aos usuários que os usam o que eu mencionei também no vídeo anterior. Eles podem ser wireframes de papel, wireframes, conceitos de interface do usuário, mas conceitos assustadores, bem como interface de usuário e testes de usuários. Então, essas são todas as coisas que você pode incluir nos conceitos que você criou e pode espalhar esses conceitos em todo o seu estudo de caso. O que mencionei em um vídeo anterior e o que abordaremos nos próximos vídeos sobre a estrutura geral. Mostre-os de uma maneira interessante, mas não faça isso. É aí que serve o capítulo final. Mais uma vez, os conceitos não são os produtos acabados. São apenas ideias que você colocou em prática. Por exemplo, a estrutura de arame de papel não é o produto acabado, mas o resultado é. Então, mais uma vez, certifique-se de não exagerar nos conceitos e de mostrar o resultado com destaque no final, porque o resultado é o que importa no final do dia e o que todas essas semanas e meses de design , teste e trabalho nele levaram você ao resultado deste projeto. Portanto, certifique-se de torná-lo proeminente. No final de seu estudo de caso, temos testes com usuários, portanto, sobre seus usuários testarem e forneceremos informações sobre o que você encontrou, como eles gerenciam seu conceito. Que resposta eles te deram? Como seu grupo de testes de usuários foi dividido? Que idade havia? Qual é a ocupação deles e assim por diante. Mostre imagens de seus conceitos. Conceito que está sendo testado ao lado do texto para dar uma melhor perspectiva aos espectadores. O que quero dizer com isso é, por exemplo você pode criar todos os tipos de gráficos diferentes. Então, por exemplo, você pode mostrar gráficos de usuários do sexo feminino versus usuários do sexo masculino, quantas horas eles passam testando. Você descobriu que a opção um era melhor do que a opção dois, por exemplo, e você pode mostrar todas essas coisas ao lado do seu texto na forma de imagens, na forma de gráficos e gráficos e em a forma de ícones. Assim, você pode combinar todos esses elementos para realmente ajudar a contar uma história sobre testes de usuários e Ababa sobre como você resolve todos esses problemas usando seus usuários, que ajudaram você a testar seus conceitos para chegue ao resultado e chegue à ideia final. Se você nunca fez testes com usuários, eu realmente recomendo que comece a fazer isso para começar a aprendê-los, porque isso realmente o ajudará a melhorar o resultado de sua possível solução para o site da AP onde quer que você esteja fazendo. Mas o teste de usuário é exatamente isso. É só testar quando o aplicativo ou site está ativo. É aí que os usuários reais entrarão. Portanto, esse teste realmente ajuda você a entender, antes de começar, como seus usuários vão interagir com seu design. Nós projetamos o resultado, certo? Sobre quanto tempo demorou, quantas horas você gastou nas iterações pelas quais passou e assim por diante. É aqui que você precisa escrever pelo menos porque o design fará toda a conversa, mas inclui algumas informações e marcos importantes de seu projeto. O que quero dizer com isso é, por exemplo, projeto demorei seis meses para ser concluído. Nesses seis meses, fizemos, por exemplo 20 testes de usuário diferentes , 40 wireframes diferentes. Temos 100 estruturas de arame de papel diferentes. Eu bebi, sei lá, 200 xícaras de café e coisas assim. Portanto, certifique-se de incluir todos esses detalhes, pois eles ajudarão você a vender a história para seus futuros empregadores e futuros usuários. Você pode incluir as horas do teste, número de testes realizados, como eu disse, para chegar a esse design, bem como algumas ideias finais, e colegas de equipe o ajudarão com este projeto, se houver eram quaisquer. Portanto, se você tiver algum colega de equipe trabalhando com você nesse projeto específico, não deixe de mencioná-lo. Se eles não quiserem mostrar suas imagens. Mais uma vez, estamos voltando ao NDA e a toda essa questão de privacidade. Em seguida, basta mencionar seus nomes e você sempre pode deixar os perfis de seus beacons. Você pode deixar os perfis do drible, perfil do LinkedIn, coisas assim. E se você é a parte fundamental dessa equipe, por exemplo, se você é o fundador de uma equipe, se você é o CEO de sua própria empresa, por exemplo , certifique-se de se mostrar mais proeminente do que todas essas outras pessoas porque as pessoas que estão contratando você como agência, por exemplo , vão querer ver quem é o cara ou a garota principal desta empresa. Então, eles vão querer ver quem está por trás dessa operação. E se você se colocar um pouco acima dessas pessoas, não como aqui, eu sou assim e essas pessoas não são assim. Não. Mas se essas pessoas são assim, certifique-se de se fazer assim ou simplesmente de se posicionar acima delas apenas para mostrar aos seus futuros funcionários. Sim, eu sou a pessoa que está dirigindo este programa e você deve entrar em contato comigo para, por exemplo, falar sobre seu projeto futuro. Então, essa é apenas minha estrutura. Essa é a estrutura que descobri que funcionou ao longo dos anos, não apenas para mim, mas para muitas pessoas do setor, especialmente grandes marcas e grandes designers. Então, mais uma vez, nem todos os elementos dessa estrutura funcionarão o tempo todo em cada projeto. Mas a maioria desses elementos funcionará muito bem. Portanto, certifique-se de explorá-los e usá-los com sabedoria. Porque, mais uma vez, existem apenas para ajudá-lo a contar uma história e apenas para ajudá-lo a formar a opinião oral do seu projeto, seu fluxo de trabalho e de você mesmo como designer para a New Estudo de caso de York, quando você tem todos os seus elementos estruturados de forma que os usuários possam acompanhar facilmente. 199. Exemplos de estudo de caso: Neste vídeo, vou mostrar alguns exemplos incríveis de fins de semana que podem ser encontrados on-line. Existem milhares de exemplos diferentes nos finais de semana, especialmente para que você possa navegá-los e também visitar outros sites. Você pode consultar sites pessoais dos criadores que você admira para ver seus estudos de caso e entender como eles os estão fazendo. E certifique-se de entender que nem um único estudo de caso é igual aos outros estudos de caso. Nem mesmo pelo mesmo designer, porque cada estudo de caso conta uma história diferente. Ele mostra partes diferentes desse projeto final e realmente mostra um design diferente. Então, aqui estão apenas alguns dos mais recentes que encontrei. Mas é claro que você pode ir direto aqui e pesquisar, por exemplo , UI, estudo de caso de UX, e ele exibirá milhares de estudos de caso diferentes. E, claro, você pode procurá-los e ver como eles são criados. Então, o que temos aqui é esse conceito de aplicativo de compartilhamento de carros, e isso é o que eu mencionei no vídeo anterior. Certifique-se de incluir algum tipo de imagem de capa para que seus usuários entendam bem. E, claro, você pode pular para o futuro na UI UX e, em seguida, verá o melhor trabalho no Behance , ministrado pela equipe de fins de semana. Então, mais uma vez, no conceito de aplicativo de compartilhamento de custos, você pode ver que você nos deve 2021 a qualquer momento e quem o projetou e a alguém. Então, estamos começando com imagem de um carro e não vou entrar em muitos detalhes sobre tudo isso porque esse vídeo terá 3 horas de duração. Vou apenas pular entre eles, mas certifique-se de prestar atenção a todos esses elementos que mencionamos anteriormente nesta aula. O projeto. Qual era o objetivo do projeto? Fluxo de usuários? Então, como os usuários vão fluir por meio de seu aplicativo, cores e fontes. Então, eles não têm esse sistema de design que eu mencionei. Eles têm essas cores e fontes, o que também é bom. Você está apenas mostrando aos seus funcionários em potencial como você o criou. Temos protótipos, telas, então eles entraram diretamente nos wireframes do dispositivo. O que temos aqui é uma espécie de vídeo. Então, temos uma tela de carregamento. Isso é o que eu mencionei. Temos uma tela de login, então toda a navegação está aqui. E você pode ver imediatamente que isso realmente parece um wireframe. E acho que esse é o produto final deles, mas é claro que você também pode fazer isso em estágios de wireframe. E nós terminamos o produto aqui, como você vê. Afinal, esse era o wireframe. Então, temos o produto acabado e temos essas maquetes em perspectiva, o que eu mencionei, temos essas maquetes do modo escuro e temos tanques no final. Assim, você pode vincular seu Instagram Dribble no Telegram ou o que quiser aqui, seu próprio site pessoal. E, claro, agradeça esses designers depois de rolar até o final. E isso é o que eu mencionei sobre você, seus colegas de equipe ou o que você quiser incluir no final. Portanto, você também pode fazer isso em nome, é claro, em seu próprio site. Temos garfo, então desenvolvimento de uma aplicação de alimentos saudáveis. E posso vincular tudo isso no PDF e, de fato, em nosso testamento. Assim, você pode verificar o PDF anexado a esta aula e simplesmente clicar nesses links para acessar essas apresentações para não precisar procurá-las. Você pode ver por si mesmo imediatamente e , em seguida, pode simplesmente acessar os perfis desses criadores. E, claro, você pode ver que eles têm muito mais em cada perfil. Então, é só um atalho para você. Então, o que temos mais uma vez são essas maquetes em perspectiva, do que trata o projeto, quais são os objetivos? Assim, você pode ver o escopo do trabalho. O que exatamente esse designer fez? Encontrando a solução ideal? Então, pesquisas que eles fizeram para a competição. Então, temos nosso fluxo aqui. Então, da ideia à criação da hipótese e à prototipagem da pesquisa. Portanto, nenhuma dessas etapas é o que importa para você como designer, porque essas etapas mudarão de projeto para projeto. Então, às vezes você vai ter a criação de uma hipótese, às vezes você não. Às vezes você vai ter que fazer pesquisas. Outras vezes, os clientes fizeram pesquisas para você, prototipando e pesquisando mais uma vez o sistema de design. Então, nem tudo isso é o que você precisa incluir. Mais uma vez, eles vão variar de projeto para projeto, prototipagem para verificação de hipóteses. Então, nós temos isso aqui. Temos maquetes em 3D aqui. Então, só um tempero aqui e ali. O que mencionei anteriormente não sobrecarrega seus espectadores. Temos o produto final aqui com todos esses elementos de fundo, imagens de fundo. Assim, você pode ver o respingo de leite e todas essas plantas aqui na frente, podemos ver uma pessoa segurando a maquete. Então, todos esses elementos mencionados, que mencionei anteriormente em lições anteriores. Temos essas maquetes 3D e todos esses elementos saindo para mostrar que há mais elementos nessas páginas. Temos imagens que correspondem bem ao texto. Assim, você pode ver estatísticas e perfil, funil de vendas adicional. Assim, você pode ver todos esses detalhes. Reembolso em dinheiro de até 20 por cento. Então, todos esses pequenos detalhes são o que ajuda a vender uma história para potenciais espectadores. Mais uma vez, clique em apreciação porque nós realmente apreciamos isso. Temos um estúdio, empréstimos de web design e desenvolvimento web. E você pode ver esses dois designers. Então, isso é o que eu mencionei. Se você administra um estúdio, pode ter vários proprietários. Na sua página de beacons. O site foi construído usando tilda e modificação de código, análise de concorrentes, e podemos ver essa bela estrutura. Então, benefícios de introdução, serviços de trabalho, trabalho em andamento. Sobre nós. Então, tudo isso, temos tipografia aqui. Vou rolar um pouco mais rápido porque você pode ver o tamanho desse site. Temos essa animação de aparência incrível. E eu diria que essas maquetes são uma ótima ideia porque não são. A idade é apenas uma tela básica. Não está mostrando uma parte específica. E isso é o que eu vejo o tempo todo. Os designers estão usando iPhones, que são gerações mais antigos. Eu também fiz isso com meus produtos. E você verá isso em um vídeo futuro. Mas certifique-se de que, se você estiver usando essas maquetes para usar maquetes sem rosto, basicamente, você não pode dizer qual dispositivo é esse, qual é o tamanho. E sempre permanecerá no caminho certo. E basicamente, porque não vai mostrar os elementos de um determinado dispositivo. Se rolarmos até o final, você poderá ver mais exemplos. Você pode ver como fica em um telefone e em um desktop. Nas versões em inglês e russo, podemos ver a grade aqui, que obviamente é uma animação de rolagem importante, que é fantástica. Você também pode ver esses elementos saindo dos tablets iniciais que mostram a página. E obrigado por assistir. Então, aqui você tem apreço. Temos sites de concessionárias de automóveis, que serão exibidos no futuro no XD e no futuro na UI UX. Então, mais uma vez, certifique-se de verificar isso e você poderá ver vários proprietários. Então, temos quatro pessoas aqui. Então, sites de concessionárias de automóveis para Mercedes Benz, resumo da Ucrânia. Então, eles queriam criar um site novo e mais eficiente para substituir os antigos. Então, excelente resumo, e mostre o problema oral que eles têm. O site anterior foi baseado no modelo oficial da Benz e resultou em baixa usabilidade para taxas de conversão e falta de função necessária. Então esse é o problema que você resolve imediatamente no topo. Então é por isso que eu disse para não perder muito tempo, simplesmente vá direto ao assunto. Por que redesenhar o site antigo. Então esse é o problema que eles resolveram as metas do projeto. Então você pode seguir em frente. Mais uma vez, vou deixar os links no PDF para que você possa ler tudo sobre esses detalhes. Podemos ver belas imagens e experimentar como é sentar ao volante. Então, esses são os problemas que eles resolveram. Então, quando você deseja agendar um test drive, por exemplo , apenas caminhar ou dirigir, é fácil reservá-lo em seu telefone. Mais uma vez, imagens para complementar o que você está falando. Configuração fácil do test drive. Então, você pode ver que eles estão fazendo marketing para pessoas mais jovens neste caso. Então, a pesquisa filtra como eles resolvem isso. E podemos rolar um pouco mais para baixo. Pagamentos automáticos, somente API, emprestados diretamente aos clientes. Você pode ver esta bela animação de todas essas telas diferentes, do catálogo em PDF à loja online. Esse também é o problema, porque a maioria deles, especialmente os fabricantes de automóveis antigos, todos os fabricantes de automóveis estão enviando seus catálogos em PDF e , em seguida, você precisa clicar nos links do Chaleiras em PDF para chegar à loja online, que é ridículo nos dias de hoje, basta lançar uma loja online em primeiro lugar. Mas você ficaria surpreso com quantas dessas empresas mais antigas ainda estão fazendo isso. Recursos e funções de controle total. Você pode ver a grade imediatamente. Detalhes como margens, calhas, colunas e assim por diante, fontes e cores. Temos essa bela apresentação aqui, que é sobre a marca, que é o que mencionei anteriormente. Você não vê a cor amarela aqui, por exemplo, porque o amarelo não pode ser visto em nenhum lugar nas fontes e cores originais , por exemplo , não o use aqui também. Agradeço. E, finalmente, temos esse Mother Care, que é apresentado em uma UI UX. Portanto, o maior integrador de soluções digitais em Moscou. Então, podemos ver aqui as cores. Eles usaram. Ele é um varejista britânico especializado em produtos de maternidade em geral para crianças menores de oito anos. É isso mesmo. Você não precisa entrar em muitos detalhes sobre o que eles fazem. Se as pessoas realmente quiserem saber o que fazem, elas também podem clicar no link e acessar a empresa. Portanto, temos uma loja on-line, como parece em todos os negócios globais Agora existem mais de 100 lojas no território, o que é ótimo. Então, eu e o app realmente gostamos desses pequenos trechos de textos. design do aplicativo é feito em um estilo leve e moderno, o que realmente mostra, é exibido imediatamente aos líderes do projeto e diretores de arte. Mas alguém que está procurando, que provavelmente está nesse nicho, não saberá o que é o estilo moderno de iluminação. Eles simplesmente gostam do mirante, mas não sabem qual é esse estilo. E isso realmente os ajuda. Se eles entrarem em contato com você para um projeto como esse, eles poderão referenciar esses textos. Por exemplo, eu realmente quero que você crie este aplicativo para mim em um estilo moderno e leve, como você fez para esta marca. Portanto, é muito útil contar uma história para seus usuários e realmente ajuda na conversa posterior. Então, temos ícones aqui. Talvez alguém não saiba que essas não são ilustrações. Esses são ícones em 3D. É muito fácil de ler e entender. Temos uma segunda tela na web, muito ar e uma estrutura de página clara. Mais uma vez, o texto ajuda a vender uma história e esses elementos de fundo, como essa cor aqui e esses números aqui, também ajudam a contar uma história. Gostei muito desses textos, trechos. Eu acho que eles fazem um trabalho muito bom. Então, na versão escura com fundo escuro, com as maquetes escuras no interior, você pode ver o espaçamento, quão bem ele funciona. Então eu acho que isso é algo como 300 pixels ou algo parecido, talvez até um pouco mais no espaçamento. E você pode ver um espaçamento consistente em todos esses detalhes do plano de fundo. Prestando atenção às cores. As cores que eles usam estão em toda a apresentação. Realmente não há cores externas. Você pode ver isso saindo da maquete. Mais uma vez, isso realmente complementa, bem, o que você está falando. Gosto muito dessas cores. Gosto muito de como eles contam uma história e como as telas estão conectadas. Então, talvez estejamos começando daqui, depois vamos ouvir, depois vamos ouvir de lá, vamos ouvir. Então, eu gosto muito dessa equipe de projeto em estilo passo a passo. Isso é o que eu mencionei. Assim, você pode se tornar um líder de projeto aqui mesmo no topo. Então, chefe de UX. E então você pode listar todos os seus colegas de equipe abaixo de você. Se você estiver mais uma vez, a principal característica e o principal membro desta equipe estão aqui para agradecer. E você pode ver o maior integrador de soluções digitais em Moscou, o que é ótimo para nosso slogan, para sua empresa. Então, mais uma vez, esses são apenas alguns dos meus exemplos que encontrei recentemente. Mas, como mencionei, há milhões de exemplos diferentes nos finais de semana. Especialmente mais uma vez, gosto muito de beacons para estudos de caso porque isso realmente ajuda você a entender todos esses detalhes que mencionamos ao longo desta aula. E espero que você tenha visto nesses exemplos, mais uma vez, exemplos que são mostrados aqui serão vinculados ao PDF. Você pode simplesmente clicar nesses links em um PDF e acessá-los facilmente e simplesmente ler mais uma vez comigo este vídeo sobre o que mencionamos nesta aula para realmente ajudá-lo entenda todos esses elementos que você precisa incluir. Mais uma vez, certifique-se de entender. Mais uma vez, um grande estudo de caso é diferente. Cada projeto é diferente, então nem todos os projetos, e espero que você tenha visto neste vídeo, todos esses são estudos de caso, mas todos eles são teorias completamente diferentes, elementos diferentes, há um espaçamento diferente. Eles usam ritmos diferentes, usam cores e fontes diferentes , iconografia e coisas assim. Então, mais uma vez, todos eles usam a mesma estrutura dos elementos que mencionei, mas nem todos seguem exatamente a mesma estrutura. Eles fazem isso de maneiras diferentes, mas ajudam a contar uma história que é o objetivo final aqui, ajudar seus usuários e espectadores a entender qual foi o seu papel nisso. projeto e quais são algumas etapas que você tomou para chegar ao resultado final. 200. Redação de conteúdo: Ao escrever o texto para incluir em seus estudos de caso, certifique-se de escrever em um idioma que seus usuários entendam. Mais uma vez, voltamos ao que eu disse no início desta aula. Não use uma linguagem muito complicada, que não fala com seu público-alvo. Certifique-se de falar com eles como com um amigo. Se esse é o tom que você quer usar. Se esse é um tom mais corporativo, mais sério, tudo bem. Mas se esses são seus usuários, se eles vão entender o que você está dizendo em uma linguagem muito básica, se isso é realmente casual ou profissional, realmente não importa. O que importa, no final, é que eles entendam o que você está tentando lhes dizer. Então, se eu levar você de volta rapidamente a este exemplo que mencionei no vídeo anterior. Então você pode ver esse texto. Então, configure recomendações personalizadas para oferecer as melhores ofertas de produtos. Como você pode ver, eles não mencionam aqui. Então, por exemplo, eu usei o XD para criar duas pilhas para garantir que o botão direito fosse maior e entrasse em muitos detalhes complicados e desnecessários. O que eles disseram é estabelecer recomendações pessoais para oferecer as melhores ofertas de produtos. Portanto, ao criar seu texto, preste atenção a detalhes como essa mistura para ser curto, conciso, direto e fazer com que seu design fale. Esse é o objetivo do estudo de caso de designers : mostrar seu design, não mostrar suas habilidades de redação ou mostrar suas habilidades de apresentação, que surgirão ao longo dos anos de trabalhar. Portanto, você não conseguirá criar apresentações de alto nível como essas logo no início. Mas com o tempo, com a prática , com os projetos, você se tornará melhor nisso. E então você chegará ao nível dessas apresentações que eu mostrei anteriormente, por exemplo, níveis ainda mais altos. Mais uma vez, no final deste vídeo, certifique-se de mantê-lo conciso. Certifique-se de falar em um idioma seus usuários e espectadores entenderão. Portanto, certifique-se de segmentá-lo e falar com os espectadores e usuários que entenderão e que serão seu público-alvo, porque você está tentando ser contratado ou está tentando se exibir? para seus colegas designers, que são seu público-alvo e depois falam nesse idioma. 201. Dicas de apresentação: Nesta lição, darei algumas dicas de apresentação, dependendo do que você está apresentando. Então, vamos pular imediatamente. Este é um dos nossos produtos. É chamado de fluxo de fios, fluxogramas, e você pode encontrá-lo em um doador web dotnet. Vou deixar o link no PDF e você pode acessá-lo. E, claro, você pode obter todos os meus cursos, todos os meus produtos digitais em minha associação. Vou deixar o link para isso também. Se você estiver interessado. Você pode clicar na articulação deles e ter acesso a tudo o que eu criei. Então, aqui temos gráficos de waffles, que são apenas um dos nossos produtos. E queria mostrar isso porque é um pouco diferente do seu estudo de caso clássico. No entanto, este é o estudo de caso, mas é um estudo de caso para um produto digital. Então, acontece uma história diferente. Na verdade, não mostra todos esses detalhes. Portanto, temos 200 telas, 200 elementos, dois papéis e temos versões claras e escuras. Então você tem um pequeno trecho de texto aqui, mas eu estou tentando mostrar aqui, assim como as versões claras e escuras. E eu estou mostrando isso aqui, então eu estou apenas tentando vender o produto geral também. Então, se rolarmos para baixo aqui, você pode ver o botão Comprar agora mesmo, para que você possa comprar imediatamente. Mas estou tentando vender a história oral do produto em si. Portanto, as versões claras e escuras, se rolarmos para baixo, temos componentes adaptáveis. Componentes que estão interagindo entre si e mudando de lugar, mudando elementos. Então, o que está incluído? Estou tentando mostrar que existem 400 componentes na web e em dispositivos móveis em três formatos de arquivo. Então, o Photoshop, o Sketch e o XD são componentes perfeitos, camadas superorganizadas , layouts gratuitos do Google Fonts em papel tutorial em vídeo incluído para ajudar você a começar. Então, só isso nos ajudou a vender dezenas de cópias desse produto, porque muitos desses designers iniciantes não sabem realmente para que serve isso. Realmente não sei para que usá-lo, depois de comprá-lo. E quando assistiram ao tutorial em vídeo, ficaram maravilhados. Ao longo dos anos, recebi muitos e-mails diferentes sobre como os tutoriais em vídeo realmente ajudam meus compradores a entender como usar meus produtos melhorar a UX do seu projeto. Então é por isso que você vai usar esses fluxogramas. Ao criar fluxogramas e planejar com antecedência, você pode economizar muito tempo nas fases posteriores do projeto e tanto para você quanto para seus clientes, reduzindo o tempo que você usaria para wireframes e mais tarde para UI. Então, explica imediatamente para que serve o projeto, para que serve o produto. E isso realmente ajuda a vender histórias, porque você pode ver todos esses elementos diferentes combinados formando essas telas. Portanto, isso realmente ajuda os usuários a entender como eles podem usar esse produto se o comprarem. Estrutura de camadas organizada. Então, estou compartilhando todas essas capturas de tela aqui. E se você não ver isso corretamente, posso ampliar muito mais. Então você pode ver o Photoshop, você pode ver o esboço e você pode ver x D, aqui. Você pode ver essa estrutura de arquivos organizada. Portanto, fluxogramas de qualquer complexidade. Assim, você pode combinar e conectar todos esses fluxogramas de maneiras diferentes. Pronto para impressão. Então, estou apenas mostrando um tamanho de carta dos EUA e pronto para impressão A4 para que você possa imprimir esses quatro gráficos se precisar mostrá-los pessoalmente aos seus clientes ou colegas de equipe. Variações ilimitadas. Então, estou apenas mostrando várias variações diferentes aqui, para que você possa combiná-las como quiser. E então estou mostrando esse ícone, ofereço um laptop, e estou mostrando Web Elements, luz, que são esses elementos de luz, 200 elementos de luz para fluxogramas do site. E estou começando com a categoria de cabeçalhos. Assim, você pode ver como o texto está realmente ajudando a célula da história oral e do produto, neste caso, combinando-a com imagens. Então isso é o que eu estava dizendo. Não estou dizendo um slide do Web Elements. Então, por exemplo não estou dizendo aqui, todos eles têm fundo branco para ajudar seus elementos a se destacarem da multidão. Porque isso ajudará seus usuários com deficiência visual a entender melhor o produto. Não estou vendo nada disso. Os elementos fabulosos iluminam 200 elementos de luz para o fluxograma do site, para que os usuários possam entender : Ah, isso não é para celular, é para sites e categorias para cabeçalhos. Você pode ver conteúdo, controles deslizantes, portfólio de futuros e assim por diante. E se rolarmos ainda mais para baixo, temos elementos móveis claros, então os usuários podem dizer, ok, então isso também é para dispositivos móveis. Incrível. Então eu tenho 200 aqui, 200 ali, ótimo. Portanto, temos categorias de login, percurso e assim por diante. E então, quando eles rolam até aqui. Como você pode ver, a apresentação é extremamente longa porque há dezenas de elementos diferentes. Elementos da Web escuros. Então, tudo bem, então eu posso combinar uma luz e uma escuridão ou posso usar a luz ou a escuridão imediatamente. Incrível. Portanto, não preciso perder tempo criando esses elementos claros ou escuros mais tarde. Qual é o objetivo desta apresentação em primeiro lugar? carregamento é um pouco mais lento porque é enorme. Você pode ver quanto tempo estou rolando? E isso é o que eu estava tentando lhes dizer nas aulas anteriores. Imprima seus fluxogramas da web e mostre-os para sua equipe ou clientes e elabore o layout com eles. E você pode ver essa imagem aqui dos fluxogramas. Anotações impressas estão sendo feitas. A colaboração está acontecendo aqui, ou você pode imprimir seus fluxogramas móveis e mostrá-los a uma equipe ou aos clientes como elaborar o layout com eles. Então aqui temos o celular, temos a mesma coisa, temos a banda, temos todos esses detalhes. E eu fui em frente e fechei essas imagens. Antes de tudo, eu combino meus fluxogramas os imprimo. Dediquei um tempo para fazer algumas dessas mudanças, para fazer alguns desses esboços. E então dediquei um tempo para organizar todos esses elementos e tirar uma foto porque isso realmente ajuda a contar uma história para meus usuários e potenciais compradores desses produtos. Porque isso realmente os ajuda a entender um pouco melhor como podem usá-los. Para ampliar até o fim. Você pode ver que ele cai, deslize para cima. Você pode ver, não, então não vá aqui. E você pode ver todos esses elementos em ambos os fluxogramas. E finalmente, no final, o que eu queria te mostrar é isso. Então, role um pouco para cima aqui. Pode ler Love by web donut para ajudá-lo a criar designs fofos. Então, apenas um pequeno slogan na parte inferior. E no meu site, você pode ver que temos vários produtos diferentes da mesma categoria e clicar em ver mais produtos para conferir todos esses outros produtos da mesma categoria ou categorias diferentes. Mas se eu começar meu primeiro pergaminho, você pode ver quanto tempo isso vai levar para chegar ao topo. Portanto, é extremamente longo e não carrega em tempo real, mas você pode obter uma imagem. Vou deixar o link no PDF, como eu disse, para que você possa acessar este produto apenas para explorá-lo, para ver esta apresentação. Mas esse é o estudo de caso. No entanto, o estudo de caso pode ser para se vender como designer, vender seu serviço ou vender seu produto. Este é o estudo de caso do produto. Nesse caso, e é claro que fiz isso com todos os nossos produtos. Então, vai ser um pouco diferente de produto para produto dependendo do tamanho, do que faz, do que é seu público-alvo e coisas assim. Mas o objetivo deste vídeo é ajudar você a entender que o estudo de caso realmente existe para ajudá-lo a vender algo. Seja você mesmo como designer, para outra pessoa contratar você, se esse é um produto como neste caso, se é um serviço que você está fornecendo, como design de sites, design de aplicativos e coisas assim. Sempre fale com seus usuários, fale com seus espectadores e realmente os ajude a entender do que se trata. Seu estudo de caso, como mencionei várias vezes, pode ser sobre serviço, produto ou sobre você mesmo. Então você está se vendendo como designer que está trazendo este pacote. Portanto, certifique-se de falar sobre isso. Certifique-se de contar uma história e de ser o mais fácil de entender possível. Porque nem todos, nossos designers, nem todos são especialistas e nem todos os clientes são iguais. Alguns clientes vão entender. Sim. Ok. Eu sei o que é o Adobe XD, por exemplo , quais são nossas pilhas, o que são camadas, mas outros clientes não saberão nada sobre isso. A maioria dos clientes nem mesmo possui um computador, acredite ou não. Então, eles estão fazendo todo o trabalho no telefone ou no tablet. E o aplicativo de desktop, que está disponível no computador desktop, não vai parecer familiar para eles porque eles não têm nenhum computador desktop. Portanto, preste atenção a todas essas coisas e seu estudo de caso se converterá como um louco. 202. SECÇÃO 18 ATRIBUIÇÃO: Sua tarefa para esta seção é usar qualquer um de seus designs, mas não desta classe, porque todo mundo vai criar designs a partir dessa classe nesse caso. Então, eu realmente recomendo que você crie seu próprio design personalizado e apenas apresentado em seu estudo de caso, se você não tiver um site, tudo bem. Como acabei de mencionar, você pode usar beacons. É uma ferramenta fantástica para criar esses longos estudos de caso no fórum e você pode publicá-los para que todos possam ver. Então, quando você realmente se aproxima dos clientes ou deseja que eles se aproximem, você pode encaminhá-los para o estudo de caso e apenas para mostrar a eles sua maneira de pensar e sua maneira de resolver problemas diferentes. 203. SECÇÃO 19 Como encontrar um trabalho: Nesta última seção do curso, falaremos sobre diferentes lugares onde você pode encontrar um emprego de UI UX e diferentes plataformas que você pode usar para fazer isso. Então, vamos começar. 204. Agência Freelance VS: Quando você está procurando um emprego, primeiro precisa entender as diferenças entre trabalhar como freelancer e trabalhar em uma agência. Obviamente, quando você trabalha dentro de uma agência, as pessoas que trabalham nessa agência têm posição de trabalho dedicada para descobrir o que fazer, encontrar novas tarefas diárias, pagar seu salário mensal, e para cobrir todas as despesas que você possa ter, por exemplo, alimentação, conta de luz, conta de Internet e muito mais. Além disso, na maioria desses lugares, você obterá seu próprio equipamento. Se você não tem seu próprio computador, por exemplo, você vai ter um lá quando realmente começar a trabalhar, versus o que você tem no momento como freelancer, você vai começar a usá-lo. Mesmo assim, quando você trabalha como freelancer, obviamente tem muito mais liberdade para trabalhar onde quiser, para fazer o que quiser. E dois, por exemplo, se funciona melhor para sua agenda e para sua vida, porque nem todo mundo é igual. Você pode trabalhar de manhã ou à noite porque algumas pessoas, especialmente pessoas com famílias, gostam de trabalhar mais à noite, porque isso lhes dá alguma liberdade adicional porque as crianças precisam dormir, por exemplo, ou você tem muito mais tempo livre à noite do que durante o dia. Outras pessoas gostam de trabalhar muito, muito cedo pela manhã, terminar suas tarefas naquele horário porque é o que lhes convém. Então, todo mundo é diferente nesse aspecto. No entanto, o que quer que você escolha, o que quer que você decida fazer, na verdade tudo depende de você. Uma coisa que você deve se lembrar e aprender desta aula é que você pode fazer as duas coisas. Você pode ser contratado em uma agência e trabalhar como freelancer ao mesmo tempo. Ou você pode começar como freelancer e depois mudar para a agência ou vice-versa. Ou, como eu disse, você pode trabalhar os dois ao mesmo tempo. Na verdade, tudo depende de você também o aumento dos eventos atuais nos últimos anos. E há muito mais vagas remotas abertas em todo o mundo, e cada vez mais empresas de cerveja estão migrando para o trabalho remoto porque descobriram que suas despesas são muito menores. porque eles não precisam manter toda a empresa em toda a equipe do prédio. Eles não precisam pagar por prédios enormes, oficiais enormes em todas essas contas. Então, para um grande número de empresas, ela só vai crescer um ano aqui. É muito mais benéfico para você, como trabalhador, trabalhar remotamente de qualquer maneira. Então, se você está trabalhando para uma agência ou como freelancer, há uma boa chance de você encontrar um cargo de freelancer ou um cargo em tempo integral para ser removido. 205. Concursos de design: Uma ótima opção, especialmente para iniciantes, é participar de concursos de design. E esses contextos podem ser tanto para pequenas empresas quanto para grandes marcas globais. E há uma distinção clara entre os dois. E neste vídeo, vou mostrar alguns sites onde você pode tentar participar desses concursos e aumentar sua confiança como designer. Desenvolva suas habilidades para conversar com os clientes, entender o resumo como designer e também criar seu portfólio como designer. Lembre-se de que vou deixar os links em um PDF para tudo o que está falando nesta seção do curso. Não deixe de conferir esse PDF Assembly. Clique nesses links para acessar facilmente todos esses sites e experimentá-los você mesmo. Portanto, o primeiro site que temos aqui é 99 designs.com. É um site conhecido há anos. E como isso funciona é que você pode simplesmente navegar pelos concursos e funciona quase exatamente da mesma forma. Então, vamos procurar concursos, por exemplo, e vamos descobrir que todas as categorias podem ser design de sites e aplicativos, e todas as subcategorias podem ser design de página da web ou designer de WordPress ou algo parecido. E você pode ver aqui, então esse é o preço que você receberá se vencer este concurso. Isso é quanto tempo você tem para participar desse contexto, e é quantos designs já estão nesse contexto. Uma dica que posso dar não apenas sobre 99 designs, mas sites desse tipo é: se você pode pesquisar clientes que dão feedback, clientes que não dão feedback geralmente esperam até o último minuto porque eles estão ocupados com seu trabalho, obviamente, e depois fornecem um feedback aleatório. Você não quer isso. Você quer clientes que estejam ativamente procurando e fornecendo feedback. E então, quando você realmente vencer um desses concursos, você falará com eles sobre como criar seu site no Webflow e mostrar a eles como hospedá-lo no Webflow. Tudo o que falamos no curso até agora. Mas o que é crucial aqui é que você os conquistará com seu design e, em seguida, fará a transição para o Webflow, que obviamente você cobrará posteriormente pela dívida. serviço adicional, mas 900 designs, não deixe de conferir. Existem várias categorias diferentes aqui e aqui , com as subcategorias que você pode até escolher por setor, você pode mostrar filtros aqui. Então, todas essas coisas, então não deixe de conferir, crie sua conta. E a mesma história vale para o público do design, que é um site um pouco menos conhecido do que 99 designs, mas, mesmo assim, você também pode encontrar alguns clientes lá. A principal coisa que você deve se lembrar sobre 99 designs e a multidão de design é que eles são para contextos menores, mas isso significa que geralmente esses são negócios em que os preços são, por exemplo. I. Não sei, de $1.500 a $1.000, algo assim, o que parece ótimo. Mas você também pode encontrar outras empresas e outros concursos para ampliar marcas globais, como, por exemplo, se você acessar sites como o Your Water, que na verdade é a plataforma de inovação de marketing. E você pode ver tudo sobre a comunidade nos projetos e algo parecido. Então, o que eles fazem é criar esses concursos para grandes marcas globais. Então você pode ver como Coca-Cola, Deutsche Bank, Mealer, Henkel, todas essas marcas. Basicamente, o que funciona é você explorar, se conectar, criar o projeto e, em seguida, criar e avaliar. Então, é assim que realmente funciona para marcas, mas para você, você vai entender que o projeto era realmente se inscrever para uma conta gratuita aqui. Você receberá os projetos por e-mail e, em seguida, poderá participar desses projetos, como com a multidão de designs e design nonane, mas em sua casa de água e talentos, que é o próximo site que eu queria te mostrar. Essas podem ser marcas muito grandes. Então, por exemplo alguns meses, recebi o e-mail de uma campanha que a Mercedes-Benz fez com, eu acho, uma casa de talentos. E eles estavam escolhendo 50 designers diferentes para lhes dar prêmios, variando de algo como €2.000 até €10.000 ou algo parecido. E acho que o preço principal era até mesmo um carro. Portanto, isso pode ser enorme, não apenas por causa do dinheiro, não apenas por causa do preço em si, mas por causa das conexões que você pode obter com essas marcas. E imagine se você está trabalhando com uma marca, digamos, a pequena padaria da mamãe ou qualquer outra coisa, e a Mercedes Benz, qual é a melhor para colocar em seu portfólio? Apenas pense sobre isso. Portanto, não pense apenas no preço imediato, mas no impacto que esse concurso causará em sua carreira no futuro. Então, mais uma vez, sua casa de água e talentos, deixarei os links em um PDF. Não deixe de conferi-los. Você pode ver os resumos aqui. Então, vamos conferir um resumo criativo. Então você pode ver o pavão aqui. Motor irreal. Isso é para um dos filmes, eu acho. Sim. Então você pode ver todos os tipos de marcas diferentes aqui. Em todo o país, Building Security, Absolut Vodka, uma grande marca. Mais uma vez, Downton Abbey, que foi o programa na TV, Seinfeld. Então, todos os tipos de grandes marcas estão aqui e elas têm um resumo criativo decente. Obviamente, você pode ver a chamada para inscrições. Você pode enviar o período de seleção deles. É quando o cliente já escolheu isso para o CLEA, por exemplo já escolheu as inscrições vencedoras e depois vai para a rodada final ou simplesmente escolhe o seletor final, seleção final, e apenas faça com que todos sejam vencedores e forneça todos os preços. Portanto, não deixe de conferir. Como eu disse, seja paciente com esses sites porque na maioria das vezes você não vai ganhar nada. Mas pode parecer assim, mas na verdade você ganhará muita experiência e muitas habilidades sociais que não aprenderá em nenhum outro lugar. Você precisa lidar com os clientes para entender essas habilidades sociais e aplicá-las em seu trabalho futuro. 206. Plataformas de gritar: Outra opção que pode funcionar para você são as plataformas de shows. E essas plataformas são basicamente projetos menores nessas plataformas, que vários designers abordam. O mais conhecido é o Upwork. E você provavelmente já ouviu falar sobre o Upwork. É aqui que você cria seu portfólio e pode enviar todas essas propostas aos seus clientes. Assim, você pode encontrar design e criatividade. Podemos procurar trabalho e você pode até mesmo melhorar suas habilidades aqui. Então, basicamente, funciona quando um cliente publica um resumo de design e vários designers diferentes basicamente licitam por esse resumo e por esse trabalho. Como você poderá vencer isso é explorar outros tutoriais e blogs on-line , porque há uma arte pura nisso. Como você pode abordá-lo para ser mais comparável com outros clientes, por exemplo, e com outros designers. Então, eu recomendo fortemente o Upwork, especialmente se você está apenas começando e quando faz isso meio que uma bola de neve. Quando você está apenas começando, vai ser difícil encontrar um cliente. Mas quando você encontra o cliente, ele ou ela vai deixar uma avaliação para você. Essa avaliação ajudará você a conseguir mais clientes no futuro, para que ela entre em vigor. Não desista. Se você não conseguir um emprego imediatamente, continue enviando, continue tentando, certifique-se de seguir todas as regras e diretrizes. Porque eu ouvi muitas histórias de terror em que a banda desenhava porque tentavam enganar o sistema e forçar as pessoas a lhes darem empregos e coisas assim. Então não faça isso. Certifique-se de ser o mais preciso possível ao seguir as regras. Portanto, você conseguirá o emprego muito mais rápido. A próxima plataforma é o freelancer, que está fazendo exatamente a mesma coisa. Portanto, certifique-se de clicar aqui para procurar vagas. E como eu disse, vou deixar o link no PDF, pessoas por hora, exatamente a mesma história. Portanto, certifique-se de explorar todos os três e ver qual deles funciona para você. Talvez você possa experimentar os três e ver onde conseguir o emprego. Você pode ver aqui os designers de interface. Então, eles estão sempre procurando pessoas que estejam fazendo isso. E você pode ver o desenvolvedor web e até mesmo encontrar empregos de fluxo de trabalho para eles em todas essas três plataformas. E, finalmente, o que eu quero mostrar é de cima para baixo. cima para baixo é um pouco diferente porque é uma dessas plataformas de licitação, De cima para baixo é um pouco diferente porque é uma dessas plataformas de licitação, mas não é porque elas têm o processo de verificação. E você pode ver que os três maiores talentos freelancers do mundo estão nesta plataforma porque eles são muito rigorosos com o processo de seleção e contratação , uma vez que você realmente entra no topo, melhor equipe. Por assim dizer, eles vão te dar empregos o tempo todo. Portanto, cabe a você conseguir esses empregos assim que estiverem disponíveis. E você pode até trabalhar como desenvolvedor web aqui, mas vou mostrar alguns sites completos dedicados um pouco mais tarde. Mas, basicamente, a forma como funciona é que você vai passar por esse processo de contratação. Se você passar, você fará parte de uma equipe, por assim dizer, uma equipe virtual. E, portanto, você terá muito mais dessas oportunidades de emprego e posições de trabalho. Então, estou oferecendo três plataformas diferentes e uma toalha superior, então certifique-se de escolher o que funciona melhor para você. Mais uma vez, com a mesma largura, os concursos de design não desencorajados a serem facilmente concluídos rapidamente. Você tem que tentar tudo isso até conseguir sua primeira posição. Essa primeira posição lhe dará sua segunda posição, terceira posição. E então será muito, muito mais rápido para você conseguir seus empregos adicionais e seus próximos empregos, porque você terá toda essa experiência e todo esse caminho nessas plataformas. 207. Nomades digitais: Ser um nômade digital é ótimo porque você pode trabalhar onde quiser no mundo e pode morar onde quiser no mundo e trabalhar ao mesmo tempo. É disso que tratam esses sites. É disso que tratam essas posições. Porque, desde o início, você não está preso à sua casa, por exemplo, você ainda pode estar em sua casa e ainda pode morar em seu local de trabalho, esses empregos. Mas eu só estou tentando te dizer que esse é o ponto principal aqui. Eles estão bem com alguém sendo remoto. Assim, você pode morar na Índia, por exemplo, e trabalhar para uma empresa americana, vice-versa. Portanto, não importa onde você esteja no mundo, você pode trabalhar em um desses empregos. Então, esses são apenas três dos sites, e você pode encontrar muitos deles no Google, basta pesquisar empregos de nômades digitais. E o primeiro é o digital nomad dot world slash job. Assim, você pode encontrar trabalho autônomo, em tempo integral , parcial e temporário. Então, todo tipo de coisas diferentes. Eles até têm um nível básico , o que é bom. Você pode ver que a maioria deles é remota, onde diz EUA, por exemplo , porque é em tempo integral, mas talvez você possa até tentar conseguir que esse emprego seja remoto se negociar com eles, isso é temporário, por exemplo, sugerir um, digamos um projeto ou algo parecido. Em seguida, temos trabalhos remotos e isso está funcionando no nomad.com slash jobs. Então você pode encontrar todos os tipos de trabalhos diferentes aqui e ver que o design está aqui, então você pode ****** isso. Então, se eu pudesse verificar o design, você pode ver designer de UX, UI, designer, designer gráfico, todos os tipos de trabalhos diferentes. Em seguida, temos o ok.com remoto para cortar empregos de nômades digitais. E você pode pesquisar por localização I, onde seus clientes estão no mundo, por salário, mesmo assim, você pode encontrar o salário aqui. Então, 70 eternidade, quaisquer que sejam os benefícios, que tipo de benefícios obtêm. Portanto, este é um ótimo site para isso. E você pode encontrar todos os tipos de resultados diferentes aqui. Mas vamos pesquisar, digamos, o design do desenvolvedor. Aí vamos nós. E como você pode ver, todos os tipos de trabalhos de design diferentes aqui. Portanto, temos engenheiro de testes, engenheiro pilha, desenvolvedor de design ou UX de UI ou todos os tipos de posições diferentes. Não deixe de conferir este site e lembrar mesma história de todas essas lições anteriores, incluindo esta. Se uma coisa falhar, tente outra e depois outra e veja aonde isso vai te levar. Se você vai conseguir um emprego remoto em vez de um concurso de design, ótimo, você pode colocar esse trabalho remoto em seu portfólio, vice-versa, ele funciona da mesma forma. Então, talvez você consiga três empregos ao mesmo tempo. Quem sabe? Você só precisa ser consistente, persistente e conseguirá esse emprego no final do dia. 208. Plataformas de design: As plataformas de design podem ser uma ótima maneira de você encontrar um emprego. E não apenas o trabalho, mas até mesmo alguns amigos que estão no mesmo barco que você, você pode se conectar com outros designers, você pode gostar de trabalhar, enviar mensagens para eles. Você pode trocar recursos incríveis que encontrou on-line, por exemplo cursos on-line como este, wink, wink ou você pode trocar seus livros favoritos sobre design de UX, talvez algumas dicas e truques sobre trabalhando com certos tipos de clientes. Portanto, é uma ótima maneira de criar sua rede e se conectar com outros designers enquanto estiver em casa. Vou mostrar três dos meus sites favoritos e, é claro, você pode explorar e encontrar outros por aí. Então, o primeiro são os beacons e o Behance é um dos sites mais antigos que existem. É ótimo porque nos finais de semana você pode criar seu próprio portfólio. Se você não tem seu próprio site pessoal, pode criá-lo nos finais de semana e é fantástico porque você pode criar essas apresentações de formato longo que são ótimas para fins de estudo de caso. E você sempre pode indicar a seus clientes esses estudos de caso e eles poderão ver todos os tipos de detalhes diferentes sobre os quais falamos na seção de estudos de caso desta aula. Além disso, é ótimo porque, como eu disse, você pode se conectar com a comunidade. Você pode explorar e se inspirar na comunidade e também pode aprender porque elas são ótimas e têm essa guia de transmissão ao vivo aqui, que às vezes eu transmito ao vivo com elas, especialmente com Adobe XD e outros aplicativos da Adobe. Mas você pode encontrar emprego aqui com bastante facilidade. Então você pode trabalhar aqui mesmo no topo. Crie seu perfil, obviamente, então você terá freelancers em tempo integral e criativos para contratar e também poderá guardar empregos para mais tarde. Então, como fazer isso, digamos que seja freelancer. E você pode ver aqui, para que você possa pesquisar todos os tipos de campos de categorias diferentes. Ou eu posso filtrar por UI UX, por exemplo, e você pode ver UX de qualquer lugar, em qualquer lugar, em qualquer lugar. E todos eles são freelancers. Você pode ver que temos 56 vagas de trabalho freelance diferentes. Se você quiser se inscrever, você se inscreverá diretamente no fim de semana. Portanto, certifique-se de ter seu perfil em ordem certifique-se de publicar seu trabalho que você fez anteriormente. E é isso no Dribble. Vai ser um pouco diferente porque quando você procura trabalho, seu quadro de empregos é gratuito, mas para projetos freelance, você precisa ter uma conta Pro. Então, o tabuleiro de Joe é assim. Então, quando você vai aqui, você pode filtrar. Então, digamos que você seja um designer. Digamos UX, digamos web design, clique em Filtrar. E vai te mostrar em todos os lugares. E você pode filtrar por meio de um contrato de freelancer em tempo integral e abrir remotamente. E você pode ver que alguns deles são compatíveis com o controle remoto, por exemplo , este, este. Assim, você pode encontrar todos os tipos de posições diferentes enquanto trabalha como freelancer. O que você pode ver é o orçamento imediatamente. Então, algumas delas, vamos filtrá-las por meio de UI, UX web design, da mesma forma que fizemos anteriormente. Filtrar resultados. Vamos ver o que temos. Então, temos 16 novos projetos publicados hoje. Então, eles têm muitos projetos novos, mas, mais uma vez, você precisa pagar por esse serviço específico. Assim, você pode ver todos os tipos de posições diferentes e é ótimo porque você pode ver o orçamento. Então você vai abordar isso da maneira que eu mencionei anteriormente. Assim, você pode oferecer a eles um serviço de design para esse orçamento específico e, em seguida, oferecer o Webflow como uma venda adicional. Você pode dizer a eles alguém como: Ok, vamos construir esse design, o que é bom, mas você não tem um desenvolvedor. Talvez eu possa desenvolver isso para você no Webflow vai ser incrível para você porque vai ser fácil de atualizar, vai ser fácil de gerenciar, fácil de adicionar novas informações, fácil de trocar. Você não precisa lidar com plug-ins, mas com atualizações, todo tipo de coisas diferentes. E há hospedagem incluída no interior. Vai ser bem fácil. Venda adicional, na minha opinião, especialmente para pequenas empresas que não sabem o que você está fazendo. E, finalmente, este site final divertido é este, que é uma notícia criada. E no Designer News, eles têm essas seções de empregos. Você pode clicar aqui e listar por desenvolvimento de design, estágio contratado em tempo integral, em tempo parcial , freelancer, remotamente amigável ou até mesmo inserir a alocação se quiser ser local específico. E, finalmente, você pode abrir tudo isso em uma nova guia, mas precisa ter seu portfólio preparado. Este é basicamente um blog, então você pode clicar em histórias e ler diferentes tipos de histórias, conectar-se com outros designers, como mencionei, mas eles têm essa seção de empregos e a seção de podcast. Assim, você pode clicar e aplicá-lo a esses diferentes cargos. Então aí está. A mesma história de todas as anteriores, que eu já mostrei neste curso. Certifique-se de testá-lo, certifique-se de aplicar a mistura para ser persistente, consistente, ter um portfólio em ordem e continuar aplicando. Um deles vai te dar esse emprego. Você pode dobrar esse, ou pode até mesmo ir mais longe e experimentar todos eles ao mesmo tempo. Já depende de você, aumente seu tempo, mas certifique-se de não desistir. Certifique-se de manter o foco, se manter persistente e de conseguir um emprego no final do dia. 209. Webflow trabalhos: Além desses métodos sobre os quais falamos antes, quando você cria um design e oferece um serviço de fluxo de trabalho, você pode acessar sites dedicados onde pode encontrar vagas no você pode acessar sites dedicados Webflow. Você pode acessar o Webflow e se inscrever para ser um desenvolvedor certificado do Webflow. Eles dirão: envie leads dessa forma e você poderá facilmente encontrar um emprego. Você pode se inscrever em diferentes agências. Você pode acessar o LinkedIn, criar um perfil, adicionar seu portfólio completo na web, por exemplo, à seção gratuita do site Webflow, sobre a qual falamos na parte deste curso do Webflow. E então você pode apontar que, como seu portfólio, você receberá leads e ofertas de emprego dessa forma. Mas nesta lição, eu só queria mostrar dois sites adicionais onde você pode encontrar trabalhos de fluxo de trabalho com bastante facilidade. A primeira delas é que não teremos nenhum código. Funciona como se você aplicasse aqui e depois parecia uma toalha de cima. Eles vão te mandar empregos o tempo todo. Portanto, você precisa passar por vários testes diferentes, onde eles podem testar seus conhecimentos sobre o Webflow. E você tem que preencher seu perfil, você tem que mostrar a eles um portfólio. É por isso que eu disse que você pode anexar as postagens gratuitas do Webflow que você criou em seu perfil do Webflow e colocá-las em seu portfólio. Você pode mostrar a eles sua experiência. Com base na sua experiência, você receberá o pagamento. A mesma história de todos esses sites diferentes. E, finalmente, temos o IO flutuante ou remoto. Portanto, o quadro de empregos número um para encontrar empregos no Webflow e contratar talentos. Então você pode ir aqui mesmo, pesquisar por localização, ocupação, tipo de empresa e experiência. Portanto, cargo de nível básico, por exemplo, para fazer upload de designer. Aí vamos nós. Bem, o óleo por desenvolvedor de design em qualquer lugar. Então, todos os tipos de cargos diferentes. Eu acho que este é um site fantástico. Vou deixar um link para ele em um PDF. Certifique-se de testá-lo, não deixe de experimentá-lo. E mais uma vez, a mesma história. Estou me repetindo em todas essas lições diferentes, mas certifique-se de ser persistente. Se você não conseguir esse, você vai pegar o próximo. Portanto, continue tentando, sempre tente repetir as etapas que você fez quando conseguiu um emprego e tente inovar um pouco ao encontrar seu próximo emprego. E certifique-se de combinar esses sites do Webflow com sites de design oferecer vendas adicionais do Webflow e ver o que funciona melhor para você. É só o Webflow ajustar design quando você decide que será muito mais simples concentrar todos os seus esforços em uma cesta, por exemplo, mas antes disso você tem que experimentar tudo mais uma vez. 210. Dicas de portfólio: Uma última coisa sobre empregos é seu portfólio, porque seu portfólio lhe dará seu próximo emprego. Portanto, é muito importante ter uma boa. E nesta breve lição, eu só quero dar algumas dicas e dicas sobre como você administra seu portfólio. Então, a primeira coisa em que você deve se concentrar é se você contratasse alguém, o que você procuraria nessa pessoa. Então, por exemplo, se neste curso estivéssemos criando um site sobre carros e digamos que tudo o que você faz é criar sites sobre carros. Então, esse será um ótimo portfólio para você se candidatar a uma vaga para um site design sobre carros. Você vê para onde eu estou indo. Então, assim que você escolher um nicho, assim que organizar seu portfólio de uma determinada forma será muito mais fácil encontrar um emprego, mas certifique-se de se candidatar. Digamos que, nesse caso, vamos nos ater a esse cenário. Se você está apenas trabalhando com carros largos e sobre carros com marcas de automóveis, você se inscreverá em marcas de carros diferentes e não em maquiadores, não artistas musicais e coisas assim. Você só vai concentrar todos os seus esforços nesse nicho. Você sempre pode mudar isso mais tarde, mas especialmente quando você está começando, é muito melhor se você puder concentrar todos os seus esforços em um nicho ou setor, porque esse é o caminho para ser muito mais simples criar seu portfólio, direcionar todos os seus próximos leads e fazer seu discurso de vendas, por exemplo organizar todos os seus documentos da mesma forma. Contratos, como propostas, modelos, resumos de design. Todas essas coisas sobre as quais falamos neste curso serão muito melhores e muito mais simples para você fazer. Portanto, se você se concentrar apenas em um tipo de setor ou nicho, também poderá trabalhar com clientes locais, clientes globais. Isso realmente não importa. Você sempre precisa ter seu portfólio. Finalmente, uma última coisa que posso lhe dar. Uma última dica que posso dar sobre seu portfólio é sempre ter sua imagem nele. Porque as pessoas gostam de ver você. As pessoas gostam de trabalhar com pessoas e não com algum tipo de marca ou algum tipo de computador. Eles querem ver quem você é. Certifique-se de colocar em seu portfólio. Certifique-se de colocar algumas coisas que são diferentes em você. Você é barulhento ou quieto? Gosta de coisas escuras? Gosta de coisas leves como eu não sei, algumas roupas chamativas que gostam de se sentar no escuro ou de fazer piadas, gostam de assistir filmes, gostam de andar de bicicleta, têm milhares de gatos. O que diferencia você de todos os outros designers que existem? Pode ser muito pequeno, pode ser muito grande. Isso não importa. Apenas certifique-se de colocar isso. Isso vai humanizar você, em vez de fazer com que os clientes vejam você como uma máquina. Lembre-se de que essas pessoas estão examinando milhares de portfólios diferentes. Portanto, você precisa se destacar da multidão para chamar a atenção deles e ser contratado. Portanto, certifique-se de fazer exatamente isso. E, finalmente, ao formatar seu trabalho, certifique-se de começar de cima para baixo, como mencionamos na seção de estudos de caso de UX. Certifique-se de sempre começar pelo topo. Qual problema você resolveu logo na parte inferior da sua apresentação será o resultado final. Finalmente, para esta aula, quero lhe desejar boa sorte em seu trabalho. Caçar. Certifique-se de nunca desistir. Certifique-se de ser persistente , certifique-se de ser consistente. Vai ser difícil. Você enfrentará rejeições o tempo todo, mas continue insistindo e encontrará o emprego dos seus sonhos mais cedo ou mais tarde. Muito obrigado por assistir a esta aula e a esta parte da aula. E mais uma vez, boa sorte com seu trabalho. Caçar. 211. Conclusão do curso e próximos passos: Aí vamos nós. Chegamos ao final desta aula. Muito obrigado por assistir. E eu realmente espero que você aprenda algo novo, que implemente alguns desses conhecimentos em seu processo de design. E eu realmente desejo a você sorte em encontrar um emprego. Se você não tiver um, se você já tem um desejo real encontre um padrão ou melhore-o usando algumas dessas técnicas que você aprenderá. Lembre-se, se em algum momento você ficar preso durante esta aula ou depois de assistir a ela, você sempre pode verificar comigo. Você sempre pode entrar em contato comigo por e-mail, por exemplo, ou através deste site. Estou sempre disponível para ajudá-lo e ficarei feliz em fazer isso. Certifique-se de seguir alguns desses métodos. Se eles não forem adequados para você, você pode ignorá-los até uma data posterior. Se você está conseguindo um emprego em uma empresa , certifique-se de sempre explorar qual é o processo delas, porque todas essas empresas têm processos diferentes em vigor. Se você estiver trabalhando como freelancer solo , cada cliente será um pouco diferente. E quando você estiver trabalhando com essas plataformas, cada plataforma será um pouco diferente. Então, tente entender o que funciona para você, porque essa é a coisa mais importante aqui. Se você não gosta de trabalhar com painéis de humor, não os use. Se você não gosta de trabalhar com wireframes de papel, não os use. Não se preocupe muito com nenhuma dessas etapas ao longo do caminho. Todas elas são etapas importantes do processo de design. Mas se você descobrir ao longo do caminho que alguns deles não funcionam para você, simplesmente não os use. Não se preocupe muito com nenhum desses. Porque se não funcionar para você , não use. Muito obrigado mais uma vez por assistir a este curso, não deixe de conferir no meu canal no YouTube, que é Alex on design. Também vou vinculá-lo em algum lugar deste curso. Estou criando tutoriais de UI UX o tempo todo. Estou criando muitos desses cursos diferentes o tempo todo e estou sempre disponível para ajudá-lo. Eu também tenho um grupo no Facebook, então não se esqueça de participar dele se quiser postar seu trabalho lá ao lado de seus colegas para que eles vejam seu trabalho. Ou se você quiser apenas receber um feedback rápido de mim mesmo mais uma vez. E, finalmente, muito obrigado por assistir. E eu realmente desejo sorte em tudo o que você está fazendo na área de UX. Cuide-se.