Web design completo do Figma ao Webflow (nova UI)

1. Visão geral do curso: Pessoas que testam sua vida com web design freelance não conseguem chegar lá Há três grandes obstáculos que eles enfrentam e, um de cada vez, cada um desses obstáculos os remove de sua jornada. Esses cursos, na verdade, três em um, três cursos para enfrentar três grandes obstáculos. O grande obstáculo número um é que aprender a programar leva muito tempo. Centenas de milhares de estudantes matriculam em cursos de web design, mas apenas 10%, apenas 10%, chegam até o final Eu sei disso porque foi isso que aconteceu comigo. Antes de saber como criar sites, eu era apenas designer visual. Eu estava projetando as maquetes, um protótipo de um site, e estava dando isso ao meu cliente, e o cliente então entregava esses designs ao desenvolvedor web, geralmente um desenvolvedor do Wordpress, e essa pessoa criava o Percebi que estava deixando muito dinheiro na mesa. Se eu também pudesse criar o site inteiro , levaria o bolo inteiro para mim. Então, decidi me inscrever algumas aulas e cursos de codificação para aprender web design em termos de construção de um site e comecei a aprender HTML e CSS e JAScrit e Agora, como eu já trabalhei em projetos reais e sei o que meus clientes, clientes reais pedem em termos de funcionalidade do site e, muitas vezes, pedem algumas complexas interações e animações personalizadas complicadas e Então, eu analisei como isso poderia ser feito com o que eu já sei e quanto ainda tenho para aprender. Quando olhei para o quadro inteiro, percebi que era o quanto eu havia aprendido até agora. Achei que ainda tinha muito que aprender para poder entregar o que meus clientes geralmente pedem. Mas, na realidade, isso é o quanto sobrou. Eu deixei toda essa coisa de codificação de lado até uma data futura indefinida Mas então me deparei com uma ferramenta de web design chamada Webflow, e isso mudou tudo Eu o abri, assisti alguns tutoriais em vídeo. Em poucas horas, estou criando um site completo do zero, com interações personalizadas, sem modelos e nada. Fiquei encantado, amor à primeira vista. Comecei a oferecer aos meus clientes o design e o desenvolvimento completos do pacote. Os clientes adoraram o fato de eu estar fazendo tudo e começaram a fluir. Isso é algo que nunca aconteceu comigo antes. Webflow elimina o maior obstáculo que você enfrentará : tempo e dedicação para aprender a codificar Com o Webflow, é mais rápido, mais suave e muito mais divertido Você aprenderá a criar sites incríveis tão bem quanto um web designer profissional sem precisar escrever uma única linha de código Webflow é uma espécie de potência qual grandes marcas como discord, upwork e dropbox confiam E os poderes criativos da Webflo são tão vastos que as principais agências de design do mundo usam Webflow para oferecer sites premiados para celebridades como Assim, você pode ter certeza de que sua energia está direcionada para uma ferramenta verdadeiramente poderosa. Webflow também é um construtor de sites de IA, e o que torna o weblos AI único é que, diferentemente dos criadores de IA tradicionais, o resultado é totalmente editável Você não precisa lutar com um bot de bate-papo para obter a aparência desejada, mas isso é apenas a ponta do iceberg As empresas precisam de mais do que apenas um site. Eles precisam de um ecossistema completo, ferramentas de SEO fortes, suporte em vários idiomas, um CMS que pessoas não técnicas possam usar um espaço para os profissionais de marketing criarem campanhas sem quebrar o site, maneira amigável de editar o conteúdo do site Com outros construtores de IA, você está praticamente sozinho para juntar as peças, mas o Webflow vem com tudo isso pronto para uso É uma razão pela qual até mesmo o principal modelo de IA do mundo para codificação, Cloud tem seu site de marketing construído no Webflow Há um vídeo após este título, O que é Webflow. Você pode assistir se precisar de mais informações antes de se inscrever no curso Depois de alguns estudantes corajosos que superaram todo o processo de aprendizado, aguarda o obstáculo Na verdade, eles não conseguem projetar bem. Porque quase todos os cursos de web design estão focados na parte técnica, que é a codificação, HTML, CSS, JavaScript e tudo isso Mas o design em si faz parte do campo do design gráfico. Coisas como teoria das cores, tipografia, fotografia são mais E a maioria deles nunca aprende essa habilidade crucial. E o que a maioria dos web designers faz usar temas e modelos. E às vezes isso é uma coisa válida, mas clientes com altos salários não querem um site modelo. Eles não pagarão milhares pela instalação de um tema do Word Press, certo? Eles querem um belo design personalizado que os coloque à frente da concorrência, seja qual for o negócio. E se você é um web designer que pode oferecer isso, você não apenas atrai clientes com altos salários, mas também sua concorrência é menor porque poucos web designers sabem como fazer isso Então, vou te ensinar design gráfico, mas apenas o que é necessário para a web. Assim, você pode aprender a criar sites bonitos e personalizados. Você não precisa ser criativo nem ter nenhum pré-requisito. Se você puder mover o mouse e ver as cores, eu vou te ensinar como desenhar. O design é bem simples. Existem regras , diretrizes e muitos truques ocultos, e é muito divertido. Para criar esses designs, precisaremos usar uma ferramenta de design de interface. Veja bem, ótimos sites não são criados imediatamente. Primeiro, você precisa criar um protótipo. É como um desenho não funcional do lado, e então você o desenvolve. Para isso, vamos usar a melhor ferramenta do mercado, que é a Figma É gratuito, fácil de usar, mas poderoso. Você terá exercícios e projetos de design. Você criará sites de empresas, criará um blog. Você aprenderá o processo de designers profissionais, desde a redação de um resumo do projeto até a estrutura de cabos e o design do protótipo final No terceiro curso, você aprenderá como fazer sucesso com frequência porque muitos web designers tropeçam nessa etapa final. Eles se sentem muito confusos. Eles não sabem como se precificar. Eles não sabem como escrever propostas vencedoras, como abordar clientes, como realizar negociações e tudo mais. E, por fim, vou deixar você ir com um presente, um site de portfólio incrível que eu projetei e construí para você Então, no momento em que você terminar este curso, você terá um site de portfólio brilhante e impressionante com trabalhos de portfólio deste curso que já foram publicados nele A maioria dos web designers, na verdade não tem um site pessoal. Você não terá dificuldade em impressionar seus clientes em potencial Eu sou acoshalli e serei seu guia nessa jornada. Agora, tudo que você precisa fazer é se inscrever. 2. O que é o Webflow?: Neste vídeo, quero responder a várias perguntas que você possa ter sobre o Webflow. Então, o que é o Webflow Webflow é um construtor de sites sem código que é diferente de tudo o que existe Ele ajuda você a projetar e criar sites responsivos do zero, como qualquer web designer profissional faria, mas sem escrever nenhum código Bem, na verdade, o Webflow escreve para você. Você projeta tudo visualmente enquanto Webflow escreve um código semântico limpo para Você pode então exportar esse código ou mantê-lo e hospedar o site no Webflow Além do web designer, é uma plataforma CMS, como o Wordpress , como o Wordpress , que significa que você pode criar sites dinâmicos completos, como blogs e sites de comércio eletrônico E aqui está uma muito grande. Com o Webflow, você pode criar animações e interações ricas Se estiver programando, é algo que requer conhecimento avançado de Javascript. Mas no Webflow, você faz isso visualmente sem sequer pensar no código Aprender o Webflow é como aprender um novo superpoder. É realmente uma ferramenta inovadora que mudou o setor Você quer exemplos de sites criados no Webflow? Não se preocupe. Os sites Webflow são vencedores regulares em competições de design como awards.com Isso é o Oscarsoft Web Design, e isso diz muito quando uma ferramenta de design visual está competindo com sites codificados personalizados usando mecanismos de animação complexos feitos Após a aquisição e integração do Greensock pela Webflow em 2025, que é considerado o mecanismo número um de animação na web, veremos muito mais sites premiados feitos Já no mesmo ano, um site Webflow feito para Lando Norris leva para casa o prêmio Side of the Year Designs impressionantes não são a única razão pela qual as marcas optam pelo Webflow Desempenho e funcionalidade são outra coisa. Discord usa o Webflow para o principal site de marketing e blog Upwork two para todas as páginas laterais que não são do aplicativo, dropbox para suas campanhas de marketing e produtos. E aqui está uma surpresa. Até mesmo o site de marketing da Cloud está no Webflow. Isso é irônico porque o coágulo é o melhor modelo para roupa de cama. Nenhuma dessas empresas carece de desenvolvedores para programar manualmente ou programar vibe seus sites Eles simplesmente veem mais benefícios em usar o Webflow. Se quiser mais exemplos, você pode ver vitrines paralelas do Webflow em lugares como lapan Ninja, awards.com ou diretamente na página do Webflow Showcase awards.com ou Apenas alguns exemplos são suficientes para mostrar o quão infinitas são as possibilidades do que você pode alcançar com o Webflow Como alguém que está entrando no setor de web design, tenho certeza de que você quer saber como o Webflow se compara outras ferramentas do setor, incluindo a codificação de vibrações Escolher a ferramenta certa para o projeto é extremamente importante. Existem tantas opções disponíveis, e simplesmente pesquisar no Google Qual é o melhor resultará respostas erradas, porque não existe a melhor Todos eles têm seu lugar e ocupam um nicho muito particular e, dentro desse nicho, são muito fortes. Comparar tudo isso é difícil, mas podemos fazer isso usando um pequeno gráfico útil chamado Magic Quadrant Por exemplo, podemos considerar dois aspectos significativos para sites de negócios, poder de design e funcionalidade, e mapear as ferramentas mais populares nessa escala. Conseguiríamos algo assim. As ferramentas de codificação do Vibe, eu as estou unindo em uma porque, fundamentalmente, elas são O método de construção e design é idêntico. É inspirador. E a qualidade da saída depende menos da plataforma e mais do modelo de IA que eles usam. Então, estou apenas assumindo o melhor modelo para essa comparação. Wix vem com uma funcionalidade muito alta devido às suas ferramentas nativas para empresas como menus de restaurantes, reservas de hotéis, agendamento, eventos e assim por diante, além de um forte mercado de aplicativos para outros recursos complementares Mas você não está ganhando nenhum prêmio com um lado fraco. É ótimo para pessoas que criam seu próprio site, mas não é adequado para agências de design que desejam oferecer designs premium altamente sofisticados Quando se trata de funcionalidade, nada supera o Wordpress com sua funcionalidade quase ilimitada devido ao seu enorme ecossistema de 60.000 plug-ins Mas os designers visuais do Wordpress, como Elementor, têm restrições de widgets, que significa que você precisa usar Sim, eles podem ter opções bonitas, mas serão limitadas. E os resultados serão genéricos, pois todos precisarão usar a mesma seleção de widgets e componentes Obviamente, também existem designs e peças de guerra totalmente exclusivos , mas isso é apenas com sites codificados personalizados sem usar construtores visuais Quando se trata de codificação vibe, teoricamente, ela tem Mas, na prática, a maior parte dessa funcionalidade não é um recurso de site pronto para uso. É um código gerado que um não programador pode ter dificuldade em validar e manter Com as plataformas tradicionais sem código, seja qual for a funcionalidade que elas oferecem, você pode contar com elas. É testado, construído e mantido por profissionais. Isso se baseia na avaliação de 2026 das ferramentas de IA. Eles melhorarão ainda mais e, com o tempo, se moverão ligeiramente na balança, mas a funcionalidade imediata sempre será menos superior em comparação com a funcionalidade robusta nativa que você não precisa inventar do zero Sobre o poder do design, o posicionamento é menos discutível. Mesmo um designer visual habilidoso não pode direcionar a IA de forma confiável para produzir designs exclusivos de alta qualidade Confie em mim, eu tentei. Isso não é uma limitação da IA Tech. É uma limitação da linguagem natural em si porque uma imagem vale 1.000 palavras. É mais fácil e rápido desenhar nossa visão nós mesmos do que descrevê-la usando palavras. É por isso que não vemos nenhum site premiado saindo das ferramentas de codificação do Vibe Somente Webflow e framer conquistam seu lugar acima da premiada Seus sites aparecem constantemente em sites de competições de design, como awards.com, especialmente o Webflow awards.com, especialmente Ambos oferecem controle total sobre o design e editores de animação extremamente poderosos Framer oferece um animador baseado em data, que é simples e poderoso, e o Webflow oferece um animador baseado em linha do tempo, que é o que você obtém em ferramentas de animação profissional como o Adobe After profissional como E comparado ao Framer, o Webflow oferece uma funcionalidade melhor e mais estabelecida para O território onde a alta funcionalidade encontra altos recursos de design é onde os ganhos premium acontecem. É por isso que o Webflow é a ferramenta preferida da agência de design Observe que estou avaliando essas ferramentas para sites de negócios e marketing, não para aplicativos da web Essa distinção é importante porque sites de negócios e aplicativos da web têm necessidades muito diferentes e nenhum desses criadores de sites é feito para aplicativos da web, exceto pelo código vibe Há outros aspectos que podem ser comparados e que contariam uma história muito diferente. Por exemplo, se compararmos a funcionalidade com a facilidade de uso aqui, o Webflow teria uma pontuação bem diferente devido à sua curva de aprendizado O Webflow não é algo que você simplesmente entra e começa a usar e começar a criar sites Não é tão intuitivo quanto algo como talvez um espaço quadrado. Tem uma curva de aprendizado. E principalmente porque é baseado na estrutura de código normal que um web designer e desenvolvedor comum usaria. Por exemplo, você adiciona elementos HTM no Webflow e os estiliza usando classes CSS, exatamente como o que se faria ao realmente codificar Se você tem alguma experiência com HTML e CSS, definitivamente será útil. Mas se você não tiver nenhum, não se preocupe com isso. Eu vou te ensinar tudo à medida que avançamos. Na verdade, a curva de aprendizado do Webflow realmente funciona em seu benefício porque é a única que leva você a aprender os fundamentos imutáveis do desenvolvimento web, o modelo box, o flexbox, as classes maravilhosamente estranha de HTML e Essas fundações da web nunca vão a lugar nenhum. Se um dia você decidir fazer a transição para a codificação ou a codificação vibe, você levará esse conhecimento com É uma habilidade atemporal. Teoricamente, o Ibecding é o mais fácil de usar , não tem curva de aprendizado porque você apenas conversa com Mas para não programadores, essa simplicidade se transforma em complexidade máxima no momento em que você encontra um obstáculo Bloqueios de estradas são mais comuns do que se imagina. O Wix leva para casa essa categoria. É funcional e fácil de usar. Esse é o nicho deles e eles o dominam. Ele foi feito para ser fácil de usar e acessível para proprietários de negócios não técnicos. Todos os recursos que uma empresa pode precisar, de SEO a carrinhos de compras , bastam alguns cliques em uma interface de usuário guiada Você pode pensar: então por que não aprender semanas ou espaços quadrados, já que eles são os mais fáceis? Mas essa facilidade, na verdade, funciona contra você, como profissional que deseja ser pago por sua experiência A simplicidade traz mais pessoas para o mercado de trabalho dessas ferramentas. Aqui está uma sabedoria para levar para casa para você. Se você quer ganhar dinheiro, fazer o que você faz não pode ser muito fácil, pois todos podem reunir pacientes de uma semana para aprender uma nova habilidade e eles inundarão o mercado de trabalho Mas se uma habilidade leva seis anos para ser aprendida , poucas pessoas permanecerão por tanto tempo. É por isso que médicos e dentistas são bem pagos e sempre conseguem encontrar emprego Não há dinheiro fácil neste mundo. Ou há dinheiro vivo ou não há dinheiro. Podemos continuar comparando diferentes aspectos e obteríamos diferentes vencedores para nichos diferentes, como Framer assumindo o poder do design versus o de facilidade de uso e o Vibe Coding assumindo um nicho em que é necessário atingir uma complexidade única de forma relativamente atingir Todas essas ferramentas encontram seus nichos e se concentram neles, treinando aspectos em favor daqueles que as fortalecerão em seu nicho Os dois últimos aspectos significativos que quero mostrar são os aspectos que podem não ser tão importantes para a maioria das pessoas, mas muito significativos para o próprio negócio de web design. Qualidade na entrega do cliente. Você pode entregar isso a um cliente que, posteriormente, poderá gerenciar o site sozinho com facilidade e profissionalismo O resultado final parece uma criação de agência sob medida ou um projeto do tipo “faça você mesmo Freelancer ou uma agência para vender confortavelmente um serviço premium de web design, eles precisam ser capazes de resolver os pontos problemáticos do cliente Vejo que os clientes precisam manter seus sites atualizados, precisam criar conteúdo. Eles precisam atualizar o texto nas páginas. Eles precisam criar novas postagens no blog e assim por diante. No WordPress, eles precisam atualizar esse conteúdo em um painel de administração muito complicado e pouco fácil de usar, que se parece com Esse ambiente vem com muitas partes móveis, mais lugares para clicar e mais risco de os clientes se depararem e mais risco de os clientes com coisas que não deveriam tocar Agora, no Webflow, os clientes editam conteúdo diretamente no lado ativo Sem painéis de administração e editores de texto estranhos. Eles editam exatamente o que veem. Eles podem alterar fotos, atualizar textos e não têm como quebrar a lateral. Be Coding, por exemplo, tem um péssimo contato com o cliente. Não há um painel visual para um cliente gerenciar seu próprio blog ou loja sem problemas técnicos. Eles estão praticamente bloqueados em seu próprio site. O Webflow é o padrão-ouro neste mashup de categorias. sistema de gerenciamento de conteúdo genuinamente utilizável do Webflow e a interface de usuário dedicada para funções como marketing e editores de conteúdo oferecem às empresas a capacidade O sistema de gerenciamento de conteúdo genuinamente utilizável do Webflow e a interface de usuário dedicada para funções como profissionais de marketing e editores de conteúdo oferecem às empresas a capacidade de realmente administrar seus próprios sites. As empresas estão constantemente promovendo, criando campanhas, páginas, eventos, lançamentos de produtos e muito mais. Eles precisam de mais do que apenas um site. Eles precisam de um conjunto de ferramentas e recursos de back office para executar toda a sua experiência na web. O ponto ideal que o Webflow oferece entre aprimoramento de design, funcionalidade e recursos do lado do cliente é a razão pela qual ele se tornou a melhor escolha para agências de design e freelancers como eu, que operam em mercados de negócios Isso nos deu o poder de fornecer soluções de valor extremamente alto para empresas sem sair da plataforma. Sim, com uma pequena curva de aprendizado e uma velocidade de construção mais lenta, mas esses não são os aspectos com os quais meus clientes se importam Não posso vender uma plataforma para eles porque é fácil para mim aprender. Isso é um problema meu. Eles querem design polido , potência e facilidade de uso do seu lado. Escolher o Webflow não significa que você não possa utilizar o poder da codificação do Vibe O Webflow também tem o AI Builder. Na verdade, ele tem dois AppGen que funcionam como um construtor de aplicativos de IA tradicional, tão poderoso quanto outros construtores, usando o melhor modelo atual, que é o Cloud O AI App Builder do Webflow tem um benefício adicional que permite conectar componentes e conteúdo CMS do seu site existente Cada site tem componentes repetidos, como barras de navegação, rodapés, formulários de inscrição, seções de depoimentos e Ser capaz de conectá-los diretamente ao seu prompt é muito poderoso, especialmente porque esses componentes e itens do banco de dados estão totalmente sob seu controle visual no editor regular do Webflow Obviamente, esse AI Builder amplia o limite de funcionalidades do Webflow, e eu nem mesmo o considerei em minhas comparações anteriores Aplicativos e páginas criados aqui não podem ser editados no Webflow designer Você terá que percorrê-lo rapidamente , como qualquer outro pool de códigos do Vibe Mas a segunda ferramenta de IA do Webflow, o Site Builder, é capaz de gerar um site visualmente editável Essa geração será implantada designer do Webflow, onde você poderá iterá-la visualmente Na próxima palestra, vamos dar uma olhada nesse Builder do lado da IA, então vou abordar todas as nuances Há outro tipo de site que você pode criar no Webflow, sites de comércio eletrônico, mas não vamos abordá-los neste A demanda por sites de comércio eletrônico é muito menor do que sites comuns Portanto, minha recomendação seria mudar para o design e o desenvolvimento web de sites de comércio eletrônico assim que você obtiver uma experiência de trabalho real suficiente com web design regular e geral Não faz muito sentido entrar direto no desenvolvimento web complexo e um pouco mais complexo, que é o comércio eletrônico, em vez de sites comuns, o que é muito mais simples e Webflow é gratuito até que você precise publicar o site e depois pagar pela hospedagem Mas a hospedagem é algo que todo proprietário de site precisa pagar, mesmo que esteja usando uma plataforma gratuita como o WordPress. Mas você não precisa se preocupar muito com isso. Não é sua despesa. Os clientes pagam pela hospedagem. Concluindo, o Webflow mudou a minha carreira e a de muitas outras pessoas, e pode fazer o mesmo por você 3. Teaser do Webflow: O curso tem seis partes. Na primeira parte, você aprenderá os segredos de um bom design. Na segunda parte, você praticará design em projetos reais. Na terceira parte, você aprenderá o Webflow criando a página inicial de uma empresa Na parte quatro, faremos um projeto de cliente do início ao fim. Vou guiá-lo pelo mesmo processo que eu passo com cada cliente. Vamos começar fazendo um wireframing depois projetando o site no Figma, depois pegando tudo, projetando e construindo dentro do Webflow com o blog e, finalmente, publicando e entregando ao cliente Na parte cinco, você aprenderá os segredos de ganhar dinheiro como freelancer, e a parte seis tem vários tutoriais avançados, tanto em design quanto em Webflow No vídeo promocional, mencionei o Webflow primeiro, mas na verdade vamos começar este curso com o design porque todo bom projeto de site começa com o design primeiro Assim como qualquer grande edifício sempre começa primeiro com os planos arquitetônicos e depois vem a partir do momento em que começamos a trabalhar com o Webflow, somente na terceira parte deste curso, eu queria dar uma amostra antes de continuarmos Então vá em frente e abra Webflow para que possamos dar uma olhada rápida Você já deve ter a conta Webflow da lição anterior Caso contrário, acesse webflow.com e cadastre-se. Use o Google Chrome. O designer do Webflow funciona melhor lá. Depois de se inscrever, você acessará alguma versão desta página. Temos três maneiras de criar um site no Webflow. Um deles são os modelos. mercado Webflow tem mais de 7.000 modelos pagos e Eles são absolutamente maravilhosos. Eles são surpreendentemente exclusivos para modelos. Há variedade. Eles têm animações e interações ricas É uma forma muito válida de um web designer trabalhar. Você pode instalar modelos para um cliente, editá-los, personalizá-los de acordo com seu conteúdo, sua marca, seus negócios E forneça serviços contínuos de manutenção e atualização do site. Como esses modelos são criados no Webflow, você não está vinculado a um modelo Eles são totalmente editáveis e podem ser completamente modificados. A segunda abordagem é criar com IA. É um dos dois construtores de IA dentro do Webflow. Isso é diferente da geração de aplicativos que mostrei anteriormente, que é uma ferramenta de codificação Vibe mais tradicional Este funciona como um primeiro gerador de rascunho. Vamos fazer um teste rápido com este. Você pode escolher seu próprio prompt ou usar o meu. Antes de gerar o site, você chegará a esse tipo de estrutura de página. Esse é um pequeno recurso útil que o Webflow oferece, ao contrário de alguns outros construtores de IA O que isso nos dá é que somos capazes de realmente estruturar nossa página, não apenas nossa página, mas nosso site antes de realmente gerarmos a IA. Isso é muito útil porque você geralmente não tem tudo estruturado em sua cabeça antes de poder contar isso para a NAI Então, essas são, cada uma delas, páginas. Nessas caixinhas, elas são seções. Por exemplo, se esquecermos de adicionar algum tipo de seção, podemos vir aqui e pensar: Ok, precisamos de outra seção na parte inferior, como uma seção de perguntas frequentes antes ou depois do formulário de contato E o Webflow oferecerá muitos tipos diferentes de seções que podemos escolher Então, na realidade, o Webflows AI Builder é uma espécie de IA ao mesmo tempo e também como uma biblioteca de componentes e diferentes layouts que ele oferece Então, isso meio que oferece o melhor dos dois mundos onde você não precisa criar tudo sozinho, mas também pode usar a IA. Por exemplo, podemos adicionar perguntas frequentes na parte inferior, mas tudo bem, talvez eu tenha mudado de ideia. Eu não quero isso na parte inferior. Não tem problema. Posso arrastá-lo para cima e, em seguida, você pode revisar as diferentes seções aqui se elas funcionarem, se não funcionarem, e então você pode adicionar mais páginas. Portanto, se você quiser adicionar mais páginas, na realidade, há um limite de cinco páginas. Não vai gerar mais do que cinco páginas. Portanto, se, por exemplo, você não precisar página de serviços ou da página de contato , poderá excluí-la e agora poderá criar uma nova, digamos, página de preços. E então o Webflow gerará uma página de preços para você. E então, quando terminar a estruturação clique em Gerar SI. Vai levar alguns minutos, espere um pouco. Tudo bem Então, vamos obter um layout de cinco páginas ou algumas páginas, dependendo do quanto você gerou. E o que esse lugar é aqui é, na verdade uma pré-etapa antes de transferi-lo para o designer da Wilo Essa etapa permite que, antes aceitarmos as alterações feitas pela IA, possamos realmente editá-las e estilizá-las ainda mais. Então, por exemplo, podemos entrar em uma dessas páginas clicando em Editar e obtemos uma espécie de interface amigável para atualizar alguns estilos e experimentar, e oferece temas diferentes que você pode trocar e concluir mudando de cores diferentes. Isso mudará diferentes estilos e cores de cabeçalho. Ele atualizará muitas coisas diferentes sobre o site e dará uma ideia da estrutura e do conteúdo permanecerão os mesmos. Mas agora as cores mudaram e as fontes mudaram , dando uma ideia de como tudo isso fica em um estilo diferente. Cada uma dessas seções é editável. E, por exemplo, se você clicar aqui, isso abrirá uma grande seleção de bibliotecas de componentes e bibliotecas de layout, digamos, e você terá diferentes seções de heróis, recursos, preços de galerias ou outros. E agora é uma seção de heróis, e você tem muitas opções diferentes de como deseja estilizar essa seção de heróis. E para construções rápidas, essa é, na verdade, uma ótima maneira de abordá-la, porque você não precisa brigar imediatamente com o AIS e oferece um pouco mais de capacidade de escolher visualmente algo que você vê e gosta, e pode ser editado essa é, na verdade, uma ótima maneira abordá-la, porque você não precisa brigar imediatamente com o AIS e oferece um pouco mais de capacidade escolher visualmente algo que você vê e gosta, e pode ser Por exemplo, eu gosto bastante desse tipo de seção que tem imagens dentro do texto. Podemos atualizar isso. Isso aqui permite que você troque estilos Você manterá esta seção, mas ela mudará as cores com base na paleta que já é usada dentro desse tema A paleta de cores também pode ser alterada a partir daqui. Por exemplo, podemos usar cores um pouco mais intensas e vibrantes, como púrpura, flor sagrada, E você pode ver que isso oferece muitas, muitas variações diferentes de paleta de cores As seções inteiras são atualizadas. Você pode usar temas escuros. Além disso, podemos atualizar a topografia. Podemos atualizar o peso da tipografia, talvez torná-la mais Os tamanhos também podem ser alterados e são um pouco menores. Podemos atualizar os estilos dos botões. No momento, temos esse tipo de design plano. Podemos optar por um design potencialmente um pouco mais schumórfico, um pouco mais classórfico, como Podemos adicionar novas seções a partir daqui. Por exemplo, uma seção de logotipo seria muito interessante aqui. A cor e o estilo podem ser atualizados para diferentes seções como essa. Podemos trocar, por exemplo, essa galeria não é tão interessante, que é um monte de fotos. Essas fotos são todas geradas por IA e, no momento, obviamente, tudo parece muito solado e misturado Você vai ter que atualizar o conteúdo, atualizar as imagens para torná-lo mais pessoal. E quando terminarmos as alterações, os estilos que aplicamos, todos eles serão transportados e aplicados a todas as páginas. Como você pode ver, as cores, a tipografia, os estilos dos botões, tudo foi levado para todos os lugares, o que é muito bom E quando terminarmos com isso, clicaremos nesta construção de Continuar, e isso agora nos levará para dentro do designer do Webflow O único problema aqui é que, no plano gratuito, você só tem duas páginas, então teremos que nos livrar de algumas dessas páginas que não queremos. Talvez possamos manter uma página de serviços. E uma página inicial Então vamos terminar dentro do Webflow Designer. Aqui temos controle total sobre como podemos editar nosso site, corrigir quaisquer problemas que tenhamos. Por exemplo, podemos atualizar nossas imagens. E corrija problemas como, por exemplo, neste caso, considerando qualquer que seja a fonte e a forma como as imagens são colocadas, elas se tocam aqui, e isso não é legal Eles não devem se tocar, para que possamos resolver esse problema. Agora, isso não vai ser fácil para você neste momento , porque você não sabe como trabalhar com esse designer. Você não sabe como esses elementos, como funcionam os estilos e propriedades e tudo mais, mas vamos falar sobre isso. Isso nos dá um controle total. Obviamente, podemos atualizar o conteúdo de forma fácil. Mudanças diferentes, por exemplo, eu preferiria que esses logotipos fossem espalhados. Depois de entender como o flexbox funciona, você pode fazer isso facilmente com um único clique E se você esqueceu e quis adicionar novas seções, ainda podemos fazer isso por meio da IA Esses pequenos botões de geração de layout aparecerão. E então, por exemplo, podemos adicionar uma seção de preços, e o ganho do Webflow nos dará muitas opções diferentes de preços que podemos adicionar Ele adaptará o conteúdo ao nosso site. E se você tiver algum problema aqui, que pode ser excluído, sim, temos o controle total e podemos visualizar nossa página da web a partir daqui e ver como tudo interage e funciona As imagens no momento são terríveis, mas digamos assim. O site será responsivo imediatamente, você pode testá-lo reduzindo essa Você pode ver que eles estão se ajustando a tamanhos diferentes. E você também pode ver aqui os diferentes pontos de interrupção, como celular, tablet e assim por diante. Mas trabalhar com um site já construído será muito confuso para um iniciante Para aprender os fundamentos do web design, precisamos começar do zero Volte para o painel e crie um novo site. Em um avião gratuito, você só pode ter dois sites gratuitos. Então, se você já atingiu esse limite jogando com o AI Builder, basta arquivar um dos sites aqui. Crie um novo site e escolha um site em branco. Como usuário iniciante, você receberá esse pop-up de integração. Você não precisa passar por isso, mas pode, se quiser. À esquerda, temos um navegador. Mostra a estrutura da página e todos os objetos nela. No momento, há apenas um objeto, o corpo. No ícone de adição, podemos adicionar novos elementos. Vamos adicionar um contêiner que podemos simplesmente arrastar na tela. Além disso, vamos adicionar um título e um parágrafo dentro. E escreva algo nele. Vamos centralizar o texto. Podemos fazer isso selecionando o recipiente e pressionando o alinhamento central sob a tipografia E vamos adicionar um pouco de espaçamento para mover o texto no meio da tela, manter o contêiner selecionado e, com o mouse, arrastar a alça de preenchimento superior Você pode ativar o modo de visualização para ver a aparência da sua página em tempo real Se você acessar o código Export, verá o código real que o Webflow escreveu para nós HTML mostra os objetos que editamos, como o contêiner, o título e um parágrafo. E dentro do CSS, você verá as mudanças de estilo que fizemos, o preenchimento superior e o alinhamento central Poderíamos exportar esse código e hospedá-lo em qualquer outro lugar. A página funcionaria perfeitamente fora do Webflow two. Mas não vamos fazer isso neste curso. A melhor opção é publicar nossa página no Webflow. Então, vá para publicar e clique em Publicar nos domínios selecionados. Depois de terminar, clique no link para abrir o site ativo. Sua primeira página da web construída do zero, feia e inútil, mas ainda Sem saber como criar, todos os nossos sites pareceriam tão desagradáveis quanto este, mesmo se fôssemos designers profissionais do Webflow A habilidade de design sempre vem em primeiro lugar. Então, vamos deixar o Webflow de lado por enquanto e aprender e praticar bom design e , na terceira parte, voltar ao Webflow para que possamos fazer a mágica acontecer e criar e criar um lindo 4. PARTE 1: SEGREDOS DE UM BOM DESIGN: Não estudei em uma escola de arte. Acho que nunca estive dentro de um. Minha matéria favorita na escola era matemática e eu não gostava de desenhar. Nunca na minha vida eu pensaria em me tornar designer. Meu amigo e parceiro de negócios na época, que era designer gráfico, frequentou uma escola de arte e depois foi designer gráfico regular, e um dia descobri que ele não sabia desenhar. Ele não sabia desenhar. E eu dei a ele um olhar estranho. O que quer dizer que você pode desenhar? Você é designer gráfico, certo? E ele diz, isso é divertido, não é? Ele explica que, para ser designer, você não precisa saber desenhar. Você não precisa ter algum talento inato para a criatividade ou ser um artista extravagante O design tem regras, técnicas e diretrizes, e você só precisa aprender a segui-las. Eu fiquei chocado. Eu pensei, espere um segundo. Tipo, eu senti que acabei de descobrir um segredo incrível que esse mundo estava escondendo de mim. E nesta parte do curso, é exatamente isso que eu quero te ensinar. Todos esses pequenos truques e diretrizes que fazem algo parecer tão projetado. E eu quero te ensinar e mostrar como é simples transformar algo que é apenas conteúdo aleatório e transformá-lo em uma bela composição de design. Eu lhe darei tarefas e praticarei exercícios para que você possa pegar suas mãos Sujo. Aprenderemos como usar uma ferramenta de design chamada Figma É uma ferramenta simples e vamos aprendê-la passo a passo, então não vamos transformá-la do avesso. Aprenderemos novos recursos à medida que avançamos e praticamos por meio de diferentes designs. E, na verdade, design não está realmente na ferramenta. Você não se torna designer gráfico ou web designer apenas aprendendo o Photoshop Ou esboço ou qualquer outra coisa. Seu design é uma escala mental na realidade. Não é nessa criatividade que as pessoas realmente pensam. Obviamente, há muita parte criativa por dentro, mas geralmente é uma habilidade mental e uma maneira de ver as coisas. Mais ou menos como o mecânico olha para o carro e ouve o motor do carro e depois entende, apenas olhando para alguma coisa e apenas ouvindo o som, onde apertar os parafusos e onde ouvi-los Vou te ensinar essa habilidade exata de design. Assim, você pode pegar uma tela em branco e criar algo muito atraente com ela. Algo pelo qual as pessoas lhe pagarão um bom dinheiro. 5. Primeiros passos com o Figma: Mergulhamos no design, vamos primeiro configurar o Figma. Será uma visão geral rápida. Vou mostrar apenas uma compreensão geral de como a ferramenta funciona e todos os recursos importantes que precisaremos para criar sites no FIGMA Eu os ensinarei e mostrarei à medida que avançamos no material e conforme você precisar deles. Não imediatamente. Então, primeiro de tudo, vamos baixar o FiGMA, certo? Temos duas opções Mac e Windows. Estou em um Mac, mas o aplicativo do Windows funciona e tem a mesma aparência. Portanto, mesmo no Windows, você poderá seguir meus tutoriais perfeitamente. Se você usa Linux ou algum outro sistema operacional, não se preocupe. Você pode usar o FiGMA diretamente no seu navegador. É incrível, mas eu recomendo fortemente usar o aplicativo de desktop, se você tiver uma chance. Agora, vamos instalá-lo. Em um MAC, ele só precisa ser movido para a pasta de aplicativos, e isso é tudo. Não sei como a instalação funciona no Windows, mas tenho certeza de que não é primeira vez que você instala um aplicativo, então siga o processo normal de instalação. Essa é a tela de registro inicial. Inscreva-se no Google se quiser facilitar as coisas ou cadastre-se com um e-mail. Ele solicitará que você verifique seu endereço de e-mail. Seu nome é Waco. Que tipo de trabalho você projeta? versão gratuita do Figm tem algumas limitações, mas nada crucial para um designer freelancer. Você pode facilmente usá-lo gratuitamente para sempre. E chegaremos à nossa página inicial, que é nosso navegador de arquivos Todos os seus arquivos Figma serão exibidos aqui. Figma é baseado em nuvem, então você precisará da Internet ao trabalhar com ele Você pode trabalhar off-line, mas somente se carregar o arquivo antes de ficar off-line. Depois, você pode trabalhar com um arquivo e, quando estiver on-line novamente, ele sincronizará e atualizará esse arquivo. Tudo bem, mas eu não recomendaria fazer isso. Você não quer correr o risco de perder seu trabalho árduo. Vamos começar criando um novo arquivo. Nós podemos fazer isso a partir daqui. Agora estamos no editor Figma. É aqui que tudo acontece. Não há nada a temer , é bem simples. Os arquivos abertos serão exibidos como uma guia, como seu navegador. E se você quiser voltar à página inicial para abrir outro arquivo, você pode fazer isso neste ícone aqui Ou, se você estiver trabalhando no navegador, poderá clicar na pasta principal do arquivo aqui. Na maioria dos casos, dirá rascunhos. Mas se você estiver trabalhando sob um plano de equipe, ele poderá dizer o nome da equipe ou do projeto. Ou, nessa lista suspensa, você pode selecionar voltar aos arquivos Para voltar ao arquivo, basta selecionar a guia Abrir se o arquivo ainda estiver aberto. Mas se não estiver aberto, todos os seus arquivos serão exibidos aqui na guia RSNS Localizações mais precisas para esses arquivos serão pasta de rascunhos ou uma das pastas da equipe Mas a equipe é um recurso pago e o plano gratuito só permite três arquivos. Portanto, caso você receba uma mensagem que atingiu o limite de arquivos, trata-se apenas dos arquivos da equipe. Dentro da pasta de rascunhos, você pode ter arquivos gratuitos ilimitados. E como freelancer, a pasta de rascunhos funcionará perfeitamente para você Vamos ver uma barra de ferramentas aqui. Como você pode ver, ele tem apenas algumas ferramentas, nada parecido com o que você obteria no Photoshop primeira é uma ferramenta de movimentação, a ferramenta padrão que é selecionada na maioria das vezes. Ele faz exatamente o que diz. Ele move objetos e interage com eles. A próxima é a ferramenta de moldura. É semelhante à prancheta que você encontra em outras ferramentas de design Todos os nossos designs começarão com uma moldura. Dependendo do que estamos projetando, precisamos escolher um tamanho específico, a tela para a qual estamos projetando. Ou estamos projetando uma tela para um computador desktop, laptop, iPhone e assim por diante. Se este for um curso de web design, estaremos projetando para computadores desktop e laptop. Você pode desenhá-lo, mas a melhor opção é escolher um dos tamanhos predefinidos E escolha a tela nesse menu suspenso. Existem iPhones, Androids, tablets e até capas do Facebook Vamos escolher um dos tamanhos de tela do desktop, obviamente. Você não está preso a essas dimensões. Se quiser, você pode redimensioná-lo assim. A propósito, esse movimento da tela que eu fiz, o termo técnico para isso é panificação. Estou fazendo isso deslizando com dois dedos no meu touchpad Se você estiver usando um laptop, você deve ser capaz de fazer o mesmo. Se você estiver usando um mouse, poderá usar a roda de rolagem para cima ou para baixo ou manter pressionada a tecla Shift, e ela se moverá para a esquerda ou para a direita. Mas uma opção melhor com o mouse pode ser manter pressionada a barra de espaço que ativará uma ferramenta manual e, em seguida, você poderá clicar e direcionar a tela conforme desejar. Também há um zoom que você precisará fazer de tempos em tempos em um touchpad Novamente, isso é fácil. Só precisa apertar com dois dedos exatamente da mesma forma que você faria no seu telefone E com um mouse, você precisará manter pressionado um controle ou comando no Mac enquanto rola. Tudo bem, a seguir está uma ferramenta de modelagem. Quando você clica em uma pequena seta, ela permite selecionar qualquer uma das seguintes formas, como retângulo, linha, etc Vamos desenhar um retângulo. É a primeira coisa selecionada por padrão e, no quadro, você desenha um retângulo como este Clique e arraste. Mesma lógica para outras formas. Então, temos uma ferramenta Pen. Não se preocupe com isso por enquanto. Não vamos usá-lo muito. Ao lado, há uma ferramenta de texto. Muito simples A ferramenta de comentários é para colaboração. Quando você o envia para seu cliente ou membros da equipe para análise, eles podem comentar diretamente sobre cada elemento, uma ferramenta muito útil. Aqui temos o menu Ações, que abriga muitos recursos diferentes. Todas as configurações e opções do Figma que você pode encontrar aqui, por exemplo, Zoom ou modo escuro Na verdade, eu prefiro o modo de luz. Você pode abrir o menu usando um atalho Control K ou Command K no Mac Na verdade, você pode ver todos os atalhos ao mouse sobre cada um desses itens da barra de ferramentas Dentro do menu Ações, você encontrará guias para ativos e plug-ins Os ativos são basicamente pequenos componentes que criamos em nosso arquivo, falaremos mais sobre isso posteriormente. E plug-ins e widges criados pela comunidade são como miniaplicativos que podem tornar nosso trabalho no Figma mais eficiente e produtivo Às vezes eles são pagos, às vezes são gratuitos. Então, temos o modo Dev, que é outro recurso pago que não é necessário para este curso nem para web design freelance É um recurso para desenvolvedores. Isso facilita o processo de entrega do design quando o designer entrega os designs aos desenvolvedores para criar um aplicativo ou uma interface Os desenvolvedores poderão encontrar todos os elementos e informações necessários em um formato e linguagem que sejam mais úteis para eles. É tudo o que você precisa saber sobre a barra de ferramentas por enquanto. Por outro lado, temos o painel de propriedades. O engraçado do painel de propriedades é que ele muda com base em um objeto que você selecionou. Selecionamos um retângulo e obtemos todas as propriedades desse retângulo específico Quando selecionamos texto, obtemos propriedades, fonte, tamanho do texto ligeiramente diferentes , etc. Exploraremos cada uma dessas propriedades mais tarde, quando realmente precisarmos delas. Não precisa se preocupar com eles agora. Finalmente, no lado esquerdo, temos o painel de navegação, que tem algumas seções diferentes. Existe o menu principal. Você verá todas as configurações e opções do FiCMA aqui novamente. Nome do arquivo e algumas ações do arquivo. Arquivo versus facada de ativo. Esses são os mesmos ativos que você encontra no menu abaixo das páginas, porque podemos ter várias páginas em nosso arquivo. E a seção de camadas. Cada novo elemento que criarmos aparecerá aqui em camadas. Agora, por que é chamado de camadas e por que não objetos ou elementos ou algo parecido? Porque eles estavam deitados um em cima do outro. Eles existem no espaço em camadas. Por exemplo, se quisermos que a caixa roxa fique abaixo, basta arrastar essa camada e movê-la abaixo do retângulo cinza Todos esses objetos são filhos do nosso quadro chamado desktop. É lá que eles moram. E se movermos qualquer um desses objetos para fora desse quadro, você verá como o painel de camadas será atualizado e moverá o objeto para fora do quadro para a tela geral. Isso é tudo que você precisa saber sobre o Figma por enquanto. Mais recursos surgirão em todos os exercícios práticos que vamos fazer. Se você não está acompanhando, pare de fazer uma pausa e vá em frente e faça isso agora, depois continue com a próxima lição Se em algum momento deste curso você ficar preso, são novas ferramentas, às vezes elas são atualizadas e, você sabe, coisas diferentes mudam, e talvez eu não seja tão rápido quanto atualizar as telas e tudo mais. Obviamente, eu vou, mas, você sabe, eles se movem muito rápido, todas essas ferramentas, e atualizam as telas e a interface do usuário muito rapidamente. Então, eu posso te mostrar uma coisa e pode desaparecer de repente. Me avise. Vou consertar isso. Mas se você ficar preso, você sempre pode me mandar uma mensagem ou fazer uma pergunta nos fóruns de discussão. Eu ou algum outro estudante o ajudaremos. 6. Primeiros passos com o Figma: Mergulhamos no design, vamos primeiro configurar o Figma. Será uma visão geral rápida. Vou mostrar apenas uma compreensão geral de como a ferramenta funciona e todos os recursos importantes que precisaremos para criar sites no FIGMA Eu os ensinarei e mostrarei à medida que avançamos no material e conforme você precisar deles. Não imediatamente. Então, primeiro de tudo, vamos baixar o FiGMA, certo? Temos duas opções Mac e Windows. Estou em um Mac, mas o aplicativo do Windows funciona e tem a mesma aparência. Portanto, mesmo no Windows, você poderá seguir meus tutoriais perfeitamente. Se você usa Linux ou algum outro sistema operacional, não se preocupe. Você pode usar o FiGMA diretamente no seu navegador. É incrível, mas eu recomendo fortemente o uso de um aplicativo de desktop, se você tiver uma chance. Agora, vamos instalá-lo. Em um MAC, ele só precisa ser movido para a pasta de aplicativos, e isso é tudo. Não sei como a instalação funciona no Windows, mas tenho certeza de que não é primeira vez que você instala um aplicativo, então siga o processo normal de instalação. Essa é a tela de registro inicial. Inscreva-se no Google se quiser facilitar as coisas ou cadastre-se com um e-mail. Ele solicitará que você verifique seu endereço de e-mail. Seu nome é Waco. Que tipo de trabalho você desenha? versão gratuita do Figma tem algumas limitações, mas nada crucial para um designer freelancer. Você pode facilmente usá-lo gratuitamente para sempre. E chegaremos à nossa página inicial, que é nosso navegador de arquivos Todos os seus arquivos Figma serão exibidos aqui. Figma é baseado em nuvem, então você precisará da Internet ao trabalhar com ele Você pode trabalhar off-line, mas somente se carregar o arquivo antes de ficar off-line. Depois, você pode trabalhar com um arquivo e, quando estiver on-line novamente, ele sincronizará e atualizará esse arquivo. Tudo bem, mas eu não recomendaria fazer isso. Você não quer correr o risco de perder seu trabalho árduo. Vamos começar criando um novo arquivo. Podemos fazer isso daqui ou daqui. Agora estamos no editor Figma. É aqui que tudo acontece. Não há nada a temer , é bem simples. Os arquivos abertos serão exibidos como uma guia, como seu navegador. E se você quiser voltar à página inicial para abrir outro arquivo, você pode fazer isso neste ícone aqui Ou, se você estiver trabalhando no navegador, poderá clicar na pasta principal do arquivo aqui. Na maioria dos casos, dirá rascunhos. Mas se você estiver trabalhando sob um plano de equipe, ele poderá dizer o nome da equipe ou do projeto. Ou, nessa lista suspensa, você pode selecionar voltar aos arquivos Para voltar ao arquivo, basta selecionar a guia Abrir se o arquivo ainda estiver aberto. Mas se não estiver aberto, todos os seus arquivos serão exibidos aqui na guia RSNS Localizações mais precisas para esses arquivos serão pasta de rascunhos ou uma das pastas da equipe Mas a equipe é um recurso pago e o plano gratuito só permite três arquivos. Portanto, caso você receba uma mensagem que atingiu o limite de arquivos, trata-se apenas dos arquivos da equipe. Dentro da pasta de rascunhos, você pode ter arquivos gratuitos ilimitados. E como freelancer, a pasta de rascunhos funcionará perfeitamente para você Vamos ver uma barra de ferramentas aqui. Como você pode ver, ele tem apenas algumas ferramentas, nada parecido com o que você obteria no Photoshop primeira é uma ferramenta de movimentação, a ferramenta padrão que é selecionada na maioria das vezes. Ele faz exatamente o que diz. Ele move objetos e interage com eles. A próxima é a ferramenta de moldura. É semelhante à prancheta que você encontra em outras ferramentas de design Todos os nossos designs começarão com uma moldura. Dependendo do que estamos projetando, precisamos escolher um tamanho específico, a tela para a qual estamos projetando. Ou estamos projetando uma tela para um computador desktop, laptop, iPhone e assim por diante. Se este for um curso de web design, estaremos projetando para computadores desktop e laptop. Você pode desenhá-lo, mas a melhor opção é escolher um dos tamanhos predefinidos E escolha a tela nesse menu suspenso. Existem iPhones, Androids, tablets e até capas do Facebook Vamos escolher um dos tamanhos de tela do desktop, obviamente. Você não está preso a essas dimensões. Se quiser, você pode redimensioná-lo assim. A propósito, esse movimento da tela que eu fiz, o termo técnico para isso é panificação. Estou fazendo isso deslizando com dois dedos no meu touchpad Se você estiver usando um laptop, você deve ser capaz de fazer o mesmo. Se você estiver usando um mouse, poderá usar a roda de rolagem para cima ou para baixo ou manter pressionada a tecla Shift, e ela se moverá para a esquerda ou para a direita. Mas uma opção melhor com o mouse pode ser manter pressionada a barra de espaço que ativará uma ferramenta manual e, em seguida, você poderá clicar e direcionar a tela conforme desejar. Também há um zoom que você precisará fazer de tempos em tempos em um touchpad Novamente, isso é fácil. Só precisa apertar com dois dedos exatamente da mesma forma que você faria no seu telefone E com um mouse, você precisará manter pressionado um controle ou comando no Mac enquanto rola. Tudo bem, a seguir está uma ferramenta de modelagem. Quando você clica em uma pequena seta, ela permite selecionar qualquer uma das seguintes formas, como retângulo, linha, etc Vamos desenhar um retângulo. É a primeira coisa selecionada por padrão e, no quadro, você desenha um retângulo como este. Clique e arraste. Mesma lógica para outras formas. Então, temos uma ferramenta Pen. Não se preocupe com isso por enquanto. Não vamos usá-lo muito. Ao lado, há uma ferramenta de texto. Muito simples. A ferramenta de comentários é para colaboração Quando você o envia para seu cliente ou membros da equipe para análise, eles podem comentar diretamente sobre cada elemento, uma ferramenta muito útil. Aqui temos o menu Ações, que abriga muitos recursos diferentes, todas as configurações e opções do Figma que você pode encontrar aqui, por exemplo, Zoom ou modo escuro Na verdade, eu prefiro o modo de luz. Você pode abrir o menu usando um atalho Control K ou Command K no Mac Na verdade, você pode ver todos os atalhos ao mouse sobre cada um desses itens da barra de ferramentas Dentro do menu Ações, você encontrará guias para ativos e plug-ins Os ativos são basicamente pequenos componentes que criamos em nosso arquivo, falaremos mais sobre isso posteriormente. E plug-ins e widges criados pela comunidade são como miniaplicativos que podem tornar nosso trabalho no Figma mais eficiente e produtivo Às vezes eles são pagos, às vezes são gratuitos. Então, temos o modo Dev, que é outro recurso pago que não é necessário para este curso nem para web design freelance É um recurso para desenvolvedores. Isso facilita o processo de entrega do design quando o designer entrega os designs aos desenvolvedores para criar um aplicativo ou uma interface Os desenvolvedores poderão encontrar todos os elementos e informações necessários em um formato e linguagem que sejam mais úteis para eles. É tudo o que você precisa saber sobre a barra de ferramentas por enquanto. Por outro lado, temos o painel de propriedades. O engraçado do painel de propriedades é que ele muda com base em um objeto que você selecionou. Selecionamos um retângulo e obtemos todas as propriedades desse retângulo específico Quando selecionamos texto, obtemos propriedades ligeiramente diferentes. Fonte, tamanho do texto, etc. Exploraremos cada uma dessas propriedades mais tarde, quando realmente precisarmos delas. Não precisa se preocupar com eles agora. Finalmente, no lado esquerdo, temos o painel de navegação, que tem algumas seções diferentes. Existe o menu principal. Você verá todas as configurações e opções do FiCMA aqui novamente. Nome do arquivo e algumas ações do arquivo. Arquivo versus esfaqueamento de ativos. Esses são os mesmos ativos que você encontra no menu abaixo das páginas, porque podemos ter várias páginas em nosso arquivo. E a seção de camadas. Cada novo elemento que criarmos aparecerá aqui em camadas. Agora, por que é chamado de camadas? E por que não objetos ou elementos ou algo parecido? Porque eles estavam deitados um em cima do outro. Eles existem no espaço em camadas. Por exemplo, se quisermos que a caixa roxa fique abaixo, basta arrastar essa camada e movê-la abaixo do retângulo cinza Todos esses objetos são filhos do nosso quadro chamado desktop. É lá que eles moram. E se movermos qualquer um desses objetos para fora desse quadro, você verá como o painel de camadas será atualizado e moverá o objeto para fora do quadro para a tela geral. Isso é tudo que você precisa saber sobre Figma por enquanto. Mais recursos surgirão em todos os exercícios práticos que vamos fazer. Se você não está acompanhando, pare de fazer uma pausa e vá em frente e faça isso agora, depois continue com a próxima lição Se em algum momento deste curso você ficar preso, são ferramentas novas, às vezes elas são atualizadas e coisas diferentes mudam, e talvez eu não seja tão rápido quanto atualizar as telas e tudo mais. Obviamente, eu vou, mas eles se movem muito rápido, usam essas ferramentas e atualizam telas e a interface do usuário muito rapidamente. Então, eu posso te mostrar uma coisa e pode desaparecer de repente. Me avise. Vou consertar isso. Mas se você ficar preso, você sempre pode me mandar uma mensagem ou fazer uma pergunta nos fóruns de discussão. Eu ou algum outro estudante o ajudaremos. 7. Layout é Rei: dar uma olhada neste design seção herói. Este design não é nada mau, mas há uma coisa errada com ele. Veja se você pode notar um indivíduo. Cada elemento é design variável, mas composição juntos olhar um pouco fora antes foram para desenhar linhas nas bordas de cada elemento, você verá que os elementos não são realmente alinhados. Consertar isso é bastante fácil. Estamos apenas mentindo. As coisas são o máximo que podemos. Um truque simples. Mude o mesmo design, olhando de desajeitado, dedo do pé, ordenado e polido. Agora, se eu fosse desenhar linhas nas bordas, você veria uma nota simplista com dois acessos verticais principais. Por que o alinhamento de objetos torna uma composição melhor? É exatamente a mesma razão pela qual este quarto parece melhor do que este quarto. É a ordem. Evitamos o caos e procuramos a ordem, e tudo o que é ordenado, simétrico e organizado será percebido como mais belo do que qualquer coisa caótica e desordenada. Algumas das regras de design mais importantes são sobre layout. É uma questão de onde colocar as coisas, como organizá-las, o que vem depois do que e as próximas lições estarão falando sobre todas as técnicas de design e regras relacionadas ao layout. Este é sobre alinhamento, provavelmente um dos mais simples, o mais básico, mas uma das regras de design mais poderosas lá fora. Apenas um simples alinhamento pode fazer algo parecer projetado. Por outro lado, o desalinhamento fará com que pareça trabalho desleixado e amador. Quantos desenvolvedores da Web que não têm um plano de fundo em design simplesmente soltarão elementos da página aleatoriamente onde quer que se encaixem. Isso faz com que uma página pareça confusa e não atraente, mas aproveitamos todas as chances para alinhar objetos uns com os outros. Então criamos algo que parece estaticamente, mais atraente. Há seis maneiras de alinhar o alinhamento à esquerda de objetos. Essa é a maneira mais natural das coisas de revestimento. Porque a maneira como lemos línguas ocidentais da esquerda para a direita, é mais natural para os nossos olhos começar a procurar objetos do canto superior esquerdo. Então você tem o alinhamento central. Isto é frequentemente visto em armas na última em design de impressão. Se você está projetando para um coelho, hebraico e outros direita deixar línguas do que o alinhamento mais natural seria entalhes de alinhamento certo para o imposto. Mas para outros objetos para e há três maneiras semelhantes bip os objetos de linha no eixo horizontal. Alinhamento central de linha superior novamente, mas eixos horizontais e o alinhamento inferior. Software de design quase antigo terá botões de ação de alinhamento, e eles vão usar esses ícones exatos para representar ege alimentar meus usos três ciclos para, e eu vou mostrar-lhe onde eles estão. Neste exemplo, você pode ver que com uma linha objetos em suas bordas esquerdas. Alinhamento é a primeira equipe para uma boa camada. Quando você começar a alinhar as coisas, você verá que o layout começa a formar algum tipo de estrutura. Isso se chama “O Grande”. É a maneira de organizar elementos na página para colocá-los em uma estrutura reconhecível. Mas que design realmente gosta da ganância que é dividida em tamanhos iguais? Então, se fôssemos desenhar oito iguais com colunas que são espaçados uniformemente e pegássemos todos os nossos objetos e alinhá-los com essas colunas, então teríamos um layout que se sente muito mais equilibrado e projetado. E o passo final neste processo é reutilizar os mesmos valores o máximo possível. O gás vertical entre objetos é de 30 pixels, mas o espaço horizontal é de 60 pixels. A jogada certa aqui seria fazer com que esse fosso horizontal fosse 30 também. Agora temos um layout verdadeiramente equilibrado. Por que a ganância é tão importante? Dá ao público a sensação de clareza. Os acordos não são realmente desenhados corretamente, você sabe, eles estão implícitos. E lá isso e o público meio que sente. E quando Ah, algo parece previsível e familiar e por causa do credo repetido, o público e o espectador confiarão mais no site, e eles entenderão. E eles sabem que este é o site que não vai desperdiçar seu tempo. A regra do grupo é flexível em sempre projetar dentro do grande Às vezes, às vezes eu faço. Às vezes eu ignoro oito. Às vezes concordei. E então, você sabe, eu deixo as coisas às vezes sair das restrições do cara que conhece muitos designers exatamente para o mesmo, que é, você sabe, eles podem não usá-lo, cumprimentar completamente ou eles podem de alguma forma tê-lo. Mas, você sabe, usando mais de uma maneira flexível. Mas para você, no começo, eu quero que você use a ganância porque para os começos e quando você está aprendendo a projetá-lo apenas maneira realmente incrível como tipo de arraigado este grande hábito de design dentro de você, e mais tarde você pode e não pode ir sobre isso uma maneira um pouco mais flexível. Nós vamos fazer um exercício de prática após esta lição, e eu vou mostrar a vocês como criar facilmente o Inside Sigma acordado e como Teoh projetar dentro da grade. A maioria das regras de design que vamos falar neste curso podem ser quebradas, embora se estamos quebrando uma regra de design, temos que fazer com uma intenção, porque se não estamos fazendo isso com uma atenção na qual não estamos realmente pensando, ele, provavelmente estavam sendo desleixado. Um design muito comum Lee fora para usar em Web design é um center lee out, que realmente não cair sob uma grade adequada. Vamos dar uma olhada neste exemplo. Não há nenhuma grade proeminente nesta seção que os artistas fluam livremente, e os elementos no meio não estão criando nenhum tipo de grade. No entanto, ele ainda parece bom e não parece desleixado em tudo porque pelo menos há um alinhamento. Você pode quebrar a ganância, mas pode realmente quebrar em alinhamento. Podemos sentir que os elementos de tese de linha vertical imaginária estão alinhados com o design de impressão, o alinhamento central raramente usam. No entanto, ao contrário da impressão, o site pode ser visualizado em centenas de tamanhos de tela diferentes em qualquer lugar a partir de um pequeno dedo do pé do smartphone. Uma grande tela de TV. Devido a estes são ascendentes tornaram-se responsivos. O conteúdo pode diminuir ou expandir, dependendo da tela está sendo visualizada na impressão. O designer moldaria os elementos ao seu absoluto. Were Where Whatever é impresso não iria mudar de forma ou tamanho. Então você sabe que ele conseguiria um resultado ótimo. É por isso que você vê layout louco em revistas, mas não na Web. Então isso é alinhamento e ganância em teoria. A seguir, vamos praticar o alinhamento em Great para que você possa fazê-lo como parte do seu processo de design . 9. Tarefa: alinhamento e grade: Neste vídeo, você praticará o alinhamento. Você criará um design muito simples no Figma e o enviará em uma tarefa Depois disso, é um vídeo de acompanhamento, então inicie seu Figma Ok, então não vamos projetar nada útil. O objetivo deste exercício é praticar o alinhamento e ganhar alguma experiência prática com o Figma Vamos esboçar uma seção de herói de uma página da web, às vezes também chamada de cabeçalho ou acima da dobra Não vamos fazer nada sofisticado, sem imagens, sem texto, apenas um monte de retângulos, como um doodle Então, qual é a primeira coisa que inserimos quando iniciamos qualquer design? Isso mesmo. Quadro. Como mostrado no tutorial do Figma, podemos adicionar um quadro selecionando a ferramenta de moldura e, em seguida, selecionando uma das predefinições no painel de propriedades. Vamos selecionar a moldura da área de trabalho. Em seguida, vamos definir nossa grade para esse quadro. Por quê? Porque queremos estruturar nosso site de forma que pareça limpo e organizado Configurar uma grade no Figma é muito simples. As grades se aplicam a cada quadro individualmente, então precisamos selecionar o quadro e, no painel de propriedades, teremos a opção de adicionar uma nova grade de layout Não se esqueça de selecionar a moldura, caso contrário, ela não aparecerá. Por padrão, obtemos essa grade bidimensional que divide um quadro em pequenos quadrados com dez pixels de tamanho, mas essa não é a grade que queremos O que queremos é uma grade vertical que divida a página em várias colunas A grade de layout mais usada em web design é a grade de 12 colunas. Por que 12 colunas porque se divide muito bem. 12 é um múltiplo de três e quatro, então 12 colunas podem ser divididas ao meio com seis colunas em cada lado. Ele pode ser dividido em três com cada parte com quatro colunas de largura, ou pode ser dividido em quatro, com cada parte com três colunas de largura. Outras grades de layout oferecerão menos opções. Por exemplo, uma grade de dez ou oito colunas pode ser dividida em três tamanhos iguais, por isso é muito limitante. Aplique uma grade de 12 pontos no menu suspenso, selecione as colunas na contagem e digite o pino Agora vamos ajustar um pouco o espaçamento da nossa grade. O conteúdo do site geralmente não está disposto nas bordas. Há margens nas bordas de qualquer site e o conteúdo é colocado no centro Podemos aplicar essas margens à nossa grade aqui. Algo em torno de 140 pixels deve ser suficiente. Se aumentarmos a margem, você poderá ver como as colunas começam a encolher Mais uma coisa que eu gosto de ajustar aqui é o espaçamento entre as colunas Isso é chamado de sarjeta. Por padrão , são 20 pixels, mas para mim não é suficiente. Gosto de criar uma separação um pouco mais rápida entre os objetos em torno de 30 ou 40 pixels Tudo bem, esta é a nossa rede. Eu gostaria que você criasse exatamente a mesma grade com os mesmos valores. É aqui que vamos apresentar o conteúdo do nosso site. A grade é uma sobreposição. Você não pode selecioná-la com o mouse, e podemos mostrar ou ocultar a grade diretamente daqui. Há um atalho próximo a ele. Está sendo exibido para Mac, que é o Control G. No Windows, provavelmente é outra coisa, mas você poderá vê-lo se estiver no Windows. E aí, é para lá que nosso design irá. Em seguida, quero dar a essa moldura uma cor de fundo sem nenhum motivo específico, apenas por diversão. Como fazemos isso? Lembre-se de que, para qualquer objeto que você queira editar, primeiro selecione esse objeto. painel Propriedades é atualizado instantaneamente conforme você o seleciona, e agora temos uma opção aqui para alterar a cor do plano de fundo. Este é um seletor de cores muito padrão que você veria em praticamente qualquer outro aplicativo de design ou não design Posteriormente, aprenderemos as cores com mais detalhes e também mostrarei como trabalhar com esse seletor de cores como um profissional Você pode escolher qualquer cor de sua preferência ou mantê-la branca, se quiser. Se você tiver a cor do plano de fundo e a grade não tiver um bom contraste, você sempre poderá ajustar a cor da grade. Veja, isso é muito melhor. Agora, vamos começar a definir alguns elementos gerais que teríamos em um site padrão. Lembre-se de que estamos apenas fazendo um wireframe super simples, então vamos usar apenas O que temos em cima de cada site? Uma barra de navegação, que geralmente contém um logotipo e alguns links para páginas diferentes na lateral. Vamos desenhar um retângulo. Essa será a nossa barra de navegação. Às vezes, você me ouvirá usar a palavra navbar como abreviação de barra de navegação Ok. Gosto de ser preciso, então vou mudar a altura desse retângulo para 70 pixels a partir daqui O H é um valor para a altura e o W é o valor para a largura. Aqui está uma dica rápida. Se você pressionar as setas do teclado para cima e para baixo, enquanto estiver dentro desse campo, poderá aumentar ou diminuir os valores desse jeito E se você segurar a tecla shift ao mesmo tempo, em vez de aumentar o valor em um pixel, ele aumentará em dez pixels. Ok, vamos dar a essa barra de navegação uma cor um pouco mais escura Então, mais uma vez, se quisermos adicionar um objeto, nós o selecionamos e teremos todas as propriedades no painel aqui, e podemos alterar a cor do campo desse retângulo a partir daqui Vou torná-lo preto, mas vamos torná-lo transparente. Esse controle deslizante aqui altera a transparência da cor. Isso geralmente é chamado de opacidade. Você provavelmente já ouviu esse termo antes. Além disso, você pode definir a opacidade nessa caixa de porcentagem. Vamos configurá-lo para 20%. Esse é um pequeno truque de design para manter a mesma paleta de cores Você pode usar sobreposições em preto ou branco semitransparentes semitransparentes Como resultado, a cor de fundo se espalha por ela e você obtém uma cor que faz parte da mesma paleta de cores Em seguida, vamos desenhar um logotipo no lado esquerdo. Vamos desenhar um retângulo como espaço reservado para o logotipo É aqui que a grade começa a entrar em jogo. Quando começarmos a desenhar objetos, vamos colocá-los dentro dessas colunas da grade. Nossas opções são encaixá-lo em uma coluna, duas colunas três e assim por diante. Para nosso logotipo, temos a opção de usar uma ou duas colunas. Vamos com dois. A grade torna nosso processo de decisão muito mais simples. Só precisamos decidir entre dois tamanhos em vez de decidir entre centenas de tamanhos de pixels diferentes Ao redimensionar objetos, você verá as guias inteligentes que aparecem quando o objeto se alinha à borda da coluna da grade, o que o ajudará a dimensioná-los E vamos mudar a cor. A cor depende de você. Outra coisa que eu quero fazer é fazer esse retângulo arredondado Para fazer isso, precisaremos alterar o que é chamado de raio de canto Eu quero que seja completamente arredondado. Esse valor dependerá das dimensões do retângulo, então aumente-o até que esteja totalmente arredondado Não importa se você obtém um valor muito estranho. Esse é o nosso espaço reservado para o logotipo. Agora precisamos de links de navegação. Eu só vou duplicar essa caixa. Há algumas maneiras de fazer isso. As formas mais óbvias de usar Control C, Control V ou Command C, Command V no mac. Isso vai colá-lo diretamente na parte superior e, em seguida, você pode arrastá-lo de lá. Mas minha maneira favorita de duplicar algo é pressionar ou pressionar a opção no Mac e arrastar esse objeto Isso vai duplicar o objeto original. Vamos tornar esse pixel marrom menor e encaixá-lo em uma coluna apenas para que pareça um pouco mais com um link. Agora vamos arrastar mais alguns deles e alinhá-los com as colunas Guias rápidos vermelhos ajudam você com o alinhamento. No entanto, o Figma também pode fazer o alinhamento para você. Primeiro, precisamos selecionar os objetos que estamos alinhando. Você pode simplesmente arrastar um cursor ao redor dos objetos. Agora podemos alinhar esses objetos com uma dessas opções. Você provavelmente pode reconhecer as formas da lição anterior. A primeira opção alinhará os objetos à esquerda, mas não é isso que queremos Queremos que essa opção centralize os objetos horizontalmente. E certo, essa é a nossa barra de navegação. Agora, o resto do conteúdo. Ok, o que temos em nossa seção de heróis? Uma manchete, certo. Novamente, vamos duplicar esse retângulo e fazer com que pareça mais com um título Depois do título, geralmente temos um parágrafo explicando a empresa ou o produto Vamos desenhar uma coisinha que se pareça com um parágrafo. Tudo bem Esse é o nosso espaço reservado para parágrafos E depois do parágrafo, geralmente temos botões solicitando nos inscrevamos, aprendamos mais e assim por diante. E essa é a nossa seção de heróis. Vamos ver como fica sem a grade. É isso aí, um exercício muito simples para você começar a se familiarizar com o Figma e praticar as etapas iniciais do web design Não criamos nada útil, mas demos um passo muito importante. Jeff Pesos, CEO da Amazon, adora esse ditado latino passo a passo ferozmente É assim que vamos abordar esse curso. Vamos dar um passo de cada vez, levando-nos ferozmente ao objetivo final 10. Layout: importância da Hierarquia visual: conhecer links carros ponto com um dos sites mais aterrorizantes que eu já vi. O que isso torna alguns sites tão hilariantemente terríveis? E o que faz com que outros parece bem projetado já coberto? A primeira grande razão que o alinhamento desta página odeia alinhamento seu anti aliado. A segunda grande razão é uma hierarquia visual. Cada objeto nesta página esquecida por Deus exige nossa atenção ao mesmo tempo. Nós não sabemos onde olhar para onde começar nossa jornada, e isso pode ser tão esmagador que preferimos fechar a página. Agora esta página há uma hierarquia visual muito forte. Qual foi a primeira coisa que você olhou? Provavelmente, ou aquela arte colorida no passeio ou a manchete. Depois vem o resto dos elementos, um por querer. Essa composição nos levou pela mão e nos guiou passo a passo sobre o que era a informação mais importante Primeiro e segundo e assim por diante. Confira os dois botões. Há uma hierarquia clara, mesmo entre eles. Obviamente, o botão completo é o Alfa Doc. Isso é chamado de rocha alta visual, e é um princípio fundamental de um bom design. Hierarquia visual tem muito a fazer. A forma como a nossa atenção funciona. Nós simplesmente não podemos nos concentrar em mais de uma coisa de cada vez. Isto é especialmente verdadeiro fora da nossa visão. A única fração muito pequena do que vemos é uma alta definição. O resto é um periférico de baixa resolução, er, embaçamento periférico. Faça isso, faça um sinal de polegar para cima, coloque a mão na sua frente e olhe diretamente para a sua miniatura. E esse pequeno prego é a alta definição é a única alta definição que você vê o resto fora. É baixa rez e bastante embaçada. A hierarquia no experimento começa com um ponto focal. Tom Hanks sentado no banco é o alvo visual inegável deste cartaz. É o Hank mais interessante. Pense em um ponto focal como um holofote em um palco. Você vê como este estágio não é na verdade no final. É escuro e mais antigo, mas as linhas estão brilhando em Michael Jackson, tornando-o o ponto focal óbvio nesta fase. Se eles tivessem o palco completamente mentido, então todo o resto seria visível. Mas esse não é o objetivo deles. Nosso interesse visual é, obviamente, no Michael, e os designers de palco se certificaram de dar ao público exatamente que poderíamos este projeto gráfico o ponto focal desta composição? Ele é o herói principal nisso. É exatamente por isso que estamos a favor de dois gráficos principais nas páginas. O tiro do herói foi fazer uma pequena crítica sobre um dos meus primeiros trabalhos esta página de empréstimo que construiu para uma agência imobiliária. Eu encolhido um pouco quando eu vejo um erro de design no Sul meu trabalho inicial. Mas o que você vai fazer? É o processo de aprendizagem. O vilão claro deste trabalho é definitivamente uma falta de hierarquia visual adequada. As formas como estas sem sucesso tentando ser o ponto focal. No entanto, não é suposto estar em cima do Iraque. Não é a mensagem principal desta página. Então por que está tentando roubar tanta atenção quando há uma grande imagem de fundo como esta? Normalmente é porque queríamos ser o herói para o público começar por lá, mas isso não está acontecendo aqui. É escuro, baixa qualidade, e não está claro o que diabos está acontecendo na imagem. Sem mencionar como a enorme forma e os impostos cobrindo tanto fora que pega e maravilha. O que esta imagem está fazendo? Terríveis juntos? Não tem valor. É só adicionar mais barulho à composição. Jogar fundo seria uma grande melhoria para isso. O mesmo com a cópia. Não há hierarquia clara. É difícil dizer onde a manchete e onde começa o parágrafo, porque eles são tão semelhantes e estilo quando vemos um bom design, muitas vezes é uma hierarquia visual que contribui para sua beleza. O que está lá foi projetar um site ou um advogado chamado Vinson Schwartz. Qual é a coisa mais importante nesta página? Fácil. O fato de que ele é advogado de Boston ou é sua própria ficha? Ou a foto dele é que não sabemos? Porque não há hierarquia. Tudo parece, bem, não podemos realmente seguir a narrativa. Esta é uma história totalmente diferente. É 100% de melhoria, e eu não fiz muito. Eu usei alguns truques de design para criar uma hierarquia clara entre os objetos, e eu vou ensiná-los tudo sobre esses truques mais tarde nesta parte do curso, você possa pegar algo que se parece com um amador, colocando elementos em a página aleatoriamente e transformá-lo em guerra bem polida que você pode ser pago muito bem para. Vamos quebrar a alta classificação aqui. Temos um ponto focal? Obviamente, é a foto do Vincent e como é que o resto da alta está regulamentado? A segunda e a importância? Eu diria o crachá porque está perto do ponto focal. É parte disso. Assim, o espectador vai olhar para a imagem e o nome em um oh rápido que o título Bold All Caps . Quarto é na verdade o botão antes do imposto porque é ah, objeto maior com algum espaço em branco em torno dele. E, finalmente, isso tinha texto. Então, o que exatamente eu fiz aqui para criar essa hierarquia visual? Como é que isto? E quase nenhuma hierarquia? Mas isso tem um ponto vocal muito distinto e uma hierarquia visual claramente definida entre os elementos acreditam que isso tem a ver com tamanhos e pesos ou elementos. Tamanho e peso é o que geralmente define a hierarquia. Existem outras maneiras também, como contraste de colarinho ou imagens que atraem muita atenção e assim por diante. Mas os designers dependem principalmente do tamanho e do peso primeiro. O que eu fiz foi aumentar o tamanho da foto. Eu fiz dele o maior elemento. É isso. O que for o maior na tela atrairá mais atenção. É assim tão simples. O retângulo roxo atrás da imagem também está trazendo mais atenção para a foto. Sem ele, eu teria que fazer a foto muito maior. Então eu defini a hierarquia entre o parágrafo do título e o botão. Eu fiz a manchete Big, Bold e all caps. Não só Up fez o tamanho divertido muito maior do que o original, mas também tornou extremamente bola thes. Ousadia é o que eu me refiro como um peso muitas vezes elemento. Parece pesado nas famílias telefônicas. Você vai até ver o estilo chamado Habit. O parágrafo abaixo do título é significativamente menor do que o título. É como David and the go Hyah! É uma espera normal do telefone, tampas pequenas e tamanho do telefone pequeno e o botão que eu fiz transparente com apenas as bordas. Isso é comumente conhecido como Botão Fantasma. Normalmente, você não deseja usar isso como um botão primário, mas para ações secundárias e nos casos em que você deseja diminuir seu significado. É um ótimo uso. E por último, mas não menos importante, eu usei um alinhamento de massa para o conteúdo antes que tudo estava apenas centrado no meio. Eu abro o seu alinhamento central, mas muitas vezes ele não faz um bom trabalho e fazer o design olhar poli-lo e organizou o alinhamento esquerdo com concordou definitivamente faz um trabalho melhor como um exercício divertido. Quero que preste atenção aos desenhos ao seu redor. Preste atenção aos outdoors e cartazes, panfletos que as pessoas lhe entregam e, obviamente, os sites. E olha, se o designer usou uma boa hierarquia visual ou não, e a seguir, vamos praticar hierarquia, ficar por perto. 11. Tarefa: hierarquia visual: Neste vídeo, vamos praticar a hierarquia visual. Vamos pegar o conteúdo do site desse advogado e aplicar tudo o que já aprendemos sobre hierarquia visual e alinhamento, praticá-lo e aplicá-lo ao nosso exemplo É um vídeo de acompanhamento, então inicie seu Figma Vá para o arquivo Figma que eu vinculei nos recursos. Os arquivos vinculados devem criar automaticamente uma cópia em sua conta assim que você fizer login. Se estiver ao lado do nome do arquivo, ele dirá somente visualização ou bloqueado. Isso significa que não foi duplicado. Você precisará criar uma cópia do arquivo antes de poder editá-lo. Ao lado do nome do arquivo, clique na seta e selecione duplicar para seus rascunhos Isso criará uma cópia do arquivo em sua conta Figma e você poderá editar o arquivo conforme desejar Agora, vamos refazer esse design. Só precisamos aplicar o que já aprendemos até agora. Você verá como pensar em hierarquia e alinhamento cuidará da maior parte do design para nós Vamos começar com nossa grade. Lembra como adicionar isso? Temos que selecionar o quadro primeiro e, em seguida, a opção de grade de layout aparecerá no painel de propriedades. Assim como da última vez, as colunas de 12 a 30 pixels variam, mas desta vez têm uma margem de 60 pixels porque estamos usando uma moldura menor do MacBook em vez da área de trabalho A barra de navegação se encaixa perfeitamente nas bordas dessa grade porque é exatamente isso que eu estava usando ao projetar a barra de navegação Por esse motivo, podemos deixar a barra de navegação em sua posição. Você verá que os links na barra de navegação não se alinham com as colunas da grade, mas tudo Como eu disse antes, a grade é uma diretriz, não uma regra forçada Nem sempre precisamos interpretar isso literalmente. Se alinharmos o botão e os links às colunas, nesse caso, não obteremos os melhores resultados Por exemplo, uma coluna é muito pequena para o botão e duas colunas são muito grandes. Vamos pensar na hierarquia visual. Lembre-se de qual é o nome do objeto visualmente mais interessante, o ponto focal. Usar a foto como ponto focal é uma boa ideia. Quando você tem fotos, especialmente de pessoas, geralmente é uma ótima ideia torná-las o ponto focal. Então, como fazemos isso? Na última vez, usei alguns truques para chamar mais atenção, mas podemos ser mais simples do que isso Torná-lo muito grande sempre funciona. Quer que algo seja notado, faça com que seja um bebê grande. Simples assim. Por ser uma foto vertical, como você pode ver, ela não é uma boa foto de fundo. Em vez disso, podemos usá-lo na metade da tela. Ok, então essa foto está cobrindo a barra de navegação. Lembre-se do painel Camadas. Como é uma camada mais alta, ela cobre tudo o que está por baixo Precisamos movê-lo para baixo da barra agora. Podemos fazer isso arrastando-o no painel Camadas, mas maneiras mais fáceis de usar uma opção que faz isso por nós Clique com o botão direito na foto e selecione Enviar para trás. Isso enviará a foto até a parte de trás. Agora, a barra de navegação está no topo. Mas como o imposto da barra de navegação é obscuro, não podemos ver nada, vamos resolver isso Vou desativar o layout da grade para que eu possa ver melhor o que está acontecendo. Podemos desativar isso para todo o documento a partir daqui, mas você verá que costumo usar um atalho Vamos agora tornar os links da barra de navegação brancos. Bom. Vamos fazer algo parecido com o botão. Não é muito visível. Eu poderia, é claro, inverter as cores, deixar o botão branco e o texto escuro Mas uma opção mais bonita nesse caso é usar botão fantasma ou um semitransparente Altere o preenchimento do plano de fundo para branco e diminua a opacidade do preenchimento colorido para cerca de dez a 20% Eu realmente gosto desses botões semitransparentes. Eles têm uma aparência muito elegante. Você pode ver como nosso design está começando a tomar uma forma muito melhor com modificações muito simples. Temos um ponto focal inegável dessa composição. Agora, vamos organizar melhor nosso conteúdo e criar uma hierarquia visual entre eles. Primeiro, vamos alinhá-los à esquerda e encaixá-los em uma grade Agora temos que decidir qual será nossa mensagem principal. Aqui, temos que começar a pensar um pouco mais sobre nossos objetivos do site e dos visitantes. Ser designer não é apenas fazer com que as coisas pareçam bonitas. Muitas vezes, é pensar nos objetivos do seu design e em como alcançá-los com mais eficiência. Uma seção de heróis de quase todos os sites precisa responder a três perguntas para o usuário. Do que trata este site? O que vou conseguir com este site e como faço para obtê-lo? A primeira pergunta é: do que trata este site? Bem, é sobre Vincent Schwartz, que é advogado de divórcio em Boston Agora, dessas duas informações, nome dele e o advogado de divórcio de Boston, qual é a mais importante? Isso pode depender de alguns outros fatores. Por exemplo, se ele for um advogado conhecido, seria mais importante mostrar seu nome primeiro. Se ele não é conhecido, então é mais importante mostrar que esta página é sobre o advogado de divórcio de Boston. Digamos que saibamos do cliente que seu nome é uma informação importante e precisa ser exibido como a informação principal. Case, vamos tornar o nome grande e ousado. Vou aumentar muito neste momento porque o ponto focal, a foto, é muito mais proeminente que eu posso comprar um texto maior. No meu exemplo anterior, eu não poderia ser muito grande porque a foto era menor. Para a fonte do título, escolhi reproduzir como fonte de exibição e uso o estilo preto, que é sua forma mais pesada Há uma seção inteira deste curso dedicada à tipografia É um grande tópico em design, e você aprende muito sobre como escolher fontes de forma a deixar seus designs lindos. Neste exercício, você pode escolher a fonte que quiser, mas preste atenção na escolha dos pesos e tamanhos dessas fontes O peso da fonte pode ser selecionado aqui. quantidade de opções disponíveis aqui depende da família de fontes e de quantos pesos ela vem com Ok, como escolhi um estilo grande e pesado para o nome, vou fazer o oposto com o texto do advogado de divórcio de Boston. Vou manter a fonte que era , escolher um estilo leve e torná-la ainda menor. A legenda definitivamente não compete pela atenção O nome recebe todo o Spotlight, que é exatamente o que queremos A hierarquia entre os dois é clara. Em seguida, vamos ajustar o texto do parágrafo. Vou diminuir um pouco mais o tamanho do texto e pronto. O botão Eu vou viver como está. Vou apenas diminuí-lo, e isso será suficiente para diminuir sua importância. Isso é tudo. Está parecendo muito legal. E quanto à hierarquia? Temos um ponto focal? Pode apostar que sim. E quanto ao resto dos elementos? Temos nosso título que é o texto visualmente mais perceptível e, em seguida, o restante dos elementos com diferentes graus de importância visual E é isso. Se você não está acompanhando, agora é sua vez. Sinta-se à vontade para se desviar da nossa versão, se preferir. O importante é atingir dois objetivos, que são A, ter um ponto focal e B ter diferentes níveis de importância visual entre outros elementos. Depende de você se deseja usar cores diferentes, sem problemas, fontes diferentes, arranjos diferentes ou pode recriar minha versão pixel a pixel Não importa. O importante é que você comece a pensar como um designer e comece a perceber e ter uma hierarquia visual em sua mente o tempo todo 12. Layout: cuidado das ilusões ópticas: entre essas duas mentiras horizontais, apenas os leões, sem contar suas próprias cabeças, qual fora desta linha é mais longo, Assim como 8% das pessoas. Você provavelmente foi com a linha de fundo, mas a verdade é que eles exatamente o mesmo comprimento que esse tipo de ilusões ópticas acontecem o tempo todo . No design, você vai pegar dois objetos, medi-los e ver que eles são muitas vezes tamanho exato. Mas nossos olhos dizem que o círculo é um pouco menor do que o quadrado. Então, o que fazemos nesses casos? Nós vamos? O que diz o governante, ou confiamos nos nossos olhos? Na maior parte do tempo, vamos confiar nos nossos olhos. Isso significa que se um objeto parecer um pouco menor do que seu homólogo, precisamos compensar a ilusão de ótica e aumentar o tamanho ligeiramente até que ambos pareçam o mesmo tamanho. Então vamos ter que objetos que parecem do mesmo tamanho. Isso é mais importante do que seus tamanhos reais de pixels porque o público não vai tirar as réguas e começar a medir. Mas se algo parecer menor, eles acharão que deveria. As ilustrações são elementos gráficos comuns que você usará em seus projetos da Web. Muitas vezes essas ilustrações, ou Aikens, vão ter muito, uh, formas. Vai fazer o mesmo tamanho. As ilustrações parecem muito diferentes umas das outras. Neste exemplo, Envelope on the Laughed parece maior. É dominar o ícone à direita quando eles devem ter hierarquia igual. Embora seus tamanhos sejam idênticos, eles têm a mesma altura e o mesmo com, mas o envelope tem corpo muito mais cheio em comparação com aquela tenda. Isso é o que os designers costumam se referir como as formas de sair do objeto, e objetos mais pesados parecerão maiores. Eles parecerão mais largos ou mais altos, então precisamos compensar manualmente o corpo tenso e mais leve aumentando suas dimensões reais de pixels. Não há regra sobre quanto aumentar. Isso tem que ser feito por eu aumentá-lo até que eles se sintam como tamanho igual. Em seguida, você terá uma composição equilibrada que se sente alinhada com os tamanhos correspondentes. Estes pequeninos dizem-nos é o que faz a página parecer que foi desenhada por um amador ou um profissional. A maioria dos Web designers e desenvolvedores que não têm um fundo em design gráfico ou qualquer coisa projetado relacionado. Eles medem as coisas por uma régua. E o que acontece é que os resultados saem para ser inconsistente e bastante desajeitado, recusado ou o usuário não vai notar o que está exatamente errado com uma página. Eles vão notar isso, mas eles não vão saber exatamente o que está fora com ele, mas eles vão falhar que a página não é citação unaspas projetado. Aqui está outra ilusão óptica muito comum. Este waas, um dos primeiros, é a menos que eu tenha recebido do meu mentor de design. Sempre que precisamos colocar algo, por exemplo, imposto dentro da caixa, o que se costuma fazer? Encontre o meio exato fora do recipiente no lugar lá, elemento bem no centro. O problema com isso é que o texto parece estar afundando. Até parece que o espaço acima do Texas é maior em comparação com o espaço abaixo dele, sensação de afundamento não é uma boa impressão para qualquer design. Em vez disso, o que queremos fazer é entalhar o imposto um pouco em direção ao topo, que pareça que está flutuando para lembrar facilmente. Pense nisso como um navio afundando. Não é um bom navio flutuante. Ótimo. Isso não significa que você deve sempre empurrá-lo para cima em vez de alinhá-lo exatamente no meio. Às vezes não será necessário. Dependerá da tipografia, espaçamento e assim por diante, assim como todas as ilusões ópticas. Ou ele aparece, ou não precisa consertar uma ilusão se ela não existe. Mas se você ver isso afundando, o fato, então conserte-o. Na verdade, objetos mais pesados vão sentir como se estivessem afundando Mawr, e objetos mais leves tendem a sentir como se estivessem flutuando. É loucura como isso é preciso para um mundo real. 13. Layout: proximidade: Uma coisa. Os designers iniciantes tendem a fazer um espaço para fora elementos igualmente na página. Principalmente, eles fazem isso para preenchê-los para o espaço porque todos os designers iniciantes têm medo de espaço vazio . Mais sobre isso na lição posterior. Mas o que o design realmente gosta é agrupar elementos mais próximos uns dos outros se eles têm algo em comum. Este é um conceito de design chamado proximidade. A idéia básica de proximidade é que pensa que estão relacionados devem ser próximos, e coisas que não estão relacionadas devem ser mais distantes. Neste exemplo, eu movi todos os links de navegação mais próximos uns dos outros porque eles estão relacionados. Eles têm o mesmo contexto. Agora o título está mais próximo do texto abaixo porque eles estão relacionados. Os botões estão um pouco mais longe do imposto, mas dois deles estão próximos um do outro porque são bastões de ação semelhantes. Ambos oferecem o que fazer a seguir, e finalmente o pequeno imposto por baixo do botão verde. Eu me movi muito mais perto do fundo porque é uma espécie de descrição fora dos botões para que ele possa até mesmo existir sem ele. Agora, o que acontece se você colocar elementos não relacionados perto um do outro bem, isso implicará em relação, que na verdade não existe. Por exemplo, se colocarmos um slogan ao lado dos links de navegação porque fora de sua proximidade, os usuários facilmente confundirão o slogan com um item de menu e pensarão que é um link clicável de clipe , especialmente se aqueles elementos têm um estilo semelhante. A proximidade é uma diretriz de design muito útil. Não só torna o conteúdo fácil de entender e digerir para o usuário, mas também o torna bonito e design. E eu acho que você sabe que coisas que são simples e fáceis de entender é bastante bonito para os usuários. 14. Como usar tipografia maravilhosamente: cada site lá fora tem texto sobre ele, e um monte de design depende de como selecionamos esses estilos tributados. Isso é chamado de tipografia. Tipografia não é apenas escolher o telefone certo. Trata-se de escolher a combinação desses telefones, os diferentes estilos, como magro, ousado e regular e esperar, escolhendo tipos de letra e telefones certos para as ocasiões certas e contatos brilhantes. A topografia pode fazer o nível do site e com excelente legibilidade. Ou pode torná-lo infantil, ou talvez fora de contatos ou parecer confuso e muito difícil de se livrar. Você pode facilmente ter um site que é apenas tipografia e ainda fazê-lo parecer bom e projetado sem quaisquer elementos gráficos. Na verdade, o site mais popular do mundo é principalmente apenas texto. Se os impostos são importantes no design, então deve haver algumas regras e diretrizes sobre como escolher o e usá-los, certo? Você pode apostar que há, e você vai aprender tudo sobre eles em poucos centímetros menos. Seguir as diretrizes simples fará com que seus projetos fiquem ótimos. Você vai me ouvir usar os termos tipo de tipo de tipo e caído intercambiavelmente tipo de abreviação para letra, ea diferença entre tipo de letra e fonte é este, neste caso. Olá, família de tipos de letra Vatikai za que tem muitos estilos de telefone diferentes nele, como luz, negrito e assim por diante. Não importa qual termo usamos, não realmente, mas ainda é bom saber a diferença e não ficar confuso. Lembro-me que estava confuso no início porque todos usavam o que queriam e ele tinha telefones, tipos e tipos e tipos de letra, e eu pensei Estou usando a coisa certa para meus projetos? 15. Tipografia: Typeface vem com uma personalidade: cada vez. O rosto tem personalidade. Alguns são divertidos e brincalhões, riscas de verão e loiros, e alguns se sentem acadêmicos e extravagantes. A personalidade de uma fonte é tão importante quanto escolher a roupa certa para a ocasião certa . Você não quer estar usando shorts cargo em um encontro. Em restaurante ofensivo, por exemplo, um tipo chamado Proxima Soft seria muito adequado para uma página de férias de inverno, mas seria completamente fora de lugar em uma página que vende espaço de escritório de luxo. Por que esse é o caso? Porque Proxima Soft tem uma personalidade casual e amigável, assim como o nome Heene. As escadas são macias e arredondadas. Parecem que foram feitos da neve. Seria adequado para sites que estão relacionados a dias santos ou Crianças. Comida casual, talvez para sites que querem se sentir amigáveis e acessíveis. Por que não funciona para o site de luxo do imobiliário? Para começar, a foto nos diz muito. Você vê que raia arquitetura retangular er, que já está ditando o humor fora desta composição. É pedir algo listrado e direto, mas o mais importante, come o contexto. luxo é a ala chave, e não há nada de luxo no Proxima Nova Soft. Por outro lado, um tipo chamado Adoni seria um excelente ajuste para esta página. É um tipo de letra clássico. Parece sério, reto e chique, mas moderno. Exatamente as palavras que você usaria para descrever um espaço de escritório de luxo. Mas como podemos dizer qual é a personalidade do tipo? Na verdade, não é tão difícil. Existem certas classificações que cada tipo de letra se enquadra. Aqueles já contam muita história sobre o tempo. Vamos passar por eles na próxima lição. E depois disso, vamos fazer um pequeno exercício para praticar personalidades de fase de protótipos. 16. Tipografia: categorias de fontes: A classificação das categorias de tipos de letra facilitará a escolha do tipo de letra certo e da fonte certa para o seu projeto, porque muita personalidade depende da categoria, da categoria geral à qual pertencem Em primeiro lugar, a maioria das fontes se enquadra nesses dois campos, Serif ou Sans Serif A diferença é super simples. Essas caudas na carta são chamadas de serifas. Em francês, sans significa sem. Então Sans Serif significa sem Serif fácil assim. Além dessas duas grandes categorias, temos mais duas. Display, às vezes chamado de decorativo e escrito. Vamos examinar cada um. tipos de letra Serve têm três estilos distintos. São de estilo antigo. O estilo antigo é o estilo mais popular em Serafons. É um tipo de letra clássico e tradicional que remonta a muito tempo. Esse é o estilo mais comumente usado na impressão, e a maioria dos livros será ambientada nesse tipo de letra No entanto, no web design, serifons de estilo antigo estão começando a aparecer apenas o material impresso tem maior definição em geral do que Serifas e letras minúsculas são mais difíceis de ver na tela devido às resoluções mais baixas e à tela cintilante Essa foi a principal razão pela qual fontes San Serif se tornaram o estilo dominante no design digital Embora hoje as telas estejam se tornando cada vez mais altas, as fontes Serif estão voltando, especialmente em blogs e letra de estilo antigo, assim como o nome diz, tem uma personalidade muito clássica Eles podem ser usados para sites que desejam mostrar uma aparência refinada e clássica, por exemplo, restaurantes sofisticados, instrumentos musicais, escritórios de advocacia, etc Mas também pode ser bastante neutro e usado para sites não clássicos, especialmente para texto de parágrafos pois oferece ótima legibilidade letra serifados modernos podem ser bastante semelhantes ao estilo antigo A melhor maneira de saber se a fonte é moderna é pela serifa plana Como você pode ver, o Oldstyle tem uma serifa inclinada, mas o moderno Outra característica muito distintiva é o contraste dramático entre coisas grossas e finas Observe como a primeira perna do A é fina como um fio de cabelo. Mas o segundo é grosso como um poste. Os tipos modernos são frequentemente usados para moda e todas as coisas de luxo. Embora não estejam limitados a isso, ele pode ser usado para qualquer coisa em que você queira retratar uma personalidade séria, moderna e refinada No exemplo anterior, usei exatamente o tipo de serifa moderno chamado Bedni No entanto, eu reservaria fontes modernas apenas para manchetes e grandes tecnologias Geralmente, esse é o objetivo principal para o qual eles foram feitos, e eles não têm uma boa legibilidade para textos longos Você não gostaria de ler uma postagem de blog inteira escrita em Onyx As faces do tipo laje são caixas, as porções são planas e não têm contrastes espessos e finos como as outras duas Os telefones Slap são adequados para qualquer coisa que pareça mecânica ou forte Assim como o estilo moderno, não é bom para parágrafos, reserve-o apenas para títulos família sensorial será o tipo principal que você acabará usando na maioria dos projetos É o mais versátil. Ele pode se adequar a um design com uma ampla variedade de personalidades. É o morcego mais seguro de todos os estilos. Ele pode funcionar perfeitamente tanto para parágrafos pequenos quanto para textos de exibição grandes, como títulos Existem alguns estilos diferentes na família Sensor, como grotesco, geométrico e humanístico Não vou abordá-los em detalhes porque não há uma distinção significativa entre eles para que uma distinção significativa entre eles para eu atribua uma personalidade dominante a cada um Você já tem muitas informações em seu prato, então vamos economizar seu poder cerebral para as coisas mais importantes. Quando se trata de fontes San sari, elas precisam ser julgadas individualmente, pois podem abranger uma grande variedade de personalidades, desde divertidas e suaves até sérias e conservadoras Eu dividi os estilos porque eles podem ser unificados com muito mais facilidade em uma categoria útil, como se quase todas as serifas de estilo antigo tivessem a mesma personalidade tradicional clássica Se eu realmente tivesse que generalizar a personalidade das fontes San serif, diria que elas têm principalmente moderno, sério e neutro letra decorativos ou de exibição geralmente são os que têm a personalidade mais forte, mas isso não significa que seja uma coisa boa Pelo contrário, eles têm o potencial de serem muito tolos. Sua personalidade pode variar desde o tipo que parece uma escrita em um quadro-negro até algo que pode ser bastante elegante Na maioria das vezes, você gostaria de ficar longe desses tipos de rostos por causa de sua personalidade implacável Mas às vezes eles vêm em estilos mais neutros e elegantes e podem ser muito bonitos No entanto, não importa o quão neutro pareça, você nunca deve usá-lo para texto de parágrafos, apenas para títulos grandes Os tipos de letra do script são baseados na caligrafia. Assim como a exibição, muito raramente você usará o estilo de script. Embora possa haver momentos em que elas sejam muito úteis, por exemplo, se você criar um site para uma creche, uma fonte manuscrita divertida pode dar ao site uma personalidade agradável, mas apenas para o mas apenas O mesmo que exibir, não use scriptyle para texto de parágrafo. A maioria dos tipos de letra foi projetada com uma intenção específica O designer tinha uma intenção e um destino para esse tipo de letra, e geralmente eles o colocam dentro da descrição ou fonte, seja qual for o manual dependendo de onde você obtiver o tipo de letra, e você terá o tipo de descrição de onde poderá usá-lo Aqui está uma dica profissional. Se a descrição do tipo de letra disser que ele foi feito para uso geral , isso significa que é seguro usá-lo para parágrafos e textos longos Mas se disser que era display, certo, foi feito para exibição, então isso significa que mesmo não estivesse na categoria de exibição, isso significa que a intenção do designer era usá-lo para grandes manchetes Portanto, nunca o use para algo como parágrafos ou textos grandes e longos, porque eles simplesmente não serão adequados para isso Por exemplo, este é um telefone do Google chamado Railway. É bastante popular. seção diz que o tipo de letra é destinado a exibir textos como manchetes e textos grandes, mas muitos web designers o têm usado para texto de parágrafos, criando milhares de sites, temas e modelos com baixa legibilidade de parágrafos Isso poderia ter sido evitado se eles tivessem acabado de ler o manual. Muitos web designers não tiveram nenhum treinamento em design. Aprender essas diretrizes e segui-las definitivamente causará uma overdose de vantagem, mesmo que eles tenham anos de experiência 17. Tarefa: personalidade do tipo de fonte: Aqui está um exercício divertido sobre personalidades tipográficas. Eu escrevi sete frases diferentes neste arquivo Figma. Eu quero que você escolha o tipo de letra para cada frase que você acha que é adequado para ela Você pode usar fontes instaladas no seu computador ou fontes do Google que vêm com o Figma O Google Fonts é um ótimo repositório de muitas fontes gratuitas, mas com um design bonito Quando você clica no seletor de fontes no Figma, ele oferece opções as fontes instaladas no seu computador e também as fontes do Google Usar fundos diretamente dessa lista suspensa é muito útil. Em vez disso, o que podemos fazer é acessar o site do Google Fonts e encontrar o tipo de letra certo Mas antes de fazer isso, primeiro precisamos entender o que realmente estamos procurando. Imagine que estamos criando um site para cada uma dessas empresas, precisamos escolher os tipos de letra adequados Precisamos ter uma ideia do que funcionaria, boa aparência e seria adequado para cada um desses setores. Aqui está um processo simples sobre como resolver isso. Vou usar o preparador físico para a demonstração. Vou pegar as palavras-chave importantes a partir daqui. Isso seria fitness ou fitness coach e Google Images, para que eu possa encontrar exemplos de que tipo de fontes estão sendo usadas para o tema fitness. Mas apenas fitness ou preparador físico não é suficiente. Isso não nos dará exemplos de design. Para obter exemplos de design e tipografia reais, precisamos adicionar palavras-chave como revista, pôster, marca, logotipo, site, anúncios e agora podemos criar uma boa ideia sobre que tipo de tipografia é Podemos ver muitos telefones maiúsculos, grandes e ousados, telefones maiúsculos, grandes e ousados que faz muito sentido porque condicionamento físico está associado à força, músculos volumosos Combine isso com o que você já aprendeu sobre categorias de tipos de letra e pronto Então, para o preparador físico, estou procurando um tipo de letra que seja simétrico e volumoso, algo que fique bem Primeiro, vou digitar minha frase em letras maiúsculas porque esse é o estilo que eu quero verificar. Usar nosso texto real para a pré-visualização facilita muito a busca pela fonte certa. Agora vou filtrar meus resultados de pesquisa. Temos filtros diferentes aqui, bastante semelhantes às categorias que já discutimos. Temos o Serif, que tem uma personalidade clássica, refinada e luxuosa, obviamente não muito adequada para fitness O Slab Serif potencialmente poderia funcionar para exercícios físicos. Tem uma personalidade mecânica e forte. Sanseri moderno minimalista neutro funciona com fitness porque funciona com qualquer coisa Dentre essas categorias para o tema fitness, Sans Serif é o melhor lugar para escolher Infelizmente, não consigo ver as versões em negrito dessas fontes diretamente daqui Isso teria sido uma ideia. Em vez disso, vou ter que verificar a versão em negrito individualmente na primeira página. Montserrat é uma excelente opção. É pesado, forte e volumoso, assim como os músculos. Gosto de como cada letra é equilibrada e simétrica. Mas antes de escolhermos isso, lembre-se do que precisamos fazer primeiro. Precisamos ler o manual. Vamos garantir que o designer não pretendesse esse tipo de letra para algo que não seja adequado para exercícios físicos Diz que foi inspirado na tipografia urbana, que é adequada para nós Ele até menciona palavras-chave como trabalho e dedicação. Bem, isso não é ótimo? O trabalho e a dedicação estão diretamente relacionados ao condicionamento físico, feito. Essa é a nossa fonte. Em seguida, acesse o arquivo da tarefa e aplique a fonte ao texto É importante observar que os arquivos de tarefas que compartilhei com você devem ser duplicados automaticamente quando você clica neles Dessa forma, você obtém a cópia do arquivo em sua conta Figma Mas se você perceber que o arquivo não é editável, nesse caso, provavelmente não foi duplicado Um dos motivos seria porque você não está logado no Figma no seu navegador Você precisará fazer o login e tentar clicar no link mais uma vez. Se ainda falhar na criação de uma cópia, acesse myfile e duplique-a neste pequeno menu suspenso Agora esse é o seu próprio arquivo Figma e você pode editar como quiser Todas essas duplicatas são salvas automaticamente em sua conta Figma em Então, no seletor de fontes, vou selecionar Montserrat Como padrão, ele estará no estilo normal, mas eu quero que seja grosso e ousado. Vou selecionar seu estilo mais ousado, que é chamado de preto neste caso Além disso, quero que esteja em maiúsculas. Claro, posso digitar mais uma vez com o caps lock ativado, mas há uma maneira mais fácil de fazer isso Este link aqui abre configurações extras, e aí podemos selecionar letras maiúsculas Dessa forma, não importa como eu digite minhas letras maiúsculas ou não, elas serão exibidas em maiúsculas e você poderá remover as maiúsculas Também é aqui que você tem opção de sublinhado, se necessário Nesta caixa, quero que você explique seu processo de pensamento sobre por que escolheu a fonte. Então, no meu caso, eu escreveria o que já descrevi. Não pule esta última etapa. Para se tornar um designer, você precisa começar a pensar como designer para realmente ter uma compreensão mais profunda de cada etapa e decisão que você toma. E, na verdade, clientes, seus clientes definitivamente apreciarão isso. Eu lembro que eles sempre faziam isso. Eu enviaria este e-mail com, você sabe, passo a passo, as principais decisões de design que eu tomaria sobre tipos de letra ou fontes e coisas assim E no começo, eu gosto de fazer isso, mas depois fiquei meio preguiçosa E quando eu não escrevi essas descrições do meu processo de pensamento por trás disso, as revisões aumentaram porque agora eles não confiavam na escolha que eu havia feito E eles queriam revisar e, você sabe, mudar fontes ou mudar cores ou coisas assim porque pensaram que eu as escolhi do nada Então, definitivamente, pratique isso. E então, quando você trabalha com seus clientes, mostre a eles quanto processo de pensamento foi colocado nos bastidores. 18. Tipografia: configurando o tipo: Este é o título de abertura do filme “Gravity”. Preste atenção em como o tipo é definido. Aqui está outro da ascensão do Cavaleiro das Trevas ou este de interestelar. Você notou a semelhança? Todos os três têm um espaçamento muito amplo entre letras. Outro espaçamento é um dos atributos que podem mudar sobre o telefone e personalizá-lo de acordo com suas necessidades. Você pode torná-lo muito apertado e confortável, ou você pode torná-lo agradável e arejado. Esse tipo de espaçamento extra branco é chamado Panorama. É um truque de design muito legal, e ele meio que cria é bom, acabado e refinado. Olhe e acrescenta uma importância extra ao imposto e faz com que pareça que está dizendo algo muito importante. Se você está preso com um design muito chato e sem graça, você pode definir o seu tipo em Panorama e vai instantaneamente Teoh. Dê um visual agradável e refinado. Por exemplo, se eu precisar adicionar um título extra a um imposto de bloco que já tenha um título, posso pegar esse título secundário e defini-lo em Panorama. Seu título secundário agora é muito interessante comparado com o que tínhamos antes. Isso parece mais deliberado é mãos secundárias não competindo com a manchete original. Ele tem seu próprio estilo específico, então eu vou ser capaz de repeti-los em outros blocos similares de imposto e ser muito identificável. Um grande benefício da configuração de fonte Panorama é que ele permite que você encolher seu telefone para tamanhos muito pequenos sem perder a legibilidade. Eu removi o efeito panorâmico aqui, e o imposto tornou-se muito menos legível. Isso significa que eu teria que aumentar o tamanho da frente, mas isso agora compete demais com a manchete principal. Eu queria ser a informação secundária, mas quase se tornou o título principal. Uma coisa a notar. Ao definir o tipo desta forma a maior parte do tempo, você deve usar maiúsculas. Este efeito realmente não funciona enquanto em letras minúsculas. Ok, então isso é sobre o espaço em branco. Mas que tal um espaçamento mais apertado? Quando iríamos querer usar isso? Um? Tais casos, ao lidar com texto grande e pesado em espaços de texto grandes entre letras, são proporcionalmente grandes. Por exemplo, eu estava trabalhando em um site para uma empresa de compartilhamento de scooter, Como você pode ver, divertido um enorme tamanho divertido que é bastante ousado e feliz. O espaçamento de letras padrão para estes sentiu um pouco muito espaçado para fora para mim, então eu adicionei um negativo letras básicas. Se estou usando uma manchete muito ousada e grande, quero criar um imposto que pareça ousado, pesado e concentrado em um espaço apertado. Um espaçamento letra refree é o oposto do que eu quero alcançar, então eu apertei as coisas. Neste caso. Na maioria das vezes, você deseja manter o espaçamento padrão da escada para o imposto. Mas, em casos específicos, você não tem a capacidade de personalizar o telefone de acordo com suas necessidades de acordo com a regra geral. Se você estiver ajustando a letra, o espaçamento que aumenta o espaçamento conforme o telefone fica menor ou mais leve e diminui a base, a vitória fica maior e mais ousada . Vamos comparar esses dois blocos de impostos idênticos. É o mesmo tamanho de telefone, e o texto é exatamente o mesmo. Sua diferença está em seu espaçamento de linha ou altura de linha. O tipo é colocado em tamanho aéreo de 25 pixels. O parágrafo esquerdo tem uma linha padrão alta, mas à direita, um aumentou. O valor alto da linha padrão fora da área é muito apertado. Isso torna o imposto mais difícil de ler e seguir o aumento do espaçamento entre linhas nos segundos blocos. Texto misto mawr Airy. Parece menos pesado, mais fácil de ler. E mesmo que seja mais longo em tamanho, ainda parece menos intimidante que o original. Impostos intimidantes algo para Wolcott. As pessoas geralmente não lêem texto em sites. Eles escaneiam. Eles estão procurando freneticamente palavras-chave e frases para encontrar o que estão procurando ou para decidir se o site é relevante para eles completamente. O texto no passeio irá ajudá-los a digitalizar impostos mais facilmente e encontrar o que eles estão procurando. Você pode tentar você mesmo positividade e tentar ler cada imposto tão rápido quanto você não pode. Você vai notar que você vai ter muito é a sua velocidade e mais rápida no texto à direita, O espaçamento de linha original vai se sentir como correr em uma cadela arenosa, um pouco arrastado e lento. Esta questão fica extremamente evidente quando lidamos com blocos de texto amplos. Quando você terminar de ler uma linha de imposto neste bloco, saltar da esquerda para a linha de busca seguinte é um desafio. É muito fácil se perder, e você tem que confiar em conectar links com contexto ou ah, dedo ou régua. Os telefones antigos vêm com suas próprias linhas padrão voltadas e ele muda com base no tamanho do telefone . Alguns telefones que são muito bem feitos e bem equilibrados terão melhor espaçamento entre linhas do que outros. Este, por exemplo, é um dos meus tipos favoritos, chamado Avenir. A linha padrão 34 pixels de Heidi no tamanho específico do telefone. Como pode ver, não é muito diferente do ajuste que fiz para a antena. Então, neste caso, eu poderia até deixar o espaçamento entre linhas como seu valor padrão. Agora, há momentos em que você precisa encolher as linhas voltadas em vez de aumentá-las. E isso é geralmente quando se lida com imposto grande e muito ousado, especialmente em maiúsculas a linha padrão. Esconda sobre estes impostos um pouco de área para mim. Eu escolhi todas as capitais e telefone pesado para fazer as manchetes roxas pesado e forte, concentrado em um só lugar. Então, neste caso, eu vou diminuir a linha alta apenas um pouco. Agora. Esta versão é exatamente o que eu estava procurando. Podemos pensar nisso como uma gravidade ter seus objetos têm gravidade mais forte, então eles empurram incomodar objetos mais perto e mais leves? Não tanto, então eles estão flutuando no espaço e Fillmore Airy, falando de pontos de telefone, mentir regular, semi-ousado, ousado parafuso extra com linha fina preta e assim por diante. Isso que foi chamado de pesos de telefone ou estilos ou espessura. Cada tipo de letra terá seu próprio conjunto de pesos, alguns mais do que outros. As coisas, por exemplo, são pesos de telefone desligados. Um telefone Google muito popular chamado Open Sense tem cinco pesos diferentes. Área, por outro lado, tem apenas dois regulares e arrojados. O tipo de letra que tem estes pequenos pesos é muito difícil de trabalhar com. Em um site moderno, você tem tantos lugares diferentes que você precisa proteger em parágrafos em botões, barra de navegação, menus suspensos, manchetes, títulos secundários, links de rodapé e muito mais. Se você escolher um rosto alto que tem apenas dois pesos regulares e puxar, você vai lutar muito quando você precisa criar uma hierarquia e contraste entre uma manchete , um ESOP tinha você é basicamente deixado com o tamanho do imposto para duelar o pesado levantando imposto branco regular sobre fundo escuro às vezes parece pedra Para compensar esta ilusão óptica, você pode querer usar o peso mais leve. O imposto sobre esses dois carros agora parece o mesmo peso Mas no exemplo anterior, o direito tributado parecia mais pesado. Deixe-me mostrar-lhe que mais uma vez, leve e regular, outra situação em que podemos precisar ajustar o peso do telefone está em texto grande aumentou o tamanho fora do telefone. Torna-se mais pesado tanto deste peso irregular neste caso. Mas como o primeiro é muito maior, são corpos mais grossos e pesados. Às vezes queríamos parecer peso semelhante, apenas tamanhos diferentes. Nesse cenário, teremos que emparelhar os estilos leves e regulares. Agora, o imposto grande e o texto menor se sentem mais como eles estão fora do mesmo peso. Você pode fazer isso na outra direção para, tornando os ataques menores um pouco mais ousados, você vai precisar de algo como semi careca. Neste caso, se o seu tipo de letra não tem pesos suficientes, então suas mãos estão apertadas e você não será capaz de obter resultados ótimos. Escolha tipos de letra que são versáteis e têm número suficiente de pesos. A maioria dos rostos de gravata usados pelo motor e geral hoje terá pelo menos quatro maneiras, que é decente o suficiente. Alguns rostos completos de gravata terão nove pesos diferentes, como este tipo chamado Montserrat. Você não vai ficar fora de espera aqui, então temos espaçamento de letras, esconderijo de linha e espera de telefone. Estes atributos nos ajudam com duas coisas principalmente quer é tornar o imposto fácil de ler, especialmente sobre o corpo e grande imposto. E segundo, para alcançar uma hierarquia visual realmente boa entre elementos diferentes, elementos de texto, obviamente na página e na próxima lição, vamos praticar essa configuração de tipo exato entre a linha Alturas para onde você envia todas essas coisas, fique por perto. 19. Assignment: tipo de configuração: topografia é importante para o web design, e aprender a definir o tipo corretamente fará de você um web designer superior Neste vídeo, faremos um pequeno exercício divertido sobre a configuração do tipo, que basicamente significa simplesmente dizer que é escolher o tamanho certo da fonte, altura certa das linhas, os pesos da fonte e o espaçamento entre letras Isso é tudo. Basta combinar todos esses quatro elementos diferentes para fazer algo parecer deliberado. Como de costume, você encontrará esse arquivo figma nos recursos, na página que eu vinculei ou nos recursos deste vídeo E neste arquivo Figma, eu organizei cinco blocos de texto Cada um tem um título e um parágrafo. Cada um desses blocos é configurado em faces de texto diferentes, a mesma face de texto para o título e o par de parágrafos O nome do tipo está aqui na esquina. Não se preocupe com o conteúdo. É um texto fictício que eu gerei aleatoriamente. Quero que você analise cada um desses blocos e melhore a configuração de tipo de cada par. Seu objetivo é conseguir duas coisas. Primeiro, boa legibilidade do texto. Isso pode ser conseguido ajustando principalmente os tamanhos do telefone e as alturas das linhas Todos os blocos de texto são definidos em suas alturas de linha padrão para alguns desses telefones Sua altura de linha padrão pode ter uma legibilidade muito boa, como o crimson tax aqui, mas para outros, pode ser um pouco Não há regras específicas para alturas de linha. Basta medi-lo com base no seu olho e aumentá-lo para cima e para baixo e ver o que é mais agradável para você ao lê-lo. O mesmo vale para o tamanho da fonte. Eles estão todos configurados em 16 pixels, mas, como você pode ver, 16 pixels são bem diferentes um do outro. Por exemplo, 16 no imposto carmesim é muito pequeno. Em segundo lugar, seu objetivo é conseguir uma boa hierarquia entre o título e o parágrafo Lembre-se de nossa lição sobre hierarquia, certo? A hierarquia visual torna o design mais fácil seguir e mais agradável aos olhos Você pode obter essa hierarquia entre o título e os textos tornando o título muito grande ou muito pesado, ou ambos Para atingir esses dois objetivos, você pode ajustar o tamanho da fonte. Em segundo lugar, o peso da fonte. E as alturas das linhas. Não precisa se preocupar com o espaçamento entre letras. Apenas mantenha-os como estão. Além disso, não altere o tipo de face ou a cor, mantenha-o como está. Você pode ajustar a posição de cada caixa de texto. Na verdade, você provavelmente precisará ajustá-lo porque, ao começar a definir seu tipo, as coisas precisarão ser movidas adequadamente. Mas eu quero que você mantenha a largura de cada caixa de texto como está Eles têm todos 500 pixels de largura no momento. Quero que você trabalhe dentro dessas restrições e defina seu tipo da melhor maneira dentro dessas dimensões A altura da caixa se ajustará automaticamente. Deixe-me demonstrar o primeiro. Primeiro, verifique se você ampliou seu Canvas para 100% Caso contrário, você não verá o tamanho realista. Há muitas maneiras diferentes de aumentar e diminuir o zoom no Figma As duas formas mais comuns são apertar o mouse no laptop. Isso provavelmente funcionará em laptops mais novos que oferecem suporte à ação de pinçar multitoque ou outra forma, com a roda do mouse e enquanto mantém pressionado o controle ou o comando E com o mouse bem, basta rolar para cima e para baixo e, enquanto você segura o controle ou o comando , ele aumenta ou diminui o zoom. Ou minha forma favorita, que é apenas aquecer o atalho shift zero, e isso vai aumentar instantaneamente o zoom em 100% Você pode ver o atalho acessando algumas opções e, na lista suspensa, você pode ver que o Zoom to 100% tem esse A maior parte do seu trabalho de design deve ser feita nesse estado normal. Caso contrário, você não verá uma imagem realista de tamanhos e proporções. No entanto, não há problema em aumentar e diminuir o zoom quando necessário, por algum motivo. Depois de nos certificarmos de que estamos trabalhando em um estado normal de zoom, primeiro ajustarei o título. Eu quero que seja fino. Abaixo do nome da fonte, você pode selecionar a espessura da fonte Como mencionei anteriormente, as opções disponíveis aqui dependem da própria família de fontes e se você instalou todos os estilos disponíveis no seu computador ou se ele veio com o Figma Eu seleciono o fino. Agora, para conseguir uma boa hierarquia visual entre o título e o gráfico pirográfico, eu deveria aumentar o tamanho do Como escolhi um título fino, deveria torná-lo ainda maior do que eu faria com um tecido mais pesado Estou pressionando uma seta para cima aqui, que aumenta o tamanho do telefone em um pixel. Ao ampliar meu texto, também presto atenção em onde estão minhas isenções fiscais Como a largura da minha caixa de texto é fixa, só posso deduzir o imposto com base em seu tamanho ou peso. A redução do imposto é importante porque você não quer que o imposto seja reduzido em um lugar estranho, como por exemplo, em um artigo A e a palavra pulando na segunda linha Isso não é uma boa legibilidade. Nesta frase, a melhor quebra de linha é quando um telescópio está na segunda linha ou quando se compra um telescópio está na segunda linha. Eu até prefiro a segunda versão porque há uma quebra lógica na frase, o básico do quê? Comprando um telescópio. Gosto muito da aparência do título. Agora vou ajustar o texto do parágrafo. Na maioria dos casos, eu não tocaria no peso do parágrafo e o manteria regular. Normalmente, o texto normal é a melhor opção para o texto do parágrafo, mas como eu deixei o título bem fino, o parágrafo parece pesado em comparação e está roubando muita atenção do Lembre-se de que, na hierarquia visual, definimos claramente qual deve ser o elemento mais perceptível, depois o segundo mais perceptível e assim por diante Agora vou aumentar a altura da linha desse parágrafo. A altura padrão da linha dessa fonte, que é Roboto Roboto Não tenho certeza de como você pronuncia isso. É muito apertado. Não é uma boa experiência de legibilidade. Vou aumentá-lo a partir desse campo de altura de linha. Tudo bem. Isso parece ótimo. O título é fino e elegante, mas ainda chama a atenção principal, e o parágrafo t é fácil de ler, uma melhoria em relação ao que era Deixe-me mostrar o que eu mudaria se optasse por uma manchete pesada Nesse caso, eu realmente diminuiria a altura da linha do texto do título Lembre-se de que, conforme expliquei na lição, ao lidar com textos grandes e em negrito, talvez precisemos reduzir a altura da linha Isso porque as letras têm atração gravitacional e objetos mais pesados se unem Nesse caso, vou retornar o texto do parágrafo ao peso normal. Geralmente evito usar pesos finos no texto de um parágrafo Em telas de desktop que não têm uma densidade de pixels muito alta, elas podem ser difíceis de ler. Tudo bem, é isso. Exercício muito simples e divertido para praticar o tipo de configuração e mexer com diferentes valores de alturas, tamanhos de telefone e outros enfeites E na próxima tarefa, vou conferir sua inscrição 20. Tipografia: duas fontes: Aqui está uma regra importante a seguir ao escolher tipos de letra para seus projetos. Use no máximo duas fontes para cada projeto e certifique-se de que elas pareçam diferentes. Vamos discutir a primeira metade desse papel são apenas dois, porque decifrar muitos estilos de fonte é esmagador. E dois darão espaço suficiente para qualquer personalidade específica que você queira retratar. Diga através de algum tipo de exibição e tenha algo mais neutro para o parágrafo e outros textos. Quanto à segunda metade desta regra, se usado dois tipos de letra que são muito semelhantes, você sente falta de clicado e acidentalmente escolheu o telefone errado para um deles. O título é um Open Sans em seu parágrafo está definido em Roboto. O único contraste criado é através do tamanho e do peso do título. Se os colocarmos nos mesmos pesos e tamanhos, você verá que eles são muito semelhantes, mas não os mesmos. Se você estiver indo com dois tipos muito semelhantes que um, eu apenas vou com um deles. Isso é uma coisa perfeitamente razoável de se fazer. Neste exemplo, substituo Open Sans pela exibição Playfair. Isso parece significativamente melhor. Portanto, os contrastes entre esses dois tipos de letra são muito altos. primeiro é um serif moderno, e o segundo é um sans serifs neutro que tem alta legibilidade para texto menor. Agora isso parece deliberado e intencional. Você não quer as melhores maneiras de fazer isso e ficar bem. Faça com que pareça intencional. Às vezes, você pode quebrar as regras e ignorar as diretrizes e fazer algo que esteja completamente fora de linha. Mas se você, se parecer intencional, provavelmente vai olhar para isso por que aprender e praticar essas regras e diretrizes de design que farão de você um web designer muito bom porque sua ala sentirá e parecerá intencional. Vai sentir que você colocou algum trabalho e iniciou o processo por trás disso. E você não estava apenas jogando coisas ao redor encontrando o suficiente Open Sans e Roboto é muito usado emparelhamento. Isso apenas aponta para o fato de que há uma tonelada de web designers por aí que não têm entendimento de bons princípios de design. E se você seguir esta simples visão de diretrizes tipográficas tornará seus designs muito mais superiores. Isso não significa que você possa emparelhar dois tipos sans serif juntos. Quando você faz isso, só tem que fazer sentido. Por exemplo, quando um par para tipos sensoriais, geralmente é porque eu quero algo com personalidade para os textos do título e, em seguida, algo neutro com excelente legibilidade para o corpo do texto, para o corpo principal, costumo usar os mesmos tipos de letra em todos os projetos. Dependendo de qual é minha obsessão por um certo período de tempo, escolho algo neutro e tem muitos pesos de fonte como Open Sans Roboto ou recentemente desta forma, então eu tenho muita liberdade com as companhias aéreas. Posso usar fontes com pesos limitados, mas um pouco mais de personalidade. E escolherei algo mais adequado à personalidade desse projeto em particular e da marca. 21. Tipografia: onde encontrar fontes: Usar telefones on-line é bastante simples, e você provavelmente já deve ter alguma experiência em baixar e procurar alguns telefones on-line. Existem muitas opções pagas e gratuitas, então vamos examinar algumas dessas opções. Sites como o defont.com têm uma grande seleção de fundos gratuitos. O problema com as fontes gratuitas é que elas podem ser criadas por designers amadores que as criaram para se divertir ou para ganhar alguma experiência em design de fontes. Você pode acabar com qualquer coisa, desde mal espaçada até algo como uma fonte de gatinho Evite esse tipo de reembolso até obter uma boa experiência em tipografia E mesmo assim, é melhor se afastar e ficar longe do tipo de fundos gratuitos. Freqüentemente, eles são usados em demasia que significa que eles estão usando muitos designs ou sites diferentes designs ou sites diferentes, e eles os estão usando de forma errada, e isso simplesmente tem uma reputação muito Os telefones pagos obviamente são uma opção mais superior. Um benefício de um fundo premium é que ele pode dar a seu projeto sensação mais exclusiva, porque eles não são tão populares e não são tão usados em demasia Com telefones pagos individuais, você paga por cada estilo, geralmente em torno de 20 a 50 dólares Então, se você quer uma família inteira com todos os pesos, isso pode ficar caro Além disso, você precisa comprar uma licença para cada projeto separadamente. Portanto, a melhor abordagem com telefones pagos individuais seria comprar um ou dois estilos para o texto do título E como corpo do texto principal, em que você precisa de muitos pesos diferentes, como barcos, barcos extras e todas essas coisas , você pode usar lugares como Google Phones e algumas outras opções que mencionei Existe uma maneira mais barata de adquirir muitos telefones premium, usando sites baseados em assinatura. Os mais populares são os telefones da Adobe. O nome antigo é Type kit. Os telefones da Adobe estão incluídos na assinatura da Creative Cloud. São assinaturas do Photoshop, Illustrator e Então, se você assinar isso, receberá mais de 7.000 telefones da Adobe com ele O plano mais barato custa cerca de $10 por mês, eu acho, então é um bom negócio Pessoalmente, meu lugar favorito é o Google Phones. É grátis. Não se preocupe com o licenciamento. Eles são bem desenhados. É curado pelo Google, e tanto o Figma quanto o Webflow já vêm Então, isso me salva de tanta instalação e de toda aquela dor de cabeça. Meu conselho para você no começo é ficar com os telefones do Google ou da Adobe. Dois juntos fornecem telefones mais do que suficientes para qualquer projeto. Uma observação importante sobre as fontes geralmente é que as fontes são, na verdade, arquivos de computador comuns. Isso significa que eles podem ser copiados e redistribuídos inúmeras vezes Portanto, se você tiver um arquivo para esse telefone específico, isso não significa que você possa realmente usá-lo. Para usar uma fonte em um site em seu projeto, você precisa ter uma licença pela qual pagou ou a fonte em si precisa vir com uma licença comercial gratuita para uso comercial. Aqui está uma extensão de navegador interessante que eu uso com frequência. É chamado de Font Phase Ninja e permite que você veja a fonte que qualquer site está usando Eu sou um tipo nerd. Adoro a aparência de uma fonte atraente Então, quando vejo um site que usa uma fonte e uma tipografia bonitas, quero saber o que é e salvá-lo como inspiração para meus projetos futuros, que basicamente significa que eu possa roubá-lo e depois usá-lo em meus Link nos recursos. Instale essa extensão e comece a observar fontes diferentes nos sites que você visita Ficar curioso é o melhor professor de um designer. Observar os designs ao seu redor e examiná-los de perto lhe ensinará muito e, na verdade, melhorará suas habilidades de design 22. Tarefa: combinação do tipo de fonte: Tudo bem, tire seu Figma, hora de outra tarefa de tipografia Vamos colocar em prática tudo o que você aprendeu até agora sobre tipos de letra Assim como na tarefa anterior, organizei três blocos de texto Desta vez, eles estão todos em um único tipo de letra. Sua tarefa é escolher dois pares de fontes para cada bloco de texto Além disso, assim como você fez no exercício anterior, defina o tipo de cada texto para obter uma boa hierarquia e, em segundo lugar, boa legibilidade, assim como você fez na última vez Você escolherá um total de seis fontes diferentes, três, quatro títulos e texto de 34 parágrafos Ao escolher seus tipos de rostos, quero que use o que aprendeu sobre personalidade-tipo. Assistimos ao vídeo sobre personalidades, se você precisar. Quero que você pense sobre o contexto que está escolhendo e escolha um dos tipos de letra que mostre a personalidade que é boa para esse contexto Ao ler as manchetes, você notará que o primeiro texto é sobre viagens e o Havaí O segundo é sobre culinária e churrasco, e o terceiro é sobre tecnologia. Agora, aqui está uma dica. O tipo com a personalidade deve ser para o título Para o parágrafo, você deve escolher algo um pouco mais neutro com alta legibilidade A propósito, se você está se perguntando por que o texto não termina corretamente, eu simplesmente não coloquei o artigo inteiro lá. Foi apenas um trecho de alguns artigos aleatórios do blog que eu Deixe-me fazer uma demonstração do primeiro. Portanto, o texto é sobre viagens às ilhas do Havaí. Agora, vou pensar em que tipo de fonte pode mostrar essa sensação de viajar para belas praias arenosas Para ter uma ideia melhor do estilo desses, vou pesquisar no Google algumas imagens do Havaí e ver se existe algum tipo de estilo de tipografia usado localmente no Havaí Com uma pesquisa rápida, posso ver que na verdade existem certos tipos de letra que são usados no tema havaiano Também procuro coisas como cartões postais e placas no Havaí. Olha isso. Agora, tenho exemplos autênticos de topografia que estão realmente em uso nas ilhas e que lembrarão as pessoas do Havaí Parece que o tipo de letra manuscrita do script é o caminho a percorrer Vamos ver o que posso encontrar nas fontes do Google que correspondem a esse tema. Vou filtrar somente fontes manuscritas e colar nosso texto para me dar a demonstração exata I Você pode ver que existem várias fontes que podem ser bastante adequadas. Preste atenção no nome da fonte. Muitas vezes, eles dão uma dica sobre qual é o tema da fonte Porque eu pesquisei no Google algumas imagens e exemplos reais. De antemão, consegui ter a ideia certa do Havaí. Agora, escolher a fonte é muito mais fácil porque consigo reconhecer semelhanças nos cartões postais e nas Enquanto procuro fontes, também procuro aquelas que tenham alta legibilidade Não importa que seja uma manchete. Eu ainda quero que seja legível. Fontes difíceis de ler como essas serão uma má escolha, não importa o quão boas elas pareçam. Ok, acho que tenho o suficiente para escolher. Agora vou ler o manual desses telefones que selecionei para ver para que serviam. Eu já vejo um problema com este. Em frases em maiúsculas, como no meu título, a legibilidade foi melhor, mas em palavras minúsculas, mas em palavras minúsculas a legibilidade foi melhor, mas em palavras minúsculas, a legibilidade diminuiu significativamente. Sim, vou usar letras maiúsculas no meu título, mas e se eu mudar Isso limita muito minhas opções. O segundo é o roteiro de Kashan, Cashan Noure. A descrição do telefone é bastante neutra. Parece que não foi planejado para um tema muito limitado. Parece muito divertido e descontraído, do jeito que eu imagino estar no Havaí, então vou continuar. Uma coisa que você notará aqui é que o título não está realmente alinhado com o parágrafo Isso acontece muito com textos de exibição grandes. Eles têm espaço extra e você precisará corrigir isso manualmente. Caso contrário, o design ficará desalinhado. Lembre-se de nossa lição sobre ilusões de ótica Ruler não é o que importa em design, é o olho Se algo parece não alinhado, então não está alinhado Agora, parece no ponto. Para o parágrafo, vou usar algo neutro. A escolha óbvia seria uma fonte sans sera. Um saco aberto é uma escolha óbvia. É uma fonte muito popular e excelente. Roboto é outra fonte muito popular. Eu gosto muito do Lato. É uma fonte muito boa que eu uso com frequência. Tem um evento de estilo muito bom nas manchetes. E veja isso. Lato significa verão em polonês. Essa é certamente uma fonte perfeita para o nosso tema do Havaí. Foi uma chance de sorte. um texto de parágrafo neutro, você não precisa procurar loucamente a fonte certa que foi projetada exatamente com a mesma sensação. Vou deixar o parágrafo mais parecido um cinza escuro do que com um preto de contraste total. Essa é uma ótima maneira de adicionar leveza ao texto do parágrafo sem usar uma espessura de fonte mais fina Evite pesos finos no texto do parágrafo, pois eles têm baixa legibilidade em telas de baixa resolução Aí estão dois pares de telefone para um bloco de texto do Havaí. Parece empolgante, mas é elegante e fácil de ler. Agora é a sua vez. Mais uma coisa. No topo de cada bloco de texto, quero que você anote o raciocínio por trás das escolhas do telefone, como você já fez na atribuição de personalidade de tipo Lembre-se de que escrever seu processo de pensamento fará com que você se acostume a pensar como um designer. Você começará a ver as coisas em diálogo mais profundo e detalhado. Além disso, muitas vezes você perceberá que escolheu um telefone sem pensar nisso , porque talvez ele simplesmente parecesse bonito. 23. A arte das cores: É um dos projetos do meu site. É um site para um aplicativo de compartilhamento de scooters. Quando eu estava criando este site, escolhi uma cor verde muito vibrante. O nome do aplicativo é go green. As scooters são elétricas e ecológicas. Portanto, esse verde em particular se encaixa muito bem no conceito. É o tom certo de verde. Mas meus clientes tinham um plano diferente e me fizeram mudar para esse verde. Isso é verde floresta, não é uma boa combinação para este produto. Forest Green funcionará bem com negócios relacionados ao ar livre, acampamentos, caminhadas, roupas para atividades ao ar livre, pesca e assim por diante. Mas não algo que seja elétrico e tecnologia verde moderna. Mas às vezes você tem que fazer o que seu cliente diz. As cores podem criar ou destruir qualquer design. Somos atraídos pelas cores de que gostamos e bastante repelidos por aquelas que não gostamos , seja web design ou outros produtos como carros, roupas, garrafas de ketchup, Talvez vejamos o melhor produto de design, mas se não gostamos da cor, não estamos comprando. Nas próximas aulas, vou te ensinar como escolher e trabalhar com cores como um profissional para deixar seus designs lindos. Bastão. 24. : Bem, nós sabemos que escolher boas cores é uma coisa muito importante para fazer em projetos. Mas como sabemos o que é uma boa cor? E o que é um colarinho ruim? Você pode estar pensando? Oh, não, eu tenho péssimo gosto para cores. Não se preocupe, e eu também tenho um bom gosto. Mas há um truque para escolher coleiras, e o truque é não escolher as cores do seu chapéu ou diretamente dentro do sigma, mas para ainda cores de algum tipo de inspiração. Este pode ser outro trabalho de design, como sites ou ilustrações ou cartazes, o que quer, ou mesmo de re prêmio como fotos. Nesta lição, eu vou ensiná-los a usar o mundo ao nosso redor como nossa inspiração para nossas cores simplesmente cores do mundo real. Como as pessoas, a natureza, os animais bem, quase sempre dão a você criar resultados. Por quê? Porque a maioria de nós já concorda que uma orquídea parece linda, mas uma barata, não tanto. Escolher um bom colorista é só metade do trabalho. A segunda metade é, na verdade, combinar as cores certas juntas. Usando o mundo real é a nossa inspiração resolve este problema, também, de porque a maior parte do tempo mundo natural fornece grandes combinações de cores. Esta foto da linha parece linda. Se encontrarmos uma paleta de cores que já esteja nesta imagem, podemos ter certeza de que, na maioria das vezes, essas cores irão realmente juntas. Caso contrário, não acharíamos uma foto desta linha como atraente. Enfraquecer simples. Algumas cores dominantes da imagem. E agora temos uma paleta de cores que é natural e harmoniosa. É aqui que fica interessante. Digamos que estamos projetando uma seção que se parece com isso. Se pegarmos essa foto e usá-la em nosso design juntamente com nossa nova paleta de cores, vamos obter alguns resultados realmente bons porque não estamos apenas combinando carros juntos, mas estamos realmente combinando cores com nossa imagem. Podemos então brincar e usar essas cores para texto ou fundos, ou criar combinações de cores muito interessantes. Olhe para isso. É como uma magia. E eu estava na pessoa que inventou essas cores. A Mãe Natureza fez 25. Tarefa: cores de amostragem: Vamos fazer um exercício divertido de amostragem de cores a partir de imagens. Eu preparei um arquivo Figma para esta tarefa. Tem três molduras com o mesmo layout. Esse é um layout web muito comum, com uma espécie de tela dividida. 50% da tela é a imagem e 50% é para o conteúdo. É um layout muito simples de criar e pode ser bastante eficaz e bonito. Será bom que você pratique esse layout enquanto praticamos nossa amostragem de cores São três quadros neste arquivo. Em duas delas, preparei imagens para você e uma está vazia. Quero que você experimente as cores dessas imagens para cada quadro e pinte o lado esquerdo do quadro com uma paleta de cores No vazio, quero que você escolha sua própria foto. Você pode descobrir que nem todas as fotos são uma boa escolha para a paleta de cores Além disso, quero que você use o que aprendeu até agora e aplique isso no lado esquerdo da moldura, na hierarquia e em tudo sobre a tipografia Deixe-me fazer uma como demonstração. Vou usar uma moldura vazia. Primeiro, vamos ao unsplash.com e encontre uma boa foto. O Unsplash é uma ótima fonte de fotos gratuitas. Eles são gratuitos para uso comercial, não apenas pessoal, e têm, você sabe, uma grande variedade de fotos diferentes. Eles não são muito parecidos com stock, então são bastante naturais e bonitos, embora, por serem gratuitos em designs, sejam muito usados, mas falaremos mais sobre fotografia mais tarde. Ok, então eu amo montanhas, então vou escolher uma boa foto com vista para a montanha. Essa é uma boa escolha. Ele tem muitas cores, então será divertido trabalhar com ele. Primeiro, vou criar um espaço reservado para a imagem. Vou desenhar um retângulo para fazer com que seja exatamente a metade da moldura Vamos verificar o tamanho da nossa moldura. São 1.152 pixels. E agora vou fazer com que o retângulo tenha a metade desse tamanho. Aqui está um truque legal do Figma. Vou digitar 1152/2 e, em seguida, pressionar Enter, e Figma fará as contas É exatamente a metade do quadro. Agora vou colocar minha imagem. Você pode arrastar sua imagem diretamente no Figma ou escolher a opção Inserir imagem na ferramenta de forma Aqui estão algumas coisas que você deve observar ao trabalhar com imagens e Figma As fotos que você obtiver do Osplash ou outros sinais de estoque serão muito grandes Portanto, espere um pouco para a Figma pensar, pois ela está carregando a imagem para seus servidores antes que você possa colocá-la A imagem será colocada em suas dimensões originais. Como essa imagem é muito grande, ela parece super ampliada assim Mas como faz parte da moldura, só isso é visível. Como é enorme, precisamos redimensioná-lo. Quando você seleciona uma imagem que preenche todo o espaço da moldura, em vez de selecionar a camada da imagem, ela seleciona a moldura inteira Acho isso um pouco chato, mas não é grande coisa. Para selecionar uma fotocamada, a opção óbvia é selecioná-la no painel Camadas, mas a melhor maneira é clicar na imagem enquanto segura a tecla Control ou Command Esse é um truque muito útil. Tenha isso em mente. Para redimensionar a foto para algumas dimensões úteis, vamos diminuir o zoom para que possamos ver as bordas da imagem Você vê essas linhas azuis, essas são as bordas da imagem. A imagem é muito grande em comparação com a moldura. É por isso que as bordas estão tão distantes da moldura. Podemos pegar as alças e redimensionar nossa imagem. Mantenha pressionada a tecla shift enquanto faz isso para manter as proporções da imagem. Um elemento de imagem no Figma é basicamente um retângulo com a imagem como preenchimento de fundo Você não precisa segurar o turno. Isso não distorcerá a imagem, mas, nesse caso, quero ver a imagem original para poder escolher exatamente qual parte da imagem exibir Se você colocar uma imagem em um retângulo, ela se tornará um preenchimento desse retângulo em vez de ser uma imagem independente Uma última coisa a ser observada. Ao colocar uma imagem ou qualquer outra coisa, certifique-se de que a camada esteja no quadro em que você está trabalhando, pois além desse quadro, ela pode ser colocada acidentalmente em outros quadros próximos Ou pode ser colocado na tela independente de todas as molduras. Se não estiver na sua moldura, não se comportará da maneira que você espera. Isso pode te deixar louco até você descobrir isso. É por isso que quero abordar todas as maneiras possíveis de algo dar errado e não se comportar da maneira que você espera. Isso geralmente é o que causa a maior frustração em aprender algo novo, sem entender por que algo não está se comportando da maneira que deveria Portanto, se estiver agindo de forma estranha, dê uma olhada no painel de reflexos e verifique se ele está na sua Para arrastá-lo na moldura, com o cursor, o mouse deve estar sobre a moldura, sobrepondo-a Em seguida, ele o arrastará para dentro e, se meio que sair da moldura, ele o arrastará para fora do quadro e o colocará na tela ou em outro lugar. Uma última opção que temos para importar uma imagem Figma é importá-la como preenchimento de imagem Selecione o retângulo, clique nas configurações de preenchimento de cores e, nessa opção, selecione a imagem Você obterá essa imagem de espaço reservado quadriculado. Em seguida, clique em Escolher imagem e selecione seu arquivo de imagem. Ele preencherá sua camada com essa imagem. A parte divertida dessa opção é que você pode fazer isso com praticamente qualquer camada, mesmo com a camada de texto. Isso abre muitas possibilidades criativas para usar em seus designs. Agora, qual dessas opções você usa para importar sua imagem realmente não importa. O resultado é sempre um preenchimento de imagem. Isso é o que sempre acontece. Mesmo se você simplesmente colocar a imagem na tela, o Figma apenas cria um retângulo e coloca a imagem como preenchimento Nesse caso específico, meu método preferido é carregar a imagem diretamente em nosso preenchimento de retângulos porque é a forma mais controladora nesse caso específico Sabemos que queremos que essa imagem seja metade desse quadro e já criamos um retângulo de espaço reservado para e já criamos um retângulo de espaço reservado É melhor colocar a imagem dentro dela. Agora, é provável que sua imagem e a forma do espaço reservado que você criou para ela não tenham exatamente as mesmas proporções Ao preencher sua forma com a imagem, você terá a imagem cortada em determinados lugares Talvez você não goste desse corte, então precisará ajustá-lo para obter a posição ideal Felizmente, podemos fazer isso selecionando uma opção de corte aqui e seguida, movendo nossa imagem para posicioná-la exatamente da maneira que queremos Essa ferramenta de recorte funciona praticamente da mesma forma que você recortaria uma imagem em seu telefone Você pode mover a imagem, posicioná-la onde quiser e, se precisar ampliá-la ou reduzi-la, você também pode fazer isso Apenas uma observação importante: ao alterar o tamanho da imagem dentro da ferramenta de corte, o redimensionamento não bloqueia a proporção logo de cara Você pode obter uma imagem distorcida se não Uma solução fácil para isso é manter a tecla Shift pressionada enquanto você redimensiona Isso bloqueará a proporção enquanto você redimensiona. Você acabará com as proporções originais e não com uma versão em panqueca Excelente. Nossa imagem está pronta. Agora vou estilizar meu texto um pouco. Você pode colocar seu próprio texto no título ao escolher sua imagem Você não precisa se preocupar com o parágrafo. Eu usei o texto fictício, o infame Loren Eu já tenho as fontes em mente. Não os estou escolhendo com base em imagens, mas você pode, se quiser. O Playfair Display é um belo tipo de letra em estilo de serviço moderno, confere muita classe à página E a Lato é uma excelente gravata sensorial para qualquer tipo de uso geral Agora, vamos alinhar nossos elementos à grade. Você se lembra de como aplicar a grade ao quadro? Primeiro, selecione o quadro no painel de propriedades na grade de layout e clique no ícone de adição. Por padrão, é uma grade bidimensional. Queremos colunas. Insira 12 colunas. O espaço da calha é flexível. Normalmente, você pode colocar qualquer coisa 20-40. Eu prefiro 30 pixels. Vamos também aplicar as margens. As margens são necessárias porque o conteúdo do site não começa pelas bordas Todo site tem alguma margem de conteúdo nas laterais. Quais são as melhores margens depende da largura da moldura Se estivermos projetando na grande tela do desktop , nossas margens serão muito maiores em comparação com se estivéssemos projetando para o telefone Para esse tamanho de quadro, 60 pixels é muito bom. Y Uma coisa que você pode notar é que meu espaço reservado para imagem não se alinha com a grade, então pode-se pensar, espere um segundo, essa grade não é importante e não alinhamos nossos elementos com base em nossa Sim, isso é verdade, mas nesse caso, nossa imagem faz parte da tela. Nossa tela é a cor de fundo e as imagens de fundo da página. Eles têm sua própria estrutura de espaço e não obedecem às regras da nossa rede A grade geralmente é para o conteúdo e para as coisas que ficam em cima da tela de fundo da página de fundo. Uma coisa que eu não gosto no texto é o que chamamos de palavras órfãs. Uma coisa que eu não gosto no texto é o que chamamos de palavras órfãs Você vê aquela única palavra na última linha, que é chamada de palavra órfã No design, tentamos evitar esses órfãos. Eles fazem o parágrafo parecer um pouco desajeitado. Não é um grande crime deixá-los aqui, mas é um bom detalhe extra para aprimorar seu trabalho. Nesse caso, vou quebrar o alinhamento com a grade. De qualquer forma, não é tão forte no lado direito do texto porque o texto já está irregular Não há problema em quebrar um pouco a grade em favor de corrigir uma favor de corrigir uma Basta reduzir a caixa de texto até que pelo menos uma ou mais palavras saltem a última linha para dar a essa palavra um amigo Este parágrafo agora parece mais equilibrado. É isso que você deseja, via de regra, um bloco de texto mais agrupado e retangular com as linhas de texto mais uniformes, tanto quanto possível. Agora que preparamos nossa moldura, podemos começar a amostrar nossa paleta de cores Para obter uma amostra de uma cor da nossa imagem, primeiro precisamos desfocar nossa imagem O que isso faz é calcular a média dos pixels adjacentes e fornecer uma paleta de cores mais precisa, próxima ao que nossos olhos estão percebendo porque na verdade não vemos esses Na vida real, vemos uma média com suas sombras e gradientes e tudo A ferramenta de seleção de cores em um computador é superprecisa, então ela captura a cor de pixels individuais E o pixel individual não é a representação mais precisa da imagem geral. Selecione a imagem no painel de propriedades, você verá a opção de efeitos. Adicione um novo efeito clicando no ícone de adição. Por padrão, isso adicionará uma sombra projetada. Clique na lista suspensa para ver outros tipos de efeitos e selecionar o desfoque da camada Por padrão, isso geralmente não é desfoque suficiente. Precisamos de um pouco mais pesado. Para aumentar o desfoque, clique no ícone e comece a aumentar e pare antes que as cores comecem a se misturar demais. 24 é muito bom nesse caso. Embora esse não seja um sinal exato, às vezes você precisará de muito menos desfoque, às vezes mais, especialmente se quiser provar uma cor de algo pequeno, como olhos azuis ou batom vermelho, precisará de um valor menor de desfoque, caso contrário, a cor se misturará caso contrário, a cor Observe como a paleta de cores é muito perceptível. Temos o azul, essas cores marrom claro e o marrom escuro. A Figma pode escolher essas cores para nós com uma ferramenta de conta-gotas Desenhe um retângulo. Em seguida, clique nesse campo para alterar a cor do retângulo e selecione o conta-gotas Ao passar o mouse sobre a imagem, escolheremos a cor desse pixel exato e pintaremos o retângulo com essa Repita o processo para todas as outras cores. Quantas cores você escolherá dependerá da imagem e de você. Você deseja escolher as cores dominantes, aquelas que são inegavelmente visíveis e compõem a maior parte da imagem, e todas as cores menores que são bastante proeminentes incluem alguns tons neutros, além Agora que temos nossa paleta de cores, desative o efeito de desfoque na imagem e comece a pintar o conteúdo do lado esquerdo essas cores e veja o que funciona e o que não Vamos adicionar outro retângulo no lado esquerdo como nosso preenchimento de fundo Lembre-se de por que isso está cobrindo nossos elementos porque a camada está no topo da lista. Basta movê-lo para baixo, para que fique organizado como plano de fundo. Você também pode clicar com o botão direito do mouse e selecionar Enviar para trás. Isso será enviado até a parte de trás. Agora vamos experimentar algumas cores de fundo. Vamos usar essas cores neutras. Vamos ver a cor que combina melhor com esse marrom escuro. Opa, esqueci de remover a imagem l do texto quando estava brincando O azul contrasta muito bem e pode ser útil para um design interessante. Essa cor brilhante também não é ruim. Aí, acho que esse é o melhor. Muito ruim em nomes de cores, então eu geralmente procuro em sites de cores. Este se chama Tumbleweed. Quanto a um parágrafo, posso escolher a cor branca. Embora esteja aparecendo demais e competindo pela atenção com o título, nesses casos, o que eu faço é diminuir a opacidade do texto branco para cerca de Isso diminuirá a intensidade dessa cor branca, e também a cor de fundo permeará um pouco, pois tem alguma transparência, que se adequará perfeitamente ao fundo. Também podemos tentar a mesma redução do imposto, o que não é um resultado ruim Embora eu nunca fizesse algo assim, isso apenas cria uma massa de cores em vez de combinações de cores intencionais e naturais Quando se trata de parágrafo, nunca escolha uma opção de cores vibrantes. Isso parece super amador. A cor do texto do parágrafo é muito difícil de extrair corretamente. Com os títulos, as cores funcionam muito bem porque são grandes e as cores se destacam adequadamente Mas com textos de parágrafos pequenos, cores intensas parecem estranhas Muitas vezes, eles são difíceis de ler e parecem um gerente de vendas fazendo uma apresentação em PowerPoint Para ficar do lado seguro, basta usar branco ou preto e brincar com a opacidade Nem precisa secar nenhuma dessas opções das cores que você amostrou É um pouco arriscado para um iniciante. É fácil errar. Essa opção tumblewood funciona , mas é um pouco sortuda porque tem uma cor suave e está exatamente na mesma paleta do exatamente na mesma paleta É também a cor do título. Dadas todas essas condições, funciona. Remova uma dessas condições e ela pode não funcionar. Essa faixa de opacidade é uma opção perfeita e segura. Designers de todos os níveis de habilidade adoram usar muito isso. Continue com isso por enquanto e, depois ganhar um pouco mais de experiência, você poderá começar a experimentar mais Nesse caso, eu fiz branco, mas em um fundo bem claro, você começa com um parágrafo preto e diminui a opacidade a partir daí Vamos verificar outros fundos coloridos. Ah, sim, isso também está lindo. Ok, então este parece mais orgânico para mim e deixa a beleza da paisagem realmente se destacar. Além disso, a cor é bastante adequada para temas ao ar livre. Tudo bem, um exercício muito divertido para você começar com as cores e brincar com elas. Depois de enviar seu trabalho nas tarefas posteriores, você encontrará o link para um arquivo que tem uma solução para isso Não se preocupe se a solução não for exatamente igual à sua. Não há apenas uma solução para esse exercício. 26. : Vamos subir um pouco e deixar uma cor orgulhosa de você. Você já aprendeu a cores simples do mundo ao seu redor. Agora vamos aprender a afinar essas amostras de colarinho. Capacidade de encontrar cores de túmulos é uma habilidade muito útil, e vamos deixar você pregar esses desenhos. Um bom pedaço de magia de design é em cores, então queremos ter certeza de que você aprenda todos os segredos e se torne muito confiante ao trabalhar com coleiras. Deixe-me mostrar-lhe como e por que encontramos coleiras de túmulo. Esta é uma foto linda. Gosto do contraste de cor entre o pássaro e o fundo. Eu digo pássaro porque eu não tenho idéia de que nascimento é este. É um falcão e uma águia? Um falcão? Não faço ideia. Vamos simplificar estes dois colares. Mas reparou que os colares, especialmente os castanhos, não atingem a marca? Essas cores parecem maçantes em comparação com a imagem. O problema é que as penas não têm uma cor uniforme. Algumas partes são mentidas. Algumas partes estrelam. A luz reflete também de forma diferente em diferentes partes. Então, tudo isso dá uma percepção diferente do que a amostragem de uma cor de um único ponto. Mas as cores no pássaro são mais leves, mais vibrantes e em geral parecem mais emocionantes. Isto é o que podemos fazer para tirar o melhor proveito da nossa cor em vig Ma ou qualquer outro auto-fair projetado . Para isso, temos esta ferramenta de seleção de cores alertas aprender a trabalhar isso rapidamente. Este ano é um espectro de cores nesta sala cheia, nós pico pede-lhe. Uma tonalidade é o ingrediente principal que faz o colar. Como você pode ver, a tonalidade deste colar está bem aqui, onde a alça deslizante está no espectro. Dois outros ingredientes que compõem a nossa cor são o brilho na saturação. Brilho é o eixo vertical. Neste mapa. É exatamente o que diz. Como é brilhante a cólera é removida verticalmente no mapa. Mais brilhante, a cor fica. E à medida que descemos, mais escura fica a cor. Você pode pensar nisso como a maneira como quanta luz cai sobre a cor. Durante um dia ensolarado de verão, você pode ver um colar um específico você totalmente, pois há muita luz caindo sobre ele. Mas à noite, em seu quarto com as luzes, tudo quando está escuro e você não vê nada além de tudo é preto, mesmo a cor vermelha mais brilhante. É por isso que o círculo inferior é completamente preto. Nesta escala, 0% de luz significa que não vemos. Não a saturação é o eixo horizontal neste mapa. É a intensidade deste Hugh em particular na cor. À medida que você se move para a direita, a saturação aumenta e o colar torna-se mais intenso. E à medida que você se move para a esquerda, chamamos isso de saturação do que a tonalidade começa a desaparecer até que seja completamente removida do nosso colarinho. Então temos uma escala de cinza em preto e branco. A foto é uma foto totalmente saturada neste seletor de cores. Há um menu suspenso que permite alternar entre diferentes sistemas de gerenciamento de cores por padrão. São hacks, significando código decimal hexi. Altere isso para HSB. HSB significa exatamente o que eu acabei de falar sobre matiz, saturação e brilho. Todos os três valores podem ser vistos aqui. 1º 1 emissão segunda saturação nos anos trinta. Brilho. A última porcentagem valoriza a opacidade. Vamos voltar para a porta de trás Burt para ajustar a cor. Mantemos os qs de hoje e jogamos com saturação e brilho. Caso contrário, é importante manter o mesmo valor de matiz, para obter cores completamente diferentes que não correspondam mais à imagem original. Primeiro, vou aumentar o brilho porque está muito escuro. O valor de brilho anterior era 78. Acabar por aumentá-lo. É 95 a escala tanto em brilho e saturação e vai de zero para casa, 100 como porcentagem. E agora diminua a saturação apenas um pouco. E teremos um resultado como este. Isto é mais parecido com ele. Sente-se mais perto do colarinho do pássaro do que o original. O mesmo que podemos fazer com o azul. Está um pouco escuro. Eu só vou aumentar o brilho um pouco, e é isso. Desta forma. Ambas as cores são vibrantes e brilhantes. Tal melhoria do que tínhamos antes Isto é mais adequado para o Web design de hoje. Olhe, estas são cores emocionantes que contras um com o outro muito bem e em geral parece fresco e moderno 27. Assignment: cores finas: Nesta tarefa, quero que você volte ao arquivo Figma da tarefa anterior Examine cada moldura que você projetou e ajuste as combinações finais de cores que você usou em seu design. Deixe-me mostrar isso no mesmo exemplo que eu mesmo fiz. Este foi o resultado final com o qual eu concordei. Acho que precisa de alguns ajustes finos, especialmente com um fundo marrom escuro. Está um pouco escuro demais e a transição entre a imagem e o preenchimento do plano de fundo não é tão evidente. Certamente precisa de um pouco de brilho. Aqui está um protesto. Duplique seus quadros ao trabalhar em uma nova variação O design envolve muitas explorações e revisões, adquira o hábito de ter várias versões da mesma tela Eu não fiz isso no começo para nenhuma nova variação, vou continuar editando o quadro original. Às vezes, depois de 20 minutos ajustando e mudando as coisas, acabo com uma opção que não era melhor do que a versão original, mas não tinha como comparar E voltar até lá foi um grande problema. Se você não mantiver suas variações, mudar de ideia se torna difícil e, muitas vezes, você se contentará com uma opção menor Para duplicar um quadro, é feito como seria esperar com qualquer outro elemento no Figma selecione o quadro e pressione o controle C e o controle V ou arraste enquanto pressiona ou a Ok, selecione a camada de fundo. Clique em Falha. Verifique se você selecionou o gerenciamento de cores HSB e não HX ou outra coisa Para simplificar o ajuste fino para mim, tenho uma regra pessoal Eu aumento ou diminuo os valores em incrementos de dez. Isso é só para limitar minhas opções. Caso contrário, eu poderia gastar menos tempo comparando o brilho 32 com 33. Mantenha pressionada a tecla Shift e pressione as teclas de seta para cima e para baixo para aumentar ou diminuir os valores em incrementos de dez Aí está. Isso é muito melhor. Vamos ver se o ajuste fino da cor do título traz bons resultados Na maioria das vezes, não tenho ideia do que vai funcionar e do que não. Design é muita brincadeira e comparação de opções. O brilho é muito bom, então vou jogar com a saturação. Ah, aí, isso é lindo. Vamos ver o antes e o depois. Olha isso. O original não era ruim, mas eu tenho um resultado ainda melhor. O texto é mais fácil de ler na nova versão. A transição para a imagem é muito mais evidente e o título e fundo parecem ter sido feitos um para o outro Muito divertido. Adoro brincar com cores. O design deveria ser divertido. Enlouqueça. Divirta-se com isso. Se você estiver com dificuldades com alguma coisa, publique suas perguntas em Perguntas e Respostas e eu o ajudarei 28. 31 NOVA IU para caça de cores: Aqui estão dois outros métodos para encontrar cores. O primeiro, e o meu favorito, roubar. Não há nada de errado em roubar cores. Ao contrário de outros trabalhos criativos, as cores podem realmente pertencer a qualquer pessoa. Então, os designers emprestam cores uns dos outros o tempo todo. Isso é basicamente uma amostra de cores do trabalho de outras pessoas em vez da fotografia Também é uma abordagem mais simples para encontrar cores do que amostrar cores da fotografia, como fizemos É uma opção mais inovadora que você pode começar a se inscrever em seu trabalho imediatamente. Existem muitos sites que criam trabalhos de design e inspiração. Eu dediquei uma lição especial a isso. Posteriormente, nos aprofundaremos no tópico da inspiração e sua importância em seu fluxo de trabalho. Por enquanto, vamos dar uma olhada em um lugar para encontrar inspiração em cores, dribble.com Você pode encontrar uma excelente inspiração aqui. A maior parte do trabalho aqui nem mesmo é para projetos reais. É um show and tell de designers, muita exploração, ideias e práticas de outros designers. Digamos que estamos trabalhando em um site relacionado a finanças. Pesquisaremos pela palavra-chave Finanças e obteremos muita inspiração para nosso trabalho. Quando encontramos as cores que gostamos, podemos amostrar a cor exatamente da mesma forma que fizemos com as fotos. Basta salvar a imagem e colocá-la dentro do Figma e, em seguida, usar a ferramenta conta-gotas ou usar uma ferramenta de conta-gotas separada que pode amostrar cores de qualquer lugar da tela Se você estiver no Mac, ele já tem uma ferramenta de conta-gotas. Está dentro de utilitários chamados medidor digital de cores. Se você estiver no PC, poderá usar as extensões do navegador. ColorZ, por exemplo, é uma extensão cromada muito boa para isso A segunda maneira de encontrar cores é por meio sites geradores de cores como coolers.co Você pode gerar paletas do zero ou colar uma ou duas cores que deseja usar e gerar outras correspondências que funcionarão com essa Aqui está uma fita profissional. Evite cores cruas. As cores brutas são aquelas que têm 100% de saturação e 100% de brilho Esse é um erro que muitos não designers cometem quando, por exemplo, criam apresentações para a escola ou para o trabalho ou capas do Facebook e outros enfeites Eles costumam usar cores de linha como essa. Geralmente gostamos das cores que estão presentes no mundo natural. E raramente você obtém essas cores na natureza. Mesmo os exemplos mais extremos, como Nemo, aqui, não têm cores cruas. No entanto, isso não significa que você nunca poderá usá-los. Pode haver momentos em que existam tendências semelhantes, ou talvez queira, deliberadamente e intencionalmente, usar algo como um verde fluorescente muito brilhante , Como sempre acontece com o design, se for intencional, provavelmente funcionará e, se não for, pode ser péssimo 29. : Adoro quando estou trabalhando em um projeto que ainda não vem com cores da marca. Isso significa que eu posso encontrar a paleta de cores perfeita para o projeto em minhas mãos não vai ser amarrado com as cores da marca existentes, e eu tenho sido mais liberdade para explorar. Mas muitas vezes não escolhemos nossas próprias cores. Esta é uma boa notícia se o projeto vem com boas cores da marca, mas não tão monetário. Se a cor soar tão bom. Como você sabe se você tem que usar cores da marca no projeto do site não são fáceis. Se o projeto já tem um logotipo, isso significa que você tem que usar a marca. As cores eram para obter as cores do diretor do logotipo. Mas a melhor coisa a fazer é pedir aos seus clientes o estilo Deus ou as diretrizes da marca que vieram com o logotipo. Você se parece com isso. Este é um guia que um designer de logotipo geralmente fornece para recusar sempre que eles entregam designs finais de logotipo. Ele incluirá cores primárias, secundárias e neutras. Ele também pode ter algumas diretrizes sobre topografia e outros elementos da marca. Se tal documento existe que você tem que ficar com seus coloristas e tipografia fornecida aqui. A existência desse cara depende de quanto o cliente estava disposto a pagar e de como um designer contratado. Se eles foram baratos e obtiveram um logotipo no Fiverr, então eles podem não ter um guia de estilo em tudo. Ou se o logotipo foi projetado há 10 anos pelo sobrinho do proprietário, ele sabia como clicar em alguns botões na loja de fotos. Então eles definitivamente não têm um. As cores feias são muito difíceis de trabalhar. E se o cliente economizou dinheiro no design do logotipo que eu quase sempre posso bater que as cores no logotipo vão ser terríveis. Os designers de logotipo ruins têm uma habilidade única de viajar no tempo para o passado e pegar cores emprestadas dos anos noventa. Em tempos como este, eu às vezes sugiro clientes ah, marca atualizar a cor de um fresco fora de sua marca. Eles podem manter o logotipo na forma fora do logotipo, e uma vez que eu projetei o site e nós resolvemos na nova paleta de cores, então eles podem ir em frente e atualizar o logotipo existente com as novas cores. Se isso não for possível e as cores estiverem completas, lixo. Então eu vou limitar o uso fora de suas cores no site, e eu vou usar cores neutras MAWR como brancos, cinza e, uh, uh, pretos porque eles podem ser usados com qualquer paleta de cores e, em seguida, usar ah bit opções limitadas e versões limitadas fora de suas cores de marca. Este um bom meio termo entre a necessidade de ficar com a cor da marca é sobre não usá-los tanto para que eles não fazem todo o site olhar terrível. 30. Como usar fotos para criar sites de boca: fotos são algo que você estará lidando muito. Como Web designer, é um ingrediente importante para fazer belos desenhos. Quando muitos sites atraentes você verá a beleza vindo principalmente da foto bem escolhida . Com a foto certa e a topografia bem colocada, você pode obter resultados verdadeiramente impressionantes nas próximas lições. Vou ensinar-lhe alguns truques de design sobre como lidar com fotos para criar desenhos de dar água na boca . 31. Fotos: sobreposições de imagens: Uma boa foto pode fazer maravilhas para um design. Eu amo essa foto. É lindo. As cores são incríveis. É simples, mas parece um conto de fadas, mas temos um problema nessa composição Não há contraste suficiente entre o fundo e todos os objetos em cima deles. O contraste é tão baixo que maioria dos impostos é completamente ilegível Produzir um design como esse como resultado final é um trabalho terrível, mesmo que todo o resto esteja perfeito e a imagem seja tão linda. Como podemos corrigir isso usando sobreposições. Basicamente, colocar preenchimentos coloridos na parte superior da imagem. O mais comum é colocar uma sobreposição escura nela. Em figma, isso significa adicionar um preenchimento de cor preta na parte superior da imagem e adicionar transparência a esse arquivo até obter um bom contraste, mas antes que fique muito escuro. Outro método é chamado de tingimento. É tirar a foto e dar uma tonalidade de cor diferente. Para fazer isso, você pega a imagem e dessatura para transformá-la em uma foto em preto e branco E então, novamente, adicionamos um preenchimento de cor, mas desta vez em vez de preto, você escolhe uma cor diferente. Isso dará à imagem um tom dessa cor. Isso é especialmente útil se você quiser usar as cores da marca no design. É um truque muito útil. Você também pode aplicar a correção em lugares específicos em vez de em toda a página. Por exemplo, aqui, coloquei uma caixa escura transparente atrás do conteúdo e também adicionei um gradiente transparente escuro atrás da barra de navegação Você percebe que está ligado e desligado novamente? Embora, apenas como nota lateral, eu não seja um grande fã desses retângulos pretos que estão aleatoriamente atrás do conteúdo Então eu evito usá-los se eu realmente sei como. Usar grandes imagens de fundo é um design muito fácil. Na verdade, não há muito design envolvido. Você encontra uma foto impressionante e coloca seu conteúdo sobre ela na cor branca. Cria um design de aparência muito atraente sem muito esforço. E, na minha experiência, os clientes adoram. 32. Assignment: sobreposições de imagem: Neste vídeo, vamos praticar a aplicação de sobreposições às nossas imagens Então ligue seu Figma e vamos começar. Neste arquivo Figma, eu preparei três quadros. O conteúdo está todo projetado e pronto. Sua tarefa é encontrar fotos para cada quadro e aplicar sobreposições de imagens, para que o conteúdo fique bem visível Deixe-me demonstrar o primeiro. Então, temos essa seção de heróis para um aplicativo de meditação ou algo parecido. Não tenho certeza exatamente. Eu pego esse conteúdo de sites aleatórios. Primeiro, precisamos encontrar uma foto. Então acesse splash.com e vamos tentar pesquisar fotos de meditação Não precisa ser a meditação exata. Você pode pesquisar o que achar adequado, então talvez lagos calmos, águas, natureza, céu, imagens basicamente calmantes e calmantes Ao procurar fotos, não precisamos ir muito literalmente e fazer com que a imagem descreva tudo em ação. E quanto às técnicas para encontrar fotos mais tarde. Essa foto funciona muito bem para mim. Você pode usar o mesmo ou outra coisa que você quiser. Faça o download aqui. Agora vamos colocar a imagem no Figma. Você pode arrastar a imagem diretamente no Figma, se quiser , ou pode usar a opção de colocar imagem aqui Selecione seu arquivo e, depois de colocar essa unha no cursor, clique em algum lugar na moldura e ela colocará a imagem A imagem foi inserida em suas dimensões originais, então ela está super ampliada e vamos reduzi-la Diminua o zoom para que possamos ver as alças da imagem e, em seguida, basta pegar as alças para precisar a foto Você verá que o FIMA não distorce a foto se você a encolher de forma estranha, o que é Você não encontra isso em outros softwares de design ou em muitos outros softwares normalmente. Mas isso significa que algumas partes estão sendo cortadas. Se você não quiser que nenhuma das partes seja cortada, mantenha pressionada a tecla Shift enquanto reduz a imagem Isso vai bloquear a proporção. Agora, precisamos enviar a camada da imagem volta para que ela fique atrás do conteúdo. Duas opções: usar um cartão curto de controle ou comando do teclado mais um colchete. Uma pequena coisa que você pode descobrir é que, ao clicar na imagem, o Pigma seleciona a moldura inteira em vez da Portanto, use o controle ou clique de comando para selecionar a foto diretamente. colchete esquerdo o envia para trás e o suporte direito o traz E a segunda opção, clique com o botão direito na imagem, selecione, envie para trás, e isso a colocará para trás em um único movimento. O mesmo acontece aqui. Você precisa selecionar a imagem primeiro com o clique Control e depois pressionar o botão direito do mouse. Controle e clique com o botão direito do mouse e não funcionará. Eu realmente tive sorte com a imagem que ficou ótima. Mas, como você pode ver, o conteúdo é muito difícil de ler, então vamos aplicar nossa sobreposição Selecione a camada da imagem e, em Opções de preenchimento, adicione outra sensação clicando no ícone de adição. Verifique se você selecionou a camada da imagem e não a moldura, caso contrário ela não funcionará. E então comece a jogar com o controle de opacidade. quantidade de transparência que precisamos dependerá da imagem em si. Idealmente, queremos o máximo de transparência possível até o ponto em que qualquer conteúdo se torne difícil de ler. Acho que cerca de 30% está funcionando bem com essa foto, e isso é tudo que você precisa fazer para cada quadro. Agora vou mostrar a opção de tingimento que você possa usá-la em uma das molduras Primeiro passo na coloração, precisamos deixar a foto em preto e branco Isso é super simples de fazer no Figma, clique no preenchimento da imagem e diminua a saturação até o Lembre-se, das aulas de cores, a saturação é a quantidade de matiz na 0% significa que a tonalidade desapareceu completamente, então não há cores. Isso é o que está acontecendo aqui. O próximo passo é adicionar uma tonalidade de cor. Isso será adicionado a esse preenchimento de sobreposição. Vamos mudar a cor preta para outra coisa. Você também pode jogar com opacidade, para obter o melhor resultado Você também pode ajustar outros conteúdos na página se eles não estiverem funcionando bem. Por exemplo, o botão de inscrição na parte superior está muito claro, então eu aumentaria um pouco a opacidade. Também em sobreposições coloridas como essa, uma prática comum é usar cores de marca É aí que o tingimento realmente entra em jogo. Caso contrário, realmente não faz sentido, e é melhor usar a foto original com cores vibrantes. Por exemplo, quaisquer que sejam as cores da marca, nós as usaríamos como tonalidade e talvez como cor de botão Se precisar mover o conteúdo pela página nesses quadros, você pode fazer isso porque às vezes há algo na imagem de fundo que está interagindo com o conteúdo Se você precisar, digamos, pegar esse conteúdo e fazer um alinhamento central, você pode fazer isso se precisar reduzir um título ou torná-lo maior ou menor, você pode Depende de você, definitivamente. Agora, conclua o trabalho com outros dois quadros e envie os resultados de todos os três quadros da tarefa depois 33. Fotos: técnicas de corte - extrema: Sou um grande fã de design de cartazes de filmes. A maioria deles tem um ótimo trabalho de design. É intrigante, excitante e muitas vezes misterioso. Eu não tenho o hábito de olhar para cartazes de filmes nas ruas e depois entediar minha namorada com detalhes sobre o tipo de tipografia que estavam usando. E o que eles fizeram com a foto e com um tipo de truque de design que eles usaram nela. À medida que você aprende os fundamentos do bom design, você nunca mais vai olhar para os cartazes do filme da mesma maneira. Aqui nestes dois cartazes, eu quero que você perceba a semelhança em como as fotos são usadas. Você percebe como eles são chapéu cheio é invisível e que se aproximou muito de perto de seu rosto. Isso se chama Extreme Crop. Nesta e seguinte lição, vou ensinar-lhe várias maneiras de cortar uma imagem. Que legal foi projetado. Há até truques sobre como cortar uma foto. Vamos começar com a colheita extrema. Lembra-se deste exemplo da lição de cores? A foto original fora da linha é realmente esta, mas este layout não é tão impressionante quanto o anterior, apesar do fato de que nós Seymour do Leão em comparação com a visão completa. Seu olhar agora tornou-se muito mais intenso e um pouco inquietante. Acrescenta mais emoção e drama à imagem. Há duas coisas acontecendo aqui. Primeiro, há mais foco na parte mais importante de qualquer ser seu rosto e especialmente os olhos. Isso torna um tiro mais íntimo. Os olhos estão falando conosco como se estivessem tentando nos dar uma mensagem ou demonstrar algum tipo de emoção, nos deixa mais curiosos e interessados no segundo esconderijo. Parte do assunto lê Mistério. A história que está no cartaz agora não termina aí. Apenas fora do cartaz, parece que há muito mais para ler , do que vemos, que significa que queremos descobrir. E queremos resolver o enigma desse mistério. É assim que você faz um design interessante. O cultivo extremo não é usado apenas em humanos e animais. Ele pode ser usado em objetos. Para isso, um grande exemplo de corte extremo. Eu me deparei em algum site cortar partes da bicicleta torna a seção mais interessante. A chave para pregar culturas extremas é não ir para o fogo e tornar o objeto irreconhecível. O público tem que entender o que começar. Verifique instantaneamente sem apertar os olhos ou pausar mesmo por um segundo, até que o objeto permaneça óbvio. Então você tem a liberdade de ir bem extremo. Por exemplo, digamos que você está projetando um site para uma loja de guitarra. Em vez de usar a forma completa fora da guitarra, você pode ampliar e cortar até a cabeça da guitarra. Podemos ver claramente que é uma guitarra. Absolutamente inegável. Mas isso não é mais interessante assim. Estamos provocando um público um pouco. Estamos pendurando um pouco de informação na frente deles, mas nenhuma revelando toda a imagem. Estamos fazendo com que terminem o quebra-cabeça no seu conteúdo. Simples de cor da guitarra. Faça o corpo de texto tão grande mais leve para que ele não competir com a manchete e Bam! Você tem uma excelente seção. É interessante e intrigante. Lembre-se da última coisa sobre a tipografia e como combinar a personalidade eo humor do tipo Pace com o contexto. Dê uma olhada na manchete que diz guitarras clássicas sem saber nada sobre guitarras. O clássico da ala já dita que escolha devemos fazer com uma tipografia usando um rosto geométrico moderno como Futura estaria tão fora de lugar aqui. Mas um tipo de script como o Apple Chancery, é uma ótima combinação. Muitas vezes você vai precisar projetar para um espaço muito estreito, por exemplo, Ah, Ah, banner horizontal para inscrições boletim informativo em um espaço estreito como estes, quando colocamos uma imagem que drama e poder dentro das imagens diminuem porque o quão pequeno é discordado imagem com um monte de emoção nele, Mas ele está perdido. Há uma ótima solução para isso. Podemos encontrar uma moldura que conte a história. Neste caso, são os rostos e zoom no quadro desses quadros ainda retrata a história da imagem. O rosto da criança está em foco, e as partes do rosto da mãe são suficientes para demonstrar o movimento da foto como amor e vibrações felizes no conteúdo. E é isso. Agora temos um banner mais eficaz do que o Motion ainda está lá, e não temos que filtrar para entender o que está acontecendo em danos. Este truque é bastante útil para Blawg Hatters e páginas de artigo encontrar um quadro que conta a história em seu próprio corte para que e Agora você tem um hander muito interessante para uma página bloqueada . Um professor de design gráfico chamou essa técnica de espreitar pelas persianas. Pense nisso não como uma foto cortada, mas mais como as partes do ver que você vê enquanto você está olhando para ela através das persianas. 34. 38 Crop macio NOVO: Outro tipo de cultivo é chamado de safra macia. O corte macio não tem uma borda dura. A imagem desaparece gradualmente. Isso geralmente é feito adicionando uma sobreposição esmaecida na parte superior da imagem Quando é da mesma cor da tela, especialmente branca, parece que a imagem está simplesmente desaparecendo. Parece natural. Agora temos um excelente espaço à esquerda onde podemos adicionar nosso conteúdo. O resultado parece fantástico. O conteúdo é apresentado na maior parte da composição. Isso lhe dá uma boa quantidade de espaço para respirar. O conteúdo é arejado e gratuito, é natural, mesclado com uma imagem de fundo sem bloqueá-la e criar ruído extra Estamos usando os conceitos de design que aprendemos até agora? Pode apostar que estamos. Há um ponto focal claro, que é o pico da montanha emergindo das nuvens. O resto do conteúdo é organizado com uma hierarquia visual adequada, começando com um título grande e ousado, e há uma classificação e um alinhamento claros Esse é um truque muito simples, mas super poderoso. É uma das minhas técnicas favoritas , na qual agora estou trabalhando com imagens. As telas de desktop e laptop são bem amplas. No entanto, às vezes você encontra a imagem perfeita, mas ela é vertical. Não é uma boa solução usá-lo como fundo para uma seção de tela ampla como essa. A maior parte da imagem é cortada de forma estranha e perde o significado. É muito confuso e fácil de ver, e praticamente não há espaço para expor nosso conteúdo Quase nunca, nunca, você deseja colocar uma imagem vertical como plano de fundo para uma seção de largura total. Com uma safra suave, temos um resultado totalmente diferente. A foto mantém todos os aspectos importantes e temos um espaço perfeito para colocar o conteúdo. Esse layout tem um ponto focal claro, que é o cara, obviamente. O conteúdo tem ótima legibilidade porque está em um fundo branco Se eu usar uma imagem vertical como fundo de largura total, obtenho um resultado muito caótico O conteúdo está se mesclando com um ponto focal da imagem. Não há visibilidade suficiente para o texto. É difícil de ler e a coisa toda é muito barulhenta. Com um corte suave, por outro lado, damos a cada peça dessa composição seu próprio espaço, dando-nos uma aparência limpa e com alta asibilidade É ainda mais fácil trabalhar com fotos com fundo preto uniforme . Basta tirar uma amostra da cor do último pixel na borda da imagem. Preencha o espaço com essa cor. Organize a imagem na posição mais adequada e você terá um layout fácil com muito espaço para colocar seu conteúdo de maneira bonita Estender a borda dessa imagem dessa forma pode funcionar em outras cores além do preto, mas precisa de uma correção extra OK. Em uma imagem como essa, se preenchermos o espaço usando esse método, obteremos um resultado como esse. Há uma separação estrita entre a imagem e o plano de fundo, que é uma falha evidente, e nunca queremos ter um design com falhas evidentes como esse Espero que você possa ver aquela borda dura entre a areia e a cor do fundo Talvez no seu computador, por causa da compressão do vídeo, esteja desfocando aquela borda rígida Mas isso acontece porque objetos da vida real nunca são de uma única cor, nem mesmo objetos uniformes como areia. Então, quando amostramos uma única cor do objeto, é apenas essa única cor. Uma maneira de corrigir isso é aplicando o mesmo gradiente de atenuação. E neste jogo, em vez de usar branco, vamos tirar uma amostra dessa cor exata da imagem. De agora em diante, a areia está se fundindo de forma suave e natural com essa cor de fundo No lado verde, porém, há muita textura e mais mistura de cores, então o resultado não parece tão natural. Não é nada ruim. Ele pode ser usado perfeitamente. Embora, ao contrário dos outros três exemplos aqui, o verde apareça como uma sobreposição de gradiente sobre a imagem É mais como uma cortina desbotada no topo da imagem. O que é uma coisa perfeitamente boa de se fazer, e você definitivamente pode usá-la. No entanto, há um truque que eu uso nesses casos, o que nos dá uma aparência mais agradável. Deixe-me te mostrar. Se nossa imagem não for larga o suficiente para preencher todo o quadro, podemos pegar a parte da imagem que é simples, sem formas complicadas, e esticá-la para sentir o espaço restante. É importante esticar apenas essa parte da imagem em vez de esticar a coisa toda Uma peça simples não tem muitos detalhes e não está em foco. Dessa forma, a parte importante da imagem fica nítida com suas proporções originais Você não pode fazer isso com todas as fotos somente se a foto já tiver um fundo desfocado que possa permitir uma elasticidade extra Na cópia, temos uma seção muito bonita que parece natural o conteúdo é fácil de ler e a seção de pose está muito bem equilibrada. É assim que o design simples e divertido pode ser um pequeno truque que oferece ótimos resultados. O conhecimento dos truques é o qual os designers recebem um bom dinheiro. Meus clientes geralmente se referem a isso como mágica e me dizem: Oh Vaca, precisamos de um novo design para esta página Você pode fazer sua mágica? Mas não é mágica. É ciência. 35. Assignment: corte de fotos: Nesta tarefa, você praticará as técnicas de corte que aprendeu até agora Dentro do arquivo de atribuição, você verá três quadros Cada um tem seu próprio conteúdo e uma imagem. Eu quero que você aplique um corte diferente para cada quadro. Demonstrarei como aplicar esses recortes de imagem daqui a pouco No primeiro quadro chamado Extreme Crop, quero que você aplique exatamente esse recorte extremo à imagem do garoto. Em termos de layout, você pode fazer isso em um layout de tela dividida assim como fez nas tarefas anteriores Como de costume, estilize o conteúdo de acordo, escolha seus telefones, tamanhos , cores e alinhe os elementos à grade No segundo quadro, quero que você aplique um corte branco macio. Vou explicar como isso é feito. No último quadro, quero que você aplique um corte suave de cor. Igual à versão branca, mas usando a cor da imagem para criar uma transição suave. Eu vou te mostrar como fazer isso também. Tudo bem. Vamos começar com uma safra extrema. Extreme Crop é muito simples. Você pode muito bem adivinhar como isso vai funcionar. Vou criar uma tela dividida e cortar essa imagem diretamente dentro dela. Agora, vamos fazer desse retângulo exatamente a metade da tela Podemos fazer com que Figma faça as contas por nós. A moldura é branca de 1.152 pixels. Digite 1152/2 e obtemos exatamente a metade. Alinhe-o com a borda direita assim. Abra a ferramenta de corte. Agora encontre as alças da imagem e redimensione-a para criar um efeito de corte extremo e arraste a imagem para encontrar seu local Aqui estão algumas dicas para fazer esse corte. Você não precisa necessariamente cortar todos os lados de forma eminente. Você pode ocultar somente um lado da face ou de um objeto. O objetivo do corte extremo é criar mistério ocultando partes do assunto ou escolhendo uma pequena fatia da imagem inteira e contando a história somente por meio dessa fatia Nesse caso, prefiro centralizar a fase das linhas. Isso funciona melhor com layouts de tela dividida como esse. Se eu estivesse usando um layout de largura total, talvez o corte lateral fosse melhor. Outra dica: quando você recorta uma pessoa ou uma imagem, isso tem que acontecer nas bordas da moldura Se você cortar uma imagem e colocá-la longe das bordas, esse truque não funcionará. Na verdade, você obtém um resultado muito estranho. Esta é apenas uma imagem estranhamente recortada que é colocada na tela Lembre-se do que eu disse antes, público precisa se perguntar o que está além das fronteiras. O fato de estarmos buscando é na verdade, como olhar pela janela. Portanto, não é que a imagem esteja recortada, mas é tudo o que podemos ver pela janela Quando a imagem é cortada nas bordas , o público pode sentir que a imagem está ultrapassando suas fronteiras E essa é exatamente a curiosidade visual que você está criando aqui OK. Agora, para a safra macia, isso também é bem simples. O que precisamos fazer é colocar um retângulo branco esmaecido na borda da imagem, para suavizar a borda esquerda final da Isso é feito usando um preenchimento de gradiente. Desenhe um retângulo Vá até o preenchimento desse retângulo. Sob essas caixas minúsculas, selecione aquela que diz gradiente. Linear, radial, angular e diamante. Todos esses são preenchimentos de gradiente. Você notará que o preenchimento do retângulo começa uma cor na parte superior e desaparece em uma cor diferente na Queremos que seja de cor branca. Dentro do seletor de cores, temos duas cores, a cor inicial e a cor final. Isso mostra a mesma coisa. Queremos que a cor inicial seja branca com 100% de opacidade e que a final seja branca novamente, mas com 0% de opacidade, mas com 0% de opacidade Isso então criará esse efeito de desvanecimento. Essa aqui é uma cor inicial. No mapa de cores, arraste o ponto para o canto superior esquerdo porque é onde está o branco. Se você clicar acidentalmente nessa linha de gradiente, ela mudará a localização de onde as cores começam e terminam, basta arrastá-las de volta aos cantos A parada extra pode ser removida daqui. Faça a mesma coisa na cor final. S. Altere a opacidade para 0% para a cor final. Agora temos um preenchimento de gradiente com branco esmaecido. Mas essa é uma direção errada. Queremos que comece da esquerda e desapareça à direita. Para mudar a direção, volte para a ferramenta de gradiente e clique neste pequeno ícone que diz girar Clique nele algumas vezes até obter a direção desejada. Precisamos que o 100% branco comece pela borda esquerda e depois desapareça para 0% em direção à direita Agora temos a direção correta dos gradientes. Agora, posicionamos esse preenchimento diretamente na borda da imagem, onde ele se encontra com um fundo branco. E aí temos nossa safra macia. Você também pode esticar esse preenchimento de gradiente para tornar o destino mais suave Como você pode ver, a transição aqui é um pouco nítida. Se você estender o preenchimento de gradiente, ele se espalhará de maneira mais uniforme e tornará a transição mais suave e natural Agora, dependendo da imagem, às vezes isso será suficiente, mas às vezes você ainda terá uma transição um pouco abrupta como essa Em casos como esse, eu duplico o preenchimento de gradiente mais duas vezes, então tenho um total de três Você pode ver como ele já melhorou, mas ainda podemos fazer um pouco mais. Você pode pegar cada retângulo e reduzi-los ou estendê-los, criando basicamente três campos com três larguras diferentes Isso lhe dá um pouco mais de controle na correção de quaisquer transições nítidas Não há um papel exato aqui. Você basicamente brinca com o posicionamento e os tamanhos deles até encontrar o ponto ideal da transição. A escolha de uma imagem também é importante, algumas imagens funcionam melhor do que outras. Com o corte suave branco, você deve optar por uma imagem com um fundo mais claro. Por exemplo, um céu diurno em segundo plano faz uma boa transição. Em fundos escuros, o desbotamento branco não é tão eficaz. Você vê aqui que não parece natural. Um fundo preto e um desbotamento preto funcionam muito melhor aqui, como você pode ver Mas a solução ideal em um plano de fundo como esse seria escolher uma cor na borda da imagem e usá-la como plano de fundo para esse desbotamento Vamos fazer isso neste exemplo. Aqui está um truque legal de figma que pode ser útil no futuro Clique com o botão direito na imagem e clique em virar horizontalmente. Basicamente, reflete a imagem. Isso é muito útil com frequência. Por exemplo, quando eu quero colocar um conteúdo no lado esquerdo, mas a imagem tem um modelo à esquerda e um espaço vazio à direita, posso revertê-lo e pronto. Primeiro, temos que tirar uma amostra de uma cor da areia e usá-la como nossa cor para o fundo e o desbotamento. Selecione a moldura. Clique no plano de fundo e, em seguida, faça uma amostra do último pixel colorido da imagem. Amplie bem de perto para obter um melhor controle e preste atenção ao zoom de pixels aqui. Isso mostra qual pixel será amostrado exatamente. O motivo pelo qual estamos selecionando o último pixel é criar uma transição tão suave quanto possível entre a imagem e o fundo sem o preenchimento de gradiente Agora vamos usar exatamente a mesma cor para criar um preenchimento de gradiente Copie o código hexadecimal da cor do plano de fundo e insira-o como cor inicial e final no preenchimento de gradiente. Altere a opacidade para 0% para a cor da mão. Agora, aplique essas colheitas de acordo com cada uma das molduras e, em seguida, envie seus resultados na tarefa. Depois disso, eu os examinarei Como você percebeu, provavelmente não incluí o tutorial de recorte e estiramento fotográfico neste vídeo, mas coloquei um tutorial de photoshop na parte avançada desta seção, que você pode aprender a fazer e praticar depois de terminar este curso, porque você realmente não precisa dele no momento Não é necessário saber disso, mas quando você terminar o curso e poder ler esse material principal, definitivamente dê uma olhada nele e experimente. 36. Fotos: regra das terças: Você já notou como em filmes atores são muitas vezes posicionados fora do centro no quadro? Depois de aprender isso, você nunca será capaz de não notar, e você será obcecado com isso Toda vez que você assistir a um filme, cineastas e fotógrafos usam uma técnica chamada Regra dos Terços para adicionar algum interesse visual para o tiro. É assim. Se você dividir uma tela em três partes iguais, tanto verticalmente como horizontalmente, a interseção dessas linhas será o visual nos pontos mais interessantes para colocar seu assunto. Se o objeto é grande, como Angelina Jolie aqui, então você a colocaria através de toda a linha vertical, e se for uma imagem fora de uma paisagem como esta, então você posicionaria o horizonte em uma das linhas horizontais. Colocar um assunto no centro da dívida é algo que se espera. É simétrico tem igual espaço em torno dele. É seguro e confortável. Isso também é o que um não-fotógrafo normalmente faria ou um não-designer. Você pega uma câmera e aponta diretamente para o assunto, e isso geralmente é chato. Mas colocar seu sujeito fora do centro cria tensão. É inesperado, mas parece intencional, como se houvesse uma razão escondida específica por trás disso, e queremos saber o que é. Um aplicativo de câmera no seu telefone provavelmente tem essa opção. Eu sei. Eu encontrei-nos. Ligue e experimente. Suas fotos vão melhorar significativamente ao fazê-lo, para demonstrar este ponto, vamos dar uma olhada neste exemplo simples. Temos uma caixa que é colocada no centro morto fora da tela. A distância entre o endereço das câmeras e a caixa é idêntica em todos os lados. O resultado é papelaria simétrica e encaixe-o em repouso. Não está se movendo. Se movermos a caixa um pouco fora do centro, ela instantaneamente adiciona tensão. Mas este não é um bom tipo de tensão, porque parece que a caixa deveria estar no centro. Mas não é. Isso parece um nunca que um designer Miskell comeu ou não notou. Mas se movermos a caixa bem longe do centro do que o resultado parece intencional, não parece que foi para estar no centro, mas que está deliberadamente fora dos pais. Isso cria um bom tipo de tensão, dando como um interesse visual. A regra dos terços está em uma lei, é mais uma diretriz suave. Às vezes, você pode ir muito longe desses pontos de interseção. Esta regra vem super útil quando você trabalha com rostos. Dê uma olhada neste exemplo. O rosto deste modelo está no centro, fora do quadro, e isso faz parecer que ele está muito baixo no quadro. O espaço vazio por cima da mão dele está a pressioná-lo para baixo. Para corrigir isso, movemos o modelo em um dos pontos de interseção superiores usar Sempre os olhos como seu gelo guia são o ponto focal de qualquer rosto humano. É onde sempre olhamos primeiro. Agora isso é muito melhor olhar, e o espaço acima dele é pequeno o suficiente, então não está pressionando para baixo sobre ele. E outra grande notícia. Isso funciona não importa o tamanho do rosto. A pessoa pode estar longe no quadro ou em extremo close up. Enquanto mantivermos os olhos alinhados com o ponto de interseção, ele sempre parecerá correto. Veja o que acontece quando ampliamos. Ainda está ótimo. Vamos ampliar mais com ótima aparência. Sem dúvida que uma última vez ainda parece boa. Não importa o quão longe currículo em. Esta é a beleza da regra dos terços. É uma diretriz super simples, mas pode fazer com que as fotos pareçam muito melhor. Agora. A regra dos terços é uma orientação suave, e tem excepções. Há muitos casos em que você terá melhores resultados. Se você não seguir esta regra em uma imagem como esta, o centro é a melhor posição, e você não deve usar a regra de terços. Por quê? Porque o ponto de vista central é a intenção aqui. A foto está na perspectiva da primeira pessoa. Estamos vendo a vista dos olhos do cara e com sua perspectiva. Obviamente, a colocação mais natural é o centro porque não faria sentido para ele ver as coisas lado. Há mais exemplos de posição central sendo a escolha correta. Por exemplo, quando a colocação do assunto e outros elementos na imagem realmente criam o interesse visual no centro, a estrada borda a marcação de estrada amarela no meio desse espaço entre as palmeiras. Tudo o que está criando interesse visual no meio. Manter essa mente dominante ajuda você a escolher fotos boas e melhores quando você está procurando por elas nos lados da fotografia de estoque, por exemplo, se você está procurando uma foto para uma tela dividida como em nosso exercício, então em nesses casos, uma foto com o modelo que está no centro é uma escolha melhor porque em casos de uma tela dividida , você obtém esse modo retratado estreito fora da foto e nas fotos estreitas. Não é a melhor opção usar a regra dos terços. Mas se você estiver procurando por uma foto de fundo, especialmente uma onde você vai colocar um conteúdo, então o alinhamento fora do centro será a melhor aposta. Assim, você vai olhar através das fotos e você vai encontrar um tempo onde há espaço suficiente para você mover um sujeito para enfermarias um fora das linhas fora da regra dos terços. 37. Fotos!: As fotos sempre vêm em uma caixa. Esse é o formato original quando você exportou da câmera, ou mesmo se você baixou do nosso site. Quando você pega uma imagem em caixa, coloque-a diretamente na tela, muitas vezes não é muito impressionante. É um objeto separado, não se fundindo com o espaço, e cria caixas extras em torno dele. Você não percebe isso conscientemente sobre nossos olhos, e eles precisam processar as caixas extras que foram criadas entre a imagem e o endereço fora da tela. Vamos usar um exemplo real de um dos meus projetos de página de destino que fizeram para uma clínica odontológica . Eu usei essa imagem exata para esse projeto, e este é um tipo de onde eu comecei. Então, como podemos melhorar uma seção com uma imagem como esta? Precisamos pensar fora da caixa, literalmente desfazer a imagem removendo completamente o fundo, colocá-la na borda inferior direita, e agora, e agora, em vez de ser uma foto chata esbofeteada na página, esse modelo está saindo da página. O fundo branco não está realmente a funcionar com esta imagem. Consegues adivinhar porquê? Porque a modelo está usando um top branco. Faz um contraste terrível, e se não fosse pelo cabelo ruivo, ela estaria desaparecendo. Como a imagem não tem mais um plano de fundo, temos mais liberdade para colocar nossa própria cor de fundo em toda a tela. Isso nos dá mais liberdade para experimentar e escolher combinações de cores interessantes e tornar o design de mais emocionante. Esta cor complementa seu cabelo vermelho, o contraste bem, e fazer uma combinação muito boa. Além disso, esta cor azulada é uma escolha certa para o tema da odontologia. Cores azuis, Fillmore Limpo e sanitário. Boa sensação de criar para odontologia e muitas outras cores seria uma bandeira vermelha para uma clínica odontológica como vermelho e rosa. Isso nos lembraria do sangue, não é uma boa sensação. Muitas vezes eu gosto de adicionar uma sombra atrás do lema. Isso faz com que ela pareça estar em frente a uma parede. Ele acrescenta mais dimensão ao espaço. Existem agora duas camadas separadas. Há uma parede, e depois há um modelo em frente a ela. Você não precisa necessariamente aplicar uma sombra. Você ainda pode obter bons resultados sem ele. Às vezes, nem mesmo Borg desta vez. Ele funciona e produz um resultado muito bom porque é um tiro direto fora do modelo e ela pode facilmente estar em pé na frente da parede. É a manchete. Viu o que eu fiz com o tipo? É pesado, largo e maiúsculo. Isso é para coincidir com o contexto deles fora desta página. Dentes retos largos no telefone preto e magro não seriam tão eficazes aqui, não é? Devemos sempre manter o tópico em mente ao projetar tudo o que fazemos na página cria associações com pessoas. As chamadas foram usadas formas que escolhemos tudo o que vai criar certos sentimentos nas pessoas, assim como o que discutimos na lição de tipografia sobre as personalidades de Taipei. Este é um pensamento projetado, e é uma escala muito importante no conjunto de habilidades do designer. Ok, agora adicione o resto da cópia na barra de navegação, e nós temos uma bela seção de heróis para uma clínica odontológica. Percebeu por que fiz o botão laranja? Porque eu provei do cabelo da garota. Não é a cor exata. Como você pode ver, eu fiz um ajuste fino sobre ele desta maneira. É mais vibrante e adequado para o desboxe de sites modernos. A imagem nos deu mais liberdade e controle sobre nossa composição, acrescentou a profundidade. Cada objeto parece existir em um espaço compartilhado, mas em camadas diferentes, assim como o mundo real está. Estes tem dado como uma seção de herói muito boa aparência e interessante. Você não precisa necessariamente descompactar uma imagem inteira. Você pode alcançar um resultado emocionante tirando uma pequena parte do objeto de seu quadro. Por exemplo, isso é o que eu fiz por este site. Em outro projeto para uma empresa de coberturas. Eu queria enfatizar o telhado de alguma forma. Mas o layout não é cortar a mostarda. O telhado está perdido no design, então eu tirei a ponta do telhado e conduzi-lo cutucar fora do quadro. Agora o telhado ganhou um holofote. É um ponto de interesse, mais as imagens e como coisa separada. Está interagindo com a tela e outros elementos nela. Isso é tudo o que é preciso para liberar e imagem de seu quadro e trazê-lo à vida. Não podemos realmente criar esse efeito no MMA de figo. Nós definitivamente precisaremos de uma loja de fotos para estes na parte avançada das partituras. Eu coloquei um tutorial de loja de fotos e uma tarefa sobre como alcançar esse efeito e como cortar um assunto ou um modelo da imagem e remover o fundo dele. Não é um efeito essencial, mas saber como fazer esse efeito funcionar realmente abre suas opções de design ao mesmo tempo. Remover o plano de fundo do assunto. Ele abre um monte de opções de design diferentes, assim como o que aconteceu com aqui, porque agora podemos mudar o plano de fundo. Podemos mover, digamos manchetes e impostos atrás de objetos, e podemos criar um pouco mais de camadas tridimensionais em nossos projetos. Então, quando você chegar a parte avançada fora deste curso, definitivamente não perca este tutorial e praticá-lo, porque ele realmente vai vir a calhar quando você começar a projetar. 38. Fotos: escolha fotos como um profissional: Essas técnicas fotográficas serão inúteis se você não souber como escolher as fotos certas para seus designs Nesta lição, vou te ensinar como escolher fotos como Pro. As fotos que você usará para seus projetos são chamadas de fotos de estoque, que você baixa de sites de estoque gratuitos, como o Osplash, e de sites pagos, como o I Agora, a grande parte das fotos de banco de imagens é simplesmente terrível. Tenho certeza de que você já visitou sites que usam fotos como essa. Qual é exatamente o problema com essa foto? As garrafas estão com boa aparência. Eles estão bem vestidos, estão sorrindo A foto é de boa qualidade e tirada em ambiente profissional. Tudo no papel parece correto, mas a foto ainda está ruim Por que isso? Porque é claramente falso. É claro que esses não são empresários reais. São modelos fazendo uma pose boba com sorrisos falsos. Agora, todas as fotos profissionais são feitas assim, uma modelo que está desempenhando um papel específico na foto, vestindo roupas que não são delas, retratando uma emoção específica e sendo paga por E tudo bem. Mas se a foto for bem feita, não poderemos dizer o que está acontecendo na realidade. Pense nisso como filmes. Sabemos que esses são atores. Sabemos que eles não estavam realmente em um navio em 1912 Eles estão vestindo fantasias e encenando uma cena. Quando um filme é feito, bem, não podemos dizer. Esquecemos que na verdade é falso e que essas pessoas estão apenas fingindo O mesmo está acontecendo aqui. Eles estão vestindo fantasias e fingindo. Mas, ao contrário dos bons atores, esses caras são péssimos nisso. Você sabe o que acontece quando você usa uma foto que parece falsa? Você está enviando uma mensagem muito ruim para seu público. Se a foto for falsa e falsa, o site parecerá falso e fingido Não há pessoas reais por trás deste site. Se eu ligar para eles ou enviar um e-mail, não receberei uma resposta de pessoas reais ou, pior ainda, pode até ser um site fraudulento É preciso um pouco de prática para diferenciar fotos boas de fotos ruins, mas aqui estão três perguntas que você deve fazer a si mesmo quando estiver vendo fotos. A cena é real? Algo assim aconteceria em um cenário da vida real? Então, as pessoas que trabalham no escritório ficariam na frente de uma câmera e dariam as mãos assim? Se você já trabalhou em um escritório corporativo, sabe que a última coisa que quer fazer é ficar de mãos dadas com seus colegas de trabalho e ficar na frente de uma câmera Portanto, a resposta é claramente não. Falsa ou essa foto, por exemplo, o que você acha? Essa cena é real? Obviamente que não. Para começar, o doodle no copo é uma bobagem completa São gráficos e setas aleatórios. Isso não faz sentido. O que há com essa prancheta É uma forma tão clichê de descrever uma cena de escritório. Essa foto, por outro lado, é uma história diferente. Parece uma reunião realista e as pessoas estão usando roupas que você realmente vê nos escritórios modernos hoje em dia. Eles estão conversando uns com os outros, que é o que acontece nas reuniões, sem dar as mãos e olhar para uma placa de vidro com rabiscos sem sentido Falsa A segunda maneira de identificar uma foto de banco de imagens ruim é por meio de emoções falsas e cafonas. Isso não parece uma emoção humana genuína de excitação. Nem a cena está próxima do mundo real nesta foto. Você já segurou dinheiro falso em uma mão e uma lupa na Ou esse cara que está tão empolgado com algumas boas notícias falsas em seu laptop falso. Está bem seco, amigo. Representar emoções humanas genuínas na frente de uma câmera em um estúdio fotográfico é uma coisa difícil. É por isso que muitos desses modelos estão fazendo um trabalho terrível nisso. Não recompense o mau trabalho deles usando as fotos deles em seu projeto. E também não estrague seus designs com essas fotos. Não é difícil dizer se a atuação parece genuína. É assim que se parece uma empolgação genuína. Não é isso. Mesmo emoções sutis, como um sorriso normal, podem parecer muito antinaturais e falsas e, quando bem feitas, parecem genuínas e convidativas Pergunte a si mesmo: se as emoções parecerem reais, você provavelmente conseguirá perceber com bastante facilidade. Além do que os modelos estão fazendo dentro da foto, você também pode distinguir facilmente uma foto ruim de uma boa, prestando atenção ao design do cenário. Por set, quero dizer tudo exceto o modelo em que a foto foi tirada, os objetos na foto e até mesmo as roupas que a modelo está usando. Muitas fotos de banco de imagens geralmente são bem antigas. Eles foram tirados há muito tempo, mas ainda estão sendo vendidos e usados em sites. Você realmente não quer usar uma foto de uma década para um site de startup de tecnologia moderna. Ao prestar atenção às roupas, você pode identificar facilmente fotos datadas. Você não precisa ser fashionista para isso. Use seu bom senso. Não é difícil dizer que nenhuma garota da idade dela usaria algo assim hoje. Na verdade, isso não significa que a foto foi tirada há muito tempo. Às vezes, as fotos são novas, mas os fotógrafos reutilizam o mesmo guarda-roupa Os estúdios fotográficos salvam suas roupas das filmagens e reutilizam com outros modelos e novos cenários anos depois Roupas que não servem são um claro indicador de que a cena é falsa, mesmo que fosse moderna. Como essa pobre garota aqui. Os estúdios fotográficos também tentarão usar roupas neutras que possam ser reutilizadas anos depois, para que não precisem comprar roupas novas todos os anos Então você verá essa roupa muito mesclada , desprovida de qualquer personalidade Esse também é outro indicador. Mas acho que essa foto tem outra cauda clara na tela do computador. Em cenários bem desenhados como este, você verá pessoas vestindo roupas modernas e, muitas vezes, adequadas às suas personalidades Eles parecem pessoas reais, não uma simulação de computador. Preste atenção nos objetos do conjunto. Pergunte a si mesmo se eles parecem realistas. Como essa lupa e dinheiro falso, nada é melhor do que mentir O dinheiro falso e fique longe de tudo que é abstrato. Por exemplo, lâmpadas. Deus, eu odeio lâmpadas. As pessoas adoram usar uma lâmpada maldita para representar coisas como ideia, criatividade ou pensamento É usado em demasia e me dá náuseas quando o vejo. Certa vez, eu estava trabalhando em um site muito premium e, como sugestão, meu cliente me enviou uma lâmpada para usar como plano de fundo para um site. Eu quase latiu na tela do computador. Objetos abstratos geralmente são uma má ideia. A maioria deles parece exatamente isso. Abstratos, confusos e muitas vezes clichês, pois são usados Seu design deve dar ao público uma sensação de compreensão e autenticidade. Qualquer coisa abstrata fará o oposto disso. clichês de quebra-cabeças e nuvens sobre a cabeça das pessoas. Ah. 39. Fotos: onde encontrar fotos: Tudo bem, então onde encontrar boas fotos? Existem fontes gratuitas e pagas. Meu site de ações grátis favorito é unsplash.com. Você já usou isso nas tarefas. Existem muitos sites que oferecem fotos gratuitas, mas elas não são totalmente gratuitas. Eles vêm com algumas regras de direitos autorais, como você deve creditar o autor ou apenas para uso pessoal, mas não para uso comercial. O Unsplash é verdadeiramente gratuito. Você pode fazer o que quiser com as fotos e não precisa creditar o autor. As fotos no unsplash.com têm uma aparência muito realista. Muitas vezes, eles são enviados por fotógrafos individuais em todo o mundo e não por estúdios fotográficos Por esse motivo, você obtém cenários e pessoas muito realistas que parecem genuínas e reais. Bem, pelo menos na maioria das vezes. Outro site gratuito decente que eu uso é o packsals.com. A venda de pacotes também é totalmente gratuita, sem limitações. O conceito e as fotos são muito semelhantes ao Osplash, mas você tem um pouco mais No entanto, sites de fotos gratuitos têm uma desvantagem. Todo mundo os usa. E uma foto particularmente bonita será usada por muitas pessoas ao redor do mundo. Portanto, as fotos que você usa em seus designs da web podem ser facilmente usadas por muitos outros designers da web em seus sites. Em algum momento, quando você lê muitas dessas fotos gratuitas do onslash ou do Pack Seles e de outros lugares, você começa a reconhecê-las em E se o público também vê essa foto sendo usada em outros sites, essa foto sendo usada em outros sites, isso meio que barateia o site Não é mais tão único. Embora o mesmo se aplique aos sites de ações pagos, mas como eles são pagos, uma quantidade significativamente menor de designers usará essas fotos em seus sites. Além disso, os sites de estoque têm uma seleção muito maior de fotos do que os sites gratuitos. Portanto, por esse motivo, em projetos bem pagos, eu definitivamente recomendaria que você usasse fontes pagas em vez de fotos gratuitas. Meu favorito em sites de ações pagas é o eStock. Eles têm fotos da melhor qualidade com modelos e cenas realistas. Mas é claro que você também tem fotos falsas aqui. É inevitável, desde que as pessoas estejam comprando essa porcaria. Na verdade, não consigo colocar um número exato quanto custa uma foto em estoque, porque tudo depende de quantas você compra, dos planos de assinatura e, às vezes, da própria imagem. O EyeStoc é um pouco mais caro. Uma imagem aqui custa $9-24. Mas com pacotes e assinatura mensal, você pode obter descontos muito bons Outra boa fonte paga é o Shutter Stock, e é muito mais barato que o ETOC Com os planos pré-pagos, você ganha uma imagem por no máximo $10 Pré-pago significa comprar um pacote no valor de $50 por cinco imagens. Para usuários pesados, você pode obter uma assinatura mensal. Você receberá uma certa quantidade de imagens gratuitas por mês. E reduza para $3 por imagem e menos. Uma das opções mais baratas, mas decentes, é bigstok.com. Aqui, o máximo deve ser cerca de $3 por imagem com pacotes Ao contrário de outros, o Big Stock tem um teste gratuito de sete dias que oferece 35 imagens gratuitamente durante esse período de teste. No entanto, lembre-se de que eles solicitam detalhes do cartão de crédito e você precisa cancelá-lo antes do último dia ou será cobrado. Considere todas essas informações de preços com cautela, pois esses são sites independentes e seus preços podem mudar com muita frequência. Além disso, dependerá do país de onde você é ou de onde está verificando os preços devido aos impostos e ao IVA. Mas, no estádio, é assim que os preços funcionam para esses três sites e muitos outros sites de ações pagas Coloquei os links para esses sites, gratuitos e pagos, e um pouco mais na página de recursos, que você fique à vontade para conferi-los. 40. Tarefa: Encontrando fotos: Agora vamos fazer um exercício divertido que você vai procurar algumas fotos de banco de imagens. Neste arquivo Figma, preparei três quadros com títulos e descrições de três empresas Na verdade, pego textos de empresas reais e de seus sites. Quero que você encontre uma foto apropriada para cada moldura, imaginando que está criando a página inicial e precisa de uma foto para a seção de heróis Você não está projetando nesta tarefa, então não se preocupe com o formato Não importa se a imagem vai ficar em segundo plano como uma tela dividida ou de qualquer outra forma. O objetivo é apenas escolher uma imagem com cuidado. Você pode escolher fotos de qualquer um desses sites de fotos gratuitos ou pagos, seja splash, Paxl, I Stock ou qualquer outro Encontrar a foto certa para o seu projeto realmente leva tempo e, às vezes, você precisa procurar em vários sites para realmente descobrir. Às vezes, posso passar algumas horas procurando a foto certa apenas para uma seção de heróis. Você também pode usar sites pagos e simplesmente pegar amostras de lá sem pagar por isso. Você pode capturar a tela ou baixar a imagem com marca d'água. Big Stock, por exemplo, tem um link de pré-visualização para download e você pode usar essa imagem de amostra. se preocupe com o formato de qualidade ou com o tamanho da imagem, mas eu quero que você use apenas sites de banco de imagens e não o Google ou qualquer outro lugar onde eles tenham regras rígidas de direitos autorais sobre suas imagens, como flicker ou pegar a foto não o Google ou qualquer outro lugar onde eles tenham regras rígidas de direitos autorais sobre suas imagens de alguém E para cada foto que você escolher, eu quero que você explique por que você escolheu a foto. É assim que você adquire o hábito de pensar em design. Você fará um trabalho muito melhor e seus empregadores mais felizes ao deixará seus empregadores mais felizes ao pensar em cada uma de suas decisões Vou dar um exemplo aqui. primeiro passo é entender do que se trata o negócio e o que eles estão oferecendo. Em seguida, pense no tipo de cena que queremos criar no site, considerando o negócio e o texto. Portanto, esse negócio ajuda outras empresas a medir a felicidade de seus funcionários. Isso meio que me dá uma ideia de que mostrar funcionários felizes funcionaria bem nesse quadro. Vamos acessar nossos sites e começar pesquisando literalmente por funcionários satisfeitos. Todos os três retornaram resultados bastante diversos. E, como você pode ver, o Shutterstock, sendo o lado pago, retornou um número significativamente maior de resultados do que splash Quando você faz o experimento de pesquisa com diferentes tipos de palavras-chave. Às vezes, uma frase-chave literal , como funcionários satisfeitos, funciona, mas geralmente é melhor usar , misturar e combinar palavras-chave únicas Por exemplo, neste caso, eu quero que a cena seja ambientada em um ambiente de escritório. Essa é uma palavra-chave difícil que precisa estar presente na cena. Então, posso usar apenas o escritório e depois algumas palavras-chave secundárias, como sorriso, felicidade e assim por diante. Aqui está um pro tepe. Quando você vê uma foto com a qualidade que você gosta, mas ainda não é exatamente a cena ou o modelo certo, descubra quem é o colaborador e pesquise nas fotos deles Sob direitos autorais, há um link do colaborador, ou seja, um fotógrafo ou o estúdio fotográfico que carregou essa foto no site Se você clicar neste link , verá todas as outras fotos desse colaborador Todos os sites de estoque têm suas próprias maneiras de exibir as fotos dos colaboradores e onde encontrar o link, mas a maioria tem. E suas próprias formas de pesquisar as imagens de um colaborador Basta inserir sua palavra-chave e isso refinará os resultados nas fotos do colaborador Sem esse truque, eu teria que passar por milhares de fotos terríveis. Essa é uma opção muito boa para funcionários satisfeitos. Faça o download da pré-visualização e, em seguida basta colocá-la dentro do arquivo Figma Você pode fazer uma captura de tela ou usar uma opção de download fornecida pelo site Isso é tudo. Não há necessidade de criar nada. Deixe como está. Mostra funcionários satisfeitos, que é o objetivo desse negócio. A foto é moderna, o ambiente é descontraído, sorrisos parecem genuínos e, em geral, os filmes fotográficos são calorosos e convidativos E pronto. Essa é a sua tarefa. Nenhum design envolvido. Divirta-se 41. Seis truques truques: design é como show de magia. Há truques que fazem um trabalho olhar bonito e emocionante e algo que as pessoas querem pagar, assim como um truque de magia. Um bom design pode fazer você se sentir espantado. Mas uma vez que o truque é revelado, você entende, é realmente bastante simples, e você começa a perceber que os antigos designers estão usando os mesmos truques nos próximos vídeos. Vou ensinar-lhe vários truques de design que irão ajudá-lo a criar desejos bonitos e muito interessantes como magia. 42. Design Tricks: dê uma olhada nesta página. Este é um design muito simples, mas bastante eficaz. O truque de descida que é usado fortemente nesta composição é chamado de contraste. É esse contraste entre a manchete gigantesca e o texto de parágrafo menor. Também Contras. Entre o peso, fora da manchete e a leveza do parágrafo contrastam entre a parte preta da manchete com azul e o contraste entre o fundo da vida e o grande botão azul. Eu tenho que dizer que é um pouco desleixado sobre o alinhamento, embora o contraste é muito utilizado truque de design. Ele também nos ajuda a criar hierarquia visual entre os elementos, e pode ser expressa principalmente de três maneiras. Contraste no contraste de cores no tamanho grande versus pequeno e, em seguida, contrastes em peso como pesado vs leve. Vamos dar uma olhada em outro site. Você percebe o contraste na cor sobre Você fazer wide telefonou e livro em um fundo vermelho noiva para ele. Isso é um Bulls, em contraste, ver o contraste em tamanho e peso entre o título e o texto. Acima e abaixo. Ele contraste no design atinge duas coisas, Normalmente primeiro, ele nos ajuda a estabelecer hierarquia visual na página e segundo ele cria interesse. Coloque dois quadrados idênticos juntos, e ele não diz nada. É chato, mas soprar um deles para tamanho extremo em comparação, no grande contraste entre eles cria interesse. Agora parece que há uma história por trás dela ou criar um contraste no colarinho, e torna-se instantaneamente mais interessante. contraste na cor é criado usando cores complementares. Roxo e amarelo. Aqui estão cores complementares e, por último, mas não menos importante, você pode criar contraste usando peso. Então, como você criaria contras peso entre essas caixas, removendo a sensação em um deles e vivendo-o com traço contorno caixa completa se sente mais pesado e caixa vazia parece mais leve. Vamos ver como funciona na prática. Digamos que estamos trabalhando em um site para bicicletas e estamos projetando uma das seções. O cliente nos deu uma manchete, um parágrafo de texto e uma foto para uma de suas bicicletas. Digamos que não sabemos por onde começar, mas lembramos do truque do contraste. Vamos ver como podemos usá-lo. Vamos começar com um contraste de peso. O que podemos ter um olhar e o que podemos fazer luz? Por que não a manchete versus parágrafo? Vamos criar um bom contraste entre eles. Podemos fazer a manchete extra ousada e em maiúsculas. Não temos que parar aqui. Podemos realmente adicionar aguarde contraste, mesmo dentro da manchete. Excelente. Isso tornou ainda mais interessante, pois aplicamos contraste aos elementos. A sua nota como a hierarquia visual começa a tomar forma. Ok, a seguir. Vamos fazer o contraste de tamanho. Vamos superdimensionar a primeira parte da manchete e ver o que acontece. Vá em grande ou vá para casa direito. Alinhei os elementos corretamente, tudo bem. Está começando a tomar forma. Podemos usá-lo cultura extrema que já aprendemos e cortar algumas partes da bicicleta. Parece muito bom ontem à noite, mas pelo menos temos contraste de cores. Já há um contraste de cor, claro, já que o fundo é branco, imposto escuro do que a bicicleta escura. Contraste muito bem com isso, mas não temos de parar por aí. Podemos adicionar uma cor extra em uma parte do título, algo que irá contrastar bem com o texto escuro enfraquecer simples. A laranja da bicicleta sentar desta forma vai matar dois pássaros com uma pedra, um grande país cor entre laranja e escuro manchete. E, claro, você já sabe que eles provam a cor da bicicleta nos ajudam a amarrar o design juntos . Isso é tudo aplicando uma taxa de contraste simples, além de uma técnica de suporte fotográfico. Passamos disto para isto. Você nem precisa de um software de design para este conduce isso em Power Point. Este é o meu favorito. Ir para truques em design. Se você alguma vez estoque em lutar com fazer design olhar interessante em algum contraste, estrela batida cor Wade tamanho, e eu garanto que ele irá melhorar instantaneamente seus projetos. 43. Truque de design: espaço em branco: É um cartaz da campanha publicitária de peças de reposição da BMW. Diz, BW em vez de BMW. Na parte inferior, diz, use peças originais. Você entendeu a piada, certo? É um anúncio muito inteligente. Mas essa não é a razão pela qual estou mostrando isso para você. Quero demonstrar um grande conceito de design chamado espaço em branco O espaço em branco é um espaço vazio ao redor dos elementos. Nesse caso, em torno do título BM, BW. O espaço em branco chama a atenção para o objeto. Não é apenas mais fácil ver o objeto, mas ele se torna muito mais interessante e importante. Essa é a página inicial do Yahoo. Não há muito espaço em branco aqui. É difícil dizer o que é importante nesta página. Essa, por outro lado, é uma história totalmente diferente. A importância do espaço em branco não está apenas na atenção e na simplicidade. É também o seu design atingindo seu objetivo principal. Se o objetivo principal do seu site é que as pessoas pesquisem , é melhor garantir que toda a atenção esteja voltada para isso. Quando chegamos ao Google, sabemos instantaneamente onde clicar e para onde direcionar nossa atenção. É muito menos exigente pesquisar no Google do que no Yahoo E é muito mais provável que alcancemos nosso objetivo no Google do que nos distrair com o Yahoo e esquecer o que procuramos em primeiro lugar O espaço em branco não precisa ser branco. Pode ser de qualquer cor. É qualquer espaço não utilizado que esteja entre os elementos A palavra branco é uma sobra da época em que o design gráfico costumava ser feito apenas na impressão e em um pedaço de papel branco Vamos dar uma olhada nesse exemplo. Digamos que você esteja trabalhando em um site de aplicativo de táxi, você pode colocar uma foto como plano de fundo e não há nada de errado com isso. Ou você pode usar o espaço em branco para chamar mais atenção para a mensagem e o botão. A propósito, lembre-se de pintar com sobreposições de imagens; às vezes, você não precisa deixar a foto em preto Você pode manter a imagem colorida e ainda adicionar um tom de cor sobre ela, como neste caso Sabe, há muito tempo, antes saber alguma coisa sobre design gráfico, trabalhei como gerente de marketing e, como profissional de marketing, você precisa criar muitos materiais gráficos, materiais de design como folhetos, folhetos, revistas ou pôsteres, anúncios no Facebook ou Google Adwords ou capas do Facebook ou E eu costumava trabalhar com esse excelente designer gráfico que mais tarde se tornou meu mentor de design, basicamente E quando nos sentávamos e eu olhava suas iterações de design, eu sempre comentava que eu olhava para qualquer composição que estivéssemos fazendo Às vezes, seria como um livreto para nossa empresa. E eu diria, Oh, você sabe, por que você não preenche esse espaço? Há, tipo, muito espaço vazio, e eu sempre nunca gostei do espaço vazio quando ele fazia os desenhos, e eu sempre o pressionava a tentar preencher esse espaço vazio com alguma coisa porque eu sentia que estava vazio. Oh, cara, eu não tinha ideia naquela época. Essa é uma reação bastante comum designers iniciantes ou clientes que não têm nenhum treinamento em design, mas estão vendo o trabalho de uma espécie de chapéu de designer ou da perspectiva de um designer Eles têm essa insegurança sobre o espaço vazio e sempre tentam preenchê-lo com alguma coisa Para eles, parece que é um espaço vazio e não foi projetado o suficiente. Lembre-se de que nenhum usuário jamais reclamará de muito espaço vazio No entanto, eles ficarão incomodados com muita bagunça na página Meu site de portfólio pessoal usa muito espaço em branco. Eu queria chamar toda a atenção para mim primeiro, uma pessoa por trás do trabalho. Então, removi todas as distrações e apontei todo o foco para mim. A Apple sempre faz isso com maestria. Usar muito espaço em branco é um design muito volumoso. Esse MacBook parece super importante e muito mais valioso quando é exibido dessa forma espaço em branco melhora quase tudo, mesmo nos parágrafos. Lembra o que aprendemos sobre espaçamento entre linhas? Aumentar o espaçamento entre linhas é basicamente adicionar mais espaço em branco entre as linhas E adivinha? Projetar com muito espaço em branco é, na verdade, mais fácil do que projetar sem. Dier Rams é esse designer industrial, mais conhecido por seu trabalho para Brown Ele cunhou esses dez princípios populares para um bom design O décimo princípio final é que um bom design é o mínimo de design possível Portanto, não tenha medo de espaços em branco e de fazer menos. Isso é simplesmente um bom design. Há uma exceção com espaço em branco para itens relacionados e que fazem parte do mesmo contexto que devem estar mais próximos uns dos outros. Colocar um espaço em branco entre eles os desconectará e parecerá objetos separados e não relacionados, assim como aprendemos na lição sobre proximidade Por exemplo, o título e o parágrafo desta página, espaços em branco os desconectarão um do outro . Isso adiciona mais foco ao parágrafo, mas agora é um objeto independente, aumentando a quantidade de elementos que o visualizador precisa processar. Na versão original, o título e o parágrafo parecem conectados devido à proximidade e serão percebidos como um único grupo Assim como os links na barra de navegação, por causa de sua proximidade e agrupamento, eles serão identificados como um único grupo instantaneamente Esse tipo de agrupamento facilita o processamento dos elementos na página pelo espectador, além de ser mais organizado e significativo 44. Design Tricks: Este é o trabalho de Andy Warhol porque não é realmente um web designer, mas ele é um artista pop muito influente. Nestes Warrick. Ele usa um truque de design popular chamado Repetição. É quando você pega um item que pode não ser interessante por conta própria, mas repetido várias vezes. E agora temos algo que é mais interessante. Esta é uma página do site do Zendesk. Você pode ver aqui como a repetição fora de perfis quadrados no mesmo estilo criou um layout muito interessante. O truque de repetição não se aplica apenas a itens idênticos. Você pode ser aplicado a quase tudo, como layout de espaçamento de estilo de cor. Sua petição fora de cor é aquele que é usado com bastante frequência e pode realmente amarrar o design juntos. Você vê como as cores do título se repetem como cores de fundo das imagens de perfil . Se nos movermos abaixo das imagens, você verá essas cores sendo repetidas nesse parágrafo também. Esta página ficaria muito menos atraente e interessante se essas roupas não fossem repetidas em qualquer outro lugar. Você sabe que é mais uma repetição que está acontecendo nesta página? Está no layout. Fotos fora do perfil, a posição de uma pessoa, como ela está indo para o passeio e seus nomes ficam no canto superior esquerdo. Isso é uma repetição de layout. Na verdade, estou um pouco desapontado que esta e cinzas profundas não são corruptos do lado direito . Como o resto, eles estão falhando a repetição um pouco Por causa desse detalhe, vamos dar uma olhada em outro layout. Repetição. Isso é muito comum na Web, e você verá isso em tantos sites. Você vê como o layout está sendo repetido. Uma ilustração de um lado tinha linha e parágrafo a linha do outro lado em como exatamente fora. Isso é exatamente para a repetição. Vamos aplicar repetição na prática. Digamos, temos esse conteúdo do nosso cliente. São os benefícios de seus serviços porque cada parágrafo, com suas manchetes, fazem parte dos mesmos contatos. Podemos criar uma repetição em seu layout. Podemos usar um layout de tela dividida dividindo a tela e metade exata. Assim, no 1/2 colocando a cópia e, por outro lado, colocando uma imagem completa em algumas imagens e repetindo cores e pode parecer muito bonito como este ter repetido vários itens aqui eles colocam para fora, obviamente, o repetição de colares. Estou provando cores das fotos e repetindo sobre como fazer manchetes e final a repetição fora do estilo do fotógrafo. Fotos antigas estão no mesmo estilo, o tiro do topo de algum item que está deitado em um fundo colorido. Que tal outros conceitos de design? Você pode notá-los? O contraste. Eu apliquei em contraste aqui? Definitivamente. Você verá o contraste entre o título e o parágrafo em seu tamanho, peso e cor. Obviamente um enorme contras entre as xadrez esquerda e direita, um sendo branco, outro sendo cor brilhante. Que tal espaço em branco? Há espaço em branco em todos os lugares, cada bloco branco onde a cópia Seitz tem uma quantidade saudável de espaço em branco em torno dele para trazer sua tensão e para o conteúdo. Há até espaço em branco dentro dessas fotos. Quem tirou essas fotos , fez um ótimo trabalho lá. Posso saciar uma boa fonte ligando os recursos. Mas a razão pela qual a repetição é tão poderosa no design é porque a maneira como olhamos para o mundo como seres humanos, tentamos reconhecer padrões em tudo o que olhamos, e quando reconhecemos um padrão, nosso cérebro passa a Um pouco excitado. O Luke Luke. É a mesma gripe que eu vi antes. Sim, eu sou. O design inteligente está fortemente ligado à psicologia humana. Não é que existam algumas leis da física que regem o design. É completamente centrado em humanos na realidade, sempre nossos designers. Somos nós que exigimos essa repetição e espaço em branco e contraste e todas essas abordagens de design porque já gostamos delas. Você já sabe o que parece bom e o que parece. É uma espécie de comida. Você já sabe o que é bom e o gosto ruim. Você não tem que ir para uma escola de culinária, Teoh. Aprender o quê? O que sabe bem e o que não. E se você aprender para suas receitas e praticá-las quando você cozinhar algo bom, você vai notar isso, e todos os outros também. 45. Truque de design: consistência: Qual é a maneira mais fácil de diferenciar um design bom de um ruim. É por meio da consistência. Olhando para o site e percebendo a consistência do layout, tipografia, cores e tudo A inconsistência é muito fácil de identificar. Estamos programados para reconhecer padrões em tudo o que observamos, e é muito fácil perceber quebras nesses padrões Quebrar o padrão é como uma falha na matriz. Às vezes, é difícil dizer exatamente o que está quebrando o padrão, mas é sempre facilmente perceptível. Muitas vezes, é melhor usar design ruim e ser consistente com ele do que ter um design bonito e não ser consistente. A consistência não é realmente um truque, mas mais como um princípio de design. Então, estou trapaceando um pouco aqui ao incluir isso como um dos truques de design A consistência se aplica a tudo, mas eu a dividi em várias categorias para facilitar a compreensão. A primeira e mais óbvia delas é a consistência do layout. Esse é exatamente o propósito da rede. A grade é uma ótima maneira de criar consistência no layout. Quando o alinhamento se repete na página, os usuários percebem e começam a esperar que as coisas sejam organizadas de uma determinada maneira Quando essa expectativa é atendida, os usuários têm uma experiência alegre do site e confiam Uma maneira pela qual vejo que os web designers geralmente quebram as consistências do layout misturando diferentes alinhamentos de texto Todos os três elementos desse quadro estão alinhados no centro uns com os outros, ou pelo menos contêm caixas, mas o texto do parágrafo está alinhado à esquerda Isso está quebrando a consistência do layout e fazendo com que o design pareça desleixado Temos que escolher um estilo de alinhamento e continuar com ele, ou alinhamos tudo ao centro ou alinhamos à esquerda Qualquer uma dessas opções é adequada, desde que mantenhamos um alinhamento. Esse é um exemplo evidente. Um exemplo mais sutil e não evidente é quando temos inconsistência entre as diferentes seções da página Por exemplo, a seção central tem o conteúdo alinhado à esquerda, mas outras seções têm o centro alinhado Tudo bem se fosse um tipo diferente de texto, um título secundário ou outro, mas fosse o mesmo título, mas com um alinhamento diferente Isso é bastante sutil, pois se espalha entre diferentes seções. À medida que percorremos uma página, vemos apenas uma seção por vez, então essa inconsistência sutil não é um crime muito grande Mas é um bom hábito manter um estilo em diferentes seções e até mesmo em diferentes páginas de um site. Criar consistência na tipografia é bem simples. Só precisamos criar estilos de fonte específicos para cada ocasião e depois continuar com eles. Um site tem vários tipos diferentes de textos. Existem manchetes principais. Esses geralmente são do maior tamanho. Então você tem títulos de nível menor, como títulos e subtítulos Obviamente, você tem um texto de parágrafo e botões. Você pode ter mais, por exemplo, legendas minúsculas e textos de notas de rodapé, links de menu e assim por diante O segredo é definir um estilo único para cada ocasião e ficar com ele. Por exemplo, ter um estilo de parágrafo e mantê-lo em seções, páginas e em qualquer lugar ao lado. No Fig Mine e no Webflow, esse estilo de texto é, na verdade, um dos futuros, então praticaremos a criação estilos de texto em nossos projetos reais A consistência da cor quase não precisa de nenhuma explicação. É o mais evidente e simples de ver. Na maioria das vezes, estamos trabalhando com a marca e um logotipo existentes. Isso significa que as cores foram definidas para a empresa, e essas cores devem ser consistentes não apenas no site, mas em todas as suas representações, folhetos, cartões de visita, PDFs, front office e assim por diante Em momentos em que não temos cores de marca definidas , fazemos isso sozinhos. Normalmente escolhemos uma ou duas cores primárias como azul e verde neste exemplo, e o resto das cores são monótonas, pretas, graciosas Uma forma de quebrarmos as consistências misturando formas diferentes na página Em uma página como essa, que tem essa borda lisa e arredondada e ondulada, introduzir uma forma de ângulo como essa quebraria a consistência, fazendo com que parecesse muito estranha, mas manter as mesmas formas suaves criaria a consistência em toda a Não precisa ter exatamente a mesma forma, desde que tenha características semelhantes. Essa inconsistência com as formas pode realmente acontecer em lugares muito inesperados Por exemplo, quando usamos recortes como esses, eles criam bordas suaves na página Eles não são evidentes, mas estão lá. Quando colocamos uma foto de caixa normal não recortada na próxima seção, estamos introduzindo uma nova forma conflitante De repente, a partir de bordas naturais lisas, ela passou para linhas rígidas e retas muito rígidas e até criou essa nova forma que não existia antes. Assim como mencionei na aula de ilusão de ótica, colocar objetos e formas em uma tela preta afetará essa tela e criará novas Isso é especialmente verdadeiro para linhas retas e retângulos. Mas se usarmos o recorte novamente, essas linhas rígidas e formas estranhas desaparecem e a seção se torna consistente com a seção do herói acima. Quando se trata de fotos, também precisamos ser consistentes com o estilo das fotos. Por estilo, quero dizer um estilo fotográfico, como cores, filtros, a aparência dos modelos e assim por diante Neste exemplo, por exemplo, eu não fiz um bom trabalho ao escolher fotos do mesmo estilo. O esquerdo tem uma aparência mais polida, enquanto o segundo é mais natural O trabalho da câmera também parece bem diferente. Não sou fotógrafo, mas percebo que isso não foi tirado no mesmo estúdio nem pelo mesmo fotógrafo. A maioria dessas fotos terá estilos muito diferentes porque são tiradas por fotógrafos diferentes e em cenários diferentes Pode ser muito complicado manter a consistência, mas existe uma maneira Uma forma é escolher imagens do mesmo colaborador. Eu já mencionei isso antes. Muitos sites de estoque terão a opção de ver fotos do mesmo colaborador, ou seja, do mesmo estúdio fotográfico, fotógrafo Se escolhermos fotos do mesmo colaborador, obteremos mais ou menos os mesmos resultados, porque o mesmo fotógrafo terá o mesmo estilo, mesma câmera e os mesmos hábitos de tirar fotos Embora não seja 100%, é o mesmo porque às vezes eles têm apenas fotos diferentes e maneiras diferentes de fotografar em diferentes cenários. Além disso, seus estilos podem mudar de ano para ano. Essa é uma maneira muito simples e excelente de tornar seu design consistente e mostrar que é um design de alta qualidade. Sei que parece um detalhe insano ao qual prestar atenção, mas quando se trata de design, mas quando se trata de design, o diabo está nos A atenção a esses pequenos detalhes é o que diferencia um designer medíocre de um designer de alto nível Um último lugar em que quero discutir a consistência são ícones e ilustrações. A web está cheia de ícones e ilustrações. Eles são uma excelente maneira de mostrar ações diferentes, demonstrar algum conceito complicado ou simplesmente dar uma aparência única ao design. Assim como a fotografia, combinar ícones com estilos diferentes criará uma aparência muito inconsistente e sem polimento Não é divertido. Na verdade, ícones e ilustrações são ainda mais implacáveis do que Neste exemplo, o terceiro ícone tem um estilo diferente dos dois primeiros. É a mesma paleta de cores, semelhante às tonalidades, mas ainda parece fora de lugar A diferença está apenas em um pequeno detalhe, na verdade. Os dois primeiros ícones têm um traçado de contorno. É aquela linha preta que delineia cada objeto no desenho Mas o terceiro não o tem e cria uma aparência completamente diferente. Neste exemplo, todos os três ícones são do mesmo pacote e têm exatamente o mesmo estilo. Apesar do mesmo tamanho, a primeira a ter linhas mais finas quando a última é um pouco mais grossa O terceiro ícone está cutucando meus olhos. cliente que não é designer não perceberá exatamente o que há de errado com isso. Talvez eles não consigam identificar isso, mas perceberão essas inconsistências e não acharão que o design é muito bom Para evitar essas inconsistências em ícones e ilustrações, assim como nas fotos de banco de imagens, escolha-os na mesma fonte Meu lugar favorito para obter ícones é flat icon.com. Os ícones aqui e em outros lugares geralmente são organizados por pacotes. Todos os ícones do mesmo pacote terão o mesmo estilo, tamanhos, espessura de linhas e tudo mais. Ao escolher ícones para seus projetos, procure pacotes em vez ícones individuais de pacotes diferentes Isso lhe dará uma aparência consistente e polida e fará com que você projete como um profissional 46. Design Tricks: aqui está um pouco avançado, mas muito legal truque de design. Este truque vai realmente fazer seus projetos olhar muito sólido. Designers iniciantes que geralmente assustou fora dele e muito, muito você vai ver o trabalho amador usando este truque. Então, se você usar isso, seu trabalho certamente aparecerá como um design profissional, o truque é pegar diferentes elementos e sobrepô-los. Vê como a mão da estátua se sobrepõe ao título da National Geographic e também ao quadro amarelo? Torna o design mais interessante e adiciona uma dimensão extra à composição. A execução deste truque é bastante simples. Você pega dois elementos separados e os sobrepõe. Ele liga a elementos de outra forma desconectados juntos, e também cria drama no design. Algo interessante está acontecendo em nossos olhos agora interessado em resolver o quebra-cabeça, fazendo um design antigo e amarrado juntos em vez de apenas colocar na página aleatoriamente. O truque é muito comum. No projeto da prisão. Você verá manchetes sobrepostos com pessoas, imagens umas com as outras, ataques com tags, você nomeia no Web design. É um pouco mais medido e menos extremo como você vê na impressão. Como você pode ver sobreposições em Estes exemplos são mais sutis no passeio. Você tem imagens que estão sobrepostas umas com as outras, mas elas não criam nenhuma sobreposição complexa com blocos de texto e, à esquerda, o texto se sobrepõe para a imagem de fundo. Bastante simples. Uma razão pela qual eu amo esta técnica é porque você pode adicionar a um design de outra forma suave e agradável toque de emoção foi recentemente trabalhando em sua seção de preços. Normalmente, os produtos têm várias plantas de preços certo, e que tem algum movimento para jogar e criar um design interessante. Mas este só tinha um. Meu projeto inicial era algo parecido com isso, que parecia muito sem graça e chato. Não houve emoção hoje. Enviar parecia que foi colocado aleatoriamente lá. Criei uma nova forma e a sobrepus atrás da caixa. Melhoria instantânea. Agora, esta é uma forma não tradicional. Se você introduzir algo assim na página, você tem que repetir novamente. Lembre-se da técnica de repetição. Então eu usei a mesma forma e truque sobreposição nos outros lugares da página, o que fez um resultado muito bom. Vamos ver como podemos aplicar isso na prática. Digamos que temos uma seção na página onde queremos mostrar algumas imagens. Poderíamos organizar essas imagens para algo assim, o que é razoável, mas um pouco chato. Ou podemos sobrepô-los e criar amore. Interessante visual. Você já viu esse doentio 1.000.000 vezes com colagens de fotos. Bem, ok, temos algo sobreposto aqui sobre o que fazer quando queremos usar apenas uma foto. Simples. Vamos desenhar caixa e sobrepô-lo com a imagem. E agora temos um design interessante. Além disso, a foto não parece estar pendurada aleatoriamente, mas parece que está no lugar onde pertence. A cor da caixa é importante. Neste caso. Eu tenho apenas simples a cor da imagem. Mas em outros casos, esta é uma boa oportunidade para usar colorista da marca ou técnica de repetição para repetir as cores em toda a página. Uma coisa a notar. Truque de sobreposição. Muitas vezes quebra a grade. Essa caixa de fundo não está alinhada com a grande sobreposição e criar nossa espada são conceitos opostos. Sobreposição Trick está intencionalmente tentando quebrar o alinhamento e trazer algum financiamento. A composição Quebrando o Grande intencionalmente não é um crime, como já mencionei o intencional é o teclado. Toda decisão de design tem que ser intencional, e se é então quebrar e dobrar as regras, um pouco é bem-vindo. Neste caso, na verdade, não estamos a mexer com o acordo. As caixas no fundo. É uma espécie de parte da tela de fundo o imposto de imagem e outros elementos sentam-se naquela tela, que em si não tem um grande É os elementos que estão nele que saem na grade. O mesmo vale para completo com imagens de fundo. Eles são parte fora das câmeras e sentam-se na camada de fundo para que eles não precisam ser alinhados com o grande. Vamos fazer um exercício para que você possa praticar essa técnica de sobreposição. 47. Assignment: sobreposição: Nesta tarefa, você praticará sobreposição e um pouco No arquivo Figma, preparei um quadro com três blocos de texto dentro Você criará uma seção de benefícios para um aplicativo de viagens. Com base na forma como eu organizei o texto, acho que você pode adivinhar que eu quero que você crie esse layout alternativo Texto em um lado e imagem no outro lado. Mas em vez de ilustrações usando fotografia normal, quero que você encontre fotos para cada bloco de texto Dessa forma, você também praticará encontrar fotos. Para o estilo de sobreposição, quero que você escolha um estilo e o use com os três blocos Você pode usar um tipo de sobreposição de colagem de fotos. Isso exigirá que você encontre várias fotos para cada bloco. Ou você pode usar uma foto e usar uma caixa de fundo atrás da foto. Como sempre, use outros conceitos que você já aprendeu, use a grade, escolha os telefones, crie hierarquia e assim por diante Não vou fazer uma demonstração de exemplo desta vez porque você já sabe como fazer tudo isso. Divirta-se. 48. Design Tricks: design compartilha muitas semelhanças com a música. Tal como os designers. Músicos também usam truque de contraste, que pode ser contraste entre notas altas e notas baixas entre ir rápido e ir devagar. Eles também usam repetição, que é o ritmo do afundado. Eles até usam espaço em branco, que são pausas e partes silenciosas da música. Mais uma técnica. Estas duas partes de campo chama-se Tensão na Música. É quando a melodia começa a pegar. Ah, e é uma espécie de acrescenta ao impulso e, em seguida, torna-se um pouco mais dramático e em algum ponto tipo de explode nesta nação me matar em, por exemplo, e música techno. É meio que indo para um ritmo muito pesado. Atenção é algo que torna qualquer trabalho criativo interessante, e é usado em outros campos além do design e da música. Por exemplo, na ficção, a tensão é chamada de suspense. Então, como a tensão é criada no design? Este é um quadrado colocado plano sobre a superfície, em equilíbrio completo e em alinhamento central? Não há tensão aqui. Nada está acontecendo. Sem drama. É sólido e aterrado. Que tal agora? Esta é uma história diferente, não é? A praça não está mais plana. ele está de pé em seu canto, que parece que ou ele vai cair sobre o zagueiro no lado plano com uma inclinação simples , nós criamos muita tensão. Elementos de inclinação é uma maneira de criar atenção. Há mais. Você pode mover elementos para a borda do quadro ou mover elementos fora do equilíbrio ou partes altas do objeto. Isso é algo com que já jogamos como parte do corte extremo. A tensão é uma das razões pelas quais o corte extremo é um truque tão interessante de usar . E se a colheita extrema é desigual, como este cartaz de filme, aumenta ainda mais a tensão. Lembre-se a regra dos terços Tensão é exatamente por isso que esta regra funciona muito bem. Quando objetos no centro da dívida se sentir estável e um pouco chato. colocação fora do equilíbrio pode criar uma aparência mais visualmente interessante. A sobreposição é outra maneira de criar tensão. A sobreposição tem outros méritos, como adicionar dimensão extra porque os objetos são colocados em camadas uns sobre os outros ou porque elementos interligados amarram o experimento juntos. Mas também acrescenta tensão porque dois objetos estão interagindo uns com os outros de uma forma muito interessante. Uma maneira de criar tensão e movimento no design é usando formas diagonais ou angulares. Esse tipo de tensão é muito útil quando você quer retratar velocidade e movimento em seu design. Por que as formas diagonais criam tensão e movimento é muito fácil de demonstrar? Isto ainda é imagem, mas podemos sentir esse círculo prestes a rolar para baixo. É assim que ângulos no sentimento fora do movimento no design. 49. Assignment: tensão: Nesta tarefa, você praticará a tensão. Definir o método de tensão requer alguma prática. Eu quero que você relaxe e apenas brinque. Não se preocupe se você não estiver muito feliz com o resultado, apenas divirta-se com ele. É assim que geralmente a tensão funciona. Você mexe por um tempo e, em algum momento, uma das versões parece muito boa Há um quadro neste arquivo figma. Quero que você projete a seção de forma a criar alguma tensão no design. Como já discutimos, existem várias maneiras de criar tensão, por exemplo, usando ângulos. Como você usa ângulos? Bem, lembre-se do layout clássico de tela dividida que costumamos usar para essas seções. Em vez de ter ângulos retos e eretos, podemos torná-los inclinados Para editar qualquer forma dentro do Figma, basta clicar duas vezes nela ou clicar em editar objeto na barra de ferramentas Agora você terá esse tipo de visão. Os pontos nos cantos do retângulo podem ser arrastados Arraste-os ao seu gosto para criar um retângulo inclinado. Quando seu calor de imersão entrar, não se esqueça disso, porque a tela agora está bloqueada nesse modo de edição da forma e você não poderá realmente clicar em nenhum outro elemento e fazer qualquer outra coisa na página Às vezes, clico duas vezes acidentalmente em formas como essa, o que me coloca no modo de edição e o que me coloca no modo de edição e não consigo clicar em mais nada, e me pergunto o que diabos está acontecendo, e não é muito evidente no Vikma que você está no Lembre-se de que, se você não conseguir selecionar algum elemento, isso significa que você provavelmente está no modo de edição de uma das formas. Agora podemos usar a forma para recortar nossa imagem. Podemos preencher a forma com uma imagem, da maneira usual, basta colocar a imagem dentro dela como preenchimento. Ou, como já temos a imagem na página, podemos simplesmente editar a forma dessa imagem. Lembre-se de que a imagem no Figma é apenas uma forma regular com preenchimento de imagem por dentro Qualquer coisa que você possa fazer com um retângulo ou qualquer outra forma, você pode fazer com a imagem dois Basta selecionar a imagem, clicar em Editar objeto e alterar os pontos da forma para criar uma forma angular Se precisar alterar a posição interna da imagem ou alterar o tamanho, você pode fazer isso usando a ferramenta de corte. A propósito, usar essas formas para cortar imagens de forma criativa no design é chamado de mascaramento Essa forma que acabamos de criar é chamada de máscara. Agora amplie e posicione a imagem dentro da máscara do jeito que você quiser E aí, com alguns cliques, já temos um layout com muita tensão Em seguida, você pode alterar a cor do plano de fundo, se quiser. Ou mude o ângulo e a posição da máscara. Outra forma de criar tensão é alinhar um objeto na borda Isso só pode ser feito com determinados objetos. Por exemplo, você pode fazer isso com um título ou algum texto, se for grande o suficiente Fazer isso com um texto de parágrafo fará com que pareça um erro. Às vezes, uso esse tipo de alinhamento de bordas quando estou numerando etapas ou algo parecido Além disso, você pode criar tensão usando um layout desequilibrado ou sobrepondo alguns elementos Por exemplo, sobrepondo o título essa foto ou colocando alguns elementos a essa foto ou colocando alguns elementos de equilíbrio. Tudo bem. Agora é sua vez, você já tem ideias suficientes para criar tensão e não se esqueça de estilizar o título, o texto e o botão Mais importante ainda, divirta-se neste exercício, porque quando se trata de tensão e truques sobrepostos, o melhor é se você estiver se divertindo e brincando com Então divirta-se, brinque e veja se funciona. Se isso não acontecer, não se sinta muito mal com isso. Isso virá com um pouco de prática. 50. PARTE: você terminou a primeira parte deste curso, dê a si mesmo um tapinha no saco. Essa parte foi um punhado. Ótimo trabalho. Você aprendeu os segredos do bom design e como fazer seu trabalho parecer bonito nesta parte. Vamos ficar um pouco mais sérios. Ain designer home page do início ao fim, vamos. 51. O método Mimic: Quero compartilhar com você um segredinho sujo de todas as pessoas criativas. Cada designer, cada artista, cada inventor. Todo músico que já viveu usou esse método para conseguir dominar sua habilidade. Este método é chamado de método mímico. Você vê o início dos passos. Aprender qualquer nova nave é imitar os especialistas nesse campo. Então, se você quiser aprender a cozinhar, pegue Gordon Ramsés ou o livro de receitas de John Oliver, e comece a praticar algumas receitas. Você não começa inventando comida do zero. Você começa a imitar essas receitas e depois praticá-las. E uma vez que você ganha um pouco de experiência e um pouco mais de confiança em qualquer receita que tenha sido cozinhado, então você começa a ajustá-los um pouco. E então, em algum momento, você começa a inventar e criar suas novas receitas. Se você está aprendendo a tocar guitarra, você não começa por escrever novas músicas, nem você começa por imitar outros músicos, que significa que você começa a tocar suas músicas. E como qualquer guitarrista iniciante, você começa aprendendo maravilhosamente. Muitos designers iniciantes ficam presos porque pensam que no momento em que começam projetar, precisam começar a criar um trabalho novo ou original, e ficam desencorajados quando isso não acontece. Eles pensam que eles não têm talento para isso, mas eles pulam a facada mais importante, imitando os especialistas imitando especialistas. Não só você obtém experiência e confiança, mas também pratica hábitos muito bons porque todo bom trabalho de design está cheio. Com todos os bons hábitos de design que discutimos neste curso ah, ser tipografia e layout consistência e todos os truques de espaço em branco e tensão e sobreposição tudo o que está em bom. Eu faço um bom trabalho de design, e você está basicamente praticando tudo isso enquanto você está imitando alguém em uma espécie de copiar e replicar o seu trabalho e inspirar o uso do seu trabalho é uma inspiração. E uma vez que você começa a criar seu próprio trabalho original, você já tem muito bons hábitos de design arraigados em você. A imitação tem três estágios. estágio um é lidar com isso. Está levando alguém trabalhando, só copiando. Obter pixel por pixel ele classificar fora como tocar música de outra pessoa ou você cozinhar lasanha usando uma receita. Isso é feito para a prática e não para projetos reais. Quando você está aprendendo copiando seu aprendizado um monte de decisões de design humano que foram tomadas por um profissional. É aqui que toda pessoa criativa começa. Seja puxado McCartney ou Picasso no estágio dois, você está se remixando. É levar o trabalho de outra pessoa para dar a sua própria reviravolta. Assim como receitas de comida. Você começa a ajustar os ingredientes. Pouco a pouco. Mudam os telefones, usam as cores, ajustam as formas um pouco. Agora você criou algo diferente. No entanto, se você colocar dois trabalhos juntos, a inspiração é claramente visível. Nesta fase, você já pode praticar o trabalho com projetos reais na fase final três. Agora você está tirando inspiração não de um trabalho em particular, mas mais como várias obras diferentes ou estilos diferentes e talvez até mesmo como tendências. E aqui você adiciona ainda mais toque pessoal. Então o resultado final não se assemelha mais a nenhum trabalho em particular. E você não quer dizer que é um remix deste site em particular ou deste design em particular , embora às vezes você poderia dizer que há claramente uma influência ou algum estilo específico ou alguma tendência específica no design, não há nível além. Há algo como um trabalho verdadeiramente original, porque se as coisas não são realmente baseadas na realidade e influência da realidade e estilos existentes , então ele só se torna irrelevante e bastante confuso para o público regular. Tipo os bizarros itens de moda high-end. Muita originalidade levará a produtos que as pessoas não entendem e não querem usar. Isso não significa que as pessoas não gostem de coisas novas. Eles dião. As pessoas fazem pouco apreciando seus sites que parecem frescos e sua queda técnica estilista de moda . Mas eles gostam dessas coisas porque na maioria das vezes eles se assemelham a algo do passado e a algo existente, mas olhando para isso de uma perspectiva muito nova e nova perspectiva. Então é olhar refrescado de algo familiar. Assim, o gosto do público realmente importa para um determinado trabalho a ser apreciado ou rejeitado. Este estranho olhar jaquetas, suéter ou esponja bola estende-se é e familiar para você e para mim. Mas pode estar tirando inspiração de algum outro Warrick e público particular fora. Esse show pode estar familiarizado com essa inspiração, então eles podem facilmente compreendê-la e apreciá-la. Hoje você começa a dizer isso com uma cara séria. Além disso, os estágios são como um botão de volume, não transição de corte clara de um para outro, mas mais como aumento suave da intensidade, com diferentes níveis dentro de cada estágio. Vamos praticar todas essas três etapas. Mas antes de fazermos isso primeiro precisamos aprender a encontrar a inspiração certa e basear nosso trabalho nisso. E fazer isso em vez da Trecia uma vez. Então vamos fazer isso a seguir. 52. O maior segredo dos designers: inspiração: Pablo Picasso estava procurando uma inspiração para seu próximo trabalho Ele ficou fascinado pela arte africana. Ele usou a máscara da Tribo Dogon como inspiração e se lançou no estilo Kubi, pelo qual é mais famoso Como você pode ver, a semelhança é incrível. Na verdade, seu trabalho era bem diferente antes desse período. Uma boa inspiração pode ser igualmente transformadora para seu trabalho Digamos que você esteja trabalhando em um projeto para criar um site para uma empresa financeira. Seu primeiro instinto pode ser acessar o Google e procurar alguns exemplos de outros sites financeiros Mas o que você tem aqui são modelos de dados com a mesma aparência, e não há nada de inspirador nisso Por que o Google é um lugar ruim para pesquisar inspiração em design? Porque o Google não é um site que organiza bons trabalhos de design Ele tem um propósito muito diferente e pesquisa e classifica sites de forma a mostrar conteúdo que existe, que tem autoridade, existe há muito tempo e foi visitado por muitas pessoas. E isso é exatamente o oposto do que você quer em inspiração de design. Uma busca por palavra-chave para inspiração em sites de finanças me levou a um artigo que apresentava sites como esse, e o artigo o chamou designs de sites inovadores e inspiradores Não é à toa que apresenta esses designs de dados quando o artigo é de 2016. Isso é muito antigo para se inspirar em web design. Adicione ao fato de que os sites mencionados provavelmente foram criados alguns anos antes do artigo. Além disso, o fato de que o autor pode não ser designer e de você ter exemplos terríveis de sites. Muitos designers iniciantes cometem esse erro, procuram inspiração em web design em lugares errados e começam a imitar trabalhos de web design muito desatualizados ou feios Usar inspiração de qualidade para seus projetos o preparará para obter ótimos resultados de design. E vou te ensinar meus lugares favoritos para encontrar ótimo e belo web design ou outra inspiração de design. Um deles é o dribble.com, que é o Dribble com três Vamos fazer a mesma pesquisa no site financeiro aqui. Aqui estão alguns dos resultados de perto. Isso está milhas à frente do que vimos no Google. O design, o estilo, o layout e os Carls parecem frescos e modernos aqui, não nos anos 90 Dribble é basicamente um designer show and tell. Para contribuir, você precisa ser convidado por um membro existente, então isso cria um nível de controle para evitar que os maus funcionem O algoritmo de busca é diferente do Google 2. Aqui, um dos parâmetros de classificação é o número de curtidas, ou seja, quantos designers gostaram do trabalho Essa é uma maneira melhor de contar um bom trabalho do que um blogueiro financeiro aleatório escolhendo sites com base em seu Muitos desses trabalhos são apenas designers brincando. Isso significa que eles ainda nem foram transformados em sites reais. Essa é uma inspiração que está à frente de seu tempo. Depois de um tempo, você começa a seguir designers de que gosta e cria uma inspiração personalizada muito boa para si mesmo. Você escolhe designers que tenham um estilo de haste que você goste e um design especial. Também uso esses dois sites para encontrar minha inspiração. Esses sites organizam sites ativos e páginas de destino. Se você não sabe o que é uma landing page, é uma página em um site onde um visitante chega. Pode ser uma página inicial do nosso site ou uma página especial dedicada usada para marketing. Gosto muito desses sites porque eles são muito bem organizados. As capturas de tela estão bem exibidas e eu posso ver o site ao vivo e conferir com mais detalhes Lá eu posso até ver telefones que usam tamanhos, animações e interações, e até mesmo ver outras páginas do site Realmente um excelente lugar para encontrar inspiração. Meu terceiro lugar favorito para procurar inspiração é, na verdade, o Pinterest Embora no Pinters você precise ser um pouco mais cauteloso, não é organizado por designers Então, assim como o Google, você pode obter muitas maçãs podres. Mas eu procuro inspiração no Pinterest por um motivo. Eles têm um algoritmo de busca incrível onde qualquer imagem que você esteja procurando, eles podem encontrar estilos semelhantes com uma precisão incrível. Por exemplo, se você encontrar um estilo de design que goste, clique nesse ícone. E olha isso. Sem que eu especifique nada, designs de superfície que têm um estilo muito semelhante Você vê como os exemplos à direita têm formas e bordas onduladas, lisas e arredondadas, especialmente nesse design específico É tão parecido em estilo, é estranho. Aqui, outro exemplo de um estilo totalmente diferente. Desta vez, sem cores vibrantes ou formas arredondadas, mas mais designs fotográficos pesados. Essa é uma ferramenta muito poderosa para um designer. Muitas vezes, encontro um estilo específico que eu quero, mas não consigo ver outros exemplos do mesmo estilo porque não consigo colocá-los em palavras corretamente. Ao usar pinras, posso encontrar muitos exemplos do mesmo estilo e coletar vários exemplos diferentes para me inspirar Assim como porque uma maneira excelente , mas um pouco avançada, de procurar inspiração é procurá-la fora do campo do web design. Por exemplo, eu estava trabalhando em projeto que era um site de caridade e queria criar algo e criar algo premium e um pouco diferente, que não se parecesse com outros sites de caridade. Em qualquer lugar que eu procurasse inspiração, tudo o que eu encontraria era esse tema muito comum de crianças africanas de aparência triste. Isso parece muito clichê. Desculpe, crianças. Em vez disso, procurei pôsteres de filmes, porque os pôsteres de filmes têm um design incrível Eles retrataram muito drama e tensão. Encontrei esse pôster de sicário e gostei muito do estilo Eu estava fazendo isso no Pinters, que me deu mais sugestões parecidas, e então bum, esse pôster apareceu Isso me deu ideias mais concretas de que eu poderia mesclar a foto de uma pessoa com outra coisa, assim como o rosto de Peter Dinklag se fundindo com a cena de rosto de Peter Dinklag se fundindo com a cena Isso me levou a criar uma seção de heróis que não se parece em nada com um modelo de site de caridade. 53. Assignment: quadro de humor: Quando designers reúnem trabalhos diferentes para se inspirar, eles organizam o que é chamado de quadro de humor Basicamente, é reunir qualquer inspiração que você acha será útil para o seu projeto. Isso, por exemplo, é um moodboard de um dos projetos de meus clientes Encontrei telas de diferentes páginas iniciais nas laterais que mencionei anteriormente. Você pode até mesmo se inspirar em seu próprio trabalho pessoal. Por exemplo, uma dessas fotos que eu coloquei aqui é meu próprio trabalho. A inspiração não precisa ser o design de um site. Você pode reunir ilustrações de sua preferência, telas de aplicativos, arte, arquitetura, fotografia, pôsteres de filmes ou, você sabe, máscara Do gun tribe just Não há regras. Basicamente, está definindo o clima do seu projeto, assim como o nome diz. Neste exercício, vamos praticar a criação de um moodboard Seu objetivo é acessar os sites de inspiração que mencionei anteriormente e reunir inspiração para um site para um aplicativo de compartilhamento Uber kin R. O aplicativo em si não é seu projeto. O projeto é basicamente um site, como uma página inicial do aplicativo de compartilhamento Right. Deixe-me demonstrar um exemplo. Vou criar um moodboard para um site de colaboração em equipe ou uma landing page Você sabe, como o Slack e o Trello, se você estiver familiarizado com isso Tenho meus sites de inspiração abertos aqui. Mas primeiro, vou começar a procurar sites, eu já sei. Vou conferir o Slack Asana, outro que eu conheço no Trello, e ver o que Quando você curte um site uma seção ou qualquer parte da página, basta fazer uma captura de tela Organizaremos todas as capturas de tela e imagens posteriormente. Ok. Vamos agora dar uma olhada em outros sites de inspiração. pesquisa drible com palavras-chave não é muito boa, então tente usar o mínimo possível de palavras-chave e s em palavras diferentes Esse não é ruim. Muitas vezes, no drible, os designers publicam a tela da página inteira, que você pode ver no anexo aqui Dessa forma, você pode ver a página inteira com mais detalhes. Vou salvar a página inteira. Aqui, eu gosto desses elementos de interface sobrepostos. Isso é bom porque dá mais ideia do produto. Vamos conferir outros sites de inspiração. Normalmente passo cerca de uma hora reunindo inspiração. É uma parte importante do processo de design e, se eu fizer essa parte com diligência, terei mais facilidade em projetar Caso contrário, muitas vezes preciso voltar e encontrar mais inspiração. R. Na verdade, o Pinterest é onde eu salvo inspirações aleatórias fora dos projetos se eu estivesse navegando aleatoriamente na web e me deparasse com um design interessante, eu o salvaria no Pinterest para referência futura É um ótimo lugar para ter sua própria coleção pessoal. Você pode criar seu quadro pessoal no Pinterest, instalar a extensão do navegador e salvar capturas de tela e imagens da web em sua coleção particular Depois, você pode voltar às cervejas mais tarde, quando estiver procurando inspiração para seu projeto Agora vou sair do assunto, não necessariamente para sites de colaboração em equipe. Isso não é ruim. Esta seção é muito bonita. Gosto da sobreposição de fotos com esses gráficos. La Paninja, ou Landbook, são excelentes porque podemos ver sites ao vivo, que podem nos dar ideias sobre animações, interações e tudo Acho que temos o suficiente, e agora vamos criar um quadro de humor no Figma e colocar todas essas fotos Desenhe uma moldura básica no Figma e coloque todas as suas capturas de tela nela Eu uso fundo escuro porque a maioria dos sites está em branco, então eles terão melhor visibilidade em uma moldura escura. Realmente não importa como você os organiza aqui. Você pode espalhá-los como quiser. Eu. E isso é tudo o que há. Esse é o nosso quadro de humor. Mais tarde, aprenderemos como realmente nos inspirar todas essas coisas que coletamos e como usá-las no projeto enquanto o projetamos. Agora é a sua vez. Vá em frente e colete inspiração para nosso site, que é para o aplicativo de compartilhamento R. 54. Tarefa: Design de página inicial do Figma: Saiba como reunir inspiração para nossos projetos e agora vamos aprender como usar essa inspiração em nossos designs. Como mencionei antes, há três estágios no método de mímica, que são copiar, remixar e criar o estágio final Nesta lição, vamos praticar a primeira, a cópia. Você criará uma das páginas de produtos da Apple. Seu objetivo é combinar o design deles o mais próximo possível , pixel por pixel. Ao fazer isso, você ganhará uma valiosa experiência prática. Você praticará o design de elementos muito comuns do site como barras de navegação e diferentes componentes, calçados e tudo mais, e fará tudo isso sem precisar se preocupar com cores , fontes, layouts e fontes, layouts e todo o material de design, porque você está apenas copiando o que já está lá Um pequeno passo de cada vez, assim como aprender a cozinhar ou tocar violão. Abra o arquivo Figma, vinculado a este vídeo. Aqui você encontrará a captura de tela da página. Não é a página inteira. Eu removi algumas das seções para simplificar as coisas, e pode não ser a versão atual, mas tudo bem. Não nos importamos com isso. É um design bastante simples e atemporal, por isso é perfeito para essa tarefa À direita, há uma moldura em branco onde você criará essa página exata. Ao trabalhar nessa tarefa, quero que observe todos os princípios de design que você aprendeu até agora Como eles usam a hierarquia visual? Quais métodos de contraste eles empregam? Como eles alinham elementos e assim por diante. Com o que você já praticou no Figma, você sabe o suficiente para concluir essa tarefa, embora eu comece e demonstre algumas das partes Neste quadro, incluí a captura de tela da página inicial. Está escondido agora. Se você ativá-lo, verá a versão fraca da captura de tela Eu diminuí a opacidade, que está selecionando esses 30% aqui Portanto, não está atrapalhando, então você pode trabalhar no design e colocar coisas nele sem que a captura de tela atrapalhe Primeiro, vamos adicionar a grade ao quadro para nos ajudar com o alinhamento. Selecione seu quadro e, no guia de layout, adicione uma nova grade, não esse tipo de grade quadriculada, mas o que queremos são colunas, 12, como de costume E usando esta seção aqui, essa seção de três colunas, podemos calibrar a grade porque isso revelará as margens, a medianiz que eles estão usando Então, por exemplo, começando pelas margens, comece a aumentar até chegar à borda deste pequeno cartão branco se você realmente conseguir vê-lo, porque a gravação de vídeo comprime o arquivo e talvez você não consiga, mas você pode vê-lo aqui, certo? E a sarjeta realmente parece ter 20 pixels, então está funcionando muito bem Colocar essa grade nesta página nos revela como a Apple lida com o layout e a distribuição dos elementos. Essa é uma informação muito valiosa em seu processo de aprendizado. Você pode examinar o funcionamento de outros designs. Por exemplo, podemos ver que, para a navegação aqui, na barra de navegação, no rodapé, aqui mesmo, eles não estão realmente seguindo as bordas da grade ou as bordas do conteúdo principal O conteúdo principal em um lugar diferente. A prática do setor é manter tudo alinhado ao contêiner principal de ponta a ponta Parece mais consistente e organizado, mas a Apple terá suas razões para isso Talvez a consistência com o site de compras, a pilha de códigos ou com qualquer outra coisa. Portanto, não espere uma combinação estrita com nossa grade de 12 pontos. Sim, embora seja um padrão da indústria os designers usem uma grade de 12 pontos, é mais um guia solto do que uma regra rígida. Além disso, usamos grades Figma porque elas nos ajudam durante a exploração do projeto Mas em sites de produção, não seguimos mais a grade porque criamos sites responsivos que se encolhem e se estendem como acordeão, e usamos regras de dimensionamento muito diferentes para obter essa capacidade de resposta, que você verá Vamos inserir a imagem do herói. Salvei todos os ativos de imagem neste arquivo para que você possa inseri-los facilmente em seu design. Eles estão dentro dessa seiva de ativos sob esta biblioteca de componentes, que você pode acessar aqui. Os componentes do Figma são elementos que podemos criar e reutilizar posteriormente Esse é um recurso interessante, e falaremos sobre ele mais detalhes na última lição. Mas, por enquanto, tudo o que você precisa dos componentes é pegar os ativos da imagem. Você também pode encontrar essas imagens na página de componentes que temos aqui. Na verdade, este é o lugar de onde a Figma está pegando tudo, todos esses componentes Se você excluir algo daqui, ele também desaparecerá da página de ativos. Então, encontre a foto do herói no painel Ativos e arraste-a para a tela assim. Em seguida, basta alinhá-lo para combinar com o design, sem mais nem menos Esta seção de heróis, como você pode ver, tem um fundo gradiente Você já trabalhou com gradiente, então não vou demonstrar isso aqui Tudo bem se você ficar preso. É assim que você aprende. Você pode assistir ao vídeo do exercício Soft Crop mais uma vez para refrescar sua memória, se necessário Mas vou te dar um rápido resumo das etapas. Então, para criar esse gradiente, você precisa de um retângulo Certo? Em vez do campo sólido, que está atualmente selecionado, você precisa do preenchimento de gradiente E o gradiente para aqui. primeira parada é essa, segunda parada está aqui, e é daí que ela se inclina Obviamente, direção não é o que você quer aqui. Você quer a direção vertical, que pode ser alterada girando isso. Assim. Então, tudo que você precisa fazer agora, que é amostrar a cor desse azul superior, e então o final precisa ser branco porque, como você pode ver, ele se conecta e desaparece e se conecta com o resto da página, que é branco Isso é exatamente o que fizemos com um exercício de colheita leve. Então você sabe como fazer isso. Talvez você fique preso, mas tudo bem. Vou refrescar sua memória, mas não quero demonstrar todos os detalhes Então, depois de fazer isso, obviamente, você terá que colocar esse retângulo atrás da imagem do Euro, que você pode fazer organizando as camadas, agora mesmo, isso está no topo E para organizá-la para trás, basta arrastar a camada para baixo e isso fará com que o retângulo atrás de sua imagem à direita e também há atalhos que você pode usar, por exemplo, trazer para frente, e isso trará o retângulo formado Também é enviado para trás. E como você pode ver, ele tem um atalho ao lado, que você pode usar Isso vai ser muito útil para você em geral. Então, meio que memorize essa ideia porque Figma, tudo funciona em camadas e as coisas ficam na frente de algo e atrás de algo, e é assim que o painel de camadas é organizado, Então, envie para trás e para trás, enviaremos uma camada por vez Envie para trás, enviaremos tudo para trás. Então, se eu enviar para trás, não precisamos disso porque vai ficar bem atrás da captura Queremos um por um, que você possa usar novamente, suporte de controle, suporte de comando no Mac e ir para cima e para baixo A fonte que eles estão usando é a fonte padrão da Apple, San Francisco Pro, partir de P. Se você estiver em um Mac, ela estará lá por padrão, então você poderá selecioná-la dentro do Figma Mas se você estiver no Windows, ele não estará lá por padrão. Você pode baixá-lo. A Apple tem recursos. Vou vincular que você pode baixá-lo e instalá-lo em seu computador. Mas, na realidade, você não precisa, porque Inter é basicamente uma cópia do telefone de São Francisco, então você pode simplesmente usar o Inter e estará muito perto do Você não precisa usar San Francisco. Mas se você estiver em um Mac, faça isso, você usa o telefone San Francisco, que é o SF Pro, e depois começa a tentar combinar os tamanhos, os pesos Você pode jogar com tamanhos e pesos de fonte para obter a correspondência precisa Você não precisa ser super preciso aqui. Tudo bem se as letras não se alinharem exatamente, mas se você se esforçar e tentar encontrar a correspondência exata, será um bom momento de aprendizado Isso revelará como os designers da Apple definem esse tipo aqui. Quão pesado eles tornaram o texto, se eles ajustaram o espaçamento entre letras, quais diferenças de tamanho de fonte eles usaram para criar uma hierarquia visual Essas informações serão captadas pelo seu cérebro e ficarão lá na próxima vez que você estiver trabalhando em um projeto. Eles estão usando um preenchimento de gradiente no texto aqui, que funciona como qualquer outro gradiente Está logo abaixo do preenchimento e, em vez da cor sólida, você escolherá apenas a cor do gradiente E, novamente, pára aqui, que é o começo, o início, o fim, e você só precisa provar uma cor daqui, outra cor daqui, por exemplo, e provar o final ou o começo. Sim, esse é o fim. E então, qualquer que seja o começo e pronto. Uma coisa que ainda não abordamos é o derrame. Por exemplo, para criar esse botão, você pode desenhar um retângulo, aumentar o raio do canto para um valor superalto, que fique totalmente arredondado, e você pode adicionar um traçado a partir daqui mais, e depois remover o preenchimento ou torná-lo branco, e é assim que você obtém o Esse valor aqui controla o peso do traçado. Esses tipos de linhas aqui são apenas a linha dois, que você pode selecionar aqui ou pressionar L. E enquanto você desenha essa linha, mantenha pressionada a tecla Shift, e isso bloqueará o eixo, eu acho, e você terá uma linha perfeitamente vertical. Mas se você não aguentar, então vai ser assim. Isso permitirá que você se mova e talvez você não obtenha uma linha precisa e terá uma aparência parecida com esta. Então, para obter uma linha perfeita, segure a tecla shift e ela ficará perfeitamente vertical. O peso é controlado dessa forma, assim como o traçado linha também está usando a propriedade do traçado. E para provar a cor, há realmente um bom atalho que você pode usar Você pode simplesmente pressionar I. Isso abrirá um amostrador de cores, como você pode ver, e qualquer item selecionado, ele preencherá a cor primária desse item Então, para a linha, será um traço, para outra coisa, será um preenchimento. Para mudar a cor aqui, não lembro que já cobrimos isso feito com 55% Agora, vamos diminuir um pouco o telefone. Recicle o chamado material por peso Para poder estilizar de forma diferente parte do texto, basta arrastar e selecionar desta forma Então você abre isso e experimenta a cor. É isso mesmo. E se você precisar até mesmo alterar diferentes espessuras de fonte ou qualquer coisa, isso pode ser feito assim a partir daqui E é basicamente disso que você precisa aqui. Tudo o mais que você vê aqui são apenas retângulos. E digamos, por exemplo, que se você precisar de uma seção, esse rodapé e a seção inferior têm uma cor diferente, que é apenas um retângulo Novamente, basta colocar o retângulo, provar a cor que você precisa e enviar o retângulo até a parte de trás em algum lugar, certo Bem, isso é uma fonte, então em algum lugar aqui, certo. Isso é tudo que você precisa fazer com isso. Esses também são retângulos. E uma última coisa, que é o conteúdo aqui, eu incluí porque parte do texto tem muito texto aqui, então você não precisa digitar tudo isso. Eu coloquei texto para esses blocos, então você pode simplesmente copiá-los daqui. E é isso. Divirta-se. 55. Design da página inicial do aplicativo de bate-papo — parte 1: Esses e os próximos vídeos praticarão a remixagem, e esse será nosso primeiro tipo de projeto completo, do design ao desenvolvimento Primeiro, criaremos uma página inicial e, em seguida, pegaremos essa página inicial e a construiremos e desenvolveremos dentro do Webflow Vamos pegar uma inspiração e, em vez de copiá-la como fizemos com o Figma'sHMEpage, vamos remixá-la e usar nosso próprio conteúdo, nossas próprias fotos e nossas próprias cores e mudar algumas coisas se quisermos e pudermos Achei esse design muito bom de Philip stich e Balcom Brothers Vamos usar os designs de Philip como nossa inspiração, remixá-los um pouco e criar uma nova página inicial baseada Desta vez, vou demonstrar todo o processo para que eu possa mostrar coisas novas que você precisará aprender no Figma Vai ser interessante. Essa demonstração é longa e está dividida em quatro partes. É melhor acompanhar, então ligue seu Figma Como sempre, o arquivo Figma está nos recursos. Primeiro, vamos configurar nosso quadro. Você verá que a largura da captura de é de 14 e 40 pixels Esse é o mesmo tamanho de uma moldura de mesa no Figma. Agora, vamos adicionar nossa grade ao quadro. Não tenho certeza de qual grade exata eles estão usando, mas vamos usar nossa própria grade de 12 pontos com nossas configurações usuais, embora vamos combinar suas margens nas bordas Não a margem na barra de navegação superior, mas a do conteúdo Para medir qualquer coisa no Figma, basta desenhar um retângulo e verificar as dimensões desse Tem 140 pixels de largura, então usaremos isso como nossa margem para a grade. Lá. Agora é muito parecido com o layout deles. Existem algumas diferenças em seu layout, como a barra de fixação ficar fora da grade e alguns outros elementos também parecem ter uma lógica diferente Mas, para nós, vamos manter nossa rede o máximo possível. Bom. Vamos começar a desenhar o herói, primeiro, o plano de fundo. Usar nossas próprias cores personalizadas é uma ótima maneira de remixar o trabalho Vamos encontrar alguma inspiração de cores no drible. Para seus designs, quero que você forneça suas próprias cores, assim como estou prestes a fazer. Vou pegar algumas opções. Basta capturar sua inspiração ou salvar as imagens clicando com o botão direito do mouse e salvando como Nós os colocaremos no Figma mais tarde. Eu gosto muito disso. As combinações de azul, amarelo ou azul laranja são pares de cores interessantes. Agora, basta colocar suas capturas de tela no Figma para que possamos obter amostras de cores a partir daí O que eu gosto de fazer é colocar uma cor como fundo e outra como botão, e depois ver como a combinação funciona em conjunto Algumas cores podem funcionar bem próximas umas das outras, mas se você colocar uma em cima da outra, elas podem ter um contraste muito baixo. A A Ambos são muito bons, mas eu vou escolher a opção azul. Você pode bloquear a camada de fundo no painel de camadas para que ela não atrapalhe o design de outros objetos sobre ela. Agora vamos adicionar o conteúdo. Primeiro, temos que escolher nossas fontes. As fontes, como as cores, são um bom lugar para fazer um remix fácil Mas às vezes podemos realmente gostar da tipografia que eles estão usando e talvez queiramos usar fontes iguais ou similares Se soubermos a fonte que eles estão usando, ótimo, mas se não soubermos ou se for um telefone pago e não quisermos pagar, teremos que encontrar uma alternativa semelhante. É isso que vou fazer aqui para que você possa aprender a procurar alternativas de fontes. Não sei exatamente o que eles estão usando em seus designs, mas vamos acessar o Google Fonts e ver se podemos encontrar algo parecido. Então, vou restringir os resultados. É claramente uma fonte seriada de sons. Vou usar o mesmo texto como amostra porque isso facilitará a localização de fontes semelhantes. Observe como as letras são simétricas. A letra O é um círculo perfeito em vez de um oval normal, e isso é uma boa dica. A maior indicação é a letra A. Não é aquele A comum que você obtém na maioria das fontes. É um tipo de estilo escrito à mão. Essas são dicas suficientes para encontrar fontes semelhantes. Olha, Montserrat é bem parecida. O O também é circular, mas os A's são diferentes. Posso usar isso se não encontrar algo mais próximo. Mas esses pop-ins são uma combinação muito próxima. O O é um círculo e o A também tem o mesmo estilo. Existem algumas diferenças, mas isso é bom o suficiente. No seu caso, você pode usar o mesmo telefone, escolher o seu ou adquirir o telefone de outra inspiração que você escolher. Vamos combinar o estilo. Parece que o peso está meio negrito. A altura da linha é menor do que o valor padrão, e essa é uma ótima decisão de design Em títulos grandes como esse, você precisa de uma altura de linha mais estreita Lembre-se do que aprendemos sobre a gravidade dos pesos das fontes Além disso, se você olhar mais de perto, verá que as letras estão mais próximas umas das outras. Esse pode ser o valor padrão para seu tipo de letra específico, mas é muito provável que eles diminuam o espaçamento entre letras Novamente, isso é uma boa ideia. Ter uma fonte grande como essa fica melhor com um espaço mais apertado Podemos diminuir o espaçamento entre letras a partir daqui. Quanto ao corpo do texto, se você ampliar, verá que eles não estão usando o mesmo tipo de letra do título, e isso provavelmente é uma boa ideia, porque o mesmo telefone pode não ser a melhor opção para texto de parágrafo É muito simétrico. O texto do parágrafo parece mais neutro e genérico , mais ou menos como Roboto pode até ser o mesmo, então podemos usar isso 56. Design da página inicial do aplicativo de bate-papo — parte 2: E estamos de volta. Também vou usar botões arredondados. Você pode se sentir à vontade para remixar aqui se quiser e usar botões retangulares Para tornar os botões redondos, basta aumentar raio dos cantos até que estejam completamente redondos Para a fonte, parece que eles estão usando texto de parágrafo menor, mas com um estilo mais espesso Ok, isso parece certo. O segundo botão é chamado de botão fantasma. Esse tipo de combinação de botões é uma ótima abordagem porque lembre-se do que falamos na hierarquia visual você quer guiar seu público visualmente de um elemento para outro Se você tiver dois botões próximos um do outro e usar o mesmo estilo neles, o público não conseguirá dizer qual é o botão principal que leva à ação principal deste site. Para criar esse botão Ghost, precisamos remover o preenchimento colorido e adicionar um traçado à forma. Em seguida, altere a cor do traçado. Vamos verificar a grade. Os botões não estão alinhados com a grade, mas isso não é grande coisa Os botões e os elementos fiscais são flexíveis e diminuem e aumentam com base no imposto interno, portanto, não precisamos compactá-los em uma grade E às vezes é melhor não fazer isso. Mas, nesse caso, está bem próximo e apertar os botões não fará mal, então vou colocar esses bad boys em uma grade Vamos para nossa foto de herói. É uma colagem muito interessante. Você percebeu um dos truques de design em que abordou o truque de sobreposição Vamos criar uma arte similar. Precisamos encontrar e adicionar algumas fotos semelhantes a essas Tudo bem, isso deve servir. Algumas dessas imagens funcionam, mas outras não combinam imagens Lembre-se sempre da lição sobre consistência. Portanto, combine imagens com um estilo muito semelhante. Tipo, esses dois são parecidos. Eles não estão de frente para a câmera nem olhando para ela e são proporcionais entre si, o que significa que as fotos foram tiradas de uma distância semelhante Você não quer combinar esses dois. Parece que eles não têm nada a ver um com o outro. A da direita está olhando para a câmera, voltada para a frente, e ela está muito mais perto da câmera, fazendo com que seu rosto fique maior. Tudo bem, esses dois parecem bons. As opções de fotos gratuitas geralmente são bastante limitadas, e encontrar o estilo correspondente é um pouco mais desafiador, então tenha isso em mente. R Agora, vamos criar essa forma de fundo pontilhada Basta desenhar um círculo, escolher elipse entre as formas ou simplesmente pressionar O. Ao desenhar a elipse, segure o eixo para desenhar segure o eixo para Em seguida, comece a duplicar os círculos na horizontal e na vertical para criar esse tipo A Selecione todos eles. Clique com o botão direito do mouse e agrupe a seleção ou use um atalho Control ou Command G. Ao posicionar seus pontos atrás da imagem, certifique-se de não ter uma sobreposição estranha Veja como os pontos estão bem posicionados ao redor da imagem e tente usar o mesmo espaçamento Você não quer criar uma tensão desnecessária fazendo algo assim. Agora vamos encontrar algumas telas de maquete para nosso produto, exatamente como elas estão aqui e também algo que podemos usar mais tarde aqui embaixo O que vamos fazer é encontrar um design gratuito na Figmas Community Você pode fazer isso no HignashMePage, no painel, e há um link, uma guia para uma E estou pensando em usar uma espécie de chat ou aplicativo de colaboração em equipe como nosso produto. Realmente não importa. Qualquer coisa que se encaixe em nossos designs servirá. Você pode pesquisar palavras-chave como chat ou um aplicativo de bate-papo. Obrigada. Também pode ser um bate-papo em equipe ou painel de bate-papo ou bate-papo na web ou no desktop, algo para obter mais resultados relacionados à web e não apenas aplicativos móveis E então você pode simplesmente percorrer as diferentes opções, diferentes arquivos da comunidade aqui. Eles são de uso gratuito. Você pode usá-los para ver o que está dentro do arquivo real. Você pode rolar para baixo até a visualização, e eles têm essas páginas aqui e você pode alternar para Isso está realmente mostrando a página real no arquivo FICMas, e você pode alternar para, digamos, uma página de design, neste caso, então você pode verificar a visualização correta real do design Eu encontrei este anteriormente, que é o que vou usar. Você pode usar o mesmo ou diferente. Na verdade, incluí isso dentro do arquivo de tarefa em uma página da tela do aplicativo Hat aqui Então você pode pegá-lo de lá se quiser usar o mesmo. Para usar os arquivos da comunidade, você só precisa clicar no botão de abertura do Figma Isso duplicará o arquivo em sua conta Figma, e é seu Você pode editá-lo como quiser. Para incluir essa maquete no design do nosso site, precisamos adotar a paleta de cores Não faria sentido que a marca do site fosse azul, mas que o produto em si fosse verde. Como esse é um arquivo editável, é simples alterar as cores Basta pegar o código de cores do seu design e selecionar a moldura principal. Em seguida, expanda esta seção que diz cores de seleção. O que isso faz é revelar todas as cores exclusivas que estão presentes neste design. Encontre esse verde e cole seu código de cores sobre ele. Pressione Enter, e isso atualizará todos os lugares onde esse verde foi usado. Este cabeçalho aqui está usando um tom mais escuro desse verde, o que significa que precisamos criar um tom mais escuro do nosso azul, que é uma coisa simples de fazer Podemos colar cores aqui novamente. E a partir do modelo de cores HSB, podemos simplesmente diminuir o brilho E, como você pode ver, é do mesmo tom, mas é mais escuro e parece efeito que o design original buscava Agora podemos copiar esse quadro inteiro em nosso arquivo de projeto e retirá-lo de lá. Você pode copiar facilmente designs entre arquivos diferentes, selecionar o quadro e usar um atalho de copiar e colar muito padrão do Controle C, Controle V para colar Acesse seu arquivo e cole o design. Acho que esses balões de bate-papo serão bons de usar em nossa foto de herói Vamos copiá-lo em nosso documento e ver como vamos usá-los. Acho que vou pegar alguns menores e espalhá-los para criar uma espécie de experiência de bate-papo entre essas garotas. Vou usar amarelo aqui porque vou colocá-lo diretamente no fundo azul, então o azul não funcionaria. E também mude as fotos do perfil para as meninas. R : Eu saí muito bem, na verdade. Vou adicionar essa linha tracejada. É o suficiente assim. Muitos elementos podem aumentar o ruído. Uma coisa que eu não gosto, porém, é o botão amarelo. Antes era bonito e proeminente, mas agora que a arte do herói tem amarelo, o botão está lutando por atenção e meio que tentando se conectar visualmente com a arte. A forma também não ajuda. O botão é arredondado e essas caixas de mensagem também são arredondadas, então há muita semelhança Alterar a cor para branco deve corrigir esse problema. Isso é muito melhor. Agora, a arte parece separada e o conteúdo à esquerda parece algo próprio. Era uma espécie de fusão antes. 57. Design da página inicial do aplicativo de chat: parte 3: Estamos de volta. Finalmente, vamos adicionar a Barra Na e terminamos a ação de nossos heróis. Vamos criar um logotipo para nosso aplicativo de bate-papo falso e dar a ele um nome original, algo como aplicativo de bate-papo. Podemos usar Poppins como nossa cara de conversa e criar esse contraste semelhante de fino e grosso, exatamente como eles têm em seu logotipo Lembre-se desse truque da aula de contraste, combinado grosso e fino e claro. Você tem um elemento interessante. Vamos adicionar alguns links de navegação e o botão no final. Aqui está outra viagem legal da Pigma. Selecione todos os links e, no painel de alinhamento, clique em arrumar Isso geralmente distribuirá objetos igualmente entre eles. Mas podemos dar um passo adiante e definir margem exata entre os elementos a partir daqui. Vamos usar 30 pixels porque essa é a nossa margem padrão da grade. Precisamos de um botão. Vamos criar um botão a partir de um desses links. Quando colocamos um botão na barra de navegação, geralmente é melhor usar o mesmo bloco do link de navegação. Parece melhor. Vamos usar a mesma margem de 30 pixels da parte superior. Estou pressionando nossa tecla de opção aqui para ver as distâncias entre os objetos. E vamos alinhar tudo na barra de navegação horizontalmente no centro Sempre verifique seus designs com 100% de visualização, pois esses são os tamanhos e dimensões reais que aparecerão no lado real. Agora, para a seção intermediária, vou fazer isso de forma um pouco mais simples, apenas com um parágrafo principal e apenas uma tela do nosso aplicativo de bate-papo que já temos Vou usar exatamente a cor da fonte deles. É o que você chamaria de preto, preto, mas não tão saturado e nítido quanto um preto normal. Vou adicionar esse preto à nossa paleta. Também é uma boa escolha para nossa paleta porque tem um pouco de azul por dentro, como um tom azul Você pode ver isso dentro do mapa de cores. Vamos remover o espaçamento entre letras porque esse título não é mais tão grande e pesado, então não precisamos de muito espaço apertado Vamos fazer o mesmo com o texto do parágrafo. Acho que eles estão usando a versão light aqui, mas não sou fã de telefones com parágrafos mais finos porque às vezes são mais difíceis de ler em telas de baixa definição Em telefones, tablets e laptops com tela retina, tudo bem, mas em telas de desktop com menos densidade de pixels, elas não serão tão nítidas Você percebe a hierarquia visual que eles criaram aqui? O parágrafo é menor, mais fino e com uma cor mais clara Eu farei o mesmo com a cor. Podemos simplesmente diminuir a opacidade do nosso te. E isso é suficiente. 70% é bom. Não vou me preocupar em preencher este com texto real. Vamos ao Google e gerar um texto fictício. Existem sites que podem fazer isso por nós. Este é um site, por exemplo. Podemos especificar a quantidade de texto que queremos e ele pode gerá-lo para nós e , em seguida, copiar o texto e colá-lo em nossos designs. Centralize e vamos ajustá-lo à nossa grade. É um pouco t. Vamos dar um pouco mais de espaçamento entre linhas Isso é quase certo. Vou pular o botão e adicionar a maquete do nosso aplicativo de bate-papo imaginário Agora, em vez de copiar tudo isso em nosso documento, vou exportá-lo como uma imagem e colocar essa imagem em seu lugar. Facilitaremos o trabalho com ele e não sobrecarregaremos nossa página com elementos desnecessários Para exportar qualquer coisa do Figma, selecione-o e, no painel de propriedades, vá para Exportar e clique em mais. Você pode escolher um arquivo diferente para muito JPG é bom para nós. Este ano, quando diz um x , você pode alterar o tamanho da exportação. Se disser um x, ele exportará em suas dimensões exatas. Se for dois x, então dobrará. Se seus designs tiverem 200 pixels por 300 pixels, a exportação será de 400 por 600 pixels. O objetivo é fazer com que nossos ativos tenham aparência bonita e nítida em telas HD Mais sobre isso mais tarde, não vamos nos antecipar às nossas células, por enquanto, um x funcionará perfeitamente. Vamos colocar nossa maquete em nossos designs. Como você pode ver aqui, eles estão usando essa barra do navegador e também uma sombra atrás do. Vamos passar pela barra do navegador, mas adicionar uma sombra semelhante à nossa imagem. As sombras estão em vigor. Clique no ícone de adição. A primeira coisa geralmente é a sombra. Ele adicionou essa pequena sombra. Isso não parece muito bom. Clique no ícone para editar as propriedades da sombra. Vamos usar nosso preto como base de nossa sombra e ele tem um pouco de azul que fará com que pareça mais parte de nossos designs. Quando você adiciona cores com 100% de opacidade, você obtém essa sombra estranha Nunca faça isso. Isso não é realmente uma sombra. Figs default 25% geralmente é a opacidade máxima que você gostaria de usar para suas sombras desfoque é basicamente como a sombra se espalha, como ela se espalha. Brinque com ele para entender como ele funciona. Eles estão usando um desfoque intenso e baixa opacidade na sombra. Eu gosto muito disso e faremos algo parecido. X e y são o deslocamento da sombra, ou seja, em que direção a sombra cai X para deslocamento horizontal e y para vertical. Quando estão em zero, cai igualmente nos quatro lados. Se adicionarmos o deslocamento horizontal, observe como a sombra se move para a direita Se adicionarmos um deslocamento vertical, ele se moverá para baixo. Ou se você usar valores negativos, ele sobe. Uma boa prática de design é adicionar um deslocamento y vertical positivo porque a luz na maioria das vezes vem de cima, seja ao ar livre, ao sol ou em ambientes fechados, com as luzes do teto, e se a luz vier de cima, ela projetará uma sombra apontando para baixo Isso parece estranho. Nem parece uma sombra. Muitas vezes, vejo sites que não usam nenhuma compensação, e isso não é muito natural Isso significa que a fonte de luz vem diretamente da frente, como se alguém estivesse apontando uma luz de flash para um objeto, o que não é um cenário muito comum. Adicionar deslocamento horizontal não é muito comum. Alguns designers fazem isso, mas não é minha praia, e não acho que seja uma coisa errada de se fazer, para elementos que fazem parte da interface, como essa imagem, os botões, os cartões e assim por diante. A sombra com apenas o deslocamento vertical tem a melhor aparência. Mantenha x em zero e adicione apenas algum deslocamento vertical. Isso parece certo. Estou olhando aqui, sem usar nenhuma diretriz específica com sombras, apenas procurando o que parece melhor, mais natural e Isso geralmente é a melhor coisa para sombras, que não pareça que elas estão lá Caso contrário, ele cria formas extras que nossos olhos precisam digerir Eles estão usando formas arredondadas em sua maquete. É muito bom. Formas arredondadas geralmente são as melhores em web design. Eles parecem objetos acabados em vez de inacabados. Obviamente, bordas rígidas também têm seus benefícios. Novamente, não há regras para arredondar os cantos, mas se combinarmos isso com o arredondamento das formas dentro da própria maquete, obteremos uma E isso é muito bom. Vamos adicionar esses padrões pontilhados por trás disso. Usar formas como esses pontos ou outras formas é uma boa ideia Eles adicionam um nível extra de dimensão. Todos os outros benefícios que aprendemos no truque da sobreposição, porque é isso que se Não precisa ser os pontos. Podem ser círculos, retângulos, triângulos ou qualquer outra forma Mas, obviamente, tem que fazer sentido. Então, quando repetimos esses pontos em nossas páginas, obtemos os benefícios do truque de repetição. Ele cria esse ritmo do design como uma batida em uma música e une todo o design. R. Ok, eu vou passar as caixas aqui. Não vou fazê-las e ir para a próxima seção imediatamente. 58. Design da página inicial do aplicativo de bate-papo — parte 4: E estamos de volta com a quarta parte final. Esta é uma seção de chamada à ação. É onde você diz diretamente ao público que realize alguma ação, resumindo a página inteira Geralmente tem botões nele ou diretamente no formulário de inscrição. Eles estão usando o mesmo roxo, mas com opacidade reduzida, vamos fazer o mesmo com nosso azul. É muito bom. 10% parece muito bom. Bloqueie a camada para que ela não atrapalhe. Na verdade, vou reduzir esse título aqui, para que a palavra pequeno passe para a próxima linha que a palavra pequeno passe para a próxima . Ficará melhor. Eles estão usando um botão branco aqui, mas eu vou ficar com o botão fantasma. Estou pressionando uma tecla de saída ou opção aqui para ver as distâncias entre os objetos. Gosto da classificação por estrelas e de uma cópia pequena aqui. Isso é chamado de prova social. Ótima ideia incluir algo assim nas seções de call to action. Facilita a decisão dos usuários. Ok, precisamos de um ícone de estrela. Vamos até flaticon.com e busquemos o ícone de uma estrela. Podemos baixá-lo gratuitamente a partir daí. ícones aqui são gratuitos para uso pessoal, mas se você for usá-los em algum lugar, deverá creditar o autor ou comprar sua assinatura. Precisamos do formato SVG, que é editável no Poderemos mudar de cor se quisermos. Em sites como o Flat ICN, normalmente temos dois formatos de arquivo nos quais podemos baixar um ícone, PNG e SVG Sempre que possível, você deve usar o formato de arquivo SVG para itens como ícones e ilustrações Por quê? Por dois motivos. Primeiro, o SVG é uma imagem baseada em vetores. Basicamente, isso significa que você pode dimensionar a imagem infinitamente Você pode ampliá-lo 1.000 vezes e ele não perderá sua qualidade Ele permanecerá perfeitamente nítido. O tamanho do arquivo também não aumentará com uma imagem maior. Portanto, é o formato de arquivo ideal para web design, tanto para carregamento quanto para qualidade de imagens. O PNG, por outro lado, é um formato baseado em pixels, então você não pode aumentá-lo. Seja qual for o tamanho original da imagem , é com isso que você está preso. É por isso que a opção de download de PNG aqui oferece tamanhos diferentes, enquanto o SVG não precisa A segunda razão pela qual o SVG é ruim é devido aos seus recursos de edição Um ícone SBG pode ser editado dentro do Figma como uma forma normal Isso é útil porque geralmente queremos alterar as cores para usar nossa paleta de cores personalizada para o projeto O PNG não é editável, então você está preso à cor com a qual ele veio Nesse caso, quero mudar a cor da estrela e usar a cor amarela do nosso projeto. Infelizmente, o sVIGi Download é um recurso premium em um ícone plano Geralmente, esse é o caso de grandes sites de fornecedores de ícones como esse. No entanto, temos a opção de editar a cor diretamente no site e baixá-la em PNG com nossa cor personalizada. Você só precisa se registrar para uma conta gratuita. Depois de fazer login, você poderá editar a cor e colar o código hexadecimal da nossa cor personalizada E baixe o ícone em PNG gratuitamente. Além do flat Con, temos outras opções nas quais podemos baixar ícones gratuitos. Às vezes, até formatos SPG gratuitos estão disponíveis. Eu vinculei esses sites na página de recursos para que você possa encontrá-los lá. Uma dessas opções são os ícones de materiais do Google. Procure a estrela. Ative esse botão para preenchê-lo. Mude o estilo para arredondado e faça o download em SVG. Podemos alterar o tamanho e a cor e o Figma, não é necessário fazer isso aqui Você também pode simplesmente copiá-lo daqui e colá-lo no Figma usando o Control V no PC e o Command V no Mac Lembra daquele truque de arrumar? Não, eu posso ajustar esse espaçamento a partir daqui. Tudo bem, parece elegante. Em vez de uma mesa com computadores, na verdade vou usar uma foto aqui. Talvez a foto de uma equipe, escritório ou proprietário de uma pequena empresa para representar o que diz a manchete Essa foto parece muito boa, como uma startup com uma equipe que trabalha em lugares diferentes, então eles precisam de uma boa plataforma de comunicação. Só estou brincando aqui para ver o que funciona. Poderíamos colocar essa imagem como um plano de fundo de seção dividida como fizemos em outras tarefas, mas também posso usar o mesmo estilo, porque a consistência será recompensada e fazer algo assim e nos pontos atrás R Isso parece muito bom, na verdade. O rodapé e pronto. Estamos perto da linha de chegada. Vamos copiar o logotipo e dar a ele um colarinho azul. Há uma microcópia embaixo do logotipo. Nós podemos fazer o mesmo. Seu rodapé é dividido em quatro colunas. Podemos facilmente organizar um layout semelhante para nós usando nossa própria grade de layout. Temos 12 colunas em nossa grade. Se dividirmos em quatro, obteremos blocos de três pontos. Considerando os links pequenos, três colunas podem ser demais, então vamos usar duas colunas para cada bloco. Dividi-lo em seis blocos caberá ainda mais em uma linha Essa é a beleza de usar uma grade de 12 pontos. Ele se divide em muitas variações flexíveis. Vou deixar essas duas colunas vazias Ter essa lacuna entre os links do rodapé e o logotipo geralmente parece muito bom Isso cria essa separação visual entre os dois, que faz sentido porque o logotipo é diferente dos links do rodapé Tudo bem, agora vamos preencher esses links com algum texto aleatório. Em lugares como esse, é sempre melhor usar exemplo realista em vez de texto fictício de Loren Epsom, porque dependendo do tamanho do texto, você pode acabar precisando reorganizar Além disso, repetir o mesmo texto parece feio. Vamos colocar os ícones sociais e outros links no rodapé. Nós já fizemos muita coisa. Vamos apenas adicionar o imposto sobre direitos autorais e isso é tudo. H. Aí, agora, vamos consertar essas lacunas vazias. Estou usando 180 pixels como margem. Não existe uma regra para isso, na verdade, é baseada na aparência, mas o importante é ser consistente sempre que possível. Por exemplo, eu uso uma margem de 90 pixels na seção intermediária, então vou tentar reutilizar o mesmo valor com outras margens Mas às vezes é demais ou não o suficiente. Nesses casos, tentarei usar múltiplos do mesmo valor, metade ou o dobro, daí os 180 pixels Se isso não estiver certo, usarei uma nova margem. Às vezes, talvez precisemos ser um pouco inconsistentes, desde que pareça certo Agora, vamos cortar o excesso de espaço na parte inferior. Não se esqueça de manter o controle ou o comando enquanto faz isso, pois isso pode distorcer o conteúdo interno Quando terminar, selecione o quadro e pressione o ícone de reprodução. Agora podemos ver a apresentação do nosso design. Está ótimo. Uma observação rápida sobre o modo de visualização, às vezes você pode ter sua visualização com esta aparência , ou seja, você não está vendo o quadro inteiro. Se isso acontecer com você, significa que a tela do seu computador não é tão larga quanto o quadro e o tamanho do nosso quadro é 144 pixels, certo? Portanto, se sua tela for mais curta, menor do que isso, geralmente isso acontece com laptops. Então, ele não vai mostrar tudo na tela. Mas há uma solução para isso basta passar o mouse no topo aqui, a barra aparecerá e vá até as opções e depois mude daqui, que é 100% agora, altere-a para caber E depois de fazer isso, ele se ajustará à moldura e à sua tela, não importa o tamanho da tela. Agora, em raras ocasiões, outro problema pode acontecer, isso pode não ajudar. E isso se você selecionou algo diferente das configurações do protótipo Portanto, para acessar as configurações do protótipo, não selecione nenhuma moldura ou camada Clique na tela para que tudo seja desmarcado e depois vá para o protótipo E, a partir do protótipo, certifique-se de que nenhum esteja selecionado no menu suspenso do dispositivo Se houver um iPhone um ajuste personalizado ou algo parecido, ele terá uma tela estranha do iPhone ou algo estranho aparecerá aqui no modo de visualização Portanto, certifique-se de que nenhum esteja selecionado. E quando vou para a pré-visualização, e se você tiver outras camadas aqui, eu tenho algumas outras camadas e molduras na página. Portanto, ele pode tentar visualizar algum outro quadro, certifique-se de selecionar o quadro da área e clicar na visualização e, em seguida, ele visualizará o quadro correto. E é isso. Ao escolher uma excelente inspiração, projetamos e criamos uma página inicial de aparência fabulosa Esse é o poder da boa inspiração. Espero que você tenha gostado do processo. Estou muito interessado em ver sua apresentação. Na próxima parte deste curso, criaremos essa página exata no Webflow. Fique por aqui. 59. PARTE: nós vamos fazer uma pausa do projetado. Por agora. Há mais lições chegando sobre design e um projeto de cliente completo do início ao fim. Mas vamos chegar a isso. Agora. Vamos nos divertir aprendendo a realmente construir sites nesta parte do curso. Você vai aprender a desenvolver sites usando fluxo de destroços, e vamos fazer isso pegando a página inicial que acabamos de projetar e construí-la dentro do fluxo úmido, então vamos. 60. Noções básicas da Web: designer de Webflow: Você já viu isso antes, mas vamos fazer uma rápida recapitulação do que é o quê no iFlow Se isso estiver na tela inicial, talvez você esteja em outras páginas. Então, basta clicar novamente no painel. trabalharei na conta gratuita para garantir que você tenha a mesma experiência. Existem vários modelos gratuitos e pagos, mas não estamos no mercado para eles, então vamos selecionar um site em branco. Isso é chamado de designer. É aqui que toda a mágica acontece no Webflow. À medida que projetamos, nossa página será exibida nessa tela branca e poderemos interagir com elementos diretamente nessa tela. Na barra de ferramentas à esquerda, temos nossos controles para voltar ao painel, às configurações do projeto ou ao editor Abaixo disso, temos três painéis importantes. O primeiro é o painel de elementos. É assim que adicionamos novos elementos na página. Em seguida, temos o painel de páginas. Isso mostrará todas as páginas do nosso site. A partir daqui, podemos adicionar novas páginas e gerenciar suas configurações e assim por diante. Em um plano gratuito, recebemos apenas duas páginas estáticas, mas recebemos um pouco mais de páginas de CMS E então temos o painel de navegadores, que é como o painel de camadas no Figma, mas não exatamente o mesmo porque a web funciona um pouco diferente das ferramentas de interface de design, como o ferramentas de interface de design, como Você não precisa se preocupar com outras coisas na barra de ferramentas esquerda por enquanto Chegaremos até eles quando precisarmos. No centro, você tem essas diferentes visualizações de dispositivos. É aqui que tornamos nosso site responsivo e o otimizamos para diferentes dispositivos para ter um site moderno que tenha uma ótima aparência em qualquer tela e em qualquer dispositivo Também podemos redimensionar a tela cada dispositivo, como celular, por exemplo, e otimizar para garantir que ela tenha uma ótima aparência em todos os tipos de dispositivos móveis, não apenas em um Ao redimensioná-lo, você pode ver que, em larguras diferentes, ele mostra quais dispositivos populares estão usando essa largura específica E para publicar o site no Webflow, podemos fazer isso aqui De graça, você pode publicá-lo no domínio do Webflow. Para um domínio personalizado, precisaremos adicionar um plano de hospedagem. E no lado direito, temos nosso painel de estilos. É aqui que manipulamos e estilizamos cada elemento da página Você pode reconhecer isso. É meio parecido painel FigmaSpperties do mesmo lado Assim como o Figma, ele adiciona tudo o que está selecionado atualmente Há muitas propriedades semelhantes, como tamanho, topografia, nome da fonte, tamanhos e assim por diante, além efeitos como desfoque e Há mais guias no site, mas não precisamos nos preocupar com elas por enquanto Vamos revisar isso quando realmente precisarmos. E é isso. Essa é uma breve introdução ao design do Webflow 61. Noções básicas da Web: HTML e CSS: Quando a primeira página da web foi ao ar em 1991, era assim que parecia Ainda está ativo, se você quiser dar uma olhada. Esta primeira página da web foi criada pelo inventor da Worldwide Web, Tim Berners Lee, no Cern, que é um laboratório de pesquisa nuclear na Suíça, surpreendentemente não relacionado a computadores. Na verdade, já estive no CERN. Eu estava em uma viagem de negócios do meu trabalho em uma época, e fui levado para esta sala exata onde a rede mundial mundial foi criada por Tim Berners Lee, e a sala é completamente despretensiosa Você realmente não pensaria que algo criativo surgiu disso. Parece uma química normal ou, tipo, um laboratório de física de uma escola secundária normal. E essa história me foi contada. Aparentemente, quando Tim enviou seu artigo sobre a Worldwide Web, seu supervisor, que escreveu no artigo quando ele estava revisando, disse algo vago Tenho certeza de que, na época, nenhum deles tinha ideia do que os sites e a Internet acabariam procurando. Hoje, a primeira página da web foi criada usando HTML e, até hoje, ainda é disso que todo site é feito À medida que aprendemos o Webflow, na verdade precisamos aprender como o HTML e o CSS funcionam Não vamos aprender a codificar, mas aprenderemos a lógica por trás porque tudo no Webflow é meio que baseado nessa lógica HTML é simplesmente o conteúdo da página da web, como um título, parágrafo de texto ou imagem E cada parte desse conteúdo tem um rótulo, que informa ao navegador se esse é o título, um parágrafo, um link ou qualquer outra coisa Eles chamam isso de etiqueta. HTML por si só, não é muito bonito. Ele tem um layout vertical. Tudo está empilhado um após o outro. Você não pode realmente sobrepor elementos ou criar grades e layouts de colunas É como um documento de texto em que todo o conteúdo flui na direção vertical, um após o outro. O web design naquela época realmente não existia. Não havia muito design envolvido, mas depois veio o CSS, e o site começou a ficar totalmente diferente. CSS é o estilo do site. É onde definimos como cada um desses elementos HTM deve ser Qual tamanho eles devem ter, qual fonte, qual cor, como devem ser dispostos na página, se devem ter alguma interação com o mouse e assim por diante Uma página da web com apenas HTML parece um esqueleto e, depois de aplicar CSS a ela, é como uma pessoa inteira No Webflow, adicionamos elementos HTM do painel de elementos. E se dermos uma olhada no quadro do codex, veremos que dois elementos HTML também foram adicionados lá, H uma tag para o título e a tag P para o parágrafo Esses são elementos HTML sem estilo padrão. Se você verificar a guia CSS, verá que ela está vazia. Ainda não adicionamos nenhum estilo aos nossos elementos. O estilo é adicionado à direita no painel Estilos. Nós mesmos não escrevemos nenhum código nem escrevemos nenhum CSS, mas o Webflow fez isso por nós Agora, a guia CSS contém algumas informações de estilo. É basicamente uma instrução que diz: Se um elemento tiver um título de nome, torne-o vermelho e tenha 58 pixels de tamanho. Isso é simples. 62. Noções básicas da web: o modelo Box: Antes de começarmos a criar nossa página, primeiro quero explicar a estrutura de uma página da web. Cada página da web é estruturada em um chamado modelo de caixa para o HTM, cada elemento é na realidade uma caixa Não importa sua forma e conteúdo finais, todos eles começam como uma caixa. E todas essas caixas realmente ficam dentro de outras caixas grandes, até a caixa grande final, onde todo o resto fica. E essa é a nossa página na web. Quando estávamos projetando nossa barra de navegação no Figma, simplesmente arrastamos nossos links exatamente onde queríamos que fossem colocados Mas o Figma e outras ferramentas de design usam um modelo diferente. O modelo de camadas, você pode pensar nele como prateleiras de papel na Figma Cada novo objeto fica em cima do objeto existente, não acima dele, mas bem em cima dele. Basicamente, ele cria uma nova camada de espaço e é o rei e único cidadão desse espaço. Se alguma outra coisa estiver diretamente abaixo dela, a parte inferior não ficará visível até que a empurremos para cima no painel de camadas Exatamente o que acontece quando você coloca papéis um em cima do outro. Agora, as páginas da web são mais parecidas com organizadores de gavetas. Quando uma gaveta é dividida em caixas, que sozinhas podem ser divididas em caixas ainda menores em gavetas, as coisas geralmente não ficam em cima umas das Eles vão abaixo ou ao lado um do outro. Quando construímos nossa barra de soneca usando HTML, primeiro pegamos uma caixa vazia e colocamos nosso logotipo e caixas de links nela A caixa maior é chamada de pai e as caixas menores dentro são chamadas de filhos. E essas caixas infantis são irmãs umas das outras, do jeito que você esperava Por padrão, eles virão um após o outro porque é assim que cada animal funciona sem CSS. Em seguida, vamos aplicar um estilo CSS. Então, todas essas caixas estão dispostas horizontalmente. Em seguida, usando outras propriedades CSS e mais algumas caixas, podemos distribuí-las exatamente da maneira que queremos. Não se preocupe, você vai pegar o jeito em pouco tempo. Se você ficar preso tentando descobrir como fazer algo funcionar, a solução provavelmente é outra caixa. Webflow tem a gentileza de nos mostrar os limites de nossas caixas Quando você clica em qualquer elemento, ele mostra a caixa completa que esse elemento ocupa. Como você pode ver, embora nosso título seja curto, a caixa se estende por toda a página Esse é o comportamento padrão da maioria das caixas HTML sem nenhum CSS aplicado a elas. E, por padrão, todas essas caixas vêm uma após a outra, a menos que você as coloque dentro de outra caixa. 63. Webflow: hierarquia de elementos: Quando construirmos nossa página no Webflow, teremos muitas caixas Muitas das caixas menores ficarão dentro de outras caixas maiores, e essas caixas maiores ficarão em caixas ainda maiores. Não se perca nesta selva de caixas. Webflow tem um painel Navigator, que você pode encontrar aqui Esse Navegador é semelhante ao painel Layers do Figma. Tudo o que adicionamos à nossa página, podemos encontrá-lo aqui. Mesmo objetos invisíveis, os elementos desse painel são organizados com a lógica do modelo de caixa. A primeira caixa de nível superior que contém tudo dentro é chamada de corpo. Nada vai perto ou fora dele , tudo vai para dentro. É o bisavô de todas as caixas infantis É por isso que você obtém esse recuo de luz para representar a hierarquia dos elementos e mostrar o que está dentro da caixa que chamamos O título e o parágrafo estão aninhados dentro do corpo. O Reflow nos mostra essa hierarquia com as linhas dois. Se pegarmos uma caixa vazia e colocarmos nosso título dentro, a linha aparecerá. Essa linha é um guia útil para identificar facilmente a hierarquia dos elementos hierarquia é muito importante aqui, muitas das propriedades são passadas dos pais para os filhos Isso é chamado de herança. A criança herdará as propriedades dos pais, assim como na vida real. Por exemplo, se eu alterar a cor da fonte para vermelho no pai, qualquer elemento de texto que eu colocar dentro do pai também será lido , todos eles. Independentemente do tipo de texto que eu solto, título e parágrafo, marcador ou outros enfeites Isso até eu substituir. Não precisamos ser cópias exatas de nossos pais. Certo. Se decidirmos ser diferentes, podemos alterar diretamente o estilo do texto no elemento filho. Isso é chamado de anulação. Nem todas as propriedades podem ser herdadas. Principalmente, isso se aplica aos têxteis. O Webflow pode nos mostrar se há alguma herança acontecendo em Você vê como alguns dos estilos são destacados em laranja? Isso significa que o estilo está sendo herdado e, se você clicar nele, ele mostrará de onde ele está sendo herdado Por exemplo, na cor, é como bloco, referindo-se à caixa principal que acabamos de editar. Mais tarde, explico o que é um desbloqueio. Em vez disso, o estilo é destacado na cor azul. Isso significa que estilizamos diretamente essa propriedade e ela substituirá todos os estilos da Você não precisa entender isso completamente por enquanto. Você aprenderá enquanto praticamos e criamos nossa página A segunda representação visual da hierarquia dos elementos é visível na barra inferior do Navegador Isso mostra que o cabeçalho está dentro do bloco, que está dentro do corpo. Eles são clicáveis e você pode selecionar qualquer um dos pais Mas não mostra os filhos ou os irmãos, apenas os pais até o corpo Para uma imagem completa, o painel do navegador é um uso melhor. O mesmo, é claro, se aplica ao painel do navegador. Se selecionarmos um elemento no painel, assim como o Figma, editaremos o elemento exato no Figma Quando movemos elementos para cima e para baixo no painel de camadas, a posição do elemento não muda, ele apenas fica atrás ou na frente de algum outro elemento. Se eles estão sobrepostos, se não estão sobrepostos, então nada Mas no Webflow, a posição muda. movimentação do elemento de parágrafo no navegador altera a ordem dos pesos altos exibidos na tela Também podemos fazer isso movendo-se para a direita na tela. Você notará que o painel do Navegador é atualizado adequadamente Também podemos arrastar elementos para dentro das caixas no painel do Navegador e mover as caixas inteiras, o que moverá todos os elementos filhos triangulares Ok, essa estrutura da web pode parecer um pouco confusa no começo, mas não se preocupe rapidamente, você vai se acostumar com isso 64. Webflow: seção, contêiner, bloco Div: Tudo bem, nesta seção, aprenderemos fazendo, em vez de aprender o Webflow recurso por recurso, na verdade aprenderemos criando nossa página inicial que já criamos e, pouco a pouco, um passo de cada vez, passo a passo ferozmente Lembre-se de que aprenderemos todos os meandros do Webflow somente quando necessário Não vou abordar nenhum recurso até chegarmos a um ponto que realmente precisemos usá-lo enquanto estamos criando e construindo nossa página inicial Então, o que vamos fazer é pegar o design que criamos e, em seguida, cada seção por seção, vamos examiná-lo e recriá-lo e reconstruí-lo dentro do e reconstruí-lo dentro E vamos começar de forma simples com nosso conteúdo no lado esquerdo da seção de heróis. Antes de começar a criar algo no Webflow, primeiro você precisa planejar em sua cabeça que tipo de layout será necessário Então, o que temos aqui? Temos um fundo azul. Na figma, usamos um retângulo para isso. No Webflow, não temos coisas como retângulos. Em vez disso, temos caixas. Existem três tipos de caixas vazias no Webflow. Você pode encontrá-los aqui mesmo no painel Elementos. O painel Elements é onde o Webflow guarda todos os novos elementos de que precisamos É dividido em categorias de necessidades, como tipografia, onde você tem um título, parágrafo e todos os elementos relacionados ao texto Portanto, temos três caixas vazias para nossa seção de uso geral, contêiner e um bloco de mergulho. Uma seção é exatamente o que diz. É uma caixa vazia onde podemos organizar uma seção da nossa página , exatamente como organizamos nossos designs, não é ? Temos uma seção de heróis e, em seguida, várias seções abaixo. Finalmente, a seção de rodapé. Essas são todas as seções, e é assim que vamos nos organizar dentro do Webflow também O contêiner é onde colocamos o conteúdo da nossa página. Em nossos projetos, é tudo o que colocamos nos limites de nossa rede. A caixa mais popular em HTML é um bloco DV, abreviação de bloco de divisão É uma caixa vazia e blocos de construção mais básicos mais úteis de uma página da web Está na categoria básica. De qual desses precisamos primeiro? Obviamente, uma seção. Então, vamos adicionar uma nova seção à nossa página. A seção e o bloco DE são elementos idênticos. Eles funcionam exatamente da mesma maneira. Portanto, tudo o que eu descrevo para uma seção agora também se aplica ao bloco DL. Portanto, uma seção ou um bloco D é uma caixa vazia. Não há nada nele. Na verdade, esta caixa não tem altura até darmos alguma altura. Webflow está nos mostrando um pouco de altura temporariamente para que possamos notar e não enlouquecer procurando por ela Também é uma caixa de discursos. Quando você coloca outros elementos dentro dele, ele cresce até corresponder à altura do elemento filho. Vamos dar uma cor para que possamos entender melhor o que acontece com ela. Podemos fazer isso do fundo. O básico por dentro é que o painel Snile é muito semelhante ao painel de propriedades do Figmas, então você pode trabalhar com ele com muita facilidade Agora, se entrarmos na pré-visualização, a seção desaparecerá. Por que isso? Porque está vazio e tem zero pixels de altura. É invisível. O Webflow apenas fornece uma altura temporária apenas dentro do web designer, para nos ajudar a vê-lo Se arrastarmos um elemento de imagem para dentro, ele se estenderá de zero pixels até a altura exata do elemento de imagem que acabamos de colocar dentro. Agora, tudo também está visível no modo de visualização porque não tem mais altura de zero pixel. Se você colocar algo menor dentro, como uma pequena etiqueta, ela encolherá Mas na verdade não encolheu. Era zero pixels. Ele simplesmente encolheu apenas dentro do designer porque tinha essa altura temporária Espero que você esteja pegando o jeito. Lembro que esse comportamento estranho foi um pouco confuso para mim no começo Então, eu queria esclarecer desde o início para que você entenda e também entenda a lógica básica de como a estrutura é formada no site. Experimente você mesmo agora e, em seguida, continuaremos estilizando nossa seção 65. Webflow: configurações de tamanho: Estamos de volta. Agora, vamos dar a esse bloco div a mesma cor azul de nossos designs Para obter a cor azul exata do Figma, selecione a caixa de cores ou um retângulo de fundo e copie o código da cor do campo Se você não conseguir selecionar o retângulo de fundo, não se esqueça de verificar Talvez você tenha bloqueado a camada porque eu sei que foi isso que fiz no tutorial, então talvez você também a tenha bloqueado. Esse é um código hexadecimal, que podemos copiar e usar no Webflow, e ele também trará exatamente a mesma cor idêntica Dentro do Webflow, acesse o painel Estilos e role para baixo para encontrar uma propriedade chamada fundos Há o mesmo campo para o código hexadecimal, então basta colar seu código lá Agora, precisamos dar ao nosso bloco div um tamanho semelhante ao nosso retângulo Figma, e é aqui que as coisas funcionam um pouco diferente em comparação com O motivo é que os sites são responsivos. Eles podem crescer e diminuir com base no tamanho da tela. No Figma, tudo tem uma posição e um tamanho fixos, independentemente da tela ou do conteúdo Para começar, temos controles semelhantes aos do Figma Você tem largura e altura onde pode colocar valores exatos como colocaria no Figma Não podemos arrastar e redimensionar um retângulo da tela como fazemos no Temos que inserir valores nessas caixas. Podemos colocar valores exatos de pixels obtendo-os diretamente da Para alguns elementos, isso pode ser uma boa opção, mas para a caixa de fundo, não é porque ela não responde Se minha tela for maior que esse valor, obtenho essa lacuna branca porque fiz a caixa azul com apenas 1.400 pixels de largura, enquanto minha tela é mais larga do que isso E se a tela for menor, ainda não está boa porque a caixa transborda Você vê essas linhas azuis, esses são os limites da caixa azul, e elas estão saindo da página. Muitas vezes, valores exatos de pixels não são bons no fluxo de trabalho. Ok, então qual é uma boa opção? Se você pressionar esse valor de Px aqui, ele mostrará todas as unidades que você pode inserir nesses campos. Depois dos pixels, temos uma porcentagem. Com porcentagens, agora entramos na web responsiva. É um valor responsivo e resposta ao tamanho do pai Se colocarmos 50% da largura da nossa caixa, ela ocupará 50% de seu elemento pai. E qual é o pai desse elemento? Se verificarmos isso no navegador, podemos ver que o corpo é o pai O corpo de qualquer site é responsivo e seu tamanho é de acordo com a largura do navegador Isso significa que 50% do corpo é 50% do navegador. Então, se reduzirmos a largura do navegador, podemos fazer isso a partir daqui arrastando Podemos ver que nossa caixa azul encolhe automaticamente à medida o corpo encolhe e não há rolagem VH e VW são unidades importantes e muito úteis. Eles representam a altura e a largura da janela de visualização. A janela de visualização é igual ao tamanho do navegador. Por exemplo, ao arrastarmos essa alça até aqui, podemos ver a alteração na largura da visualização ou na largura do navegador mostrada diretamente em pixels Então essa seria a largura da janela de visualização. Da mesma forma, essa é a altura da janela de visualização. Essas unidades funcionam em porcentagem, então 100 VW é 100% da largura da janela de visualização e 50 VH é 50% da altura da janela de Vamos colocar outra caixa dentro, para que possamos ver isso na prática melhor. A caixa amarela está dentro da caixa azul. caixa amarela está dentro da caixa azul. Se usarmos valores percentuais, a caixa amarela será redimensionada em relação à caixa azul porque é a principal Então, 50% e 100%. Portanto, 100% da altura cobre 100% da altura da caixa azul, que tem seu próprio valor de 600 pixels. Agora veja o que acontece se colocarmos 100 VH em vez disso. Ele cobre toda a tela visível. Até ultrapassa as fronteiras dos pais. O mesmo se aplica à VW. 100% faz com que se estique até as bordas do elemento pai. Mas 100 VW fazem com que ele se estenda até o fim para preencher toda a largura da tela visível Para observar, geralmente usamos esses valores no campo correspondente, então VW no campo de largura e VH no campo de altura Embora isso não signifique que você não possa trocá-los. Normalmente, não há necessidade, mas há alguns casos raros em que você pode querer fazer isso. A última unidade é automática, ou seja, dimensionamento automático. Esse é o valor padrão, a largura e a altura. Quando o lado estiver configurado como automático na altura, o tamanho do elemento mudará com base na quantidade de conteúdo dentro. Por exemplo, vamos definir a altura como automática em nossa caixa azul. Ele desapareceu porque está vazio e quando está vazio e é automático, isso significa que tem altura de zero pixel. Vamos colocar alguns elementos lá dentro. Para adicionar algo novo dentro de um elemento existente, selecione esse elemento e o Webflow o colocará dentro quando você clicar em algo no novo painel de elementos Se eu tiver uma seção selecionada, ela cairá dentro, mas se você não quiser que ela fique dentro de nenhum outro elemento, selecione o corpo, para que ela fique fora da tela geral. Se você também puder arrastar elementos diretamente na tela a partir do painel de camadas, não do painel de camadas, mas do painel de elementos. Mas isso geralmente não é o que eu faço. Eu gosto do outro jeito, mas você decide qual deles prefere se quiser arrastar, você arrasta, se quiser apenas clicar, clique. Assim, à medida que você adiciona mais elementos dentro do bloco div, ele se estica Se definirmos uma altura específica em pixels, o bloco div permanecerá nessa altura, não importa quantas coisas você coloque Os elementos simplesmente transbordarão dela, assim como sua lixeira quando você estiver com preguiça de retirá-la Quanto à largura, a caixa se estenderá até as bordas de sua mãe. Nesse caso, a página inteira porque o elemento pai é o corpo. Finalmente, temos mínimos e máximos. Essas regras funcionam em conjunto com largura e altura regulares É uma regra extra definir pisos e tetos em nossos elementos Por exemplo, se definirmos a altura como automática, a caixa azul se estenderá com base no conteúdo interno. Mas se definirmos uma altura máxima, ela se estenderá somente até esse ponto. Mínimos e máximos são muito úteis em muitos cenários diferentes Por exemplo, se tivermos um elemento de cartão como esse em que queremos colocar algum conteúdo, pode ser informação, formulário, preços, qualquer coisa. Poderíamos definir uma altura exata para corresponder ao nosso conteúdo, assim como faríamos no Figma Mas como a web é responsiva, o tamanho do conteúdo pode mudar de tela para tela, e então teremos algo parecido com isso A melhor maneira é usar a altura mínima em vez da altura exata nesse caso. Se colocarmos no mínimo 400 pixels, garantiremos que a caixa não encolha porque não há conteúdo suficiente dentro dela, e também garantiremos que ela cresça quando o conteúdo crescer com ela O mesmo vale para a largura. Definir 400 pixels parece bom aqui, mas se reduzirmos, obtemos o estouro e ele se manterá teimosamente teimosamente Uma opção melhor é definir 400 de largura máxima. Isso significa que ele não se estenderá mais de 400 pixels, não importa o que aconteça, mas diminuirá abaixo disso, se necessário Então, vamos ver agora quais valores e unidades precisamos inserir para que essa caixa se pareça com nosso design? Para a largura, é óbvio, certo? Vamos usar o Auto porque queremos que ele se estenda de ponta a ponta. A largura de cem por cento nos traria o mesmo resultado neste caso. Muitas vezes, em web design, existem várias maneiras de alcançar os resultados pretendidos. Às vezes, eles são igualmente bons, mas às vezes um pode ser um pouco mais superior. Com a prática e algumas falhas, você logo aprenderá o que é melhor. Nesse caso, Auto é melhor porque é padrão e significa que não há código extra. Aqui está uma dica do Webflow para retornar qualquer propriedade ao seu valor padrão, segure ou tecla de opção e clique na propriedade Isso limpará todas as alterações que você fez e retornará aos valores padrão. É um atalho muito útil. Outra dica, se a propriedade estiver em azul, significa que você a alterou. Quando você está enfrentando algum tipo de problema tentando descobrir por que algo não está agindo da maneira que deveria, você pode facilmente escanear isso para identificar quais propriedades são aplicadas e o que pode estar contribuindo para o problema. Quando está laranja assim, significa que mudamos os valores de desenvolvimento, embora não diretamente nesse elemento, mas em um dos pais. Nesse caso, no elemento corporal. Em outras palavras, está sendo herdado do elemento corporal Novamente, essa é uma ótima maneira identificar de onde vêm alguns estilos. Ok, agora, quanto à altura, com base no que aprendemos, sabemos que não podemos usar um valor exato como Figma, porque quando a tela se expande ou diminui no celular, ela não é Então, como podemos torná-lo adaptável? Temos duas opções sólidas. Primeiro, podemos mantê-lo automático e deixar o conteúdo definir seu tamanho. E segundo, podemos usar VH, a altura da janela de visualização. Como ainda não publicamos nosso conteúdo, vamos tentar a segunda opção, 100 VH, ou seja, 100% de uma tela visível Isso significa que não importa o quanto reduzamos ou expandimos nosso navegador, a caixa se adaptará instantaneamente para corresponder à tela visível Mas se nosso navegador for muito pequeno, às vezes a caixa azul pode não ser suficiente para nosso conteúdo, e o conteúdo sairá da caixa Então, por que isso está acontecendo? Porque a caixa azul tem uma altura definida. Ela não se estende com o conteúdo, e essa altura definida é tão alta quanto a janela do navegador. Então, como podemos resolver isso? Sabemos que, para esticar a caixa principal para acomodar seu conteúdo, precisamos usar o dimensionamento automático, certo Dessa forma, garantimos que a caixa azul cresça com o conteúdo e que o valor de 100 VH possa ser colocado como altura mínima Agora, a caixa azul terá pelo menos a mesma altura do navegador, mas não menor que seu conteúdo. Esse é um arranjo perfeito para nós. Então, para recapitular, temos valores de pixels para inserir dimensões fixas exatas Temos valores percentuais para o tamanho e o elemento em relação ao seu pai. Temos VH e VW para dimensionar elementos em relação ao tamanho do navegador, e temos mínimos e máximos para definir pisos e máximos para definir pisos e 66. Webflow: preenchimento e margens: Vamos continuar com nosso design e adicionar o conteúdo à seção de heróis. Precisamos de um título, um parágrafo e botões. Tudo isso podemos adicionar a partir do painel Elementos. Certifique-se de que eles estejam dentro dessa seção azul. Lembra por que os colocamos lá dentro, certo? Porque a web funciona no modelo de caixa. Tudo vai entrar em alguma coisa. Ok, agora vamos colocar nossa cópia dentro desses elementos de texto. Basta clicar duas vezes no elemento na tela e começar a digitar ou copiar e colar do arquivo de design Vou explicar daqui a pouco por que existe essa nova lacuna branca no topo da caixa azul. Novos elementos no Webflow geralmente ficam presos um após o outro e grudados nas bordas de sua aparência É assim que o HTML se comporta por padrão. Mas não é assim que queremos as coisas. Queremos movê-los e criar um espaçamento entre eles. Então, como fazemos isso? No Figma, isso é fácil Basta arrastar o elemento para onde quiser. Mas em páginas da web, isso não é possível. Na verdade, esses elementos podem ser movidos ou arrastados para onde você quiser na página Mas o CSS tem um truque especial para isso. É chamado de preenchimento e margens. Podemos descobrir isso na categoria de espaçamento no painel de propriedades O preenchimento adiciona espaço dentro do elemento e a margem adiciona espaço fora dele Vamos pegar nosso botão, por exemplo. Por padrão, o Webflow aplicou algum preenchimento quando você passa o mouse sobre a propriedade de preenchimento, ele destaca o espaço na parte inferior para que você possa Os valores nesse caso são definidos em pixels, nove pixels na parte superior e inferior e 15 nas laterais. Você pode aumentar ou diminuir arrastando as alças ou inserindo diretamente o valor, como 100 pixels Aqui está uma proteína. Se você segurar a tecla de opção enquanto arrasta a alça, ela aplicará automaticamente o mesmo valor no outro lado. Então, parte superior e inferior juntas ou esquerda e direita juntas. E se você segurar a tecla shift , ela aplicará o mesmo valor aos quatro lados ao mesmo tempo. Da mesma forma, na margem, a única diferença é que o espaço está sendo aplicado na parte externa, para que possamos puxar nossos elementos para onde quisermos. Dessa forma, podemos adicionar espaço extra em qualquer um dos quatro lados desse elemento, o que os empurrará de seu lugar original. Assim como nos tamanhos, temos todas as outras unidades além dos pixels, embora raramente usemos outras unidades para preenchimento e margem As unidades de pixels geralmente são a melhor opção. Então, esse espaço em branco no topo da caixa azul é, na verdade, a margem do nosso título. Assim como na parte inferior, o Webflow adiciona margens padrão em muitos dos elementos Se algo estiver agindo de forma estranha, verifique os valores padrão no painel de estilos Eles geralmente guardam as pistas. No nosso caso, vamos aplicar margens e acolchoamentos para combinar com Nós já conhecemos esses valores. Inside Fig deve selecionar o objeto segurar nossa tecla de opção e mover o mouse para ver as distâncias entre o seletor e outros objetos Por exemplo, podemos ver que o conteúdo está 140 pixels da borda esquerda do quadro e temos 209 pixels na parte superior Como você usa essas informações? Podemos aplicar o mesmo preenchimento em nossa caixa azul. Agora, dependendo da altura ou da tela do navegador, esses 290 pixels podem não funcionar de jeito nenhum Em uma altura menor do navegador, esses 290 pixels são demais. A web não é estática como a Figma, e precisamos pensar em valores que sejam responsivos Então, o que queremos alcançar aqui? Queremos que esse conteúdo apareça mais ou menos no centro, não é? Independentemente do tamanho da tela, assim como fizemos em nossos designs. Se usarmos valores exatos de pixels , a aparência será muito diferente de tela para tela. Em navegadores mais curtos, o conteúdo parecerá estar sincronizado na parte inferior, mas nos navegadores mais altos, pode ser muito pouco e o conteúdo pode parecer muito na parte Então, em vez disso, podemos usar a unidade de altura da janela de visualização VH. Isso calculará automaticamente o preenchimento e, se o tamanho da tela diminuir ou aumentar, o preenchimento diminuirá e crescerá com ele Às vezes, precisará de 20 VH, mas às vezes de outra coisa. Depende do conteúdo que temos, mas, nesse caso, algo parecido. Agora, se encolhermos a tela um pouco demais, você pode ver que o conteúdo está sendo comprimido na parte inferior Isso porque não adicionamos o preenchimento inferior. Quando a tela é grande, ela flutua na parte superior e há espaço na parte inferior porque atribuímos à nossa caixa azul um valor de 100 VH, esticando-a para preencher toda a tela visível Mas quando a tela visível é muito curta , não há mais espaço na parte inferior. A mesma coisa que podemos fazer aqui, para que possamos adicionar o mesmo valor exato de VH ao preenchimento inferior Isso garantirá que tenhamos um bom espaçamento na parte superior e inferior, não importa como reduzamos ou aumentemos o navegador Ok, agora vamos adicionar margens entre os objetos. E vamos remover essa margem extra de 20 pixels que está no topo do cabeçalho porque ela está sendo adicionada ao preenchimento já existente que está na seção do herói Esse arranjo de layout parece que estamos no caminho certo. Verificamos a capacidade de resposta vertical, mas o que acontece se verificarmos isso em larguras diferentes Esse preenchimento esquerdo de 140 pixels não parece mais uma boa ideia. Está empurrando muito o conteúdo para a direita. Poderíamos corrigir isso e definir preenchimentos individuais para cada tamanho de tela ou talvez até mesmo usar uma unidade responsiva para o preenchimento, como a VW, para a Mas a forma mais comum a melhor forma e a melhor solução para isso é usar um contêiner. Em nossos projetos, a maioria dos elementos está dentro dos limites de nossa grade. Isso nos dá um recipiente invisível que está centralizado no meio e todos esses elementos estão dentro É assim que a maioria dos sites também é organizada. Ele tem um layout central e eles colocam tudo dentro desse layout, a menos que sejam imagens de fundo ou alguns elementos exclusivos. Podemos fazer isso facilmente adicionando um contêiner do painel de elementos. Colocaremos o contêiner dentro da seção e moveremos o resto dos elementos dentro desse contêiner. Fazemos isso arrastando-os para dentro, um por um. Você pode fazer isso no painel do navegador ou na tela Mesmo resultado, ambos funcionam. Minha preferência usual é fazer isso no navegador porque consigo ver melhor o que está acontecendo Não precisamos mais do preenchimento esquerdo da seção, então podemos nos livrar disso Se você verificar isso em telas diferentes, verá que nosso conteúdo está bem centralizado bem no meio Mesmo em telas maiores, e tudo isso se deve ao contêiner. Deixe-me dar uma ideia do que acontece sem o contêiner. Vou apenas dar ao contêiner cores de fundo diferentes para que você possa ver claramente seus limites. Se você colocar vários parágrafos fora do contêiner, verá que eles estão se estendendo de ponta a ponta Mesmo em telas maiores, esse não é um bom layout. O texto está muito esticado, o que dificulta a experiência de leitura Mas ao mover os parágrafos dentro do contêiner, você os centraliza perfeitamente Esse é o poder de um contêiner e é o alicerce mais básico de qualquer site. contêiner padrão do Weblos é, na verdade um bom e velho desbloqueio, assim como uma seção, mas tem dois estilos predefinidos que o fazem funcionar Primeiro, margens automáticas nas laterais. Tudo isso faz com que ele centralize o contêiner no meio da página. As margens automáticas funcionam como uma mola que empurra o elemento pelas laterais para mantê-lo centralizado Do ponto de vista técnico, ele calcula a quantidade de espaço vazio deixado pelo elemento e preenche esse espaço vazio com margens Se você remover qualquer uma dessas margens automáticas , o contêiner perderá esse poder de centralização e abraçará uma das bordas dependendo da margem automática Esse truque para aplicar margens automáticas é um bom método para usar quando você precisa centralizar algo Webflow ainda tem um pequeno atalho aqui para centralizar, que faz exatamente isso e aplica margens automáticas Mas as margens automáticas não são suficientes para centralizar algo. O elemento precisa ter uma largura, e essa é a segunda propriedade que o contêiner tem. Largura máxima neste caso. Isso faz com que a trava Dv não se estenda além dessa largura, mas permite que encolha, tornando-a agradável e responsiva Sem essa largura, perdemos instantaneamente a qualidade do contêiner e agora esse elemento se estende de ponta a ponta , assim como a maioria dos outros elementos Ele ainda tem margens automáticas nas laterais, mas agora elas são inúteis porque as margens automáticas preenchem o espaço vazio deixado Se não houver espaço vazio, então não há espaço que eles possam ocupar. A largura desse contêiner é editável. Dependendo de um site, podemos querer que ele seja mais estreito ou mais amplo A propósito, o truque Figma de aumentar valores em incrementos de dez funciona no Webflow Mantenha pressionada a tecla Shift enquanto pressiona as setas para cima ou para baixo para aumentar ou diminuir esses valores em incrementos de dez. No nosso caso, a largura do nosso contêiner é realmente diferente porque nosso contêiner é nossa grade, que tem uma largura definida dentro da Figma e podemos medir a largura exata da nossa grade desenhando um retângulo sobre ela e verificando a largura final desse São 1.160 pixels. Podemos aplicar essa largura ao contêiner dentro do Webflow. Dependendo da tela em que estamos vendo, o contêiner ficará centralizado ou abraçará No meu caso, é o último. Por quê? Porque 1.160 é mais do que a largura atual da tela, que é 992 pixels Não há espaço restante para que nenhuma margem entre em ação. Embora em telas mais largas, o layout central está lá. Corrija o problema em telas mais estreitas do que nosso contêiner Precisamos adicionar manualmente algum espaço nas laterais Agora, como já estamos usando margens automáticas para nossa caixa de contêiner, não podemos mais adicionar valores de margem extras , mas podemos fazer outra coisa Podemos adicionar preenchimento no contêiner ou na seção dos pais Isso afastará o conteúdo das bordas. Se você adiciona preenchimento ao contêiner ou à seção dos pais, não importa muito Ambas as opções são igualmente boas. Pessoalmente, tenho o hábito de adicionar preenchimento ao pai, então vamos fazer isso Isso nos dá um layout centralizado que é responsivo e se ajusta bem a Exceto, talvez, na menor tela do celular, o valor de preenchimento que definimos seja muito alto, então ajustaríamos e usaríamos algo menor aqui Mas não vamos fazer isso agora. Eu tenho uma seção inteira sobre design responsivo e vamos fixar nossa página da web em todas essas telas e dispositivos menores Deixe-os como estão por enquanto, mesmo que pareçam quebrados. Basta trabalhar no ponto de interrupção básico do desktop. É aquele com o ícone de estrela nele. Na verdade, também não toque nesses pontos de interrupção maiores. Não precisamos dele e, se você adicioná-lo, não conseguirá se livrar dele posteriormente. Abordamos o espaçamento na web. Temos preenchimento que adiciona espaçamento dentro do elemento, margem que adiciona espaçamento fora do elemento e cobrimos um contêiner, que é um alicerce básico de uma página da web Ele centraliza perfeitamente o conteúdo da nossa página em telas maiores 67. Webflow: tipografia para web: Agora vamos estilizar o texto. Os estilos de fonte são aplicados a partir daqui, quais você está bastante familiarizado. A primeira coisa que precisamos fazer é escolher a fonte. Mas, ao contrário do Figma aqui, temos uma seleção limitada de fontes. Nossos tipos de letra, pop-ins e Roboto não estão listados. Isso significa que precisamos adicionar essas fontes nas configurações do projeto. As configurações do projeto são um local diferente do designer, e podemos acessar as configurações de fonte deste projeto a partir deste link. Ou, no menu Hamburger, acesse as configurações do projeto e, em seguida, vá até a guia Fonte O Webflow nos oferece três opções para adicionar telefones. Primeiro, o Google Phones, que lista todos os telefones do Google e, para adicioná-los, precisamos selecioná-los e adicioná-los um por um. Não podemos adicionar todos eles ao mesmo tempo. Além disso, telefones da Adobe ou kit de texto de forma semelhante. Isso, como mencionei na aula de tipografia precisa de uma assinatura da Creative Cloud da Adobe Depois de ter essa assinatura, você pode conectá-la à sua conta no Webflow e extrair as fontes de lá Como podemos adicionar manualmente telefones personalizados apenas fazendo o upload deles. No nosso caso, precisamos de telefones do Google, então vamos encontrar pop-ins. E depois de encontrá-las, você as seleciona e será perguntado quais variantes deseja incluir. Esses números são pesos de fonte. O CSS usa valores numéricos para representar diferentes pesos de fonte em vez de nomear E é assim que geralmente é mapeado. Você precisará combinar manualmente cada espessura da fonte com um desses números. Para encontrar esse gráfico, basta pesquisar no Google os pesos das fontes CSS. Ou você também pode verificar sua fonte específica nas fontes do Google e ver como os números e os nomes se relacionam. Vamos verificar quais outros pesos de telefone estamos usando. Portanto, temos 600, 500 e normal para pop-ins, e temos normal e 500 para Roboto É claro que poderíamos adicionar toda a variação de peso, mas é uma boa prática não adicioná-las porque o Webflow precisa carregá-las e fazer o upload dessas fontes para o site, e isso adicionará mais tempo ao carregamento da página itálicos são versões separadas para cada peso. Como você pode ver, não usamos itálico em nosso design, mas ainda devemos editar para pesos regulares e em negrito E então, mostra aqui quais fontes e estilos de fonte adicionamos ao nosso projeto. Agora, a mesma coisa para Roboto. Vamos também incluir bold 700. É um peso importante para o texto do parágrafo, mesmo que ainda não o tenhamos usado. Caso você ainda tenha o designer aberto, ele não mostrará os novos telefones imediatamente, então atualize o designer E agora temos pop-ins e Roboto lá dentro. Você verá que os pesos que adicionamos estão dentro e ativados, mas aqueles que não adicionamos estão desativados Ok, então vamos estilizar nosso texto. Sema build era nosso título, regular para o parágrafo e médio para o botão Agora, para os tamanhos e alturas das linhas. O tamanho do telefone para o nosso cabeçalho é de 75 pixels. O Webflow não ajusta automaticamente a altura da linha aos padrões Ele herda valores dos elementos pais, então temos que finalizá-lo manualmente E agora podemos fazer a mesma coisa o parágrafo e o texto do botão. Quando a altura da linha é definida como automática, você pode encontrar o valor real do pixel clicando dentro do campo, e isso revelará a altura atual da linha. Ou você pode editar levemente o valor pressionando para cima ou para baixo com a tecla de seta e isso o mudará para os valores em pixels. Vamos mudar as cores. Isso é bem simples Apenas certifique-se de não confundir essas duas cores. Uma é a cor do telefone e abaixo está a cor de fundo. Queremos alterar a cor na seção de tipografia, mas a cor de fundo do botão O Webflow não usa uma unidade percentual para espaçamento entre letras, mas adivinhe? Podemos simplesmente fazer as contas. A porcentagem é relativa ao tamanho da fonte. Portanto, é negativo para uma porcentagem do tamanho da fonte, que é 75 pixels, tornando o espaçamento entre letras negativo em 1,5 pixels A propósito, o mesmo vale para a altura da linha. O valor percentual é relativo ao tamanho da fonte. 100% da altura da linha seria exatamente igual ao tamanho da fonte e 200% seria o dobro do tamanho da fonte Você também pode fazer a matemática inversa e converter a altura da linha de pixels em porcentagem. Espero que você tenha prestado atenção em sua aula de matemática. E esses são nossos controles de tipografia. Há outras coisas que podemos fazer com a tipografia, mas as deixaremos para Então, para recapitular, a adição de fontes aos projetos do Webflow acontece a partir das configurações do projeto Podemos adicionar facilmente telefones do Google diretamente no menu suspenso. Temos que escolher os pesos de fonte específicos de que precisamos. Esses pesos de fonte são representados em números que podemos pesquisar on-line ou encontrar dentro do Figma, na guia de código Então, temos alturas de linha para que possamos obter o valor exato das alturas de linha novamente na guia de código. 68. Webflow: botões e links: Neste vídeo, abordaremos botões e links. Você encontrará dois tipos de botões no painel Elementos. E você também encontrará dois tipos de links. Essa dualidade me deixou um pouco confusa no começo e tive dificuldade em entender qual usar e onde, vamos esclarecer por que existem dois links e dois botões Vamos começar com os links. O Link Block é um bloco diário normal , exceto que ele pode ser vinculado. Você pode colocar qualquer coisa dentro do bloco de links e tudo será clicável O link de texto, por outro lado, é apenas um link de texto. Você não pode colocar nada dentro dela. Para vincular os links, selecionamos o link e clicamos na guia de configuração É aqui que podemos atualizar as configurações do link. O primeiro é o URL, onde podemos digitar o destino exato. Em seguida, temos páginas. É aqui que podemos criar links para outras páginas do nosso site, e essa é exatamente a opção que usaríamos se esses links não fossem falsos e realmente tivéssemos outras páginas. No momento, ele mostra apenas uma página, home, é onde estamos. Em seguida, temos uma seção de página. É quando você cria um link para uma seção específica na mesma página ou até mesmo em outra página. No momento, está vazio. uma coisa extra que precisamos fazer para poder criar um link para uma seção. Chegaremos a isso em algum momento. E os dois últimos são links de e-mail e telefone para endereços de e-mail e números de telefone. link de e-mail abrirá um cliente de e-mail padrão que o usuário definiu em seu computador, por exemplo, como o Outlook ou o Gmail, e abrirá a nova janela de e-mail com o endereço de e-mail e a linha de assunto pré-preenchidos com os valores que colocamos No meu caso, ele abriu uma janela GML porque é isso que eu defini como meu cliente de e-mail padrão no meu computador O número de telefone é para dispositivos móveis, portanto, a pessoa que acessa o site em seu dispositivo móvel pode clicar diretamente em um link para ligar sem precisar copiar e digitar os dígitos Em um computador, isso é quase inútil. Às vezes, você receberá a mensagem de erro. Agora, para os botões, temos dois tipos, um botão normal e um botão Formulário. O botão do formulário pode ter o mesmo estilo de um botão normal, mas está vinculado somente ao formulário e envia o formulário quando O botão normal, por outro lado funciona como um link de texto. Ele tem as mesmas configurações de link e, assim como um link de texto, não podemos colocar outros elementos nele. Isso significa que você pode criar botões a partir de links de texto. Você também pode criar botões a partir de blocos de links e, se quiser criar um botão que tenha um ícone interno ou uma linha extra de texto , os blocos de links são exatamente o que você precisará usar. Se você se sentir perdido no que cada elemento faz, use um pop-up de mais informações no painel de elementos. Cada elemento tem um pequeno ponto de interrogação na parte superior. Clique nele para obter uma explicação rápida sobre o que esse elemento faz. Então, voltando ao nosso botão, vamos editar a forma do botão. Nosso botão no Figma tem um tamanho específico. Tem 168 pixels de largura e 50 pixels de altura. Podemos usar esses valores exatos, mas você verá que usar a largura exata não é uma boa ideia. Primeiro, vamos tentar centralizar o texto dentro do nosso botão. Como fazemos isso? O alinhamento vertical é bem simples Podemos simplesmente usar a opção de alinhamento de texto e centralizá-la Mas para o alinhamento horizontal, precisamos usar preenchimento para que possamos empurrar o texto até que pareça centralizado Agora, aqui está uma razão pela qual definir uma largura exata é uma má ideia. Se em algum momento decidirmos alterar o texto e for algo mais longo, esse botão não se ajusta e o texto terá que transbordar A melhor maneira é usar o valor da venda novamente. Podemos obter esse valor de preenchimento diretamente de nossos designs. O espaçamento à esquerda e à direita é de 48 pixels. Podemos usar esses valores para pressionar nossos botões. Remova a largura e adicione um preenchimento de 48 pixels nos dois lados. Isso tornará nosso botão infixo e se adaptará ao tamanho do texto E por último, os cantos arredondados. Isso pode ser alterado dentro da seção de borda na opção rádios Assim como fizemos no Figma, podemos aumentar isso até que o botão fique completamente arredondado Então, para recapitular, temos dois botões, normal e botão Formulário botão de formulário só pode ser usado dentro de um formulário, e o botão normal é usado para vincular a outras páginas, ações na página, e-mail, links, links de telefone , etc Temos dois tipos de links, links de texto e blocos de links. Os blocos de links são como blocos DIV, caixas vazias que podem conter muitos outros elementos, até mesmo outros DVblogs, mas podem agir como um link normal Quanto aos links de texto, eles não conseguem aninhar nada e funcionam exatamente como texto normal. 69. Webflow: classes de CSS: Agora vamos adicionar nosso segundo botão. Para economizar tempo na estilização, podemos duplicar nosso botão branco existente Você pode clicar com o botão direito do mouse e depois duplicar ou usar um controle C, controle V, atalho normal ou comando C, comando V para Quando você fizer isso, duas coisas engraçadas acontecerão que você não esperava. Primeiro, em vez de colá-lo por baixo, como a maioria dos outros elementos se comporta, ele é colocado próximo Esse comportamento ocorre devido a um estilo de exibição padrão aplicado aos botões. Abordaremos isso na próxima lição. Nesta lição, abordaremos o segundo comportamento engraçado. Quando tentamos fazer qualquer edição em nosso segundo botão, tudo está sendo aplicado ao botão original. Isso não é um bug. Pelo contrário, é provavelmente o recurso mais poderoso do CSS e uma das razões pelas quais o CSS foi criado em primeiro lugar. Esse recurso é chamado de classe. Podemos ter esse botão em 100 lugares diferentes em nosso site e, ao alterar uma instância, podemos alterar todos os botões com a mesma classe. Dentro do Webflow, essa classe é gerenciada a partir daqui, um lugar chamado seletor Seletor significa o que diz. Ele seleciona uma classe específica. Há outras coisas que podemos selecionar além das classes, como uma tag, mas falaremos mais sobre isso mais tarde, quando precisarmos. Quadrado azul dizendo que o botão é nossa classe. Se você selecionar o botão original, verá que ele tem a mesma classe. É por isso que as mesmas propriedades CSS se aplicam a ambos. Mas se removermos essa classe do botão , perderemos todas as alterações que fizemos nela e voltaremos às configurações ou propriedades padrão. Mas não se preocupe, podemos selecionar a classe novamente e, instantaneamente, todas as propriedades voltarão. Quando você estiver procurando por uma classe existente, basta começar a digitar e Webflow filtrará os resultados da pesquisa Se a classe já existir , você verá aqui e poderá selecioná-la. Se ela não existir, você mesmo poderá criar uma nova classe e nomeá-la como quiser. Aplicar uma classe recém-criada não fará nada com nosso botão porque essa classe não tem propriedades CSS aplicadas a ela. Em uma classe recém-criada, podemos aplicar novos estilos e isso não afetará o botão original. As classes são removíveis e podem ser aplicadas a qualquer coisa. Por exemplo, pegamos a classe My pretty button e aplicamos ao botão original. As classes também podem ser duplicadas ou renomeadas. Você pode fazer isso neste pequeno menu suspenso. Basta renomear e pressionar Enter. Duplicar uma aula é uma boa maneira de economizar tempo. Nosso botão Ghost tem muitas propriedades iguais às do nosso botão principal, então podemos duplicar essas propriedades e criar uma nova classe a partir E agora podemos dar o nome que quisermos. Temos dois botões com as mesmas propriedades, mas com classes diferentes. Então, quando editamos um, as alterações não afetarão o outro. Ou qualquer alteração que precisemos fazer no elemento, temos que dar a ele uma classe. Não temos feito isso até agora porque Webflow realmente faz isso automaticamente para nós Se você selecionar qualquer elemento que já editamos, você verá que ele tem algum tipo de classe aplicada a ele. Se você derrubar um novo elemento, eles não o farão. O seletor está vazio. No momento em que você estiliza um elemento, o Webflow gera automaticamente um nome de classe para nós Você não pode estilizar um elemento sem ter uma classe aplicada a ele. Ao examinar o navegador, você verá que os elementos são nomeados acordo com suas classes Vamos mudar o nome do nosso bloco div que contém todo o nosso conteúdo Nossa caixa azul, na realidade, é uma seção de heróis que contém tudo dentro desta seção. Então, vamos respeitá-lo e chamá-lo de um nome mais apropriado , como seção de heróis. Tudo bem, de volta ao nosso botão Ghost. Agora que temos uma classe diferente, podemos estilizá-la como quisermos. O botão Ghost é feito do mesmo material, mas o preenchimento do fundo é transparente e, em vez disso, tem bordas. Você também pode fazer isso diminuindo o controle deslizante de opacidade Saiu completamente da página, mas o texto ainda está lá É invisível porque tem a mesma cor do nosso plano de fundo. Vamos mudar o texto para branco. E agora vamos adicionar bordas. Isso podemos fazer diretamente na seção de fronteira. Diz zero pixels. Se aumentarmos para um pixel, a borda será exibida e, seguida, poderemos mudar a cor para branco. Parece complicado no começo, mas é bem simples. O estilo mostra o tipo de borda que queremos usar, linha sólida, traços ou pontos E esses quadrados mostram de que lado estamos adicionando a borda No momento, o quadrado do meio está selecionado, o que significa que estamos adicionando os quatro lados. Se selecionarmos o quadrado superior, podemos editar somente a borda superior. Finalmente, precisamos adicionar algum espaço entre dois botões. O que você acha que devemos usar margens ou preenchimento? Pergunta capciosa. Não podemos usar preenchimento. O preenchimento só adiciona espaço dentro da caixa Meça o espaço no Figma. Usamos espaço de 30 pixels, então precisamos adicionar a margem esquerda de 30 pixels no botão Ghost ou a margem direita de 30 pixels no primeiro botão. Tudo bem, as coisas estão bem. Então, para recapitular nesta lição, aprendemos como usar classes CSS, que no Webflow são gerenciadas por meio do painel Estilos Aprendemos como criar novas classes, como o Webflow cria classes automaticamente para nós e como duplicar classes, que possamos reutilizar elementos existentes em 70. Webflow: imagens: Neste vídeo, vamos adicionar nossa imagem de herói à nossa página. Aprenderemos como exportar imagens do Figma, como importá-las dentro do Webflow e como trabalhar com imagens no Primeiro, vamos exportar nossa foto de herói da Figma. Em Figma, criamos esse gráfico de herói com vários elementos diferentes Poderíamos exportá-las como imagens independentes, mas isso seria um trabalho desnecessário e muito tedioso de recriar Em vez disso, vamos exportá-la como uma única imagem. Dessa forma, economizará tempo e garantirá que fique exatamente como o projetamos. Para exportar qualquer coisa do Figma, selecione o elemento e, no painel de propriedades, clique no ícone de adição na seção Exportar E para exportar vários elementos diferentes como uma imagem, você precisa agrupá-los primeiro. Selecione tudo, clique com o botão direito do mouse e pressione a seleção de grupos ou use o atalho Em seguida, selecione o grupo recém-criado e clique no ícone de adição nas configurações de exportação. Vamos examinar essas diferentes configurações de exportação. As resoluções de tela melhoraram significativamente ao longo dos anos. Tablets, smartphones e laptops premium mais recentes, como o MacBook, eles usam telas de alto DPI, também conhecidas como tela retina Alto DPI significa altos pontos por polegada, e eles geralmente têm o dobro e eles geralmente têm da densidade de pixels do que as telas comuns de laptops e desktops Isso faz com que as coisas pareçam muito mais nítidas e nítidas, para que você não tenha essas bordas pixeladas em textos menores ou nas bordas da Para otimizar nossas imagens para essas telas, isso é comumente chamado de otimização de retina Precisamos dobrar o tamanho real da imagem. Então, nessa opção suspensa, selecionaríamos dois X. E temos vários formatos de arquivo formato de imagem ideal para a web é SVG porque eles são baseados em vetores, têm tamanhos de arquivo menores e podem ser ampliados infinitamente sem perder qualidade Mas, infelizmente, eles não funcionam em imagens que contêm fotografias. Basicamente, qualquer coisa baseada em pixels. Não vou explicar qual é a diferença entre imagens baseadas em pixels e imagens vetoriais. Resumindo, os formatos de arquivo PNG e JPG são baseados em pixels e os SVGs são baseados em vetores Como estamos usando fotografia, precisamos exportar PNG ou JPG. PNG e JPG ou JPAC têm duas diferenças principais entre eles. O primeiro é o tamanho. As imagens JPEG geralmente são menores do que as imagens PNG ou devido à maior compactação, mas as imagens JAC podem ter fundos transparentes . Os PNGs podem Portanto, no nosso caso, precisamos exportar um PNG ou um JPAC e incluir o fundo azul nele Se não incluirmos esse fundo azul, ele preencherá automaticamente o espaço com branco, e isso não funcionará para nossa imagem. Idealmente, usaríamos o JPAC porque o tamanho do arquivo é menor e isso realmente importa Por quê? Porque ninguém gosta de um site lento. E imagens com arquivos grandes são uma forma de diminuir o tempo de carregamento de um site. Mas se usarmos o JPAC, teremos que incluir um fundo azul, e isso pode ter alguns problemas Às vezes, as cores das imagens exportadas não coincidem 100% com as cores da web E precisamos que esse fundo azul corresponda 100% ao azul na seção do Webflow Se eles não tiverem uma transição suave, as bordas da imagem ficarão visíveis. Eu já testei isso nesta imagem e, infelizmente, não correspondeu As cores branca e preta são fáceis. Eles sempre combinam, mas outras cores nem tanto. Então, ficamos com apenas uma opção, que é PNG. Vamos exportar. Tudo bem, vamos importar nosso PNG para o Webflow. Como acontece com qualquer coisa no Webflow, adicionamos novos elementos do painel Elements Solte a imagem em qualquer lugar por enquanto. Vamos estruturar o layout mais tarde. Para carregar uma imagem, clique duas vezes na imagem ou clique na engrenagem de configurações aqui. Isso abrirá o painel Ativos. O painel Assets é onde o Webflow salva todas as imagens e documentos que você carrega no seu site Lembra como exportamos essa imagem com duas vezes o tamanho? Podemos dizer ao Webflow que essa imagem tem o dobro do tamanho e foi feita para alto DPI Isso o reduzirá pela metade do tamanho, assim como o temos em nossos designs Sempre que você fizer upload de um arquivo de imagem muito grande, Webflow fornecerá um sinal de alerta aqui, pois arquivos de imagem grandes tornam o carregamento do site lento O arquivo de imagem agora tem mais de 1 megabyte, e isso é bem grande Para usuários com Internet mais lenta, pode levar alguns segundos para que a imagem seja carregada e, até lá, eles estarão olhando para uma tela vazia Felizmente, podemos tornar esse tamanho de arquivo muito menor usando a ferramenta de compactação de imagens do Webflow Vá para o Painel de Acesso, passe o mouse sobre a imagem e clique no menu suspenso Mais opções Em seguida, clique em Comprimir. Obtenha alguns formatos de arquivo nos quais você pode converter. O AVF fará um trabalho muito bom na maioria dos casos, e você pode deixar por isso mesmo Ele reduz o tamanho do arquivo melhor do que na web P. No entanto, dependendo da imagem, em casos raros, AVF pode prejudicar a qualidade Então, se você perceber que a qualidade está muito baixa, tente com a opção web P. Mas você precisará refazer o processo, excluir a imagem, carregá-la novamente e escolher o novo formato de arquivo. Clique em Comprimir novamente. Levará algum tempo e você receberá a notificação de que a imagem foi compactada e convertida em um novo formato de arquivo Você pode ver o quanto o tamanho do arquivo foi reduzido. Passou de mais de 1 megabyte para menos de 70 kilobytes. Esse processo de compressão será feito com cada imagem, a menos que elas já sejam muito pequenas, como menos de 100 kilobytes Mas você não precisa fazer isso uma por uma Depois de ter todas as suas imagens lá, você pode expandir o painel Ativos e selecionar várias imagens para compactá-las de uma só vez Então, para outras imagens, vamos esperar até terminar o site e compactar todas elas antes de publicar o site É isso por enquanto. Vamos organizar a imagem na próxima lição. Então, vamos recapitular. Para adicionar imagens ao Webflow, primeiro precisamos exportá-las do Figma usando as configurações de exportação Imagens feitas de vários objetos diferentes precisam ser agrupadas primeiro adição de imagens no Webflow acontece primeiro adicionando o elemento de imagem à tela e, em seguida, fazendo o upload de uma imagem por meio do painel Assets Para manter nosso site rápido, precisamos estar atentos ao tamanho do arquivo de imagem 71. Webflow: propriedade de exibição: Ok, então como podemos trazer essa imagem para o lado direito? Não podemos simplesmente arrastá-lo como fazemos no Figma. Também não podemos alinhá-lo à direita. Lembre-se do que eu disse antes, se você está preso e tentando descobrir como fazer as coisas funcionarem no Webflow, a pista provavelmente é outra Vamos dar uma olhada no nosso layout. Temos uma seção de heróis. Dentro, temos um contêiner que contém todo o conteúdo. Nesse contêiner, temos elementos que queremos colocar à esquerda e uma imagem que queremos colocar à direita. Então, de alguma forma, temos que dividir esse recipiente em duas metades, metade esquerda e metade direita e colocá-los lado a lado Podemos fazer isso usando o bloco div. Podemos colocar dois blocos div dentro desse contêiner e, em seguida, colocar o conteúdo de acordo Beware: o Webflow colocará novos elementos dentro de sua seleção Depois de adicionar um novo bloco div, ele selecionou esse novo e o segundo bloco div foi colocado dentro dele Basta arrastá-lo para fora desse painel do navegador. Agora, arraste a imagem em um bloco div e todo o resto no outro bloco div E vamos nomear esses blocos diurnos adequadamente, à esquerda e à direita. Lá. Agora, a estrutura está no caminho certo. Agora temos que descobrir como fazê-los sentar um ao lado do outro, em vez de em cima um do outro. Há várias maneiras de fazer isso da melhor maneira. A melhor e mais aceita maneira de organizar isso seria o recurso CSS chamado flexbox, que você pode aplicar nas configurações de exibição Vamos examinar cada uma dessas configurações de exibição e ver como elas se comportam. Por padrão, a maioria dos elementos vem com configurações de exibição definidas para bloquear. Bloqueie elementos, eles se estendem de ponta a ponta e nada pode ser colocado próximo a eles. Eles empurrarão o próximo elemento para a segunda linha. Eles farão isso mesmo se definirmos uma largura menor e houver espaço para outros elementos na mesma linha. Em seguida, temos o bloco embutido. Os elementos do bloco embutido são tão largos quanto o conteúdo interno. Eles liberam espaço restante, que pode ser ocupado por outros elementos Lembre-se desse comportamento quando duplicamos o botão em uma lição anterior, os botões no Webflow, por padrão, são definidos como bloco embutido Eles ocupam apenas espaço de seu conteúdo. Então, se você colocar dois blocos em linha juntos e houver espaço, eles ficarão próximos um do outro Aqui, se definirmos a exibição como bloco embutido, nada acontece porque o conteúdo, neste caso, é um texto de fluxo livre que tornará a caixa o mais larga possível Mas se excluirmos alguns desses textos , veremos que a caixa delimitadora diminui com ela No entanto, em um elemento de bloco abaixo dele, isso não acontece. Mesmo se excluirmos o texto, a caixa delimitadora ainda ocupará toda a largura de Agora, eu disse que elementos de bloco embutidos liberam espaço para outros elementos próximos a ele Então, por que o segundo parágrafo não apareceu? Porque o segundo parágrafo está configurado para bloquear, e os elementos do bloco são gananciosos e querem ocupar um andar inteiro só para si mesmos Mas se também definirmos o segundo parágrafo como bloco embutido , ele ainda não sobe Por quê? Eles querem, mas não há espaço suficiente para os dois. Se reduzirmos o texto em um deles, haverá espaço suficiente e o segundo bloco será movido para o andar de cima. Além disso, isso acontecerá se você reduzir manualmente a largura de um deles aplicando uma largura fixa A terceira configuração de exibição é embutida, sem bloqueio. Em linha é como o texto se comporta dentro de qualquer elemento. Ele flui exatamente como textos, um ao lado do outro. Ele não tem valores de largura e tamanho. Ele os ignorará mesmo que você os coloque. Não há muita utilidade para exibição embutida fora do texto, então isso é embutido Então temos display none, que oculta o elemento Não é apenas invisível, mas também não afeta o layout. Não é transparente. Estamos apenas dizendo ao navegador que não o renderize e o ignore completamente. Embora não desapareça completamente do nosso site, ainda está no painel de navegação. Se fosse transparente, ainda ocuparia o espaço. Você pode se perguntar qual seria a utilidade de não exibir nenhum, mas existem muitos e vamos abordá-los. Isso é display none. Então temos a grade de exibição. A grade CSS faz algo que não era possível antes. Ter um arranjo em forma de tabela em que você possa mover os elementos como quiser com muita flexibilidade, com a capacidade de ter um layout completamente diferente entre dispositivos diferentes. Não vamos entrar e sair da rede no momento porque não precisaremos tanto dela Em vez disso, usaremos o layout flexível, que abordaremos no próximo vídeo 72. Webflow: Flexbox: Continuando de onde paramos neste vídeo, discutiremos o flexbox e como aplicá-lo ao layout da seção de heróis Flexbox é uma forma de organizar e distribuir conteúdo dentro dessa caixa As configurações flexíveis afetam somente os filhos desse Bloco D e não o desbloqueio Portanto, no nosso caso, nesses parágrafos, o contêiner em si não é afetado No momento em que você seleciona o layout flexível, as novas opções serão exibidas É assim que distribuímos as crianças dentro do flexbox. Deixe-me demonstrar como o flexbox pode distribuir seu elemento filho Podemos alinhar os itens dentro do flexbox usando essa caixa de alinhamento Os controles são bastante intuitivos. É uma grade de três por três representando o flexbox. Temos três opções para o alinhamento superior, à esquerda, ao centro e à direita Temos três opções para o alinhamento inferior, à esquerda, centro e à direita, e temos três opções para o alinhamento central Os alinhamentos básicos são super simples porque são intuitivos A caixa de linha oferece uma representação visual do que acontecerá. Opções não tão intuitivas estão escondidas sob esses dois menus suspensos Para o alinhamento do eixo Y, temos mais duas opções, alongamento e linha de base O trecho é exatamente o que diz. Estica as crianças flexíveis para preencher todo o espaço vertical da Se você aumentar ou diminuir a altura da flexbox, as caixas encolherão e crescerão com ela Na verdade, essa é a configuração de alinhamento padrão do flexbox Você pode ver isso quando eu redefino as configurações alinhadas aqui Ele está configurado para a esquerda e esticado. Clicar em qualquer lugar na caixa de alinhamento removerá a configuração de alongamento e permitirá que você alinhe os itens sem O alinhamento da linha de base tem a ver com um texto. É uma linha invisível na qual os personagens estão alinhados. Acho que nunca precisei desse alinhamento, então você pode ignorá-lo na maior parte do Abaixo da lista suspensa do eixo X, temos mais duas opções, espaço entre e espaço Essas são opções de distribuição no Figma. Ele distribui as crianças uniformemente. Primeira opção, o espaço entre elas faz com que a primeira e a última criança estejam alinhadas com as bordas do flexbox Bem, no meu caso, não está exatamente nivelado porque eu tenho preenchimento e margem aplicados aos elementos Se eu me livrar deles , ficará limpo. A segunda opção de espaço ao redor é um pouco diferente. Ele ainda distribui as crianças uniformemente, mas o faz adicionando espaçamento uniforme nas laterais de cada criança, inclusive na primeira e na última A primeira opção é muito mais útil e prática. Esse, nem tanto. Eu raramente preciso usá-lo, então você pode se concentrar apenas em entender o espaço entre as opções. A propósito, esses menus suspensos X e Y são os controles reais do flexbox A caixa de linha é apenas um guia visual. menu suspenso X permite controlar como você deseja alinhar e distribuir os filhos no Esse é um eixo horizontal e o mesmo para o eixo Y, que é o eixo vertical. A caixa de alinhamento é bloqueada um modo diferente se você selecionar esticar ou espaçar entre as opções, como agora , porque eu tenho um espaço ao redor selecionado A caixa de alinhamento só me permite alterar o alinhamento no eixo Y. Para voltar ao normal, basta retornar o alinhamento X a um dos alinhamentos padrão O mesmo vale para o alongamento. horizontal Nesse caso, você só tem opções de alinhamento Basta remover o alongamento voltando para algum outro alinhamento padrão e a caixa de alinhamento funcionará normalmente Por padrão, as crianças são distribuídas na direção horizontal, da esquerda para a direita, mas temos a opção de mudar a direção para a vertical, conforme o esperado, elas funcionam da mesma maneira, apenas em direções diferentes. Mas uma coisa é que você notará o alinhamento não muda no eixo Y. A parte superior, central e inferior nos dão o mesmo resultado. Isso porque não há espaço extra dentro do flexbox. As crianças estão ocupando toda a altura disponível. A altura mínima que eu dei ao flexbox não deixa espaço extra As alturas das crianças juntas são mais do que isso. Na verdade, o flexbox acaba se alongando com as crianças Mas se eu aumentar a altura da flexbox para algo que deixe mais espaço vazio, você verá que a caixa de alinhamento funciona exatamente como esperado O que eu adoro no web design é que é como um quebra-cabeça. As coisas geralmente agem de forma estranha e você está tentando descobrir o porquê e encontrar uma solução para o seu É muito satisfatório quando você resolve o quebra-cabeça, mas é difícil quando você está olhando para a tela, tentando descobrir o que diabos está acontecendo Tudo bem, preste atenção em uma coisa. Com uma direção vertical, as opções de espaço entre e esticar agora trocaram de lugar O alongamento agora está sob o alinhamento X e o espaço entre eles está sob o alinhamento Y. A propósito, se você estiver confuso sobre o significado de cada uma dessas opções, basta passar o mouse sobre elas e ler o texto explicativo abaixo Isso lhe dará uma ideia. Além disso, outra opção é encontrar explicações na documentação do Webflows O que eu geralmente faço é ajudar o Google Webflow em nome de uma configuração Normalmente, o principal resultado será a página sobre essa configuração ou uma página que contém uma explicação sobre essa configuração em algum lugar no fundo, que você pode encontrar simplesmente pesquisando dentro da página pelo Controle F. Por padrão, as crianças do linho tentarão caber em uma única linha, sobrecarregando a fonte flexível, Felizmente, o flexbox tem outra configuração que nos ajuda a gerenciar É chamado de embrulho e você pode encontrá-lo nesta lista suspensa. embalagem basicamente diz às crianças que pulem para a próxima linha se não houver espaço suficiente Temos muitas opções diferentes aqui, mas geralmente você precisará de apenas uma com base em sua orientação. Como estamos usando uma direção horizontal e os itens são distribuídos da esquerda para a direita , precisaríamos escolher uma das opções do grupo da esquerda para a direita. E a melhor maneira de saber qual deles você precisa é realmente olhar para o ícone em vez do nome. O ícone de seta oferece uma melhor representação do que acontecerá com as crianças. No caso do primeiro, as crianças começarão de cima para a esquerda e seguirão um padrão Z distribuindo-se para baixo e para a direita Você pode ver essa ação à medida que eu adiciono mais itens a ela. No caso da segunda opção, elas começarão de baixo e se distribuirão para cima e para a direita, como um Z reverso. A primeira opção obviamente A primeira opção obviamente será mais usada, mas em casos específicos, talvez seja necessário inverter a direção Agora, se tivermos uma direção vertical , veremos a embalagem de cima para baixo. Mas nada acontece. Por que isso? Porque não há necessidade de embrulhar empacotamento só funciona se houver a necessidade enviar elementos para a próxima coluna ou para a próxima linha Como nosso flexbox não tem uma altura fixa, ele continua se expandindo em altura, então a necessidade de embrulhar nunca surge Mas se dermos uma altura além da qual não é permitido que ela cresça, as crianças começarão a se enrolar. Sem embalagem, isso aconteceria. Eles simplesmente transbordarão para fora do flexbox. Para ser honesto, essas opções de embalagem podem ser muito confusas, então não se sinta mal se não conseguir entender isso. A melhor maneira de encontrar o resultado que você precisa é simplesmente brincar, selecionar todos eles e uma das opções deve ser. Isso é o que eu costumo fazer. Dentro do menu suspenso de direção, com todas as opções de quebra, você verá duas opções que não dizem quebra, linha única e coluna única Essas duas opções simplesmente invertem a direção de nossos filhos flexíveis Em vez da direção da esquerda para a direita, podemos mudar da direita para a esquerda. E a segunda opção nos dá a capacidade de reverter a direção verticalmente Se você clicar em uma das caixas, verá no painel Propriedades opções especiais para o Flex Child Isso nos dá um controle ainda maior sobre itens individuais dentro do flexbox Mas não vamos nos preocupar com as opções de flexhild por enquanto. O Flexbox pode ser difícil de entender de uma só vez. Portanto, não se preocupe se você se sentir um pouco confuso, não entender exatamente ou não seguir todas as opções de layout que abordei no momento. Depois de começar a construir e brincar com ele, você vai pegar o jeito. Em uma das tarefas, depois disso, coloquei um jogo flexbox, que é uma espécie de jogo de quebra-cabeça construído dentro do Webflow pela equipe do Webflow, e é um ótimo exercício de flexbox e uma ótima maneira de praticar flexbox e diferentes opções de alinhamento flexbox Vamos voltar à nossa seção de heróis e ver como podemos usar o flexbox No nosso caso, é bem simples, na verdade. Só temos dois quarteirões, esquerdo e direito. Podemos aplicar o layout flexível ao contêiner. Mas lembre-se de que fazemos com que esse contêiner seja um contêiner padrão em toda a nossa página, mesmo para itens não flexíveis, por isso não queremos mexer com Podemos simplesmente adicionar, Sim, você adivinhou, outra caixa Solte os blocos esquerdo e direito dentro e aplique um layout flexível a Está na direção oposta. É claro que podemos reverter isso usando a opção flexbox, mas devemos organizá-los corretamente dentro do navegador Basta arrastar um em cima do outro. Agora temos nossa opção flexível para que possamos alinhar esses blocos conforme quisermos A direção horizontal é exatamente o que queremos, então a mantemos lá e, em seguida, o alinhamento central e o empurrão até as bordas parecerão exatamente iguais. No Figma, temos um conteúdo um pouco mais alto. Podemos conseguir isso adicionando uma margem inferior no bloco esquerdo. Isso aumentará o conteúdo. Vamos verificar isso em uma tela menor. Há duas coisas que precisam de um pouco de estilo. Primeiro, o conteúdo à esquerda está um pouco confuso. Os botões ficaram todos estragados. Isso porque não há espaço suficiente em uma linha e o segundo botão pula abaixo Podemos corrigir isso facilmente dando largura mínima ao bloco esquerdo. Então, não vai encolher a um ponto em que isso precise acontecer 400 pixels parece uma boa ideia. Agora, o bloco esquerdo não encolhe além desse ponto. E se não houver espaço suficiente, a imagem será atingida. A segunda parte é que eles estão um pouco próximos um do outro. Podemos adicionar uma margem extra ao bloco esquerdo para que ele afaste a imagem. Isso parece muito bom. As telas de tablets e celulares são um pouco mais confusas, mas cuidaremos delas nas aulas de otimização móvel Tudo bem, isso parece do jeito que queremos que seja. Sim, a imagem tem dimensões um pouco diferentes em comparação com o design da Figma, mas isso é esperado Estamos tornando as coisas responsivas para que elas diminuam e se ajustem aos Então, para recapitular, flexbox é o que diz, caixa flexível. Ele pode distribuir elementos infantis na direção vertical ou horizontal. Depois de definir a flexibilidade de exibição em um elemento, opções de alinhamento e justificação Definir as opções certas a partir daqui é uma questão de tentativa e erro Basta brincar com todas as opções até encontrar o layout certo para você. 73. Webflow vs Tamanhos do Figma: Muitos estudantes tiveram dúvidas sobre as diferenças entre os tamanhos no Webflow Figma e como o tamanho da tela no Webflow se relaciona com o tamanho do quadro no Na verdade, esse é um tópico muito bom e decidi fazer uma aula completa sobre ele. Há várias nuances aqui que você precisa entender ao fazer a transição do Figma para o Webflow Vamos começar com um conceito chamado design responsivo. Posteriormente, neste curso, uma seção dedicada ao design responsivo, e nos aprofundaremos nesse tópico Mas vamos revisar um pouco, porque sem isso, você pode se sentir um pouco confuso ao criar seu site. Qualquer site que criarmos será visualizado pelos usuários em vários dispositivos e telas diferentes. Então, visitarei seu site em um MacBook air, alguns no Lenovo ThinkPad, alguns em um PC desktop personalizado, alguns em um iPhone e em centenas de Todos esses dispositivos têm seus próprios tamanhos e resoluções de tela Um bom site terá que considerar o dispositivo do usuário e ajustar e responder a esse dispositivo e seu respectivo tamanho de tela para oferecer a melhor versão possível do site. Isso é chamado de design responsivo, e é exatamente assim que vamos construir nosso site O Webflow facilita porque tem tecnologia de design responsivo incorporada Mas o design que criamos no Figma não é nem um pouco responsivo Antes de criarmos nossa página e o Figma, escolhemos um tamanho de quadro específico com 1.440 pixels Esse quadro é representativo de uma resolução de tela única, uma tela com exatamente esse tamanho, estimada em cerca de 6% de todas as resoluções de tela de desktop usadas em todo o mundo A altura é irrelevante aqui porque diferentemente da largura, a altura não é fixa, nós a aumentamos à medida que o conteúdo da página da web cresce e em um site real que é representado como uma rolagem de página Você pode ter duas perguntas válidas. Como podemos escolher esse tamanho de quadro específico, que nem é tão popular? Segunda pergunta, você pode perguntar: que não criamos um design responsivo no FIGMA Deixe-me responder à segunda pergunta primeiro. Figma tem algumas tags responsivas, como layout automático, mas essa tag não está nem perto dos poderes responsivos reais que a poderes responsivos reais Como somos os desenvolvedores do nosso lado, podemos muito bem usar todo o poder do design responsivo e cuidar dessa parte diretamente no Webflow Ainda teríamos que fazer isso no Webflow independentemente de termos feito o Figma ou não, poderíamos muito bem economizar tempo Agora, vamos responder à primeira pergunta, por que 1.440 pixels. As resoluções de desktop e laptop variam de 1.000 a 4.000 pixels Essa é uma variedade bem grande. Você pode ver nesta imagem como os tamanhos de tela realmente se comparam entre si. Você pode literalmente encaixar nove telas HD em uma resolução de quatro K. Por exemplo, se você estiver trabalhando em uma tela de dois k e decidir usar uma Figma de tamanho de quadro k correspondente, você terá muito espaço na tela para criar seu design Você pode colocar muito mais coisas na tela do que alguém em um pequeno netbook c. Um netbook pequeno basicamente cobre uma pequena parte do seu quadro de dois k. Acabe facilmente colocando muitos elementos ou detalhes em seu design que simplesmente não cabem em uma tela menor. Isso criará uma dor de cabeça para você no futuro ao ajustar a capacidade de resposta no Webflow. Qual é o bom tamanho da moldura então? A maioria das telas supera laptops ou desktops e fica em algum lugar entre essa faixa. Duas telas K e quatro K são bastante raras e os usuários dessas telas geralmente não usam o navegador no modo de tela cheia, pois esse seria o objetivo de ter uma tela muito grande onde você pudesse colocar muitas coisas na tela. Em seguida, estamos projetando para uma faixa de aproximadamente 1.000 a 2.000 pixels Escolher uma tela no meio dessa faixa é a melhor abordagem, pois o tamanho médio será mais fácil de ajustar para telas maiores e diminuir para telas menores. tamanho do quadro Figma de 1.400 pixels é um bom candidato para esse propósito porque está bem no meio Seu conforto como designer também é importante. Portanto, talvez você queira escolher um tamanho de quadro que corresponda à resolução da tela. Dessa forma, ao trabalhar com o Figma, você poderá visualizar seu site como ele apareceria na tela Portanto, se a resolução da tela for uma boa representação de uma média de 1280-1600 , sinta-se à vontade para usá-la para o tamanho do quadro em seu Você pode descobrir sua resolução de tela apenas pesquisando no Google qual é a minha resolução de tela e verificando um dos primeiros sites Ou você também pode ver a largura da tela entrando no modo de visualização no Webflow e verificando esse número aqui Essa é a largura da tela visível. Quando o navegador estiver em toda a largura , será igual à resolução real da tela. Minha tela, por exemplo, tem na verdade 14 40 pixels de largura. É só uma feliz coincidência. Mas não há grande necessidade de combinar o tamanho da moldura no Figma com o tamanho da tela do Webflow Tudo o que fizemos no Figma é uma maquete de uma única tela. No Webflow, estamos construindo um site responsivo fluido que diminuirá e crescerá com diferentes Junto com essa versão de 14 40 pixels, também estamos construindo 12 versões de 80, 1920 , 320 pixels e tudo mais. É um site que encolhe e cresce como um acordeão Não tente combinar sua maquete Figma com 100% de precisão. Somente o tamanho idêntico da tela pode se parecer 100% com seus designs. Além disso, teremos que ajustar à realidade de uma tela específica. Como você pode notar, a tela ou a largura da tela visível mudam entre o modo de visualização e o designer. Dentro do designer, meu 14 40 tem apenas 992 pixels agora. Isso é natural porque o modo designer tem painéis laterais para que eles ocupem o espaço disponível na tela. Webflow permite alterar essa largura até mesmo transformá-la na largura original da tela. Se eu quiser ter em mente que aumentar a largura da tela não fornece uma visão totalmente realista, Webflow não pode adicionar mais pixels ao meu laptop Em vez disso, ele está diminuindo o zoom e alterando a escala para criar a impressão de uma tela maior Isso faz com que cada elemento não seja fiel ao seu tamanho real. Embora ainda seja uma prévia útil pois você pode ver como os elementos interagem entre si e detectam problemas de layout. É como se você estivesse olhando para uma tela de 1.400 pixels, mas parado um pouco longe dela, tudo além disso basicamente coincide com a realidade O encolhimento, por outro lado, fornece tamanhos reais porque a escala permanece em 100% Esses ícones aqui representam o que é chamado de pontos de interrupção do dispositivo Na verdade, eles não são apenas para mostrar. Eles podem adotar regras personalizadas, regras específicas para cada ponto de interrupção do dispositivo Mas não precisa se preocupar com isso por enquanto. Vamos nos aprofundar neles posteriormente na seção responsiva Por enquanto, tudo o que você precisa saber é que você está trabalhando no ponto de interrupção básico do desktop, aquele com um ícone de estrela nele É aqui que você precisa ficar durante esse estágio e verificar seus designs dentro da faixa de pontos de interrupção do desktop, que é de 992 pixels No modo de visualização, você pode redimensionar a tela para 992 pixels e até 1.900 pixels para ver como ela fica dentro dessa faixa e garantir que não haja problemas inesperados Tudo isso é nosso único ponto de interrupção do desktop e todas as alterações que fazemos 992 ou 1.900 se aplicam a Nosso design precisa funcionar bem para ambos. Você não precisa verificar a lateral dos dispositivos menores, pois faremos isso na próxima seção. Primeiro, criaremos tudo no ponto de interrupção do desktop e faremos com que tenha uma boa aparência para todos os diferentes tamanhos de tela do desktop Na seção de design responsivo, examinaremos nossa página mais uma vez e faremos alterações e ajustes para que tudo fique bem em todos os tamanhos de tela menores Além disso, não adicione esses pontos de interrupção maiores. Nós realmente não precisamos deles. O design que criamos usa um contêiner com largura máxima de 1.160 pixels. Nenhum conteúdo ultrapassa esse limite, Nenhum conteúdo ultrapassa exceto pelas cores de fundo nas seções Os tamanhos reais dos elementos entre Figma e Webflow devem corresponder Contanto que você esteja vendo 100% do estado de zoom no Figma, aplicar esse mesmo tamanho no Webflow deve fornecer mais ou menos o mesmo Por exemplo, um tamanho de telefone de 75 pixels no Figma deve ter a mesma aparência quando aplicado no Webflow Novamente, ao observar o estado de zoom de 100%, independentemente do tamanho do quadro no Figma ou no Webflow, desde que a escala seja de 100% em ambos O tamanho da tela do Webflow alterará todas as outras coisas. Não espere que a imagem do herói tenha o mesmo tamanho na tela de 992 pixels em comparação com a Figma, pois essa tela não oferece espaço suficiente para caber na imagem em suas dimensões originais A imagem toca porque a imagem tem uma propriedade especial aplicada que a faz encolher quando não há espaço suficiente O tamanho da fonte, por exemplo, não foi reduzido, mas o tamanho do texto diminuirá quando não houver espaço. É isso mesmo. Essas são as nuances importantes dos tamanhos de tela entre Figma e Webflow Se você ainda tiver dúvidas, me avise nas perguntas e respostas. 74. Webflow: barra de navegação (aplicativo de bate-papo): Neste vídeo, adicionaremos barra de navegação à nossa página. Webflow tem um elemento de barra de navegação padrão chamado navbar, que podemos adicionar no painel de elementos arrastá-lo até o topo para colocá-lo no topo da seção de heróis O Navbar já vem com elementos internos. Vamos dar uma olhada exatamente do que essa barra de navegação é feita. Então, dentro do elemento principal da barra de navegação, temos um contêiner. Esse contêiner é semelhante ao que fizemos com conteúdo do nosso herói centralizado no meio com uma largura máxima, então os elementos ficam bem embrulhados dentro dele Então, dentro disso, temos três outros elementos, que, novamente, são caixas. Primeiro, a marca fica à esquerda. É aí que colocamos o logotipo. A navegação é onde esses três vazamentos de navegação estão localizados. Como a maioria das outras coisas, é apenas um bloco div normal, mas com alguns estilos padrão já aplicados a ele Podemos alterar esses dils se quisermos. E terceiro, temos o botão de menu, mas é invisível. Você pode ver aqui que há uma tela nenhuma aplicada a este item, então ela se esconde O botão Menu é invisível somente na área de trabalho. Em outros dispositivos, é visível e você pode ver o porquê. É um ícone de hambúrguer que exibe os links de navegação ocultos, com os quais você provavelmente está familiarizado porque é isso que a maioria dos sites tem É difícil ajustar links de navegação em dispositivos móveis. Usamos esse menu de navegação oculto e o ícone Hamburger que contém esses links Navbar age como qualquer outro elemento HTML no Webflow, mas também tem algumas opções extras nas configurações. Há uma opção para abrir e fechar o menu. O menu é basicamente o que está escondido nos dispositivos móveis. Na versão desktop, isso não faz nada porque o menu está sempre visível. Existem três tipos de menus aqui, suspensos, que são os menus padrão, do lado direito e do lado esquerdo. Eu uso principalmente a opção suspensa padrão. Por baixo, há opções para facilitar. Isso está relacionado à animação. Easing é uma animação que começa devagar e depois acelera É assim que a maioria das animações na web é configurada. Mas falaremos mais sobre isso posteriormente em toda a seção dedicada às interações e animações. Deixo todas essas configurações como padrão. A única coisa que eu uso aqui é o menu aberto e fechado, para que eu possa estilizar visualmente o menu. Outra configuração útil aqui podem ser as opções de exibição do menu. Com esse controle deslizante, podemos definir em quais dispositivos deve haver um menu suspenso e em quais dispositivos deixar links de navegação regulares, assim como na versão para desktop Por exemplo, se você mover o controle deslizante para a direita, isso o desativará dos tablets Ou seja, em tablets, veremos os links regulares e, em qualquer coisa menor, veremos o menu de hambúrguer Agora, vamos ajustar a barra de navegação para combinar com seu design. Primeiro, o plano de fundo. Isso é bem simples. Basta configurá-lo para azul na propriedade de fundo. Uma coisa que você notará é que o conteúdo dentro da barra de navegação se estende apenas até certo ponto Isso porque o conteúdo está dentro do contêiner, e esse não é o contêiner que fizemos. É um contêiner padrão do Webflow que não é tão largo quanto o nosso. Não queremos esse contêiner. Em vez disso, queremos usar o contêiner que já criamos, como aquele em que o conteúdo do nosso herói está dentro. Então, como podemos usar nosso contêiner em vez disso? Assim como reutilizamos qualquer outro elemento aplicando a mesma classe E você verá como o contêiner muda instantaneamente a largura. Essa é a classe que criamos e a atribuímos a esse contêiner que estilizamos anteriormente E se aplicarmos isso a esse contêiner da barra de navegação, todos esses estilos e propriedades serão transportados para esse contêiner da barra de navegação Assim como fizemos com os botões, se decidirmos alterar a largura do nosso contêiner padrão em um só lugar, ele será atualizado instantaneamente em todos os outros lugares , como mágica. Em seguida, precisamos inserir nosso logotipo. Assim como fizemos com a imagem do herói, vamos exportar o logotipo e colocá-lo como um elemento de imagem. Ao contrário da nossa imagem de herói, desta vez, vamos selecionar SVG Por quê? Porque nós mesmos criamos nosso logotipo na Figma É um imposto normal no momento. Se o exportarmos no SPG, manteremos suas qualidades baseadas em vetores Ele será otimizado para retina imediatamente. Ele se estenderá infinitamente sem perder qualidade, e o tamanho do arquivo será muito pequeno Na maioria dos casos, os SVGs serão menores do que os PNGs e os JPEGs. Tudo bem, depois de exportar a imagem, adicione um novo elemento de imagem e faça o upload do logotipo como fizemos da última vez Eu tenho elementos de marca selecionados, então, quando eu clico na imagem, ela aparece automaticamente dentro da caixa da marca. Mas o logotipo está colado na parte superior. Como podemos corrigir isso? muitas maneiras de fazer com que seja uma linha no centro. Provavelmente, o mais simples é adicionar uma margem superior à própria imagem. Agora vamos estilizar os links de navegação. Vamos fazer isso como qualquer outra coisa. Mas primeiro, o que vamos fazer é excluir todos os outros links de navegação e manter apenas um Vamos aplicar um pouco de estilo a ele, que o Webflow crie automaticamente uma classe Agora podemos duplicar esse link nab quantas vezes quisermos E quando fizermos uma alteração em um deles, todos serão atualizados instantaneamente. Viva o CSS. Então, vamos aplicar os tecidos apropriados, de forma bem simples E aplique espaçamento para combinar com nossos designs. Podemos medir o espaçamento Figma e inserir os espaços exatos aqui O espaço na parte superior da Figma é de 42 pixels e na lateral é de 30 No Webflow, usaremos preenchimento para isso. Poderíamos usar barganhas, mas, por padrão, ele já tem preenchimento e é muito bom dessa Na lateral, usaremos 15 pixels para cada lado. Dessa forma, o preenchimento de dois links vizinhos somará um total de 30 pixels Ao usar o preenchimento, todo o link crescerá para que os usuários possam clicar não apenas com o texto, mas com a caixa inteira Você verá que o link é clicável mesmo no espaço vazio porque não é um espaço vazio, a coisa toda é o link Finalmente, vamos adicionar esse botão. Porém, em vez de usar um elemento de botão, vou criar um botão a partir de um desses links de navegação Duplique a classe para que possamos fazer novas alterações sem afetar outros links de navegação Agora, vamos ver quais propriedades nosso botão tem no Figma. O tecido é igual aos links de navegação. O fundo é branco, mas com 20% de opacidade e o preenchimento ao redor dos impostos, 12 pixels na parte superior e inferior e 24 nas laterais Vamos recriar tudo isso no Webflow. Dentro do Webflow Color Picker, você pode aplicar 20% de opacidade nessa caixa chamada A para o valor Alpha Não sei por que Alpha e por que não O para opacidade. Tem algo a ver com nosso sistema de cores RGBA, mas quem se importa? Temos um preenchimento diferente dos nossos links de navegação. E temos cantos arredondados que podemos definir na seção de borda. Não há valor exato aqui, aumente-o até que ele pare de arredondar. Não tem problema se você revisar isso. Tudo bem Dentro do Figma, podemos ver que ele tem uma margem de 30 pixels na parte superior E para a margem esquerda, usaremos 15 porque ela se somará a uma margem de 15 existente do link de navegação próximo a ela Devido ao novo espaçamento, o logotipo está fora de linha, como você pode ver Teremos que alinhar o logotipo no meio com o menu de navegação Teremos que alinhá-lo a olho nu. Por fim, vamos verificar a fluidez e a capacidade de resposta da nossa barra de navegação Como você pode ver, elas estão sendo comprimidas até as bordas, mas isso é porque não temos nenhum espaçamento extra A seção do herói é boa porque tem acolchoamento aplicado nas laterais Portanto, quando a janela do navegador encolhe e o contêiner encolhe com ela, o preenchimento impede que ela seja comprimida Também podemos aplicar o preenchimento semelhante à nossa barra de navegação. E agora está parecendo bom. Está quase pronto. uma coisa pequena, mas importante, que falta: efeitos de foco Nenhum dos links ou botões reage quando eu passo o mouse sobre eles. Vamos aprender como adicionar efeitos de foco na próxima lição Certo, recapitulando, aprendemos como adicionar uma barra de navegação, a anatomia da barra de navegação e do que ela é feita, as configurações de uma barra externa e como ela funciona em Aprendemos como adicionar um logotipo dentro de uma barra externa e como estilizar links dentro do menu de navegação. 75. Webflow: lista de verificação de depuração: Tudo bem, então o que acontece se você estiver enfrentando algum problema no Webflow É disso que trata este vídeo. Na verdade, você não precisa assistir a este vídeo corretamente. Agora, é um tutorial caso você esteja enfrentando um problema. Às vezes eu vou te mandar para este vídeo. Quando você publicar seus problemas em perguntas e respostas, enviarei este vídeo para você ou pedirei que você volte a esta lista de verificação de depuração do Webflow para seguir as etapas, pois ela ajuda a resolver muitos dos problemas que você pode enfrentar ao pode enfrentar Não, você não precisa assistir. Você pode assistir agora mesmo, se quiser, ou pode voltar mais tarde, quando estiver realmente enfrentando algum problema que não consegue resolver. Então, eu tenho essa lista de verificação aqui. Tem algumas etapas, e eu criei aqui alguns problemas, que são problemas comuns que meus alunos enfrentam aqui e ali, e não são problemas inventados. Eles são muito comuns. Isso acontece. Então, vou examiná-los e mostrar como trabalhar essa lista de verificação de depuração e como seguir diferentes etapas e como diferentes etapas e ela é realmente muito, muito útil Então, aqui está esse estranho parágrafo espacial que é muito, muito grande não é possível descobrir, como o que está acontecendo De onde vem esse espaço? Clicamos nele, nada está acontecendo lá. Então, o que fazemos nesse caso? Vamos ver o que nossa lista de verificação nos diz. Primeiro passo, remova a classe do suspeito para ver se o problema desaparece Se isso acontecer, vá para a etapa cinco. OK. Então, suspeito neste caso é provavelmente um parágrafo. É com um parágrafo. Provavelmente está acontecendo alguma coisa no parágrafo. E temos uma aula aqui. Agora, podemos remover esse Backspace do seu teclado, remover a classe dele e, Hmm, o problema desapareceu, certo Agora, desfaça para retornar o parágrafo ao elemento. Controle Z no PC, Command C no Mac. Isso é desfazer. Então, a aula está de volta. E agora, passo cinco, vá para o passo cinco Vamos ver o que a etapa cinco nos diz. Depois de identificar a classe que está causando o problema, coloque a classe de volta no elemento. Já fizemos isso e começamos a redefinir cada estilo que está na cor azul Você deve conseguir encontrar um estilo específico que esteja causando o problema. Tudo bem, vamos ver Selecione o parágrafo correto, a classe correta e, em seguida, começamos a redefinir as classes destacadas em azul Agora, a forma como HTML, CSS e apenas páginas da web e sites funcionam é que tudo vive sob uma classe. Todas as mudanças que fazemos vivem sob uma classe. É por isso que temos uma aula aqui. Depois de excluí-la e remover essa classe desse parágrafo, todas essas alterações desaparecem. É por isso que remover uma classe é uma boa maneira de testar se algo está causando um problema. Então, podemos começar redefinindo redefinição. Há um atalho Clique na opção no meu caso, eu clicarei no PC. Isso não funcionou. Isso não funcionou. Quando as coisas não funcionam, eu desfaço, para não errar e voltar ao normal Vamos ver, clique em Não, isso não funcionou. Clique na opção, Não, isso não funcionou. Bing. Olha isso. Bingo. Isso é o que temos. Então, o que temos aqui? Altura. Isso é tipografia, então isso significa altura da linha 160 pixels. Oh, eu sei que queríamos dizer 160%. Aí está. Problema corrigido. Olha isso. Minha lista de verificação está funcionando Agora temos outro problema aqui. Isso é alinhamento à esquerda. Isso é alinhamento F. Os botões estão alinhados ao centro. Esse não é um bom design. Você quer consistência no alinhamento. Ou tudo está alinhado ao centro ou tudo está alinhado à esquerda Então, queremos que esses botões fiquem alinhados à esquerda. Mas isso não é Figma. Podemos arrastar isso aqui à esquerda. O que nós fazemos? Novamente, começamos com a primeira etapa, que é o botão é um suspeito. Vamos remover dela a classe que não fez nada. OK. Vamos ver o que nossa lista de verificação diz sobre isso Remova a classe do suspeito para ver se o problema desaparece Não, não desapareceu. Tudo bem, vamos passar para a etapa dois. Como remover a classe do elemento suspeito não ajudou, isso significa que o problema está vindo de algum outro elemento. Comece removendo as classes do pai direto e, em seguida, dos pais até o fim, incluindo o elemento corporal, até remover a classe que faz o problema desaparecer. Tudo bem, vamos ver. Então, qual é o pai do botão? Podemos verificar isso e descobrir isso no navegador. Temos um botão e o pai fica com a cópia em bloco esquerdo. Ok, esse é nosso pai. Outra forma de usar um atalho para encontrar os pais é a tecla de seta para cima Clique em O. Isso selecionará imediatamente o elemento pai. Agora podemos remover a classe. Não, isso não funcionou. Então eu vou devolvê-lo. Novamente, tecle, e agora vamos selecionar um avô, o pai dos pais. Então esse é o pai. O próximo pai é Zero flax, certo? Para cima, eu para cima. Aí está. Isso está selecionado. Agora nós o removemos dele. Não, isso não funcionou. Que chatice. Mais um. Talvez esse faça isso. Vamos ver. Bam. Eu fiz. O que está acontecendo com esse cara? OK. Se você encontrar a classe de buggy, pulamos para a etapa cinco etapa cinco foi exatamente a mesma coisa, o que já fizemos começou a redefinir e remover os estilos azuis Não, isso não fez nada. Oh, eu fiz. O que aconteceu? Vamos ver. Um centro de linha. Portanto, pai, nesse caso, configurações de alinhamento de texto do pai estão, na verdade, afetando os Faz sentido. Uma linha à esquerda. Tudo bem, isso é problema. Grande. Legal. Esses são fáceis. Agora vamos para um pouco mais difícil. Outro problema comum que vejo com meus alunos que temos a imagem do herói, e ela é pequena, minúscula, minúscula. Está espremido em todos os cantos. Então, o que fazemos nesse caso? Novamente, passamos pela primeira etapa, removemos a classe do suspeito. Este nem tem uma classe, então não podemos removê-lo. Então, provavelmente, não está vindo da imagem. Então, saíamos do pai, o removíamos, do pai, o removíamos e assim por diante. E uma vez que passarmos por isso, descobriremos que, nesse caso , também não está funcionando. Então, passamos pela etapa dois, nada acontece. Em seguida, vamos para a etapa três. Se o problema não vem de nenhum dos pais , pode ser de filhos ou irmãos Então, teremos que repetir o processo da etapa dois, mas teremos que fazer isso nas crianças ou com os elementos irmãos Agora, a forma como a web funciona, e isso é estranho Não é intuitivo, mas é assim que funciona. A web funciona como um documento. Você já trabalhou com o documento do Word? Sabe, quando você move algo no documento do Word, tente ampliar um pouco a imagem, e as 20 páginas inteiras do seu documento ficam completamente bagunçadas Sim. Isso é o que as páginas da web são. O cara original na Suíça que inventou sites, esse cara usou um documento, criou uma página da web a partir dele. Então, funciona fundamentalmente. O HTML funciona como um documento. Tudo está ocupando espaço. Tudo está exagerando. Não é como Figma. Figma é pacífica Funciona em camadas. Todo mundo está se dando bem. Ninguém está mexendo um com o outro. Mas documentos documentos são gananciosos e tudo está se esforçando Eles são como países lutando pelo território. Então, aqui, teríamos que verificar o que está acontecendo com os irmãos Então, para descobrir os irmãos, agora não temos um pequeno atalho legal para usar, então temos que passar pela navegação Para que possamos resumir tudo isso aqui, clique na imagem do herói novamente. A imagem de um herói não tem um irmão, tudo bem. Se a imagem do herói não tiver um irmão , subimos os pais e começamos com o irmão dos pais Então, tios, tias, é com isso que estamos trabalhando. Se isso não funcionar, vamos com avós, avós e irmãos, e assim por diante. Nós simplesmente continuamos fazendo. E se os pais e irmãos não funcionam e fazemos isso os pais solteiros e nada muda, então temos que fazer isso com os Então sobrinhas e sobrinhos, não, primos. Fazemos isso com os primos. Então, o que a etapa nos diz? Então, repita esse processo com os filhos e irmãos. Então, o mesmo processo de remoção de classes. Portanto, esse é o irmão do elemento pai. Bloco esquerdo. Nós o removemos. Bam, isso resolveu o problema. Então, como resolveu o problema, desfaça, sabemos que algo do bloco esquerdo está chegando e pressionando esse cara até a Agora começamos com nosso processo usual de redefinir todos os estilos azuis Reset, isso meio que acabou , mas não realmente. Reinicie, não. Reiniciar. Bam, essa é a única. OK. Largura mínima de 800 pixels. Oh, uau. Nossa tela tem 992 pixels, e esse cara quer ocupar 800 Isso é quase 90% disso. Isso é super ganancioso. Então, se reduzirmos isso para 400, agora a imagem tem espaço para crescer Agradável. E uma opção final, que é que nenhuma dessas etapas funcionará. Há um espaço estranho vindo de cima. Essa coisa nem tem um suspeito porque eu estou clicando nela e nada é selecionado. Não é que nenhum dos elementos esteja lá. Então, se eu tiver algo selecionado aqui, estou clicando nele, nada está acontecendo. De onde vem isso? Então, novamente, pense em um documento do Word, certo? Em um documento do Word, tudo está se substituindo e as configurações umas das outras Eles estão brincando um com o outro. É assim que funciona. Não, não é culpa do Webflow, culpa do HTML. É com isso que o Webflow tem que lidar. Figma, perucas, moldador, todas essas coisas. Eles são camadas de abstração. Eles estão criando com base nesse HTML e CSS, ignorando isso, e estão criando uma nova camada de abstração para você entender intuitivamente, para que você não precise lidar com as partes confusas do Então, sim, no Webflow, você precisa passar por essa estranha restrição de aprendizado, mas é uma tecnologia fundamental HTML e CSS nunca vão a lugar nenhum. As páginas da Web estarão sempre na estrutura do documento que nunca mudará Portanto, se você algum dia vai aprender a programar ou programar, seja o que for, seu conhecimento do Webflow será transferido para Em lugares como Wix, Framer, Figma, todo esse conhecimento é apenas parte Você não está carregando esse conhecimento para lugar nenhum. Tudo bem. Então, o que está acontecendo aqui? Quando não sabemos o que está acontecendo, começamos a remover e seguir as etapas dos elementos adjacentes porque é um documento, certo? Tudo está afetando e , geralmente , será algo adjacente. Então, por exemplo, qual é o elemento próximo desse espaço em branco? Será esta seção, a seção de demonstração. Remova a classe. Bem, acabei de remover o fundo, mas como você pode ver, com base nessa pequena borda, nada mudou. Esse espaço em branco ainda é independente. Então isso não funcionou. Ok, coloque isso de volta. Agora, o que é outro elemento adjacente? É esse título. Vamos colocar no cabeçalho, remova. Bem, isso também não funcionou. Hmm. Então, estamos meio que ficando sem todos os elementos adjacentes. O que fazemos agora? Vamos ver. Então, quando passamos por todas as etapas, nada está acontecendo. Se remover classes ou redefinir estilos azuis não ajudar, ou mesmo se não houver classes ou estilos azuis, comece a redefinir os estilos na cor laranja. Ah, hein. Então, fazemos, novamente, elementos adjacentes. Passamos por uma demosecção. Temos alguma cor laranja? Não vamos para o cabeçalho? Você tem alguma cor laranja? Nós fazemos. E veja isso. Agora, se eu remover a classe daqui, a configuração laranja não desaparecerá porque não faz parte da classe O que quer que seja azul, azul, azul, eles estão conectados. Eles fazem parte da mesma classe. Mas as configurações e estilos alaranjados vêm de outro lugar que tem estilos herdados, um tópico que abordaremos nas próximas palestras Quando você clica nele, ele dirá que o valor vem de blá, blá, blá Na verdade, ele lhe dirá de onde vem. E esse valor não pode ser redefinido. Você não pode clicar nele. Não há opção de redefinição porque ela não faz parte dessa classe. Não faz parte desse elemento ou dessa classe. Não podemos reiniciá-lo a partir daqui. Teríamos que redefini-lo apenas a partir do elemento original de onde vem. Mas o que podemos fazer, é começar a redefinir os estilos, que nesses termos, também significa colocá-los de volta aos valores padrão Então, qual é o valor padrão de uma margem superior? O Webflow, na verdade, nos diz que tudo o que está gravado, esses são valores padrão Largura, o valor padrão é automático, altura, o valor padrão é automático. E você pode clicar nele e verá que é selecionado como Automático. Mas a largura mínima é zero pixels, mas a largura máxima é nenhuma. Esse é o valor padrão desses elementos ou comportamento padrão, como exibição, padrão é bloco. Portanto, nesse caso, sabemos que o padrão é zero para margens e preenchimento Então, podemos fazer zero aqui. Manualmente, podemos reiniciar. E, senhora, funcionou. Então era isso que estava causando o problema. É isso mesmo. Essas são todas as etapas de depuração. 80% das vezes, isso será muito, muito útil. Outras vezes, entre em contato comigo em perguntas e respostas. Me avise. Eu vou te ajudar. 76. Webflow: estado hover: Nossa seção de heróis está ótima no momento, mas não é muito interessante interagir com ela. Quando passamos o mouse sobre os elementos, eles realmente não reagem a eles. Eles são chamados de efeitos do mouse ou do mouse. Em web design, lembre-se dessa lei. É chamada de Lei de Jacob da experiência do usuário. A lei diz que os usuários passam a maior parte do tempo em outros sites. O que isso significa? Isso significa que eles esperam que o seu lado funcione da mesma forma que todos os outros sites que eles já conhecem. Se você tentar ser muito original e fazer seu site funcionar de uma maneira diferente da que os usuários estão acostumados, você acabará com um site fantasma muito original que todo mundo quer deixar instantaneamente. Portanto, as pessoas esperam que os links e botões reajam quando passam o mouse sobre eles. Adicionar efeitos de foco e Webflow é bem simples e muito divertido Isso é gerenciado sob esse menu suspenso chamado estados. Depois de selecionar o estado de foco no menu suspenso, todas as alterações feitas nos estilos serão aplicadas ao estado de foco dessa classe E assim, o botão muda a opacidade ao passar o mouse Os estados agora mostram um ponto azul para indicar que uma alteração foi feita no estado de foco Existem outros estados, como imprensa e foco, mas não vou abordá-los até que precisemos deles. Não projetamos estados flutuantes no Figma. Também não faço isso em projetos reais de clientes. É muito trabalho extra que não é realmente necessário. Eu crio o efeito de foco em qualquer lugar durante o processo de construção do Webflow Dessa forma, também posso visualizar como ele está se comportando. Podemos mudar quase todas as propriedades ao passar o mouse. Muitas animações divertidas podem ser criadas apenas com isso. Embora o Webflow tenha outra maneira de criar animações e interações, é super incrível Mas falaremos mais sobre isso mais tarde. Para botões, alterar o arquivo de fundo é uma maneira boa e simples de adicionar um efeito simples de passar o mouse, e alterar a opacidade da sensação de fundo é uma maneira fácil de fazer Você pode usar isso como sua técnica preferida para obter um efeito rápido e simples. É mais fácil do que colocar uma cor diferente. Outra maneira simples seria adicionar uma sombra ao passar o mouse. Essa é uma animação comum e divertida, adiciona uma camada extra de dimensão. Agora, com nosso botão fantasma aqui, não podemos diminuir a opacidade Já está transparente. Mas o que podemos fazer é adicionar uma fina camada de branco transparente. Mais ou menos como aquele botão na barra de navegação, adicionando fundo branco com dez, 20% de opacidade Com o botão na barra de navegação, podemos jogar com opacidade novamente ou preenchê-la com Quando você o preenche com branco, também precisamos alterar a cor do imposto, porque o texto é branco e não aparece. Felizmente, podemos mudar qualquer estilo ao passar o mouse, então, sem problemas, podemos transformar o texto Quanto aos links de navegação, podemos fazer algo semelhante, como diminuir a opacidade, mudar a cor para outra coisa ou fazer algo ainda mais interessante Podemos adicionar uma borda embaixo. Não quero dizer sublinhar, isso é ridículo. Quero dizer, uma borda embaixo de toda a caixa de links. Podemos fazer isso nas configurações de fronteira. Selecione a caixa que indica a borda inferior. Isso deve selecionar automaticamente uma linha sólida como estilo se não garantir que você a tenha selecionado e não esteja definida em X e altere a cor para branco. Esse é um bom efeito exagerado e adequado para nós, porque estamos usando um link como uma caixa inteira, não apenas como um texto. Então, isso mostra que tudo isso é clicável. Poderíamos aproximar essa borda do texto diminuindo o preenchimento dos botões, mas na verdade eu gosto que ela seja espaçada Há uma coisa estranha acontecendo ao passar o mouse. Preste atenção em como o conteúdo abaixo muda um pouco toda vez que passamos o mouse Isso certamente não é bom. A razão pela qual isso está acontecendo é porque a borda do Tupixel aumenta o espaço disponível dedicado aos links de navegação Então, ele empurra todo o conteúdo para baixo. Então, como podemos corrigir esse comportamento? Precisamos, de alguma forma, garantir que a altura do link Nab não mude mouse por causa da borda E uma maneira de fazer isso é adicionar a borda Tupixel também no estado normal Podemos torná-lo transparente para que não apareça. Dessa forma, a caixa de link de navegação tem uma borda de dois pixels de qualquer maneira, portanto, não muda de tamanho ao passar o mouse A única coisa que muda é a cor. Essa é uma boa solução. No momento, os efeitos do foco mudam abruptamente de uma estadia para outra É um salto brusco muito instantâneo. Esse salto instantâneo pode não ser muito, mas é muito rápido para registrarmos a alteração, então não parece muito natural e suave. Nesses casos, os web designers adicionam um pequeno efeito de transição, portanto, há um pequeno atraso na transição. Podemos adicionar o estilo de transição a partir daqui. Em uma lista suspensa, você vê que há muitos tipos de transição Ele está listando tudo o que pode ter um efeito de transição como a opacidade de um elemento ou uma cor de fundo Nem todo estilo pode fazer a transição. Por exemplo, veja, o nome da fonte não está listado porque a alteração da fonte não pode ser animada, mas muitas outras configurações de tipografia No nosso caso, queremos fazer a transição de uma cor de borda, que é uma opção disponível. Há mais dois valores: duração e flexibilização. A duração é exatamente o que diz. Quanto tempo leva a transição em milissegundos. O valor padrão de 200 milissegundos é muito bom para a maioria dos efeitos de foco, então você pode deixar assim Quanto à flexibilização, pode parecer um pouco complicada, mas é bem simples Na realidade, essas são fórmulas diferentes sobre o quão rápido elas avançam ou aceleram e o quão rápido ou lento elas meio que desaceleram quando a Vamos deixar isso para a facilidade padrão. Na maioria das vezes, funciona perfeitamente bem. Agora, se você ultrapassar os links nulos, notará que a borda aparece e desaparece sem problemas, e isso é muito melhor do que a transição irregular Mais uma coisa a observar: o efeito de transição deve ser aplicado no estado normal, não no estado de foco É assim que o CSS funciona. O mesmo que podemos fazer com os botões e suas transições de fundo Muitas vezes, em vez de selecionar um tipo de transição específico, eu realmente gosto de selecionar todas as propriedades. Isso aplicará as mesmas configurações de transição a qualquer efeito É apenas uma maneira mais simples de fazer isso. Em vez de procurar um tipo de transição, toda vez que queremos aplicar algum tipo de mudança de foco diferente Se um elemento tiver várias propriedades que mudam ao passar o mouse como cor da fonte, cor do plano de fundo, sombras, em vez de adicionar três tipos de transição diferentes, você pode simplesmente adicionar um que se aplique a todos, a menos que queiramos fazer a transição de menos que queiramos fazer a efeitos diferentes em velocidades diferentes, mas essas serão ocasiões muito raras O mesmo efeito de transição nos outros botões, e aí está. Todos os botões e links transitam de forma agradável e suave. Tudo bem, então vamos recapitular o que fizemos neste vídeo. Adicionamos efeitos de foco aos links e botões em nossa seção de heróis Os estados de foco são alterados em relação aos estados no painel Estilos Podemos mudar quase qualquer estilo dentro do estado de foco. E para que as mudanças de estado de regular para passar o mouse pareçam agradáveis e suaves, podemos adicionar transições das configurações de efeitos 77. Webflow: seção do meio (aplicativo de bate-papo): A versão desktop da seção de heróis está completamente pronta. Ainda não o otimizamos para dispositivos móveis e tablets. Mas o que vamos fazer é, na verdade , primeiro terminar a página inteira e depois fazer a resposta e a otimização móvel Esse é o meu hábito de fazer isso. Alguns web designers, o que eles vão fazer é analisar cada seção por seção, cada bloco individual que eles estão construindo, eles também estão fazendo otimização móvel ao mesmo tempo. Gosto de terminar a página inteira primeiro e depois passar para a otimização e capacidade de resposta para dispositivos móveis Por quê? Porque o que geralmente acontece comigo é que eu envio versões para desktop ou qualquer que seja a página que estou basicamente criando, eu a envio ao cliente para revisão e ele volta com as revisões Então, o que acontece é que, embora tenhamos concordado com o design, às vezes, você sabe, há animações envolvidas, certo? Há interações envolvidas, alguns efeitos de terror. Portanto, estão envolvidas coisas diferentes que não fizeram parte da fase de design, ou elas podem simplesmente mudar ideia quando veem a página na realidade. Então, o que acontece é que eles podem voltar com algumas alterações diferentes que eu tenho que fazer, e eu posso remover completamente parte da seção ou mudar completamente a forma como ela está disposta e assim por diante. E agora toda essa capacidade de resposta e otimização móvel que eu coloquei dentro estão meio que perdidas o tempo todo Dessa forma, sei que não preciso gastar mais tempo com versões móveis até ter gastar mais tempo com versões móveis até certeza e até que meu cliente assine os designs e saibamos que está pronto para começar. Então, na etapa final, consertarei o celular e criarei a capacidade de resposta da página E usaremos esse processo, terminaremos a página primeiro, depois examinaremos todas as versões para tablets e dispositivos móveis e tudo mais. Agora é hora de construir essa seção intermediária. Vamos ser muito mais simples. Então, o que precisamos primeiro? Podemos dar uma olhada na estrutura do nosso herói para ter uma pista. Parece que temos dois blocos div, um chamado seção de herói e outro contêiner que fica dentro dessa seção de heróis Se você se lembra, criamos um contêiner como um bloco genérico para centralizar nosso conteúdo. Nós até reutilizamos isso dentro da barra de navegação. É uma ótima ideia reutilizar esse contêiner novamente em qualquer lugar do nosso site Dessa forma, temos um layout uniforme. E se algum dia decidirmos alterar a largura máxima, torná-la mais larga ou mais estreita, podemos fazer isso em um site inteiro com apenas alguns cliques Para a seção de heróis, não fizemos nada padronizado como esse Caso contrário, nós o reutilizaríamos aqui também, mas tudo bem Podemos criar uma seção genérica agora, que podemos reutilizar posteriormente, como fizemos com o container Então, vamos adicionar uma nova seção. Vamos colocar outro recipiente dentro. Aplicaremos a classe de contêiner a esse contêiner. E vamos criar uma nova classe chamada section para esse bloco de seção. E agora vamos adicionar um pouco de estilo a essa classe de seção recém-criada. Uma coisa que podemos emprestar da seção de heróis é o acolchoamento lateral Lembre-se desse preenchimento lateral, que aplicamos na seção do herói, para que o conteúdo não fique nas bordas Sabemos que isso será uniforme em nosso site e entre páginas, assim como nosso contêiner genérico. Então, vamos aplicar o mesmo preenchimento à nossa seção genérica Posteriormente, se decidirmos alterar esse preenchimento, podemos fazer isso em todo o site apenas alterando uma instância dessa seção Também podemos adicionar pedding superior e inferior. Essas informações podemos encontrar na Figma. Usamos uma Figma com espaçamento de 19 pixels para distanciar esse título da seção de heróis acima, para que possamos reutilizar esse mesmo valor aqui e aplicá-lo tanto na parte superior quanto Pronto, agora temos um layout de seção genérico com um contêiner genérico dentro. Reutilizaremos exatamente essa mesma estrutura em outras seções semelhantes em nossa página Agora podemos colocar nossos elementos dentro e começar a estilizá-los para que pareçam com nossos designs Faremos isso no próximo vídeo. 78. Webflow: tags HTML: Vamos começar estilizando nosso título. Qualquer novo texto que adicionamos à nossa página por padrão é definido na fonte Aerial Não seria bom se você pudesse alguma forma, dar a eles um estilo padrão, como fazer com que todos os títulos apareçam e todo o texto do parágrafo seja robótico, para que não precisemos estilizá-los toda vez que adicionamos um novo Em uma página pequena como essa, tudo bem. Não há muito trabalho. Mas o que acontece em um site grande com 20 páginas diferentes e ainda mais postagens de blog. É claro que poderíamos usar classes CSS, mas há uma maneira ainda melhor de fazer isso. Lembre-se do campo seletor, você já está familiarizado com isso A partir daqui, aplicamos classes CSS aos nossos elementos. Ao aplicar uma classe a um objeto, estamos basicamente salvando as informações sobre estilos e propriedades. Posteriormente, podemos aplicar a mesma classe a outro objeto similar. No campo seletor, o OC, diz, selecione uma classe ou tag Essa tag é o que nos permitirá definir estilos padrão em nosso texto. Então, o que diabos é uma etiqueta? Uma tag faz parte do HTML, enquanto a classe faz parte do CSS. As tags são exatamente o que estamos adicionando à nossa página. O bloco Div é uma tag chamada DIV e um título é uma tag chamada H one, e um parágrafo é uma tag chamada P. Dentro do HTML, é assim que novos elementos estão sendo adicionados, Ele começa informando o tipo do elemento que é DV, H one, P, etc., e logo depois, se houver alguma classe CSS aplicada a ele, o nome dessa classe CSS Você vê como diz que classe é igual à seção de heróis. Essa é exatamente a classe que criamos manualmente e a nomeamos dessa forma. Então, como as tags nos ajudam a definir estilos padrão? Bem, assim como definimos um conjunto de propriedades e estilos de uma classe, podemos fazer exatamente o mesmo com uma tag HTML genérica. Por exemplo, para o título, em vez de aplicar uma classe a ele e depois estilizá-lo, podemos selecionar todo o título H um daqui e depois estilizá-lo como costumamos fazer Agora, toda vez que adicionarmos um novo título, o estilo padrão será aplicado a ele sem a necessidade de usar classes E, assim como nas classes, podemos fazer uma alteração em cada instância ao mesmo tempo. Além do H one, temos mais tags de cabeçalho. Basta clicar nas configurações do título e você verá. Temos todo o caminho até H seis. O uso dessas tags de cabeçalho diferentes é basicamente o nível. H one deve ser nosso estilo de título de nível mais alto. Para um título secundário, podemos usar H dois e assim por diante. Se você olhar nossos designs e o Figma, definitivamente poderíamos definir diferentes níveis de títulos a partir daí. O título na seção do herói é o maior, então esse pode ser o H. O título da seção posterior pode ser H dois e talvez esses títulos de rodapé possam ser H três ou H quatro Então, se quiséssemos definir uma tag H two, nós a selecionaríamos aqui e novamente, iríamos para o seletor Desta vez, o seletor nos mostrará todos os dois títulos H em vez de H um, porque é isso que selecionamos E podemos estilizar todas as tags H two em nosso site. Agora, quando selecionamos a tag H two em um título, essa estrela será aplicada automaticamente Como observação lateral, diferentemente das classes, as tags não continuam sendo selecionadas. Assim que você terminar de editar e sair do elemento, esse seletor de tags desaparecerá. Então, se você fizer isso e voltar ao título para editar um pouco mais, agora qualquer nova edição criará uma nova classe e ela não será aplicada à tag Portanto, toda vez que você fizer uma nova edição na tag, certifique-se de selecioná-la sempre. Até hoje, eu continuo me esquecendo disso. Para poder selecionar a tag, o campo da classe precisa estar vazio. Caso contrário, como você pode ver, ele não mostra mais a opção de editar a tag H two. Mas há outra maneira de selecionar e editar a tag em si, mesmo que você tenha uma classe aplicada ao elemento. Você pode fazer isso a partir daqui. Esse menu suspenso aqui mostra todas as classes e tags de nível superior que você pode selecionar e editar diretamente. O azul é para a aula e o rosa é para etiquetas. Por exemplo, vamos pegar nosso título e torná-lo vermelho, mas não a tag, mas apenas essa instância específica do título. Como você pode ver, o título H one padrão permanece inalterado porque aplicamos a cor vermelha usando uma classe, não usando uma tag Agora, se quisermos editar nosso estilo H one padrão, é claro, podemos fazer isso no título abaixo, mas também podemos fazer isso no vermelho selecionando uma tag de nível superior no seletor Todas as alterações que fizermos agora também serão aplicadas ao estilo H one padrão, e você pode ver isso acontecendo ao vivo. Outra coisa a ressaltar que você notará que o estilo da cor está riscado. Por que está arranhado Basicamente, é o Webflow nos dizendo que a propriedade de cor está sendo substituída por um seletor mais específico Portanto, as classes são mais específicas, como elementos infantis, e as tags são mais parecidas com elementos principais. Portanto, as classes substituem as tags, mesma forma que as crianças herdam estilos do pai até definirmos um estilo específico no elemento filho. O mesmo acontece aqui. H one tag é um seletor de nível superior e funcionará como um estilo padrão até que uma classe mais específica substitua Um bom exemplo dessa hierarquia é uma tag corporal. Se você olhar dentro do navegador, verá que o corpo é a maior caixa onde todo o resto entra Nada fica próximo ao corpo ou em cima dele. Enquanto você selecionou o corpo, vá até o seletor e clique nas páginas Corpo O. Agora você pode definir alguns estilos específicos nessa tag corporal que serão transmitidos a todos os elementos filhos. No entanto, somente para propriedades herdáveis, como têxteis, outras propriedades como tamanhos, telas e bordas não serão Você pode ver que o Webflow já aplicou alguns estilos de fonte padrão Podemos ver isso porque está destacado em azul. Quais estilos padrão podemos definir aqui? Por exemplo, sabemos que roboto é nossa fonte principal em parágrafos e tudo mais, exceto títulos Então, por que não colocar o Roboto aqui? Além disso, podemos definir um tamanho de fonte, cor e altura da linha padrão . Dessa forma, cada novo texto que adicionarmos ao nosso site começará com essas configurações e terá muito menos estilo É claro que não estamos presos a esses valores. As tags H one e de parágrafo são seletores mais específicos, portanto, elas substituirão essas configurações É por isso que o parágrafo mudou quando estávamos editando, mas o título não, e as classes são seletores ainda mais específicos, que substituem todos os outros textos, seja o título ou a tag do corpo Agora, cada novo elemento de texto que adicionarmos à página estará em roboto e na cor cinza menos que tenha estilos mais específicos Existem outras tags que podemos estilizar, mas as tags de cabeçalhos e de corpo são as mais comuns e úteis Portanto, em nosso caso, temos H uma tag que estilizamos exatamente como nossos designs e estilizamos a tag do corpo acordo com nossos designs de parágrafo. Depois de estilizar a tag body, você notará que às vezes algumas tags mudam onde você não esperava Por exemplo, nossos links de navegação concordam que o tamanho corresponda aos 18 pixels que definimos para a tag corporal. E se clicarmos no estilo da fonte, podemos ver que esse valor está sendo herdado do corpo Mesmo que tenhamos uma classe habilitadora aplicada a ela. Por que isso está acontecendo? Porque originalmente, quando estilizamos os links de navegação, não precisávamos alterar o tamanho do telefone e a altura da linha. Tudo o que estava configurado no corpo por padrão tinha o mesmo tamanho de telefone que precisávamos na época. Mas agora, como alteramos o tamanho do telefone na etiqueta corporal, entendemos isso. Vamos estilizar esses links de navegação para qualquer tamanho que eles deveriam ter : 14 pixels para o tamanho do telefone e 16 pixels para a altura da linha. E isso é muito melhor. Então, para recapitular, temos classes CSS e textos HTML. As tags HTML são elementos em si, como parágrafos, cabeçalhos, imagens etc. Assim como as classes, muitas tags HTML podem ser estilizadas para criar um estilo padrão geral para esses tipos de elementos, como todos os títulos H um ou todos os parágrafos. A tag de estilo é um Isso economiza muito tempo, é eficiente e cria um código mais limpo. A tag de nível mais alto que podemos estilizar é a tag body. Se definirmos um estilo de fonte na tag body , todos os outros elementos fiscais do site, não apenas uma página, herdarão essa fonte da tag body até que a substituamos outras tags ou classes mais específicas 79. Webflow: classes de combinação: Portanto, a seção do meio tem apenas três elementos, título, parágrafo e uma imagem. Portanto, precisamos dos elementos de cordão no Webflow. Agora, vamos colocar nosso conteúdo lá dentro e ver aonde isso nos leva. Em seguida, vamos exportar a imagem. Desta vez, podemos exportar JPEG em vez de PNG porque o fundo é branco, então não teremos nenhuma incompatibilidade de cores Vamos fazer dois Xs para reter a otimização. Como exportamos dois X, precisamos habilitar a opção de alto DPI Ok, quase parece nosso design. Precisamos centralizar tudo de alguma forma. Poderíamos colocar o alinhamento do texto no centro do bloco div do contêiner, mas não podemos fazer isso em nosso contêiner genérico porque ele centralizará elementos em todos os lugares e bagunçará nosso conteúdo em outros lugares, como em nossa como em nossa É claro que poderíamos duplicar essa classe de contêiner e criar uma nova com um layout central, mas isso supera o propósito de ter esse contêiner genérico padrão que usaremos em todo o site Felizmente, o CSS tem uma solução super inteligente para isso, as classes combinadas Deixe-me demonstrar. Temos um botão genérico aqui. Vamos aplicar nossa classe de botão existente na seção de heróis. Quando chegarmos a esta seção a partir do design, em vez de branco, precisaremos usar a versão azul. Mas em vez de duplicar a classe do botão, vamos manter a mesma classe base e adicionar uma classe de combinação a ela Agora há duas classes no botão seletor, que é a classe base e azul, que é a classe combinada Qualquer alteração que fizermos nesse novo botão a partir desse momento não afetará o botão branco original. Mas a beleza da classe de combinação é que todas as outras propriedades que não tocamos ainda estão sendo herdadas da classe básica de botões Isso significa que, em algum momento, decidirmos mudar o estilo de nossos botões, como torná-los quadrados, diminuir o preenchimento ou alterar o estilo da fonte Todas essas alterações também serão refletidas no botão azul. No entanto, todas as propriedades que aplicamos à classe de combinação Azul não serão afetadas em nada. No entanto, todas as propriedades que aplicamos à classe de combinação Azul não serão afetadas em nada Nesse caso, as cores do plano de fundo e do texto. Não é realmente um crime se você não usa classes combinadas. Pessoas comuns que visitam seu site não saberão a diferença se você estiver usando classes combinadas ou não E, francamente, eles realmente não se importam. Mas é isso que os profissionais fazem para economizar tempo, produzir um código mais limpo e ter um melhor controle sobre o site. E, claro, quero que você se torne um profissional, crie sites com eficiência e ganhe mais dinheiro economizando tempo durante o desenvolvimento. Essas classes combinadas se encaixam na árvore de herança na parte inferior da hierarquia Eles herdam estilos da classe base que, por sua vez, herdam estilos da tag relacionada Relacionado é uma palavra importante aqui porque um parágrafo não herdará nenhuma estrela de H one tag ou tag de cabeçalho, somente da tag de parágrafo E todas essas tags herdam alguns estilos da tag body E quando substituímos estilos, estamos substituindo de Um estilo mais específico vence. Portanto, a classe combo pode substituir tudo acima dela, a classe base, a tag relacionada e a tag body Da mesma forma, uma classe base pode substituir tudo acima dela, mas isso não afetará a classe de combinação se essa classe de combinação for responsável por esse tipo específico de estilo, como cor do telefone ou cor de fundo, e É exatamente isso que CSN significa, folhas de estilo em cascata, se você está morrendo Então, os estilos caem em cascata de cima para baixo, como uma cachoeira Você pode ver como a classe de combinação foi adicionada ao menu de herança E esse menu nos permite selecionar qualquer estágio dessa hierarquia e adicioná-lo exatamente nesse estágio, por exemplo, a classe base A propósito, esse menu de herança também pode mostrar qual tag específica pode controlar seu elemento A segunda caixa rosa diz links. Por quê? Porque os botões são links regulares. Nós apenas os ladrilhamos para que pareçam botões. Portanto, se definirmos alguns estilos na tag de links , você notará esses estilos em seus botões até sobrescrevê-los. Ok, de volta ao nosso contêiner. Podemos adicionar uma classe de combinação chamada center e depois alterar o alinhamento do texto da fonte Isso deve centralizar todo o nosso conteúdo da maneira que quisermos. A partir desse ponto, se precisarmos outro contêiner com alinhamento central, podemos aplicar essa classe de combinação da mesma forma que aplicaríamos uma classe base regular Webflow até exibe classes de combinação vinculadas a essa classe base, para que você possa escolher uma classe de combinação existente Em Voila, temos um contêiner centralizado. Algumas coisas que precisamos estilizar em nossa seção : a largura do parágrafo e o espaçamento. Podemos pegar o espaçamento do nosso design de 30 pixels na parte superior e 60 na parte inferior E, claro, podemos pegar a largura do parágrafo dois, que é 566 pixels Mas opa, isso acontece. Eu sei que você pode estar pensando aqui, por que não centraliza? Não definimos o alinhamento central em nosso contêiner, mas demos uma olhada mais de perto O texto em si está centralizado dentro da caixa, mas a caixa não está. Por que a caixa não está no meio Porque o texto do parágrafo está configurado para exibir bloco, e a opção de alinhamento do texto não afeta os elementos no nível do bloco Ela afeta somente o texto real, o bloco embutido e os elementos embutidos Portanto, uma maneira de centralizar todo o bloco de parágrafos é alterar a exibição para bloco embutido Isso pode parecer um pouco estranho. Funciona no bloco embutido, mas não funciona em um bloco normal, mas tudo bem Você vai pegar o jeito. Outra forma de centralizá-lo é definir margens automáticas, como fizemos com o contêiner Lembre-se do que as margens automáticas fazem elas agem como molas que preenchem qualquer espaço restante e empurram a caixa para o meio Ambas são soluções válidas, margem automática ou bloco embutido, mas estou inclinado a usar margem automática porque, se estou enfrentando algum tipo de bug e estou tentando corrigir algo e esquecer o que fiz aqui, mais provável que presuma que o parágrafo está definido como bloco padrão em vez de bloco embutido. E é isso. Estamos com boa aparência. Então, para recapitular, aprendemos sobre classes combinadas e como elas podem nos poupar muito tempo As classes combinadas estão na parte inferior da árvore hierárquica, então elas herdam estilos de tudo acima delas, mas podem substituir qualquer um desses estilos herdados, e suas alterações não afetarão 80. Webflow: seção de CTA (aplicativo de chat): Tudo bem. Vamos criar nossa seção de call to action neste vídeo. O que precisamos aqui? Vamos fazer um planejamento rápido em nossa cabeça. Então, temos a imagem à esquerda, conteúdo ao lado, praticamente igual à nossa seção de heróis. Vamos começar com o básico. Vamos adicionar uma nova seção e dar a ela uma seção de classe que criamos. Em seguida, vamos colocar um contêiner dentro e dar a ele um contêiner de classe e, em seguida, vamos retirá-lo de lá. Precisamos de uma cor de fundo para esta seção. Na verdade, é o mesmo azul, mas temos 10% de opacidade Faremos a mesma coisa no weblo, mas a questão é: como vamos editar o plano de fundo de nossas seções sem alterar as mesmas seções em Bem, se você prestou atenção à lição anterior , saberá que podemos aplicar uma classe combinada à seção sem precisar duplicá-la Lá. Agora, a mudança só se reflete nesta nova seção. Como temos um layout semelhante ao da seção de heróis, talvez possamos fazer a mesma coisa. Vamos dar uma olhada. Temos um flexbox dentro de um contêiner, e esse flexbox tem dois blocos à esquerda e à direita que ficam próximos um Vamos construir isso de forma semelhante. Então, adicionamos um bloco div aplicamos a classe flexbox a ele e colocamos outras caixas dentro que estão coladas nas bordas. Por quê? Porque se você verificar as propriedades do flexbox, verá que ele tem espaço entre as aplicações Isso empurra as caixas infantis para o lado. Então, tudo o que colocarmos dentro deles também será empurrado. Ok, à esquerda, vamos colocar a imagem. Precisamos exportá-lo primeiro. Precisaremos encontrar uma maneira de fazer com que essa imagem fique na borda esquerda como a temos em nossos designs. Mas vamos primeiro colocar algum conteúdo dentro do bloco certo. Ok, então o que está acontecendo aqui? As caixas esquerda e direita são crianças flexíveis, então elas têm a flexibilidade de encolher e crescer para abrir espaço uma para a outra Então, neste caso, o parágrafo está pressionando as coisas e fazendo o bloco esquerdo encolher O que podemos fazer aqui é aplicar uma largura máxima ao bloco direito para que ele não fique solto. Podemos verificar a largura Figma e colocá-la como largura máxima, que é 467 pixels Agora, você se pergunta por que não largura fixa em vez da largura máxima? Porque em telas menores, queremos que ele diminua. Queremos projetar de forma responsiva. Essa é uma palavra que é responsiva? Bem, nós dois queremos projetar de forma responsável e responsiva Então, principalmente, considere usar tamanhos máximos e médios em vez de tamanhos exatos. Devo ressaltar aqui que, como esse bloco é uma criança flexível, ele ainda encolheria mesmo se lhe déssemos uma largura exata Isso acontece porque é isso que o flexbox faz. Ela governa seus filhos como quiser. Eles não têm muita palavra a dizer. Vamos dar a esse bloco uma margem à esquerda para que ele não fique tão próximo da imagem. Ok, agora o que fazer com a nossa imagem? Como podemos empurrá-lo para o lado? Eu sei que podemos adicionar uma margem negativa ao bloco pai. Sim, esse é o problema. Margens negativas E aí está. Mas isso tem um pequeno problema. Em uma tela mais ampla, a margem negativa que adicionamos não será suficiente. Para corrigir esse problema, podemos fazer duas coisas. Primeiro, podemos usar unidades VW em vez de unidades de pixels. Lembra o que significa VW? Isso mesmo. Volkswagen, mas também significa largura da janela de visualização. Então, quando colocamos algo como dez VW, isso significa que a margem será de 10% da largura do navegador Então, à medida que o navegador aumenta, isso também aumenta. Ainda não é suficiente. Poderíamos adicionar alguns pontos extras e cortar a imagem em telas menores. Mas há mais uma coisa que podemos fazer é ampliar a imagem em si, o que significa que podemos exportar mais da imagem Quando fizemos esse gráfico, na verdade cortamos a imagem Assim, podemos revelar mais e exportar a versão mais ampla. Dessa forma, teremos mais flexibilidade. Mova a imagem para o meio, para que tudo fique visível e a moldura a envolva Caso contrário, se você exportá-lo , ele recortará o conteúdo com base no quadro. E amplie a imagem ou, basicamente, revele mais dela. Então, novamente, passamos pela mesma exportação. Verifique e verifique novamente essa opção de alto DPI. Caso contrário, o valor antigo da largura será mantido e não atualizará a largura da sua imagem. E agora temos mais flexibilidade sobre quanto da imagem podemos recortar da página. A propósito, isso não é um truque. Essa é uma maneira válida de fazer coisas em web design. O que importa no final das contas não é o método, mas o resultado. Tudo bem, vamos terminar o conteúdo. Lembre-se do que fizemos com um botão ao jogar com as classes de combinação Vamos dar a esse botão uma classe combinada de azul e estilizá-lo A mesma coisa que podemos fazer com um botão fantasma. R Vamos usar nosso parágrafo para adicionar espaçamento. 30 pixels na parte superior e 60 pixels na parte inferior. E, na verdade, não importa onde você adiciona seu espaçamento. Você poderia até usar título e botões, mas isso precisaria que eu editasse dois elementos Usando um intermediário, posso adicionar espaço na parte superior e inferior. É menos trabalho e menos quantidade de aulas. Então, o que temos aqui? Há uma linha e, em seguida, há uma imagem de estrelas e texto ao lado dela. Com base nesse layout lado a lado, sabemos que precisaremos um bloco div extra apenas para esses dois Desta vez, vamos exportar estrelas no formato SVG porque elas não têm nenhuma fotografia dentro Eles são baseados em vetores, então são perfeitos para SVG. Como mencionei antes, os SVGs geralmente não precisam ser compactados Eles já são bem pequenos. Além disso, os Spigs não precisam ter a opção de alto DPI marcada porque eles exportam do Figma em um tamanho, portanto, não há necessidade Eles parecerão perfeitamente loucos em seu tamanho X original. E mesmo que você os amplie o quanto quiser. R Ok, então como colocamos as estrelas e as etiquetas lado a lado? Toda vez que você quiser colocar algo lado a lado, comece com o flexbox Também existem outras opções, mas o flexbox oferece a maior flexibilidade na maioria das vezes Esse flexbox que criamos na seção de heróis tem um alinhamento central No nosso caso, queremos que ele tenha um alinhamento superior como nosso design, mas não podemos alterá-lo aqui porque isso vai bagunçar o flexbox original e bagunçar todas as outras instâncias do mesmo todas as outras instâncias do Ok, então podemos criar uma classe de combinação e nomeá-la como quiser e, em seguida, alterar o alinhamento para o topo Duas coisas ainda precisam ser corrigidas o espaçamento entre elas e o fato de ainda não estar bem alinhado na O texto está um pouco baixo demais, então vamos pegar o parágrafo e estilizá-lo um pouco. Margem de 20 pixels na lateral, assim como temos no design e alguma margem negativa na parte superior para movê-la para cima e alinhá-la bem com as estrelas E também vamos dar uma largura máxima para que o texto salte e recorte onde quisermos Opa, o que aconteceu aqui? Verifique o flexbox. Obviamente, isso justifica uma situação que os leva ao tamanho. Basta mudar para a linha esquerda e pronto. Ok, agora vamos adicionar esse divisor horizontal. Oh, espere, não existe uma linha Webflow. As linhas na web são feitas de blocos div, como de costume. A linha é apenas uma div que tem uma altura de um pixel ou algo pequeno parecido Adicione um fundo preto com 15% de opacidade. Dê uma largura. E vamos adicionar margens superiores e inferiores para espaçar o conteúdo Fácil, fácil. Uma coisa você deve ter notado é que às vezes eu mesmo nomeio classes e às vezes deixo o Webflow criar automaticamente uma classe para mim O fato é que devemos sempre nomear nossas próprias turmas. Mas no começo, tudo bem. No momento, estamos apenas praticando e aprendendo o Webflow, então não queremos nos torturar novas decisões extras que precisamos tomar sobre como nomear classes e Por enquanto, vamos apenas nomear classes importantes, como flexbox, container ou section, algo que definitivamente usaremos e precisamos saber como as estamos chamando E tudo mais, como esses pequenos parágrafos ou qualquer outra coisa, podemos deixar o Webflow decidir automaticamente por Ok, então, para recapitular, na verdade, há nada para recapitular, pois não aprendemos um novo conceito neste vídeo, mas aprendemos a usar o que já sabemos de maneiras diferentes, como adicionar uma margem negativa na imagem para empurrá-la para o lado ou usar um bloco div de um pixel de altura para criar uma linha e praticar um pouco mais 81. Webflow: rodapé (aplicativo de chat): Na última seção desta página, o layout do rodapé é bem simples Usamos nossa grade de 12 pontos para dividir o rodapé em seis blocos iguais Cada bloco é composto por duas colunas e um bloco é reservado para o espaço entre o logotipo e os links do rodapé A opção mais óbvia aqui é usar o flexbox. Como de costume, vamos adicionar a seção e um contêiner dentro. Adicione outro bloco e aplique nossa classe flexbox usual a ele Agora vamos adicionar outro bloco div dentro, que chamaremos de coluna de rodapé Vou dar a ele um plano de fundo e uma altura temporários só para ver o que estamos fazendo. E assim como em nossos designs, vamos usar seis colunas. Essas serão colunas de largura igual, então todo o flexbox será dividido em seis partes iguais Podemos fazer isso usando pontos percentuais, 100% dividido por seis, nos dá 16.666 e assim por diante Em vez de fazer as contas sozinhos, podemos fazer com que o Webflow faça as contas por nós, assim como o Figma Dentro do preenchimento de largura, digite 100% dividido por seis. Se duplicarmos isso seis vezes, você pode ver como ele preenche todo o espaço Vamos adicionar as margens nas laterais, assim como temos em nossos designs Eles são separados por um espaço de 30 pixels. Então, aqui devemos adicionar metade disso em cada lado, 15 pixels nas margens esquerda e direita. Dessa forma, as margens das colunas adjacentes somarão até 30 pixels No entanto, não devemos ter margens na primeira e na última coluna, pois essas margens adicionarão espaço extra ao preenchimento já existente que faz parte da seção Isso pode não ser um grande problema, mas é um ótimo hábito ser consistente. Podemos fazer isso facilmente usando classes combinadas. Basta criar uma classe de combinação primeiro e remover a margem esquerda e a mesma coisa na última coluna Tudo bem. Agora, vamos colocar o conteúdo nas colunas correspondentes. Ah, em vez de usar parágrafo para texto normal, temos outra opção de texto chamada bloco de texto, que é o que vamos usar para esse slogan abaixo do logotipo O Text Block é basicamente um div normal com texto dentro dele Funciona da mesma forma que um elemento de parágrafo, mas eles têm finalidades diferentes. Você deve usar o parágrafo para texto longo com várias linhas e o conteúdo principal da página e blocos de texto para tudo o mais que não seja um título, parágrafo ou link Você pode usar esses dois de forma intercambiável. O resultado é o mesmo, mas é um bom hábito usá-los propositalmente, pois os mecanismos de pesquisa e os leitores de tela podem identificar como seu conteúdo está estruturado na página Outra forma de criar um bloco de texto é clicar duas vezes dentro de um bloco div normal e começar a digitar Isso o transformará em um bloco de texto. Para os links de rodapé, adicionaremos elementos de link regulares Vamos discar o link antes de duplicar para que as duplicatas transportem a A cor da espuma já mostra a cor cinza, mas, por algum motivo, ainda é azul na tela. Esse é um comportamento um pouco estranho que parece um bug no lado do Webflow É correto que seja azul porque a cor cinza da tag body está sendo substituída por tag de link mais específica, que tem uma cor azul por padrão Então, na realidade, o painel de propriedades deveria estar em azul, não em cinza, mas pode haver uma razão pela qual isso não está acontecendo, que eu não vou abordar agora porque não está realmente agregando valor a esta lição. Então, para corrigir isso, basta selecionar outra cor e selecionar o cinza novamente. Não precisamos sublinhar que podemos remover selecionando a decoração não abaixo do texto Precisamos de algum efeito de foco para esse link, caso contrário, eles não se parecerão com links Podemos simplesmente transformá-lo em colarinho azul no estado flutuante Essa é uma opção simples e eficaz. Poderíamos adicionar um efeito de transição difícil aqui, assim como fizemos com os botões, mas isso não é realmente necessário. Não são muitas mudanças, então vamos mantê-las sem uma transição. Agora vamos duplicar. Mas, opa, isso os coloca lado a lado. Por que isso? Você consegue adivinhar? Porque a exibição de links está definida como embutida. Isso significa que flui como texto, o que é. Então, eles vão ficar um ao lado do outro. Se aplicarmos o bloco de exibição em vez disso, sabemos o que vai acontecer. Ele ocupará uma largura inteira e se empilhará um sobre o outro Mas esse método tem um pequeno problema, não é realmente um problema, mais que não é uma experiência ideal para o usuário. Como é um link e tem uma largura total, isso significa que é clicável mesmo no espaço vazio Ao contrário da nossa barra de navegação, onde algo semelhante está acontecendo, os links interagem mesmo no espaço vazio Mas aqui, a borda na parte inferior é uma boa representação de que tudo é um link. Se estivéssemos apenas destacando o texto , também seria estranho na barra de navegação Então, como podemos fazê-los se empilhar uns sobre os outros sem que se estendam de ponta a ponta Usando o flexbox. Podemos dar ao pai um layout flexível e dar a ele a direção vertical em vez de horizontal Em seguida, linha esquerda, certifique-se de fornecer essa linha esquerda. Caso contrário, ele se estenderá de ponta a ponta por padrão, como um bloco. E agora estão empilhados um em cima do outro e o espaço vazio não faz parte do link Ok, vamos estilizar nosso título. Em vez de aplicar uma classe a esses títulos de rodapé, vamos estilizar uma das tags de cabeçalho, S H três, talvez Pode ser o nível certo, H dois, que poderíamos usar para algo maior. Uma manchete de nível médio. Você se lembra de como estilizar as tags? Precisamos selecionar uma tag do seletor e agora podemos estilizar todas as três tags H. Vamos remover a margem superior e adicionar uma margem inferior de 20 pixels exatamente como a temos nos designs. E lá vamos nós. Agora, todas as três tags H terão esse estilo por padrão. Uma coisa que você notará é que as colunas não se alinham na parte superior, como temos no design, vamos dar uma olhada nos cabeçalhos do flexbox Você vê que diz um centro de linha. O que queremos é um top de linha em vez de um estiramento. Como de costume, vamos adicionar uma classe de combinação a essa flexbox antes de fazermos qualquer alteração para não atrapalhar outras instâncias O alongamento é melhor porque as colunas vazias também se esticarão e ficarão visíveis. Vamos finalizar os links. Remova o plano de fundo. E é isso. Neste projeto prático, não vamos vincular essas páginas porque não temos outras páginas, mas poderíamos conectar o link de contatos, por exemplo, para vincular o endereço de e-mail, que ele abra uma nova janela de e-mail e o usuário clique nela Só precisamos colocar o endereço de e-mail dentro desse campo. Podemos pular a linha de assunto. E podemos fazer o mesmo com o link telefônico. E também para o endereço do escritório, poderíamos vincular um URL do Google Maps. Marque a abertura de uma nova janela para que o Google Maps não abra diretamente dentro dessa janela forçando os usuários a saírem do site E, finalmente, vamos adicionar o texto de direitos autorais na parte inferior. Vamos usar o bloco de texto novamente em vez do elemento parágrafo. Eu adicionei o bloco de texto dentro do contêiner, mas fora do flexbox E podemos adicionar uma margem de 180 pixels na parte superior, assim como nossos designs. Em nossos designs, o texto dos direitos autorais está bem próximo à parte inferior da página, 30 pixels da parte inferior. Mas no Webflow, é muito maior porque nosso bloco de seção tem um preenchimento de 90 pixels Precisamos mudar o preenchimento de 90 para 30 pixels. Mas antes de fazermos isso, precisamos adicionar uma classe de combinação. E aí está. Terminamos com a versão desktop da nossa página. Vamos para o modo de pré-visualização e ver como está tudo. Então, para recapitular, construímos o rodapé usando um layout flexbox Atribuímos uma porcentagem de largura às colunas do rodapé para que elas diminuam e se expandam igualmente, e deixamos uma das colunas vazia para criar espaço entre o logotipo e os links do rodapé Aprendemos sobre um novo bloco de texto de elementos, como ele é usado para textos sem parágrafos em um uso mais geral. Isso conclui a seção atual. Na próxima seção, aprenderemos como tornar nossa página responsiva, para que fique bonita e fácil de usar em qualquer dispositivo 82. Introdução ao web design responsivo: Na época do design responsivo, os sites foram reduzidos em dispositivos móveis Muitos sites ainda são feitos assim até hoje. Recentemente, eu estava procurando algumas informações sobre o sistema de pagamento da Piers e acessei artigo de ajuda 0R, a página do artigo de suporte, que tem a seguinte aparência É uma versão reduzida do site para desktop deles. Usar esse tipo de site em um celular é muito chato. Você tem que aumentar o zoom e se mover e você sabe o que fazer. Felizmente, com o Webflow, podemos usar o poder do design responsivo e oferecer aos nossos usuários diferentes layouts e layouts responsivos muito específicos para seus telefones e dispositivos específicos diferentes layouts e layouts responsivos muito específicos para seus telefones e dispositivos específicos que eles estão procurando. Dessa forma, todos terão uma ótima experiência com nosso site. Nesta seção, vamos fazer exatamente isso, tornar nossa página inicial responsiva e otimizá-la para diferentes tamanhos de tela Primeiro, vamos entender como Webflow funciona com capacidade de resposta Dentro do designer, podemos ver os switches para diferentes dispositivos. O primeiro é o desktop. É aí que estamos. Depois, é tablet, paisagem móvel e retrato móvel. Em termos técnicos, chamamos esses pontos de interrupção ou consultas de mídia Eles funcionam como pontos de verificação instruindo o navegador a alterar estilos dos elementos se a largura do navegador estiver em determinados tamanhos e pixels Por exemplo, se fizermos uma alteração de estilo em uma visualização de tablet , essa alteração não será afetada em um desktop. Basicamente, isso é adicionar uma regra CSS extra que diz: se as janelas do navegador tiverem um determinado tamanho , mostrarão um fundo preto. E se decidirmos alterar a cor do plano de fundo na versão para desktop, essa alteração não ocorrerá na visualização do tablet porque estamos substituindo a cor do plano de fundo Isso usa a mesma regra de herança que todo o resto. Lembre-se de como as classes combinadas carregam todas as informações de estilo da classe base Mas no momento em que mudamos um estilo específico na classe de combinação , estamos permanentemente substituindo-o Portanto, nenhuma mudança futura na classe base afetará o estilo específico. Eu digo estilo particular porque essa é uma palavra-chave importante aqui. Assim como as classes, assim como os pontos de interrupção, não tocamos em nenhum outro estilo além da cor de fundo Então, todo o resto será herdado da versão para desktop toda vez que fizermos a alteração, como essa borda, por exemplo As alterações que fazemos diferentes visualizações se aplicam somente aos estilos. Se você alterar a estrutura da página ou adicionar novos elementos, isso será refletido em todos os lugares. Por quê? Porque esses pontos de interrupção são recursos CSS, não fazem parte do HTML Em CSS, nós estilizamos as coisas. Não podemos mudar o esqueleto da página. Só podemos mudar a aparência, embora tenhamos a capacidade de ocultar e mostrar elementos usando CSS. Então, se queremos algo no tablet, mas não queremos no desktop, podemos simplesmente ocultá-lo. Essa imagem está oculta na versão desktop, mas ainda faz parte do HTML e ainda está dentro do navegador, como você pode ver Outra coisa a ser observada sobre mudanças de estilo quando você faz uma alteração em um tablet, todas as alterações caem em cascata para a menor tela Em outras palavras, a paisagem móvel e retrato móvel herdarão as alterações do tablet e o retrato móvel herdarão as alterações da paisagem móvel Você pode sobrescrever estilos em dispositivos menores, mas qualquer alteração em dispositivos menores não afetará dispositivos maiores Isso usa a mesma hierarquia de herança, como classes. retrato móvel herda estilos da paisagem móvel, que por sua vez herda seus estilos do tablet, que herda estilos do desktop Cada ponto de interrupção do dispositivo tem um alcance. Podemos ver esse intervalo usando esse cursor Canvas. O tablet se expande para o máximo de 991 pixels e diminui Isso significa que 992 pixels é onde o desktop começa e 767 é onde ele se transforma em móvel As alterações que fazemos em cada ponto de interrupção se aplicam ao intervalo É por isso que precisamos verificar redimensionando a tela em cada visualização para garantir que ela responda Por padrão, o Webflow mostra os tamanhos mais comuns em cada visualização Ao redimensionar esse controle deslizante, você verá que o Webflow mostra dispositivos comuns para essa largura específica Essa é uma boa maneira de ver quantos dispositivos estão sendo afetados por nossas alterações e garantir que obtenhamos designs e versões ideais para os dispositivos mais populares. Uma coisa a observar é que não podemos aplicar estilos específicos ou dispositivos independentes. Quando aplicamos estilos no retrato do celular , esse estilo é definido para toda a faixa de todas as larguras e dispositivos cuja resolução de tela está nessa faixa Há mais uma coisa que quero mostrar a vocês antes de prosseguirmos com a otimização Podemos redefinir qualquer alteração de estilo que fizermos clicando no estilo azul e clicando em Redefinir, assim como faríamos com as classes. A redefinição removerá as substituições e herdará o valor do primeiro tamanho de nível Até diz aqui: onde o estilo será herdado após a reinicialização Nesse caso, classe de seção de heróis para uma versão para tablet. O ícone na frente mostra que é uma versão para tablet. Como atalho, segure ou opção ao clicar e ela será reiniciada imediatamente. E para o tablet, isso mostra que ele voltará para a versão desktop e você pode ver isso com um pequeno ícone de laptop Então, recapitulando, podemos alterar os estilos de nossos elementos para quatro tamanhos diferentes: desktop, tablet, paisagem móvel e retrato móvel Para cada um desses tipos de dispositivos, também temos a capacidade de reduzir e expandir o navegador interno Assim, podemos ver claramente aparência de nossa página da web em qualquer número de dispositivos, por exemplo, iPhone seis ou sete. Os estilos estão sendo herdados de cima para baixo, de dispositivos maiores para dispositivos menores, e não em direções opostas Portanto, as mudanças no celular não afetarão o tablet ou o desktop. Mas a mudança no tablet afetará o celular. Tudo bem, a seguir, vamos começar otimizar nossa página para esses dispositivos, começando pela seção de heróis. 83. Responsivo: seção do herói — Tablet: Tudo bem, então vamos começar com a seção de heróis. Vamos usar um por um para cada dispositivo e otimizar o estilo. Primeiro, o tablet para você. Quais problemas podemos identificar aqui? Temos a imagem que está diminuindo demais por causa da falta de espaço O conteúdo à esquerda tem uma largura mínima, se você se lembra, o que significa imagens que estão sendo atingidas. Então, temos uma barra de navegação que precisa ser corrigida. Teremos que ver se podemos realmente encaixar nossos links regulares aqui. Caso contrário, manteremos o menu de hambúrguer e o estilizaremos. A seção de heróis é muito extensa por dois motivos. Primeiro, por causa de 100 VH, aplicamos a essa seção e, segundo, por causa desse preenchimento similar de 20 VH Vamos ver se podemos ajustar os links de navegação. Então, como desativamos esse ícone de hambúrguer e mostramos os links de navegação Podemos fazer isso nas configurações da barra de navegação. Clique em qualquer lugar na barra de navegação e vá para SETI. Como você pode ver, diz ícone de menu para tablet e abaixo. Se movermos o controle deslizante em direção aos smartphones, isso desativará isso na visualização do tablet Como regra geral, para a experiência do usuário, mostrar links é uma abordagem muito melhor do que não mostrá-los. Por motivos óbvios, é mais fácil encontrar e navegar. Imóveis em tablets e dispositivos móveis são muito importantes. O espaçamento nesses dispositivos precisa ser muito menor do que o que faríamos em um desktop Então, vamos remover o grande preenchimento aplicado à seção Em vez de VH, desta vez, vamos usar pixels regulares porque isso nos dará uma aparência mais previsível, digamos nove pixels Tudo bem, o espaçamento geral do herói é muito bom e não temos espaçamento excessivo. Isso é bom. Então, o que fazer com a imagem de um herói? Ainda é muito pequeno em comparação. O conteúdo à esquerda é muito grande e está empurrando a imagem. No desktop, tínhamos espaço suficiente para poder usar um título tão grande, mas aqui não temos, podemos começar a os tamanhos no bloco esquerdo R Então reduzimos o conteúdo, mas a imagem não está crescendo Por que isso? Como temos configurações de largura mínima aplicadas ao bloco esquerdo e, embora o conteúdo esteja diminuindo, a caixa em si não está Então, vamos mudar essa largura mínima. Tudo bem, isso parece muito bom. Vamos testar a fluidez desse layout redimensionando nossa tela Ótimo. Ele flui muito bem em toda a página. Então, o layout do tablet para a seção de heróis está pronto. Todas as alterações que fizemos não foram refletidas novamente em nosso desktop. Ainda está do jeito que deixamos. Agora, vamos passar para as visualizações móveis. 84. Responsiva: seção do herói — dispositivo móvel 1: Como mencionei em um vídeo anterior, o estilo muda em cascata para telas menores Portanto, todas as alterações que fizemos no tablet também se refletem nas visualizações móveis. Normalmente, esse é um bom começo e às vezes, pode até fornecer bons resultados para celulares. Mas, muitas vezes, isso não é suficiente, e também precisamos adicionar ajustes extras nos celulares. Gosto de usar o mesmo layout para paisagem móvel e retrato móvel. Eu uso o retrato móvel como meu guia quando planejo mentalmente e tento usar soluções para visualização em paisagem que também funcionem na visualização em retrato. É apenas uma boa maneira de economizar tempo e manter as coisas mais eficientes. Então, com base na visualização de retrato no celular, sei que quase tudo estará no layout vertical. Não há muito espaço para colunas e layouts lado a lado. Não há como encaixar a imagem e o conteúdo do herói um ao lado do outro Precisaremos encontrar uma solução de alinhamento vertical. Felizmente, temos o flexbox para nos ajudar com isso. A direção padrão do flexbox é horizontal, mas podemos mudar essa direção a qualquer momento para a E as opções de alinhamento também são atualizadas quando mudamos a direção E essa mudança de direção não se aplicará à versão desktop. Lá, ainda está definido na horizontal. Isso mostra o quão incrível é o flexbox. Podemos alterar o layout sem alterar a estrutura HTML e definir os estilos em dispositivos específicos Mas antes de fazermos essas alterações, vamos dar ao nosso flexbox uma classe combinada porque estamos usando esse flexbox padrão em outro lugar, por exemplo, no Footer, e não queremos fazer todas essas alterações em todas as instâncias todas essas alterações em todas as instâncias E vamos centralizar o conteúdo. A visão real da paisagem não é realmente tão alta. Pense nisso quando você segura o telefone no modo paisagem. Você não vai ver a tela visível dessa altura. Vai ser mais parecido com isso. Isso significa que imóveis verticais são muito importantes para nós. Então, vamos tentar reduzir os espaços e tentar encaixá-los o máximo possível Por exemplo, esse preenchimento para esta seção. Já reduzimos isso na visualização do tablet, mas devemos reduzi-lo um pouco mais O mesmo aqui para a margem do parágrafo. 40 pixels parecem decentes. A foto é um pouco alta demais e a maior parte dela não estará visível em uma única tela, e o usuário terá que percorrê-la. Então, vamos definir a largura máxima dessa imagem. Estou definindo a largura máxima e não a altura porque se você fizer o valor da altura, isso acontecerá. alteração da altura não preserva a proporção, mas o valor da largura sim. Então, nas imagens, é melhor usar a largura para redimensioná-las. Tudo bem, algo interessante aconteceu aqui. A imagem não encolhe mais em uma tela menor e sai da página Isso é chamado de estouro quando os elementos saem da caixa principal Você encontrará objetos transbordantes com frequência, especialmente em telas menores Esse transbordamento pode acontecer por vários motivos e afeta a página inteira Por algum motivo, a imagem se recusa a encolher , criando um espaço extra na página inteira Então, por que a imagem não encolhe mais? Porque quando atribuímos a uma imagem uma largura máxima de 500 pixels, permitimos que ela crescesse até 500 pixels, o que acontece, ignorando as dimensões do elemento pai Esse tipo de comportamento é comum com imagens. Alguns outros elementos, por exemplo, um parágrafo não farão isso, mas sim imagens porque têm uma largura exata como parte do arquivo. O tem uma largura especificada nas configurações. Portanto, por padrão, a imagem sempre tentará crescer até o tamanho original do arquivo. E quando definimos a largura máxima para 500, ela pára em 500, mas não diminui além disso, desde que seja permitido Para evitar esse tipo de comportamento, Webflow tem um valor padrão adicional para cada imagem que você solta em uma largura máxima de 100% Isso significa que a imagem ocupará no máximo 100% de seu elemento pai. Por esse motivo, é melhor deixar esse valor intocado. Essa coisa sempre me causava muita confusão e erros sem noção na minha tela Agora, em vez de estilizar a imagem em si, prefiro estilizar a imagem principal Dessa forma, podemos evitar muitos comportamentos estranhos no futuro. Tudo bem, então vamos dar uma largura máxima de 500 pixels ao elemento pai em vez disso. Agora, isso se comporta exatamente como queríamos. Não cresce além de 500 e encolhe quando necessário Tudo bem, podemos concluir a vista da paisagem aqui. Ainda temos esse estouro horizontal, mas isso é de outra parte da página, e cuidaremos disso quando chegarmos até ela Precisamos estilizar o menu de hambúrguer, mas faremos isso no final quando terminarmos todas as visualizações da seção de heróis A seguir, faremos a visualização em retrato móvel. Fique por aqui. 85. Responsivo: seção herói — celular 2: Vamos terminar com a visualização em retrato. Quase tudo está transbordando aqui, mas podemos corrigir tudo isso com medidas semelhantes às que usamos nas visualizações anteriores Primeiro, vamos criar mais espaço reduzindo o preenchimento ainda mais para 30 pixels. O mesmo na barra de navegação. Na barra de navegação, o bloco de marca tem um preenchimento padrão aplicado a desktop e o tablet não têm isso, mas os celulares têm, então vamos remover esse preenchimento Na verdade, esqueci de notar isso na vista da paisagem. Também está lá, então vamos removê-lo de lá. Agora só precisamos reduzir o tamanho do conteúdo. Primeiro, se você der uma olhada no bloco esquerdo, verá que ele tem uma largura mínima de 300 pixels, então ele se recusa a encolher além desse ponto Vamos remover esse mínimo e configurá-lo como automático. E vamos diminuir o tamanho da fonte do título. O problema com o título é que na tela mais estreita, temos que torná-lo bem pequeno Caso contrário, obtemos uma palavra por linha, o que não é ideia. Essa tela super estreita é para telefones antigos. O uso desses tamanhos de tela na web é muito pequeno. Eu verifiquei as estatísticas e elas nem parecem chegar a 1%. Portanto, na maioria das vezes, não me esforço para torná-lo perfeito para esses tamanhos de tela e sacrificar os tamanhos de tela mais comuns. Mas existe uma maneira de torná-lo quase perfeito para toda essa gama. Em vez de pixels, podemos usar unidades responsivas para a fonte Nesse caso, VW para a largura da janela de visualização. Se preferirmos cerca de 14 VW, eles devem diminuir e crescer bem Agora, para os botões. Com os botões, podemos alterar a configuração da tela. Então, em vez de se sentarem lado a lado, eles podem ficar em cima um do outro. Lembre-se de qual configuração de exibição faz com que essa tela bloqueie, o que vai esticá-la de ponta a ponta. Em seguida, remova a margem esquerda e adicione uma margem superior para criar uma separação, e pronto. Nossa seção de heróis está meio que pronta. Vamos estilizar a barra de navegação no próximo vídeo. 86. Responsivo: menu de navegação (aplicativo de chat): Até agora, estamos usando nossas versões responsivas. Neste vídeo, vamos estilizar botão do menu da barra de navegação ou, como as crianças em idade escolar o chamam, o menu de hambúrguer, você sabe, porque o ícone parece um hambúrguer No momento, parece muito horrível, não se preocupe. Estilizar isso não é grande coisa. Primeiro, vamos estilizar o botão em si. O ícone do menu que está dentro pode ser alterado. Não estamos presos a isso. Se quisermos obter nosso próprio ícone e adicioná-lo, podemos, basta excluir o ícone e adicionar um elemento de imagem dentro do botão de menu, que é um div simples, e carregar seu próprio ícone no formato SVG ou PNG Embora haja uma vantagem em manter esse ícone padrão, pois a cor é editável nas configurações da fonte, que facilita a alteração das cores Também poderíamos criar nosso próprio ícone de menu a partir do bloco div. Às vezes, faço isso quando estou criando uma animação super elegante para meu cliente Por enquanto, vamos usar um ícone padrão. Primeiro, a cor. Vamos precisar disso em branco. Podemos mudar a cor do telefone para branco, e isso vai funcionar. Ao estilizar esse elemento, use o estilo do elemento do botão de menu em vez do ícone Em seguida, vamos aumentar o tamanho. É muito pequeno. Podemos fazer isso novamente nas configurações do telefone, e 30 pixels devem ser bons. E vamos encolher um pouco o acolchoamento. preenchimento é o que controla o quanto disso é clicável e visível no E, por fim, vamos alinhá-lo com o logotipo. Queremos que ele esteja centralizado, não flutuando no ar como está agora Podemos centralizá-lo? Poderíamos continuar e mudar a tela da barra de navegação para flexbox e fazer tudo isso Mas uma opção mais simples é simplesmente adicionar uma margem superior no botão e puxá-la para baixo. Temos que dimensionar isso a olho nu. Você pode ver melhor em retrato, e 27 ou algo parecido parece uma boa escolha. Não precisamos adicionar uma animação de Hover aqui porque ela é exibida apenas em celulares onde não usamos o mouse, então passar o mouse é inútil Agora vamos estilizar o interior do menu. Estilizar às cegas não é bom, então podemos abrir o menu e estilizá-lo enquanto estiver Podemos fazer isso nas configurações, selecionar qualquer elemento da barra de navegação, acessar as configurações e clicar em Mostrar ao lado da opção do menu Isso manterá o menu aberto até que o estilizemos. Existem outras duas opções de menu, mas eu não sou muito fã delas. Eu gosto dessa versão suspensa padrão. É mais fácil de trabalhar e precisa de menos estilo. Agora vamos entender a estrutura de todo o menu. Esse bloco de menu de botões é exatamente o mesmo bloco que contém todos os nossos links na visualização da área de trabalho No desktop, ele não tem fundo e é organizado horizontalmente Mas se fizermos alguma alteração no desktop, essas alterações também serão transferidas para a visualização móvel. O mesmo vale para qualquer alteração de layout. Então, se um dia você ver links móveis, organizados de forma estranha, verifique se você fez alguma alteração na versão para desktop E dentro desse bloco de menu Knob, temos todos os links , incluindo o botão Então, para estilizar todo o menu primeiro, vamos estilizar o menu de navegação e, em seguida, estilizaremos os links internos Vamos dar a isso uma cor de fundo diferente. Nossa cor preta do design parece muito boa. Vamos adicionar o mesmo preenchimento nas laterais da nossa seção de heróis Dessa forma, seremos consistentes com nossa rede. No momento, os links estão um pouco entalhados porque têm seu próprio preenchimento, que removeremos assim que estilizarmos os Vamos também adicionar preenchimento superior e inferior, mas torná-lo de 30 pixels em vez de 60 No momento, temos estrelas que estão sendo herdadas da área de trabalho, como o sublinhado no mouse e os preenchimentos Vamos consertar esse preenchimento primeiro. Não precisamos de acolchoamentos laterais. E vamos escolher uma parte superior e inferior iguais para manter a boa separação entre os links. 20 pixels parecem bons. Não precisamos de um efeito de foco porque é para dispositivos móveis Como podemos remover isso do estado flutuante, que podemos encontrar aqui em estados Clique no X abaixo do estilo da borda para desativar a borda do botão Ao testar isso, você verá que a borda ainda aparece. Isso porque temos essa borda ativada não apenas sem passar o mouse, mas também em um estado normal Portanto, também precisamos removê-lo de um estado normal para evitar esse comportamento engraçado. E agora não temos mais o mouse. Ok, agora o botão, primeiro, vamos nos livrar da margem esquerda. Em seguida, vamos mudar a exibição para bloco embutido. No momento, está configurado para bloquear. É por isso que está se alongando assim. Por algum motivo, o botão se alinha no meio. Isso significa que algum tipo de propriedade no elemento pai está fazendo isso. Há duas propriedades que podem alinhá-lo ao centro Primeiro, o layout do flexbox, mas nosso menu próximo não é o flexbox, então não é isso E segundo, é um alinhamento de texto normal, e isso faria sentido porque elementos do bloco embutido podem ser alinhados usando o alinhamento Mas se verificarmos o alinhamento do texto do menu Nav, ele estará configurado para a esquerda E isso é enganoso porque, na realidade, não está definido para a esquerda Se você alterar a propriedade para outra coisa e depois colocá-la de volta no alinhamento à esquerda, desta vez ela fará o que diz Isso parece um problema do Webflow. Posso estar errado, mas parece que há um alinhamento central padrão no bloco do menu de navegação, e o Webflow, por algum motivo, não reflete isso nos estilos Sempre que você se deparar com algo assim, siga sua lógica e, se o que você vê não fizer sentido, brinque com os estilos e, às vezes, você perceberá que eles são apenas fingidos Uma coisa a observar é que você deve aplicar o alinhamento ao pai, não ao botão em si. alinhamento do texto do botão apenas alinhará o texto dentro do Tudo bem, vamos diminuir a margem desse botão para combinar com o resto O espaçamento que usamos entre os links é de 20 pixels na parte superior mais 20 na parte inferior, total de 40 Então, vamos totalizar isso para 40 aqui. 20 do último link e 20 para a margem superior. E o mesmo para a margem inferior. O espaço real na parte superior está a 30 pixels do preenchimento do menu e 20 pixels do preenchimento do link Nav para corresponder a esse total de 50 pixels Vamos adicionar os 20 inferiores no botão Lá dentro, parece bom. Podemos manter o efeito de foco aqui. Não precisamos disso, mas também não está causando nenhum dano. E às vezes, nos botões, é muito bom quando você pressiona e isso meio que muda o estado. Por fim, vamos adicionar a mesma cor de fundo ao hambúrguer Agora, para isso, é importante adicionarmos essa cor de fundo no estado aberto, porque se adicionarmos um plano de fundo em um estado genérico , obteremos o plano de fundo quando o menu estiver fechado. Alterar estilos para o estado aberto é como mudar estilos para o estado de foco Ele precisa mostrar esse rótulo verde, mas o estado aberto não está listado na lista suspensa do estado Em vez disso, o estado aberto precisa ser ativado nas configurações, abrindo nosso menu. Apenas abrir o menu não é suficiente. Certifique-se de que essa etiqueta verde esteja lá. Você pode ter o menu de navegação aberto, mas esse rótulo de estado aberto não aparece, que significa que o que você for editar, não será editado no estado aberto. Você precisa clicar no botão do menu mais uma vez para que o selo seja atualizado Agora você pode ver o rótulo aberto aparecer. Isso significa que as edições que fizermos agora serão refletidas somente no estado aberto Agora podemos mudar a cor do fundo e também arredondar o canto superior para que fique mais polido Mas em vez de arredondar os quatro cantos, vamos apenas arredondar os dois de cima e deixar os dois inferiores planos Dessa forma, eles meio que se conectarão ao menu. Para fazer isso, precisaremos selecionar a opção de cantos individuais dentro das bordas e, em seguida, selecionar os dois primeiros e colocá-los em algo como seis pixels. Vamos testar nossos resultados na prévia. E aí, tudo parece ótimo. Também fica ótimo na vista de retrato. Não precisamos mudar nada , exceto um pequeno detalhe. No retrato, temos um preenchimento de página diferente. Na paisagem, temos 60, mas no retrato, usamos 30. Nem precisamos abrir o menu para isso, selecionar o menu Nab no navegador e alterar o preenchimento 60-30 e Por isso, criamos com sucesso o menu de hambúrguer para dispositivos móveis Mudamos a cor e o tamanho do ícone usando simplesmente os estilos de fonte. Jogamos com os preenchimentos e as margens do botão do menu para alinhá-lo bem Em seguida, a partir das configurações, abrimos o menu e estilizamos o item do menu, fornecemos o plano de fundo que queríamos e ajustamos o preenchimento Também fizemos pequenas alterações nos links de navegação e no botão de navegação, removemos o foco dos links e ajustamos os preenchimentos E aprendemos como mudar o estilo do menu somente quando ele está aberto. A seção Hero está toda feita aqui para todas as visualizações do dispositivo. Nos próximos vídeos, continuaremos com o resto da página. 87. Responsivo: excesso: Agora vamos seguir em frente e otimizar a próxima seção desta página. E enquanto fazemos isso, aprenderemos um novo conceito chamado overflow Esta seção parece muito boa em tablets e não precisa de muita edição. A única coisa que vou mudar aqui é o preenchimento superior e inferior da seção Como mencionei antes, precisamos de um espaçamento um pouco mais apertado em dispositivos menores, então 60 pixels devem ser bons Na paisagem, temos um transbordamento. Quando você recebe esse tipo de estouro na página, encontre o elemento que está indo além das margens principais, que será a causa do Aqui, é óbvio que o parágrafo está causando isso porque está fora dos limites do contêiner e até mesmo da seção. A razão pela qual não está encolhendo é porque tem uma largura fixa Cometemos um erro no desktop e, em vez de definir um valor responsivo como largura máxima, atribuímos a ele uma largura fixa Agora, como essa não é uma configuração ideal nem na área de trabalho, vamos apenas estilizá-la na versão para desktop e deixar os estilos caírem configuração ideal nem na área de trabalho, vamos apenas estilizá-la na versão para desktop em cascata E antes de prosseguirmos, vamos realmente entender o que é transbordamento É um bug ou é um recurso? Na verdade, o transbordamento é um recurso muito útil. Ele tem sua própria configuração dedicada nos estilos. Deixe-me demonstrar como isso funciona. Temos um bloco de mergulho aqui. Eu adicionei a esta div a largura e a altura exatas São 900 pixels por 300 pixels. Se colocarmos mais conteúdo nesse bloco div, o conteúdo transbordará Por quê? Porque tem uma altura definida, 300. Portanto, não vai crescer além desse tamanho. Se removermos esse valor de altura, você verá que a caixa crescerá com o conteúdo. Mas às vezes não é isso que queremos e queremos manter a caixa nas dimensões exatas. Se você verificar as configurações de estouro desse bloco div, verá que ele está definido como visível Isso significa que o conteúdo transbordante ainda será exibido. Se o definirmos como oculto, o conteúdo será recortado e não será exibido, não importa o que façamos, mesmo se tentarmos rolar para dentro dele Mas, para esses casos, temos outra opção para fazer o conteúdo interno rolar. Mas essa opção não é muito boa porque sempre mostra uma barra de rolagem horizontal e vertical, mesmo que não haja conteúdo suficiente para rolar. Para isso, temos uma opção melhor, o último automóvel. Isso exibe a barra de rolagem somente se houver algo para rolar. A barra horizontal desapareceu e, se houver conteúdo transbordando verticalmente, ela mostrará a Essa é sempre uma opção melhor se você estiver criando um conteúdo rolável Só para observar no seu computador, você pode ou não ver essa diferença. Isso depende das configurações que você escolheu no sistema operacional, no Mac ou no Windows. Outra coisa a ser observada é que as configurações de estouro são definidas no elemento pai, não nos filhos Então, neste caso, nós o configuramos neste bloco div branco. Se colocarmos isso no parágrafo, isso não vai fazer nada. Além de rolar o conteúdo, outro uso comum configuração de estouro é quando queremos recortar o conteúdo, e isso geralmente é feito com imagens Provavelmente nunca queremos recortar texto. Por exemplo, se tivermos uma seção com uma imagem e quisermos recortar o excesso dessa imagem, podemos definir o estouro oculto no elemento pai, e isso vai recortar a imagem Tudo bem, vamos terminar nossas visualizações móveis. Ainda temos essa lacuna na página, mas isso é causado por algum outro elemento em uma seção diferente. Então, cuidaremos disso quando chegarmos lá. Agora, vamos fazer algo sobre esse visual muito estreito. Na seção de heróis, alteramos o preenchimento para 30 pixels, mas nunca fizemos isso nesta seção Então, vamos fazer isso. E vamos diminuir também o preenchimento vertical para economizar mais no espaçamento Na verdade, vou diminuir isso na paisagem também porque o espaço vertical é ainda mais importante na paisagem. E redefina o valor no retrato Se você os alterou em algum momento, é melhor herdar os valores do que repetir os estilos, pois isso apenas adiciona código extra, do qual não precisamos E, finalmente, vamos fazer algo com as manchetes, grandes demais para o celular Agora, lembre-se, o título não é uma classe. Nós estilizamos a etiqueta. Então é assim que vamos estilizar isso. Selecione todos os títulos H one na lista suspensa do seletor e, em seguida, altere os estilos Isso mudará todos os títulos H one para retratos móveis, mas não afetará outros Tudo bem, 35 pixels funcionam muito bem. Finalmente, o que fazer com essa imagem. É muito pequeno para ser qualquer coisa. Há uma coisa que podemos fazer. Podemos fazer com que a imagem saia de lado e recorte o transbordamento usando o que acabamos de aprender Primeiro, temos que aumentar o tamanho da imagem. Quando se trata de alterar o tamanho das imagens em entrevistas de resposta, nunca use essas configurações. Isso altera as configurações de HTML da imagem e isso mudará o tamanho em todos os dispositivos. Você também pode arrastar a imagem para redimensioná-la, mas também não a use Ele muda a mesma largura que está dentro das configurações. Em vez disso, o que queremos mudar é o estilo CSS da imagem, porque estilo CSS nos dá flexibilidade para ter tamanhos diferentes em dispositivos diferentes. Para fazer isso, selecione a imagem. Você vê essa largura máxima de 100%. Isso faz com que a imagem não cresça mais do que seu contêiner principal. É por isso que está diminuindo. Como esse é um cenário raro em que queremos que a imagem realmente cresça além do contêiner e até mesmo além da página, vamos editar essa configuração exata e defini-la em algo como 170% E agora ela sai da página e fica maior, agora podemos ver um pouco mais de detalhes da imagem. Mas temos uma imagem transbordando assim. Então, o que fazemos? Precisamos definir o estouro oculto no elemento pai para recortar a imagem Mas não podemos definir isso no pai direto, que é o contêiner, porque contêiner não vai até a borda. A seção sim. Então, precisamos colocar essa estrela de transbordamento na seção, mas vamos adicionar a classe de combinação a ela para que ela não afete todas as E aí está, agora, a imagem está recortada na borda da seção Então, aprendemos um conceito importante de transbordamento e como usá-lo em nosso benefício Overflow visible é uma configuração padrão, portanto, mostrará qualquer conteúdo que saia das bordas do elemento pai Oflow hidden cortará o conteúdo exatamente como fizemos aqui, o overflow scroll e o Auto deixarão o conteúdo rolar dentro do contêiner Mas a opção de rolagem exibirá barra de rolagem persistente mesmo quando não houver nada para rolar. 88. Responsivo: seção CTA (aplicativo de chat): A seção de ação não parece ruim logo de cara. Podemos fazer alguns galhos para aumentar um pouco o tamanho da imagem Primeiro, acho que a manchete é um pouco grande demais. Não foi um problema na seção acima onde havia mais espaço e tags menores. Mas aqui, fica difícil encaixar mais de uma palavra por linha. Essa é uma boa regra prática para usar. Se você conseguir encaixar pelo menos duas palavras por linha , o tamanho da fonte pode ser muito grande. Se estivéssemos fazendo um site completo, encontraríamos mais limitações desse tamanho de título, então prefiro cortá-lo na bunda Lembre-se de que esse título não é uma aula. É uma tag H one padrão, então é isso que vamos estilizar. Por padrão, a tag não está selecionada. Temos que fazer isso toda vez que estilizamos. Então, vou usar o tamanho do telefone de 35 pixels que usamos na tela do celular e torná-lo o tamanho H único padrão para todas as telas responsivas do tablet ao celular No entanto, o título ainda acaba embrulhado exatamente da mesma forma em três linhas O problema é que, à medida que reduzimos o tamanho do telefone, a imagem empurra o bloco de conteúdo e diminui o espaço disponível para o Isso meio que acaba com nosso esforço de encaixar o título em duas linhas Então, vou dar uma largura mínima. 340 parece bom. Vamos verificar a fluidez. Agradável. Seguindo em frente. Aqui vamos fazer o que fizemos com uma seção de heróis. Mude a direção do flexbox para vertical e a linha para a esquerda Não se esqueça de criar uma nova classe de combinação primeiro, ou ela alterará todo o flexbox na página O bloco de conteúdo não se alinhou porque tem uma margem definida à esquerda Vamos remover essa margem. Vamos ver. A imagem é muito grande em uma versão mais ampla. Vamos definir a largura máxima da imagem, mas melhor ainda no próprio bloco esquerdo, como mencionei anteriormente, sempre que posso, tento estilizar o contêiner da imagem em vez da própria imagem, exceto no caso do vídeo anterior, em que tivemos que estilizar diretamente a imagem. Não se preocupe Você não precisa memorizar todas as regras e recomendações que eu lhe dou Você aprende cometendo esses erros e adotando suas próprias regras e hábitos, e o Webflow é uma grande ajuda nesse procedimento de aprendizado Você pode ver tudo visualmente e ver os estilos que estão habilitados e que podem estar causando o problema sem precisar ler as linhas de código Mesmo para aquelas pessoas que querem aprender a programar, eu ainda recomendaria aprender primeiro com o Webflow porque é uma ajuda e um guia incríveis, e tudo no Webflow funciona exatamente da mesma forma que o código normal Esse layout alinhado à esquerda realmente não funciona mais nesta página porque, como você pode ver, fizemos um alinhamento central na maior parte da página e, de repente, esse alinhamento à esquerda destrói o layout consistente Portanto, uma abordagem melhor seria ter este também um layout central. E, especialmente em dispositivos móveis, layout central é uma maneira bastante familiar e bastante comum lidar com esses layouts Agora, a imagem em si pode ser deixada como está na linha esquerda porque, da maneira como criamos essa imagem, ela simplesmente não funcionará bem e não ficará bem se a colocarmos no meio da página, mas pelo menos podemos fazer com que o conteúdo fique na linha central E isso fará com que pareça muito mais consistente com o resto da página, mesmo que a imagem ainda fique em uma linha porque é uma imagem, então essa é a ideia da imagem que é meio que recortada e sai da página Então, como podemos fazer isso? Como podemos fazer um alinhamento central? Agora, temos algumas opções, mas uma maneira de fazer isso é porque a razão pela qual isso é um bloco div e é um nível de bloco Então, geralmente vamos esticar de ponta a ponta. E a razão pela qual não está se esticando totalmente é porque tem uma largura máxima aplicada a ela Então, o que podemos fazer é simplesmente remover essa largura máxima aqui, e ela se estenderá de ponta a ponta. E então o que podemos fazer também é centralizar o texto E qualquer coisa que seja texto e qualquer coisa que esteja em um bloco de linha, como esses botões, todos se alinharão no centro Para esse divisor, o que podemos mudar é que agora esse divisor não é um bloco embutido É por isso que não está centralizado, porque é um nível de bloco. E, na realidade, o navegador e o HTML veem esse bloco div porque ele já está de ponta a ponta Não há nada para alinhar no meio porque é um nível de bloco É assim que o nível do bloco se comporta. Mas a opção que temos aqui é que podemos fazer essa opção de centralização O que isso fará é aplicar margens automáticas nas laterais E essas margens automáticas preencherão qualquer espaço vazio restante, elas serão preenchidas com margens E a mesma aqui, a mesma margem aqui, mesma margem aqui, obviamente empurrará isso para o meio do bloco. É exatamente assim que nossos contêineres funcionam. Eles têm margens automáticas nas laterais e é por isso que se mantêm no meio, mesmo que não estejam no bloco de linha Esse cara aqui, isso já está se estendendo de ponta a ponta, mas é um flexbox O que podemos fazer é simplesmente mudar para um alinhamento vertical e garantir que você tenha algum tipo de classe de combate ou uma classe exclusiva aplicada a ela, e não é essa classe flexbox genérica que estamos usando Em seguida, mude para a vertical e, em seguida, basta alterar o alinhamento no centro E podemos criar uma lacuna aqui. Podemos usar esse recurso de lacuna, que faz com que também possamos obviamente adicionar uma margem na parte superior ou na parte inferior das estrelas, que também funciona bem, mas esse é um pequeno recurso muito útil Podemos usar e dar uma lacuna intermediária, e isso parece bom. Podemos potencialmente reduzir um pouco esse espaço. Algo como 60. E então aumente um pouco de espaçamento aqui entre esse conteúdo, e ele ficará muito apertado Então, vamos dar 30 na parte superior, 30 na parte inferior. Portanto, parece um pouco melhor e mais espaçado. Tudo bem, acho que agora parece muito melhor. Vamos testar a capacidade de resposta. Muito bom. E uma coisa que podemos fazer agora é, como você pode ver, nossa imagem, na verdade, ser cortada demais para fora. O que não precisamos fazer. Tivemos que fazer isso quando estávamos fazendo isso neste desktop, porque estamos tentando fazer isso também em telas muito grandes. Mas aqui temos mais margem de manobra. Acho que, então, podemos ver que é o máximo. Esse é o máximo que conseguirá. Então, com base nesse tamanho, podemos reduzir essa margem negativa. Até aqui. Portanto, há mais imagens visíveis, e isso preenche um pouco mais de espaço e fica um pouco melhor com o layout geral Finalmente, a versão em retrato. Ok, aqui precisamos remover a largura mínima que está definida no bloco direito. Bom. O imposto principal é muito alto para o retrato, então vamos reduzi-lo 27 pixels parecem corretos. É isso mesmo. Tudo parece elegante. Acabamos de deixar o rodapé e pronto. 89. Responsivo: rodapé (aplicativo de chat): Então, o que temos aqui? Este é um flexbox que tem colunas internas. As colunas têm essa largura percentual aplicada a elas. Lembre-se das visualizações móveis ao criar uma solução aqui. Precisaremos de algum tipo de alinhamento vertical. Poderíamos escolher a opção vertical a partir do flexbox, mas isso coloca tudo na vertical, mesmo quando há espaço nas laterais Uma opção melhor é usar um recurso de embrulho. Já discutimos essa opção no vídeo flexbox, mas deixe-me refrescar sua memória Por padrão, o flexbox tenta encaixar todas as crianças em uma única linha, seja ela horizontal ou vertical Mas quando habilitamos a opção de quebra , as crianças pulam para a próxima linha ou passam para a próxima linha, uma por uma, conforme necessário. Vamos alterar as configurações de justificação para Há essa coluna vazia”, que era boa no desktop, mas não era necessária para visualizações em tablets e dispositivos móveis Gostaríamos que as colunas se alinhassem à esquerda sem espaçamento extra Podemos remover essa coluna vazia porque ela também será removida da área de trabalho. Mas o que podemos fazer é nos esconder usando estilos. Vamos atribuir uma classe de combinação para não mexer com outras colunas e, em seguida, nas opções de exibição, selecione A exibição em uma propriedade oculta o elemento e libera o espaço que ele estava ocupando O que mais? As colunas têm as margens esquerda e direita Então, quando eles pularem para a próxima linha, isso criará esse espaço extra. Vamos remover essa margem esquerda e usar somente a direita, mas certifique-se de editar a coluna que tem somente uma classe global. A primeira e a última coluna têm uma classe de combinação aplicada a elas. Nós o usamos para corrigir algumas margens no desktop. Isso é muito bom. E vamos adicionar uma margem inferior para que as colunas na segunda linha não se encaixem na primeira linha. Em tamanhos menores, você verá que elas realmente não se enrolam adequadamente e, em vez disso, as colunas se apertam com muita força Isso porque eles têm a largura percentual aplicada a eles, o que é bom no desktop, mas se torna desnecessário nesse tipo de layout. Então, vamos nos livrar disso. Agora que a largura da coluna é automática, ela cresce com o conteúdo interno, que torna a primeira coluna muito larga. Temos que dar uma largura máxima para que não cresça tanto . E isso é melhor. E a coisa toda se encaixa perfeitamente em todas as vistas. Uma última coisa que devemos ajustar é o espaçamento entre os direitos autorais e os links Acho que 60 pixels serão muito melhores. Vamos dar uma olhada final em tudo. R E isso conclui todo o desenvolvimento da nossa página Na próxima seção, examinaremos a finalização de nossa página, coisas como publicação, SEO e assim por diante Isso não significa que terminamos completamente com designer do Webflow e o processo de desenvolvimento Ainda há muito a aprender, como CMS, formulários, interações e animações, que podem fazer com que qualquer site pareça tão incrível , tão novo, tão moderno e tão profissional Mas vamos aprender todos esses conceitos em outras partes deste curso. uma parte, vamos aprendê-los dentro desse grande projeto de cliente que faremos do início ao fim, para que você tenha experiência prática sobre como começar tudo com um cliente com coisas como resumo do projeto, wireframes e designs e, em tudo com um cliente com coisas como seguida, migrar para o Webflow e desenvolver CMS e blog dentro do Webflow e seguida, interações e, finalmente, entregar tudo, publicar com um domínio personalizado, tudo isso. E também algumas partes que vou colocar na parte avançada deste curso porque você não precisa de tudo. Você não precisa aprender tudo de uma só vez. Por isso, coloquei tudo o que não é habilidade e conhecimento essenciais para você começar a trabalhar como freelancer na parte avançada Então, ao chegar à parte final deste curso, que é avançada, você já sabe tudo o que é essencial e que pode ajudá-lo a começar a trabalhar como freelancer E enquanto você é freelancer enquanto procura emprego, você também pode continuar com peças avançadas e aprimorar suas habilidades e melhorar 90. Como entrar em funcionamento: SEO (aplicativo de chat): O design e a construção da página da Web estão totalmente concluídos. Agora temos os últimos trechos para finalizar e depois publicar. Primeiro, precisamos definir as configurações de SEO. SEO significa otimização de mecanismos de pesquisa e seu conjunto de práticas sobre como tornar uma página mais atraente para mecanismos de pesquisa como Google, pink e do dot go O SEO é um campo totalmente separado, e não vamos nos aprofundar nos detalhes neste curso. No entanto, há algumas coisas que absolutamente precisamos cuidar. Para Stars, esses são o título e a meta descrição da página. Isso é o que geralmente aparece quando sua página aparece no Google. Esse é o título e essa é a meta descrição. Se você não configurar isso, o Google buscará um texto aleatório da sua página Bem, não é totalmente aleatório. Ele tem suas próprias regras, mas queremos controlar isso e escolher exatamente o que gostaríamos de exibir. Podemos alterá-los nas configurações da página, que podemos encontrar no painel Páginas. Vá até a página que você deseja editar. Nesse caso, a página inicial. Todas as outras páginas que temos do nosso lado aparecerão aqui, e cada uma dessas páginas tem suas próprias configurações individuais, que podem ser acessadas a partir desse ícone de engrenagem. Deixe-me fechar essas configurações para que possamos examiná-las. Em geral ou grupo, temos apenas um nome de página. O nome dessa página é o que aparece no Webflow. É um nome interno, então você pode nomear o que quiser aqui. Sob controle de acesso, podemos gerenciar quem pode entrar nesta página e quem não pode. Isso é útil quando você precisa proteger sua página com senha. Por exemplo, se for uma página interna da empresa com dados confidenciais e somente algumas pessoas tiverem acesso a ela. Nas configurações de SEO, temos dois valores: tag de título e meta descrição. Se deixarmos esse título em branco , o Webflow usará o nome da página por padrão Ao digitar nesses campos, você verá uma prévia dos resultados da pesquisa, o que é uma boa maneira de definir esse título e uma descrição incríveis. Há muitas maneiras diferentes de nomear suas páginas. Nas páginas iniciais, é uma prática comum colocar o nome da sua empresa ou produto primeiro depois seguir por algum tipo de slogan Por exemplo, o Chat App, aplicativo simples de bate-papo em equipe. E dentro do preenchimento da descrição, descreveremos a página. Então, como essa é uma página inicial, descreveremos o produto em si. O Google e outros mecanismos de pesquisa truncarão a descrição além de uma determinada contagem de caracteres, geralmente até 155 As configurações de gráfico aberto são semelhantes às de SEO, mas são informações que aparecem ao compartilhar conteúdo em redes sociais como Facebook, Twitter, Link DIN e Pinterest Por exemplo, quando você compartilha um link para um carro que acabou de comprar, Facebook pode extrair o título, a descrição e até mesmo uma foto das configurações do gráfico aberto dessa página. Se essas configurações estiverem vazias, Facebook extrairá informações aleatórias ou, às vezes, nenhuma informação. Podemos colocar um título e uma descrição personalizados, mas também podemos verificar essas opções para torná-las iguais ao SEO. Quanto à imagem de gráfico aberto, para isso, precisamos inserir um link para a imagem, o que significa que temos que carregar a imagem em algum lugar e depois obter o link. Podemos fazer upload da imagem diretamente no Webflow em nossos ativos e, em seguida, obter o URL de lá, ou apenas usar a imagem já enviada e obter o link para ela Este é um URL desta imagem que é carregado nos servidores Webflow Copie esse URL e cole-o no campo da imagem. Agora, você pode ver uma prévia de como seria quando o link para essa página fosse compartilhado nas redes sociais. Duas outras configurações não estão relacionadas ao SEO. As configurações de pesquisa do site, que podem parecer relacionadas ao SEO e à pesquisa do Google, mas não são. Na verdade, trata-se da funcionalidade de pesquisa em nosso site. Veja, podemos adicionar um componente de pesquisa em nosso site. Onde os usuários podem pesquisar o conteúdo do nosso site. Isso é útil se tivermos um site baseado em conteúdo, como Blog, comércio eletrônico, algo em que a pesquisa faz sentido Em sites pequenos, como o site de uma empresa ou um portfólio, isso não é realmente necessário. A última opção é o código personalizado. Não vai mostrar nada agora porque você precisará adicionar um plano de hospedagem para desbloquear esse recurso. Parece algo assim. código personalizado nos permite adicionar nosso próprio código externo à página. Normalmente, é para aplicativos de terceiros que queremos conectar à nossa página da web ou algum tipo de plug-in JavaScript ou qualquer coisa que geralmente seja externa, coisas como rastreadores, análises e todo esse tipo de coisa, qualquer coisa que esteja fora do Webflow, normalmente, e poderemos simplesmente inserir o código personalizado aqui Tudo bem, então há mais uma coisa que precisamos fazer antes de publicar a placa. Precisamos compactar todas as nossas imagens. Então vá para o painel Ativos, expanda o painel, selecione todas as imagens e clique em Comprimir E faça a compressão de todas as imagens de uma só vez. Vai levar algum tempo, especialmente porque há várias imagens. Portanto, você terá que esperar antes publicar ou publicá-lo agora e, quando a compactação estiver concluída, republicar o site novamente mais uma vez Tudo bem, todas as nossas imagens agora foram compactadas e convertidas em formato AV Você pode verificar novamente. Você pode ver nas configurações de arquivo de uma imagem como ela foi convertida para formato AV e como o tamanho do arquivo foi reduzido. E não se esqueça de ler suas imagens. E só para verificar se não há problemas com a compressão. Eu mencionei anteriormente que o AVV faz uma compressão bem grande. O tamanho do arquivo é reduzido muito para um tamanho muito pequeno, o que é ótimo, mas às vezes pode produzir algum tipo de artefato e alguns problemas com imagens Depende muito da imagem, do tipo de imagem. Só para ter certeza de que não existem essas coisas. E se você notar em algumas imagens que há alguns problemas com uma imagem, então você pode tentar uma conversão web P e depois fazer a conversão mais uma vez para aquela imagem específica em web P. E pronto. Agora nosso site está pronto para publicação, o que faremos na próxima lição. Então, para recapitular, cada página do nosso site tem SEO e outras configurações Usamos título e meta descrição para controlar como nossa página aparece nos resultados de pesquisa em sites como o Google. Além disso, podemos definir configurações de gráfico aberto, que é uma espécie de SEO, mas redes de mídia social como Facebook, Twitter e assim por diante. 91. Vindo ao vivo: publicação (aplicativo de chat): Então, vamos finalmente publicar nossa página. Essa é uma tarefa bem simples. Vá até a publicação e clique em Publicar para selecionar um domínio. Espere um momento. E aí. Nossa página da web do Pixel Perfect está ativa e operacional como um obstáculo. Toda a otimização responsiva que fizemos pode ser testada redimensionando e reduzindo Os botões e links não estão operacionais no momento porque não os vinculamos a nada. Não vamos fazer isso neste projeto prático, mas faremos isso com esse grande projeto de cliente no qual vamos trabalhar. Inicialmente, seu site será publicado no subdomínio Webflow Para publicar nosso site em um domínio personalizado, precisamos adicionar um plano de hospedagem pago e, em seguida, poderemos publicar nosso site em nosso próprio domínio. Os planos de hospedagem da Webflow têm preços muito decentes . Este site precisaria apenas do plano básico. O site baseado em CMS é aquele que tem um blog ou outro tipo de conteúdo dinâmico que precisa ser gerenciado por meio do CMS, que é um sistema de gerenciamento de conteúdo Estaremos construindo um site baseado em CMS no próximo projeto Não vou demonstrar como publicar isso em um domínio personalizado para este projeto, mas vou mostrá-lo no próximo. Em um plano gratuito, podemos alterar o subdomínio do nosso site, publicar e editar esse campo para o que quiser, desde que não seja usado Pense, clique em Salvar. E, como você pode ver no botão publicado, essa agora é sua nova URL. Uma última coisa que precisamos mudar é esse pequeno ícone. Isso é chamado de fabrican. No momento, ele está mostrando um Webflow, padrão, mas podemos alterar isso nas configurações do projeto Há dois ícones aqui. O primeiro é esse fabricante que aparece em uma guia do navegador e o segundo é o web Clip O clipe da web é um ícone que aparece no iPhone quando você salva seu site na tela inicial Se você não sabe do que estou falando, o Safari tem esse recurso para marcar um site como favorito Você pode adicioná-lo à tela inicial e ele será salvo ao lado de todos os seus aplicativos, aparência de qualquer outro aplicativo. Eu nunca uso esse recurso, mas como temos uma opção, devemos alterar esse ícone aqui. Precisaremos criar um ícone no Figma, que é apenas um arquivo de imagem normal, e precisamos criar algum tipo de ícone a partir do nosso logotipo Basta adicionar uma nova moldura com o tamanho de 256 por 256. Pintado de azul e talvez com cantos arredondados. Em seguida, copie o logotipo, exclua tudo menos a letra C. Amplie-o exportado em PNG, e esse será o nosso clipe da web Quanto ao Fabricant, só precisamos reduzir isso para 32 por 32 Um redimensionamento regular não funcionará. Não vai dimensionar o retângulo e o texto proporcionalmente Em vez disso, precisamos usar a ferramenta de escala, que podemos encontrar na ferramenta de movimentação. A ferramenta de escala redimensiona os objetos agrupados proporcionalmente. Portanto, se houver um retângulo de imagens de texto, ele bloqueará as proporções de todas as camadas internas e as redimensionará todas juntas É uma pequena ferramenta muito útil. E exportando PNG novamente. Em seguida, faça o upload de cada um para seu local dedicado. As dimensões desses ícones devem ser exatamente 32 por 32 e 256 por 256. O Wepplo não permitirá que você faça upload de nenhum outro tamanho. Agora publique novamente para ver as alterações entrarem em vigor. Apenas uma pequena observação para os usuários do Safari Safari não atualiza o favicon imediatamente, mesmo quando você o atualiza várias vezes, ele manterá ele manterá Ele faz isso porque salva o favicon no cache e o puxa de lá, em vez de recarregá-lo e pegá-lo da Então, se você precisar atualizar o fabrican e ver no Safari, a versão mais recente, o que você precisa fazer é limpar o histórico de navegação ou esvaziar o cache, e você pode fazer isso daqui a partir do histórico, limpar o histórico ou eu gosto de usar se você tiver essa guia desenvolvida, então é mais fácil porque ela apenas limpará o cache em vez do histórico de navegação que tem outras coisas lá dentro. Esvazie o cache e agora, quando você recarrega, ele deve ser atualizado, lá você vai para o último favican Isso é tudo que nossa página da web está ativa. Tem uma ótima aparência, é nítido e funciona bem, é rápido, responsivo e simplesmente incrível Observe como a página é carregada com rapidez e facilidade. Esse é o Webflow um dos benefícios incríveis, porque seus servidores são extremamente rápidos e são muito bem organizados e otimizados para as páginas e sites criados E também fizemos um bom trabalho porque construímos com um código limpo muito bom, e o site está funcionando bem e carrega muito rápido. Então, bom trabalho para nós. seguir, aprenderemos sobre fluxos da Web em um recurso chamado Editor. Fique por aqui. 92. Como entrar em funcionamento: editor: Eu já mencionei o quão incrível é o Webflow? Isso é o quão incrível é. Além do designer, ele tem outra visualização chamada editor, que você pode acessar aqui. O editor é um local para clientes e colaboradores editarem o conteúdo do site, e eles podem fazer isso diretamente no site ao vivo, literalmente ao vivo. Sem gerenciamento de conteúdo e editores de texto feios. Você pode simplesmente clicar no conteúdo e começar a editar. Isso é tão incrivelmente útil para clientes que eu nem consigo colocar em palavras. Seus clientes geralmente não são especialistas em tecnologia, e a última coisa que eles querem fazer é descobrir se os sistemas de gerenciamento de conteúdo funcionam E a última coisa que você quer é que seu cliente envie um e-mail para você toda vez que precisar algum tipo de pequena alteração no título para remover o coma ou adicionar uma nova palavra Esse tipo de solicitação surgirá depois de finalizar e enviar seu projeto aos Bem, se você está sendo pago por hora, tudo bem, mas se você está sendo pago por projeto, então você está trabalhando de graça. Não podemos alterar nenhum estilo ou layout do editor que está dentro do designer. Aqui é apenas conteúdo, seja texto, imagens ou links. Você pode alterar uma imagem apenas clicando nela e fazendo o upload de uma diferente Você também pode alterar o URL de destino ou o texto de um link. As alterações não serão refletidas no site ativo até você clicar no botão Publicar. Depois disso, todas as alterações serão publicadas instantaneamente e é simples assim. E, obviamente, essas mudanças também se refletirão no designer, o qual podemos mudar a partir daqui. Caso desejemos restringir o acesso a algumas partes do conteúdo do editor, dentro do designer, podemos acessar o painel de configuração dos elementos e verificar se os colaboradores podem editar esse elemento E agora o título não será editável dentro do editor. Dentro das configurações do projeto, podemos adicionar colaboradores extras Isso é independente da conta principal e dará acesso ao gerenciamento de conteúdo do site. Isso dá acesso ao editor para envios de formulários, configurações de página, criação de novos itens de CMS como postagens de blog e assim por diante Então esse é o editor bastante simples, mas poderoso. Não há nada que realmente precisemos fazer sobre isso. Eu só queria te mostrar o lugar porque geralmente não trabalho com um editor porque trabalho com o designer, mas isso geralmente é algo que você ensina aos seus clientes e diz a eles: Ok, então essa é a opção e é assim que você faz. É assim que você edita as páginas e assim por diante. Na verdade, o Webflow tem tutoriais no editor, então às vezes você pode simplesmente enviar o tutorial em vídeo dessa forma ou gravar seu próprio tutorial em vídeo, dependendo de você E isso conclui a terceira e grande parte deste curso, que era sobre Webflow e desenvolvimento Na próxima parte, vamos fazer um projeto completo de clã, ficar por aqui 93. PARTE 4: PROJETO CLIENTE: nesta parte do curso, vamos projetar e construir um projeto completo como estávamos fazendo para o cliente. Eu vou te levar exatamente pelo mesmo processo que eu mesmo faço. Agora temos um novo projeto. Você praticará exatamente o que está envolvido no projeto rial e dará cada passo do Projeto Bravo reboque, enquadramento de arame, reunindo inspiração, design e, em seguida, construindo e entregando a enchilada completa ao cliente. Vamos usar tudo o que aprendemos até agora. Além disso, vamos aprender muito mais conceito que ainda não cobrimos, especialmente no fluxo húmido. Por exemplo, CMS, que é significa sistema de gerenciamento de conteúdo em sua basicamente chorou, flui powerhouse sobre como fazer site dinâmico e conteúdo dinâmico. Por exemplo, blawg, onde podemos extrair informações do banco de dados em vez de apenas construir uma página estática para cada artigo. Podemos apenas ter o banco de dados com conteúdo dentro deste banco de dados como uma manchete, o sub ela, o nome fora, o autor e tudo mais e, em seguida, apenas projetar e construir um modelo para a página do artigo e, em seguida, ter o banco de dados puxar o conteúdo para páginas diferentes como nós como a página pobre carrega e como o usuário interage com um site, o segundo grande tópico que vamos cobrir suas interações. É assim que você constrói elementos interativos e objetos dentro do fluxo de trabalho que podem animar, se mover, desaparecer coisas como formas pop art, soltar botões animados de Tom ou rolar animações que algo acontece, esconde, revela ou apenas muda de forma em um pergaminho e muito marca. Tudo bem, então vamos mergulhar. 94. Projeto de clientes: bom processo de design: Normalmente, meu projeto de site começa por um cliente me enviando um parágrafo de descrição do que eles querem. E geralmente é como, oh, hey, Vacco. Gostaríamos do site para o nosso aplicativo em, mas não temos telas ou conteúdo ou qualquer outra coisa. No entanto, é muito difícil criar um site inteiro fora. Sem conteúdo, sem breve projeto e sem telas de aplicativos ou sem brio, informações valiosas que eu posso usar para o site que é realinhar. É assim que as coisas funcionam normalmente, e você não tem um projeto perfeito com todo o conteúdo, fotos e telas de aplicativos ou tudo o que estiver pronto para começar a projetar. No começo, eu não tinha ah, processo no meu plano era apenas improvisar e apenas ir com o projeto e ver onde ele vai. Foi uma péssima ideia por três razões. Primeiro eu ficaria preso. Eu ficaria olhando para a tela sem ter idéia do que fazer e do que projetar e pensar. Acabei de ter um bloqueio criativo ou algo assim. Mas não admira. Como você pode projetar algo quando não há nada a ser projetado? O segundo problema foi grande para mim porque eu gastaria muito tempo projetando algo e criando e , pelo menos, começando a gostar de uma página ou talvez ter uma página. E eu enviaria esse resultado ao meu cliente para concordar com a direção criativa e olhar e sentir que eu estava indo em direção. E então muitas vezes eu recebia uma rejeição completa e que haveria tipo, você sabe, não, nós não gostamos desse estilo. Queremos algo mais parecido com isto. Isso foi muito frustrante para mim no começo, porque eu fico um pouco agitado Ted e vou começar a dizer a mim mesmo que todos esses caras não sabem do que estão falando. Eles não têm um bom gosto de design e apenas me enganando. Apenas diga “Ok, tudo bem”. E volte ao trabalho. E Crumpley Bork em um novo visual. O terceiro problema era este. Começar meu trabalho e chegar a algum tipo de resultado final com, você sabe, passando por diferentes iterações e finalmente concordando em design. Mas muitas vezes o boneco. O conteúdo era um conteúdo fictício dentro, modo que o imposto era um conteúdo fictício. Nenhuma foto era às vezes realmente, porque talvez eu precisasse de foto. Até agora, os usuários para depoimentos ou comentários ou membros da equipe de fotos auto ou algo assim. E eles não são para dar ao meu cliente dever de casa, também, você sabe, me fornecer, escrever e reunir todo o conteúdo que eu preciso dele. Mas muitas vezes o cliente voltava com uma estrutura diferente para o seu conteúdo. Então, por exemplo, se eu projetasse uma seção com três colunas, o cliente voltaria com uma cópia para duas ou talvez cinco colunas. Mas esse tipo de conteúdo é ótimo. Se temos três ou quatro colunas para duas, não é muito bom. E para cinco, é apenas muito conteúdo para caber em uma linha. Isso não foi culpa do meu cliente. Foi meu porque vou ter um processo. Eu não tinha um projeto adequado ou processo de projeto para passar agora, o que está impedindo. Mas no momento em que descobri isso e criei um processo de design adequado e no processo de projeto para mim, as coisas mudaram drasticamente. É o projeto apenas se moveu mais suave e agradável. Ah, mais rápido, últimas situações para passar e isso é engraçado. Mas o design tornou-se mais fácil no passado. Eu só estava tentando levar todo o projeto de uma só vez, como me encher com um maldito Brito completo de uma só vez, e era demais para lidar. Eu estava guiando meus clientes através de diferentes passos que tivemos que passar no meu plano era apenas, você sabe, ir para o quarto, trancar-me e então uma semana depois surgiu com este site brilhantemente bem desenhado e, em seguida, apenas esperar e rezar para que os clientes adorem. Então aqui está um processo de três etapas que os grandes designers passam antes mesmo de sofrerem o primeiro pixel. O primeiro passo é definir um resumo do projeto. É uma breve descrição dos objetivos e detalhes do projeto. O projeto Brave faz perguntas importantes como Qual é o objetivo do site e para quem é ? Uma resposta a essas perguntas irá alinhar você e seu cliente na mesma página, certificando-se de que todos estão na mesma direção. O segundo passo é criar um quadro de humor e obter feedback de seus clientes sobre ele. Isso é algo que já sabemos fazer, e fizemos isso para reunir inspiração para nós mesmos. Mas se partilharmos esta bota entediada com os nossos clientes do que podemos obter mais benefícios com ela Ao partilhar um quadro de humor com o seu cliente, você pode pregar um gosto e um olhar e sentir fora do seu projeto porque há muitos estilos diferentes que você pode ir com, certo, você pode ir um pouco mais de fotografia tendo para o seu site que você pode comprar, mas ir um pouco mais. Ilustração pesada, um pouco mais colorido, menos cor para a direita. Portanto, há muitos caminhos diferentes que você pode tomar com seu projeto e seus projetos. E muitas vezes os clientes têm gostos muito específicos. Então você não quer descobrir alguma informação porque eles têm dificuldade em se explicar e eles não sabem que você é o designer e você tem acesso a toda a inspiração do mundo. Você sabe, esses sites como aleijam nossos interesses e eu dou um livro e você vai lá e encontra inspiração. Você reúne isso e trabalha isso para ter acesso a esse tipo de inspiração. Mas eles não sabem que sites que eles não vêem que podem não ser muito. Eles estão ocupados em fazer outras coisas certas, e compartilhando essas informações para eles, você pode pregar e tipo de carne na mesma página fora do olhar e sentir, porque se você não fizer isso o que você está fazendo é que você tem que passar por reiterações até chegar ao seu tipo de gosto e que muito mais trabalho a fazer, certo? Por que eu iria passar por diferentes iterações para finalmente pregar o gosto em Apenas geral , olhar e sentir fora do site onde podemos apenas pegar exemplos de outros sites e outras inspirações e mostrar-lhes OK, Qual deles você gosta disso para isso? O terceiro passo deste processo é criar quadros de arame. Molduras de arame são uma espécie de esboço áspero fora do local. Um esqueleto. Nós não nos preocupamos com colorista ou tipografia ou qualquer necessidade de um design ganancioso. Isto é, por exemplo, ou quadro de fio fora do YouTube. Ele mostra o que vai para onde e qual é o conteúdo. Muito simples. Não muito design acontecendo que parece uma criança escreveu, mas o enquadramento do vinho tem um enorme benefício porque você é capaz de discutir com seu cliente. Uma parte muito importante desse site quer o conteúdo porque o design sempre tem que acomodar o conteúdo, porque o design fora do nosso parágrafo pequeno para linha vai ser muito diferente de um design fora de um documento ala 5000, certo? Então você tem que pregar o conteúdo. O que classifica fora fotos para software faz os botões ir e tudo, E fazer isso durante o processo de design passando pelas situações durante o processo de design é apenas muito mais trabalho e mais desperdício porque você tem que se preocupar com cada pixel único no chamador e tons de diferentes cores e sombras e todas essas coisas, o que é absolutamente sem importância quando se discute o conteúdo e quando o conteúdo muda e uma estrutura muda, então você tem que despejar tudo o que você projetou já desperdiçar seu tempo e, em seguida, começar de novo do zero. Mas durante o enquadramento do fio, é muito simples porque não há muito para projetar. Você não precisa se preocupar em tornar tudo alinhado ou pixel perfeito, certo, e você não fica frustrado se Climb decidir que eles querem reestruturar todo o conteúdo fora da página mantém todos felizes e na mesma direção para o objetivo final. Assim, as três etapas do bom processo de design nosso resumo do projeto seria embarcar e estamos enquadrando no final de cada etapa. Você tem que compartilhar os resultados com seu cliente e concordar com eles e assinar isso, porque se você não fizer isso, então tipo de bits o propósito que você precisa para obter o feedback do cliente para ter certeza de que você não está indo para um erro direção quando você mantém seus clientes no banheiro. Primeiro de tudo, eles sentem que estão no controle do projeto e eles adoram essa idéia. Querem saber como vão as coisas. Segundo sempre mostra que você é um profissional, que você tem um processo de projeto acontecendo, e eles sabem que eles entendem que eles são. Eles estão com os grandes chapéus. E uma vez que você finalizar todas essas três etapas, é quando você passa para o processo de design e os resultados de design que você produz serão muito mais apreciados e semelhantes por nossos clientes porque eles eram parte do processo. E isso é exatamente o que vamos fazer nas próximas lições. Fique por perto 95. Projeto do cliente: resumo do projeto: O projeto deve começar com um resumo do projeto, mas muitas vezes isso não acontece. Um brief do projeto ou um brief de design é uma espécie de plano do projeto. É uma espécie de guia e acordo entre duas partes de que você seguirá em uma determinada direção e obterá o resultado certo. Existem diferentes maneiras de analisar e criar resumos de projetos, mas eu tenho o meu próprio jeito porque não acho que as formas oficiais e adotadas pelo setor sejam muito úteis porque são muito grandes, muitas informações e não são muito relevantes para negócios cotidianos e cenários da vida real, como trabalhar como freelancer trabalho e envio algumas informações para alguém do outro lado do continente e não é muito útil para pequenos projetos. Talvez seja útil para grandes corporações, e é assim que elas definem resumo do projeto, porque ele precisa passar por comitês e conselhos de administração sobre esse tipo de Mas quando estou trabalhando principalmente com pequenas startups e empreendedores e empresas menores, eles não precisam de nada Sua principal preocupação é tempo e dinheiro, e chegar a esse projeto e concluí-lo o mais rápido possível. Então, para mim, o resumo do projeto é basicamente respostas para certas perguntas que eu preciso saber. E essas são perguntas que eu faço na reunião inicial, então eu tenho uma reunião inicial com meus clientes, e discutimos algo lá, e eu tenho algumas perguntas Para eles, eu faço essas perguntas e eles me dão respostas e, no final da reunião, eu meio que retiro um resumo do projeto dessa reunião, basicamente respondendo às mesmas perguntas no papel, envio para que eles concordem que eu não entendi mal alguma coisa, ou talvez tenhamos tido um As duas perguntas mais importantes que faço são: qual é o objetivo do site e para quem ele se destina? Você não pode realmente criar uma solução para um problema antes de saber qual é o problema que ele está tentando resolver. Preciso saber o público-alvo e quem vai usar este site. Um site para jovens na faixa dos 20 anos terá uma aparência um pouco diferente de um site para gerentes corporativos na faixa dos 40 e 50 anos. Para nosso projeto, eu já preparei um resumo de design, e é um modelo que criei a partir do meu próprio resumo de design que eu uso, e você pode usá-lo em seus projetos. Pegue e salve. Veja o que você pode fazer com isso. Quando você chegar a uma reunião, bate-papo ou conversa por e-mail com seu cliente ou empregador, mantenha este documento ao seu lado e faça essas perguntas a eles. Posteriormente, você refinará essas perguntas e adicionará mais ou removerá algumas para que funcionem para você Depois de terminar uma reunião, preencha isso, você pode fazer isso durante a reunião ou depois, sem diferença. Em seguida, exporte-o como PDF. E envie-o ao seu cliente para verificar se ele concorda. Isso fará duas coisas. Primeiro, isso vai ser uma grande ajuda para seu cliente, porque o que geralmente acontece é que meus clientes não sabem o que querem. E isso é algo que você não esperaria, mas eles sabem que querem um site. Mas muitas vezes eles não sabem exatamente por que querem o site, que tipo de site querem, e eles têm muitas ideias diferentes, e isso é muito comum com empreendedores, porque muitos empreendedores estão em suas cabeças, e há apenas milhões de ideias diferentes surgindo em suas cabeças, e eles estão e há apenas milhões de ideias diferentes surgindo em suas cabeças, e E eles têm dificuldade em estruturar sua ideia e estruturar sua mente de maneira adequada. Ao analisar essas perguntas e respostas e depois lê-las posteriormente no formato de resumo de design, você lhes dá a capacidade de criar clareza em suas mãos. Então, vocês dois estão na mesma página. A segunda coisa que vai acontecer é que você parecerá mais profissional. Isso mostra que você sabe o que está fazendo e que eu tenho um sistema específico instalado. Por causa disso, os clientes confiarão mais em você e em seus projetos. eles terão uma experiência melhor No final do dia, eles terão uma experiência melhor porque conseguirão o que realmente queriam porque confiam em seus designs agora. E eles ficarão mais felizes com os resultados, o significa que os compartilharão com seus amigos que geralmente são empreendedores, trazendo a você mais clientes e mais trabalho Tudo bem, então eu já preenchi este resumo. Vamos imaginar que já tivemos uma reunião com nosso cliente e concordamos com esse resumo. Nosso cliente é uma startup que está construindo uma plataforma de colaboração em equipe. O objetivo do lado é inscrever usuários para acesso antecipado. Isso significa que a plataforma ainda não está pronta, mas a empresa já quer comercializar e gerar interesse. É uma prática comum entre startups ter um site durante o processo de desenvolvimento ou sempre que estão construindo seu produto, pois dessa forma elas podem gerar algum interesse porque saem procurando investidores ou tentam obter relações públicas e exposição na mídia, então elas sempre precisam um site antes mesmo de terem um produto. O público-alvo deste site são outras startups e equipes que têm funcionários trabalhando em locais diferentes. O cliente quer um site moderno usando fotografia em vez de ilustrações e com uma aparência limpa e minimalista O site vai ter um blog. Isso significa que vamos criar um CMS e ele precisará coletar os envios de formulários É isso mesmo. É assim que o resumo do projeto deve ser simples. É chamado de breve, não é, então seja curto e doce. 96. Projeto do cliente: Moodboard: A diretoria é algo que eu sempre fiz, mas não a compartilharia com um cliente. Eu o mantive como um processo de design semi-interno. No começo, eu pensava no design como um processo artístico em que você se tranca na sala e, uma semana depois cria designs incríveis que impressionam completamente seus clientes Mas isso está longe da realidade. Freqüentemente, seus clientes têm determinados sites e estilos em mente. E se você simplesmente não concordar com esse terreno comum e inventar algo do nada, provável que você perca as expectativas deles E você pode inventar algo melhor. Mas se você está perdendo as expectativas deles, então você os está decepcionando Se você concordar com um quadro de humor, os designs que você cria provável que os designs que você cria sejam parecidos com o que seus clientes Mantendo-os felizes e querendo mais. Você já praticou a criação de um moodboard, então vamos pular a parte em que então vamos pular a parte em que você reúne inspiração. Em vez disso, usaremos um moodboard que eu já criei para o produto de colaboração em equipe Acabei de remover e adicionar mais algumas fotos. No arquivo Figma, você encontrará esse moodboard Se quiser um pouco mais de desafio, você pode usar o moodboard que você criou na mesma tarefa, embora eu recomende usar este e continuar Vamos imaginar que já concordamos com esse quadro de humor com o cliente Vamos dar uma olhada nesses exemplos e podemos começar a observar seções e elementos de que gostamos Isso, vamos usar como uma seção de heróis. Gosto de como o verde contrasta com a imagem de fundo Eu também gosto desses layouts de cartão, semelhantes a este. A partir daqui, eu realmente gosto desta seção, semelhante ao que já fizemos no exercício de remix Também gosto muito desses cartões de depoimento e adoro essa cor azul, então talvez usemos essa É um azul bonito e vibrante e fica ótimo em uma foto. Além disso, ele realmente se encaixa no tema de colaboração em equipe. Empresas, especialmente as maiores, como a Blue. O azul é uma cor excelente porque demonstra limpeza, transparência e conduta adequada Mas é claro que eles têm que ser um bom blues, porque há alguns que são péssimos Aqui, gosto das seções divididas e também gosto de como os elementos da interface incorporados à fotografia dão mais vida às fotos. Eu também adicionei essa foto de rodapé. Eu gosto desse estilo escuro, então vou fazer um rodapé escuro como esse Compartilhar um Moodboard, usar o Figma é muito fácil. Figma é uma ótima ferramenta para colaboração, ao contrário de outras ferramentas, como esboço ou photoshop que exigem o uso de aplicativos de terceiros A colaboração Figma está integrada internamente. Aqui está como. No canto superior direito, você tem o botão de compartilhamento. Certifique-se de habilitar o acesso ao link público, caso contrário, eles não conseguirão ver o arquivo e, em seguida, clique em copiar. Depois, basta compartilhar esse arquivo com seus clientes. Eles não poderão editar nem fazer nada com ele, exceto comentar Mas essa é uma boa maneira de compartilhar o quadro de humor que você queria mostrar a eles Você pode pedir que eles comentem sobre certas coisas de que gostam e outras que não gostam. Aqui está um pequeno truque. Abra uma janela anônima do navegador e cole seus links lá, você poderá garantir que eles possam acessar o arquivo e ver o que podem fazer com ele Eu odeio quando compartilho algo com alguém e essa pessoa me diz que não consegue ver. Isso é apenas uma experiência ruim para o usuário e me faz sentir envergonhada quando isso acontece Como web designers, uma boa experiência do usuário deve se tornar o caminho de nossas vidas. Devemos fazer o possível para garantir que clientes, colegas de equipe e, obviamente, usuários tenham uma boa experiência com tudo o que compartilhamos ou criamos Porque se não for perguntado, então quem? Ao verificá-lo dentro do navegador anônimo, você pode vê-lo exatamente da maneira que eles o veriam Porque se você simplesmente colá-lo em seu navegador normal, onde está logado no Figma, estará apenas vendo sua própria visão pessoal Ok, eles podem ver o quadro e, a partir desse menu, podem acessar outras páginas do arquivo. No entanto, eles não podem comentar a menos que façam login ou se inscrevam. E se eles estiverem conectados, eles terão esse tipo de visualização. Isso se parece com uma visão normal. Eles podem ver todas as páginas e camadas à esquerda. O recurso de comentários é muito útil quando você trabalha com projetos Para comentar, precisamos clicar nessa opção de comentário de exibição de anúncios. Você verá o cursor do mouse mudar para esse pequeno balão Podemos deixar um comentário em qualquer lugar da página. Então, ao compartilhar um moodboard com seus clientes, instrua-os sobre como fazer comentários e obter feedback sobre os exemplos Eles podem te dizer de quais estrelas eles gostam. Comentar sobre partes específicas em vez de todas as capturas de tela Dentro da sua visualização, você verá esses comentários refletidos instantaneamente. Basta ativar a opção de comentários, eles até aparecerão no lado direito. Não há nenhuma tarefa após este vídeo pois você usará exatamente o mesmo quadro de humor Você pode encontrar isso no mesmo arquivo que estava o resumo do projeto. Está apenas em uma página diferente. A seguir, vamos criar estruturas de arame. Fique por aqui. 97. Projeto de clientes: por o Wireframing?: antes de eu ter meu processo de design pode ter para baixo. Muitas vezes eu me esforcei com a criação de projetos. O problema era que eu não tinha conteúdo para projetar. Você não pode escolher uma fonte correta. Se você não sabe o imposto que ele irá com, você pode criar uma seção de benefícios. Se você não sabe quais são os benefícios, você pode escolher a foto certa. Se você não sabe qual é o imposto ao lado dele. Você pode criar uma página de equipe se não souber quantos membros da equipe existem. Uma página de equipe com 55 membros da equipe vai olhar muito diferente de uma página que tem apenas três membros da equipe com biografia muito longa. Foi em um momento que comecei a trabalhar com uma agência incrível da Austrália. Ao contrário de mim, eles tinham um processo de design adequado. O primeiro aplicativo foi anotar o conteúdo de uma página antes de fazer qualquer design. Trabalhar com eles me colocou no hábito de escrever o conteúdo primeiro, e eu percebi o quanto eu estava me torturando tentando projetar uma página em branco. Uma vez que você tem o conteúdo, as decisões de design tornam-se óbvias e elas vêm até você facilmente. Agora. Obter conteúdo do cliente não é muito simples. Na maioria das vezes, eles não têm nenhuma experiência em escrever a cópia fora da página ali mesmo. Não redatores. Eles não são designers. Eles não tinham muita experiência com isso, então eles não sabem como corretamente. E qual é a melhor maneira de estruturar uma página ou um site, e eles precisam da nossa ajuda para isso. Muitos designers não fazem isso, e eles passam a batata quente para o cliente, e obviamente o cliente virá. Quem vai voltar com um conteúdo que não é muito ideal para uma página, e resultado final fora do design não vai ser tão bom, significa. O cliente não vai obter os melhores resultados, e eles não vão voltar para mais negócios para o designer. Perder situação perder para ambos os lados. Então, estou sugerindo que devemos escrever conteúdo para nossos clientes? Bem, mais ou menos. Mas não realmente. Aqui é onde os arames entram. Gerar conteúdo para mim faz parte do estágio de enquadramento de arame. Aqui está o que eu faço é começar a criar armações de arame. Eu começo a pensar sobre a estrutura do conteúdo e tentando arrancar a página da melhor maneira possível, com base no objetivo fora dessa página particular bater home page ou alguma outra página de empréstimo ou o que quer que seja agora é que colocar texto na página, começo a preencher esses blocos de impostos com texto de exemplo com algo que eu acho que pode ser útil para esta seção em particular. Eu não sou realmente um cooperador, e Inglês nem sequer é meu primeiro idioma, mas eu ainda escrevo conteúdo tanto quanto possível. Se você é inglês não é muito bom, não se preocupe com isso. Isso não é um problema porque você não era difícil para suas habilidades de inglês. Você está contratado para design. Seja sincero com seu cliente e explique-o. O que quer que você esteja colocando, há seu exemplo e sugestões para ajudá-los, e eles devem escrever seu próprio conteúdo. E o que ele também pode fazer é que você não tem que escrever essa cópia. Você pode pedir emprestado e copiá-los de outros sites. Então, durante a sua fase de inspiração, você provavelmente passou por diferentes sites e encontrou alguns exemplos que são de um starups semelhantes ou empresas semelhantes, certo para que você possa pegar o imposto de lá e copiar e colá-los que. Mas sempre certifique-se de explicar que você não está escrevendo conteúdo para eles para que você não está julgando você por esse conteúdo em que você coletar este exemplo de outros sites e talvez até mesmo concorrentes. E se você estiver um pouco certo e considerar tomar um direito autoral em curso, você possa adicionar isso aos seus serviços. Os clientes vão adorar você por tirar essa parte de suas mãos. Você vai ganhar mais dinheiro, ganhar ganhar. E depois que eu terminar com o enquadramento de fios, eu compartilhei com meu cliente e peço a eles para reescrever o conteúdo e remover qualquer coisa se eles quiserem e preenchê-lo em suas próprias alas. Ter um layout já com conteúdo pré-campo torna mais fácil para eles. Teoh, acerte essa cópia. Porque caso contrário, então, é muito difícil para ele entender o que eu quis dizer lá e qual seria o propósito da destruição, talvez, e essas colunas e o que eles deveriam escrever nisso. Mas se eu lhes der exemplos, então eles têm a idéia e eles podem facilmente sair com algo por conta própria. Eu evito usar Lauren Gibson e texto fictício assim tanto quanto possível Mas às vezes temos que, e não podemos evitá-lo, porque às vezes eu tenho que criar uma página para ou um site para um complicado serviços financeiros que eu não tenho idéia de como descrever. Então, nesse caso, eu vou usar o imposto falso ou talvez as biografias ou depoimentos de alguém ou algo assim. Não adianta me preencher com nada e desperdiçar meu tempo à sua direita. Usaremos texto falso. Outra grande razão pela qual usar armação de arame é por causa de provisões, porque as revisões fazem parte de qualquer processo de design. E se as revisões estão acontecendo bem no durante a face do design, então você vai levar muito mais tempo, porque então você está pensando em cores e fazendo tudo pixel perfeito e desperdiçando muito tempo em algo que você meio que já projetou e meio que anexou seu ah, ego a ele. Porque tese o que muitas vezes acontece com os designers porque qualquer trabalho que produzimos, nós meio que nos sentimos ligados a esse trabalho. Mas quando você está fazendo armações de arame, você não está ligado a ele. Eles são apenas, você sabe, esqueleto feio olhando rabiscos, e nós podemos trocá-lo bateria facilmente. As revisões são mais fáceis está lá e você sabe que os sentimentos de ninguém se machucam. Esta é uma armação de um dos meus projetos de clientes. Como você pode ver, é desprovido de colares de design e é muito áspero. Não tem imagens ou ícones. Eu estava fazendo um site para um aplicativo de compartilhamento de scooter. Vamos passar por isso rapidamente para que você possa entender por que eu fiz isso. E qual foi o meu processo de pensamento. A barra de navegação é bem simples. Eu nem sequer coloquei um baixo indo lá. Só uma taxação. É um logótipo. Em vez de uma imagem de herói, há um espaço reservado de imagem, e isso é tudo. Naquela fase. Eu não decidi qual seria o herói, e isso também não é relevante para isso. Embora eu tenha decidido sobre o layout, Eu queria ter um herói à direita e conteúdo à esquerda. Se eu quisesse um herói é um fundo que eu iria colocá-lo como uma borda de alongamento fundo para eclodir na próxima seção, Eu escolhi ter conteúdo de três colunas para descrever como o produto funciona em três etapas não muito projetado, mas layout é claro, e eu também tomei a decisão de que como ele funciona era uma seção importante para ter logo após o herói. Eu próprio preenchi o conteúdo, por vezes reutilizando os impostos dos lados concorrentes. Uma parte importante é dar imposto de exemplo para o cliente, que eles clique e começar a escrever imediatamente sem muita pesquisa acima. Em seguida, criou uma seção com uma pequena demonstração fora do APP com algum benefício. Mas vamos do lado desta seção de realmente já tinha uma boa idéia de como iria projetar a seção. Eu queria mostrar o aplicativo e mostrar-lhes o aplicativo em ação. Então eu planejo ter uma animação de presente de vídeo fora do aplicativo sendo usado um pouco mais exibindo e benefícios do produto, como seguro de estacionamento gratuito e assim por diante. Então eu tinha um preço e seções depoimento muito simples, e, finalmente, temos chamada para Seção de Ação, e a comida ou páginas de fechamento, especialmente páginas iniciais com frio para seção de ação, é uma boa idéia. Você deseja solicitar que os usuários façam algo depois que eles terminarem conhecendo um produto ou serviço que você não deseja deixá-los pendurados. A pista deles é não saber o que fazer a seguir. Você pode perdê-los então Depois que eu terminei com seus quadros de fogo, eu compartilhei com um cliente e dei a eles uma explicação de cada seção e o processo de pensamento por trás de minhas decisões. E aqui está como o projeto final acabou parecendo. Você pode ver como o layout e o conteúdo são os mesmos, mas é como se tivesse sido colorido. Então essas são as razões por trás do uso de armações de arame em seu processo de design. Use-os antes de começar a projetar Obrigado mais tarde. 98. Estilos de Figma: Criamos wireframes, vou ensinar dois recursos do Figma que ainda não abordamos Vamos precisar deles para criar nossos wireframes. Esses são estilos e componentes. Neste vídeo, abordaremos estilos. Você sabe como no WPL, podemos estilizar classes e tags. Também podemos fazer algo semelhante no Figma. Por exemplo, vamos pegar um título e estilizá-lo. Sob esses pontos, temos a opção de têxteis. Se clicarmos no ícone de adição, isso criará um novo tecido a partir do texto atualmente selecionado Podemos chamá-lo de H one, semelhante ao que fazemos no fluxo da web ao estilizar textos de O H one Agora podemos pegar qualquer outro texto e aplicar um estilo H a ele. No painel de propriedades, você verá que muitas das opções de edição estão desativadas, como o tamanho do telefone, a altura da linha e outras que desapareceram Mas ainda temos coisas como cor de preenchimento e alinhamento de texto Eles não se tornam parte do tecido, então sempre podem ser editados Isso não afetará o tecido em si. Ele será aplicado somente a essa instância. Se fosse o Webflow, não seríamos capazes de fazer isso. Tudo seria editável e refletido em todas as instâncias com a mesma tag ou classe Dentro de designers de interface como o Figma, esse comportamento faz mais sentido Para editar um estilo, clique nele e vá para o estilo de edição. Temos a opção de editar o estilo a partir daqui. Você pode alterar o que quiser e verá mudanças no estilo, refletidas instantaneamente em todas as instâncias. Isso não parece muito, mas quando você tem várias páginas com vários títulos em cada página , percebe o quão grande isso é Também temos a opção de destacar o estilo. Isso permitirá que você edite todas as propriedades do texto e quaisquer alterações futuras no tecido original Isso não afetará a segunda manchete porque agora ela está separada desse tecido Se você quiser excluir o estilo, isso não é muito evidente, mas clique com o botão direito nele e você terá uma opção de exclusão. Os têxteis não são a única coisa que temos na FiCMA. Quase todas as outras propriedades no painel podem ter esses estilos globais. Preenchimento, traçado, efeitos e até mesmo a grade. O segundo mais útil é sempre o estilo de cores. No mesmo local, você pode adicionar um novo estilo de cor. Assim como os têxteis, ele pode ser aplicado a todos os outros elementos que tenham propriedades de cor Não importa se é texto ou retângulo. Assim como os têxteis, os estilos de cores são grandes. Muitas vezes acabo mudando de cor várias vezes ao criar um site. Sou muito exigente com as cores e posso mudar de ideia facilmente. Deus abençoe os estilos de cores. Esses são os estilos do Figma. Aplica-se a quase tudo, f, co, texto, layout, g. seguir, abordaremos os componentes. Fique por aqui. 99. Componentes Figma: Vamos criar um botão. Agora, se selecionarmos esse botão e clicarmos nesse componente na barra de ferramentas, isso transformará esse botão em um componente Que podemos reutilizar em nosso arquivo e arrastá-los a qualquer momento na guia de ativos Os componentes do Figma são o grupo de elementos. Com estilos, criamos essa conexão global para um estilo específico. Mas com componentes, podemos criar uma conexão global para vários estilos e para cada objeto dentro desse componente. O botão original é chamado de componente mestre, e o que acabamos de arrastar é chamado de instância As alterações que fizermos no mestre serão refletidas em cada instância. Mas cada instância individualmente pode substituir os estilos por si mesma. No entanto, as alterações não serão refletidas novamente no mestre ou em qualquer outra instância. Você conhece classes de combinação no weblo. Assim como as classes de combinação, novas mudanças no mestre afetarão somente os estilos que não foram substituídos A primeira instância mudou a cor para verde, assim como o mestre, mas as outras duas abaixo não. Por quê? Porque nos dois abaixo, substituímos o preenchimento de fundo do botão, mas no primeiro, não tocamos Ele ainda herda do componente mestre até que o substituamos Exatamente como nas classes de combinação em we low, outros estilos que não tocamos e não substituímos ainda serão herdados do mestre Por exemplo, se arredondarmos os cantos do botão. Uma grande diferença entre as classes no waffle e os componentes no Figma é que as classes não têm outros Por exemplo, se você criar uma classe para uma seção de heróis e colocar títulos, botões e imagens dentro dela, esses elementos não fazem parte da classe Mas nos componentes do Figma, eles são. Se eu excluir um objeto do componente mestre, ele será excluído de todos os lugares. Se eu tivesse um novo objeto dentro do mestre, isso refletiria todas as outras instâncias. Há coisas que você não pode ignorar na instância. Por exemplo, qualquer que seja o componente feito. Você pode remover ou adicionar novas camadas dentro da instância. Eu posso arrastar esse retângulo dentro da instância, isso não me deixa. Ou eu posso remover uma camada existente do componente. Quando eu pressiono delete em qualquer um dos ingredientes, ele desaparece, mas na verdade está apenas oculto, e você pode ver isso no painel de camadas. A camada ainda está lá, só está escondida. Se eu quiser, posso mostrar daqui. Outra coisa que não podemos ignorar são as mudanças estruturais como tamanhos ou a posição das camadas dentro do componente Como você pode ver, quando eu seleciono o retângulo, não há alças de redimensionamento Eu não posso mudar isso. No entanto, podemos alterar o tamanho de todo o componente. O redimensionamento do retângulo não é possível, mas o redimensionamento de todo o componente, podemos fazer isso Se eu alterar o tamanho do componente principal, ele não cairá em cascata até o botão azul porque o substituirá Mas isso é apenas para o tamanho total do componente. Se eu mudar o tamanho do retângulo em si, esse botão azul agora está desamparado e temos Nem eu posso mudar a posição do texto dentro da instância. Não há como eu movê-lo. Agora, quanto às coisas que podemos substituir, podemos substituir os estilos de cada elemento, sejam eles quais forem Podemos substituir o tamanho de todo o componente, como mencionei anteriormente, e podemos substituir o conteúdo Novamente, se a substituirmos , quaisquer alterações que fizermos no componente mestre , elas não serão refletidas Como você pode ver, os outros dois botões atualizaram instantaneamente o texto, mas o botão azul não. Também podemos separar instâncias de seus componentes. Você pode fazer isso a partir daqui. Uma vez desanexado, ele deixa de ser um componente e são camadas completamente livres e independentes Outra coisa que podemos fazer com as instâncias é redefinir as alterações que fizemos nelas. Essa opção aqui redefinirá todas as alterações que fizemos na instância e herdará tudo do mestre Também temos a opção de redefinir somente propriedades específicas. Se selecionarmos o retângulo e voltarmos para a opção de redefinição, o menu suspenso destacará todos os estilos que foram substituídos e podemos Por exemplo, podemos redefinir o preenchimento do plano de fundo ou redefinir toda a substituição no retângulo sem tocar em nenhuma alteração que tenha sido feita no texto dentro do botão Se você observar mais de perto o painel do jogador, verá que o componente mestre tem esse ícone de diamante com quatro quadrados, e a instância tem esse único ícone de diamante Para localizar o componente mestre, você pode selecionar qualquer instância e clicar em ir para o componente principal no painel de propriedades. Isso funcionará mesmo se o componente estiver em uma página diferente, mas não funcionará se estiver em um arquivo diferente. Os componentes A fazem parte de arquivos individuais. Para adicionar um componente, você pode arrastá-lo de um painel de ativos ou simplesmente copiar colar um mestre ou uma instância. Se você quiser criar um novo componente, por exemplo, como um botão primário e um botão secundário. Primeiro, desanexe a instância e clique em criar novo componente Se, em vez disso, você clicar em criar componente em uma instância ativa, isso criará apenas um novo componente dentro da instância como parte dela. Isso fica estranho, então certifique-se de desconectá-lo primeiro. Isso é tudo por enquanto, você aprenderá a usar os componentes com a prática, e começaremos essa prática enquadrando os fios nos próximos vídeos 100. Kit de arames: Várias maneiras de criar wireframes. Existem aplicativos de terceiros que criam wireframes, como maquetes balsâmicas e caprichosas e caprichosas Alguns designers simplesmente usam papel e caneta e desenham os wireframes Eu faço isso, mas apenas para o meu processo de brainstorming, não o compartilho com meus clientes A melhor ferramenta para nós ainda é a Figma. Isso é o que eu uso hoje em dia. É mais fácil criar estruturas de arame lá e compartilhá-las com o cliente A parte colaborativa e os comentários facilitam que eles façam comentários, e também podem compartilhar o acesso ao arquivo com nossos clientes, e eles podem preencher o conteúdo diretamente na Figma A melhor maneira de criar wireframes dentro do Figma é usando kits de wireframe, que são bibliotecas de componentes pré-fabricados e prontos para uso, e podemos arrastá-los diretamente do painel de componentes e depois colocá-los na página e começar a construir a página inteira como uma estrutura de a página inteira Existem muitos kits de wireframe disponíveis on-line, geralmente de graça Mas eu não fiquei muito feliz com o que encontrei. Então, decidi criar um para você, um kit simples e fácil de usar, baseado no que eu mesmo uso. E você pode criar seu próprio kit de wireframe e usá-lo em seus projetos futuros Veja como esse kit funciona. Do painel de ativos, vamos arrastar os componentes pré-fabricados de que precisamos. Eles são organizados dessa forma dentro do painel de ativos. Temos botões. Temos entradas como diferentes tipos de campos de formulário e temos espaços reservados como um avatar, e construiremos nossa estrutura de arame usando esses componentes Além desses elementos, eu também adicionei ícones. Esses são ícones gratuitos de design de materiais do Google. Eles também são componentes do Figma. Você pode arrastá-los, alterar as cores e assim por diante. O painel de ativos tem a opção de pesquisa, que é muito útil. Isso pesquisará todos os componentes que estão no arquivo, incluindo ícones, pois eles também são componentes regulares. Também criei estilos de texto e cores. Por exemplo, quando precisarmos um título para nossa seção de heróis, adicionaremos um novo, da maneira usual de adicionar texto, e, a partir dos tecidos, selecionaremos um ou qualquer outro estilo de título Quando precisarmos de um parágrafo, adicionaremos novamente um novo texto e, em vez disso, escolheremos um estilo de parágrafo. Eu também adicionei um estilo de cor, para que possamos instantaneamente dar uma cor a algo sem que nos preocupemos, testemos e criemos versões de cores diferentes Primeiramente, usaremos essa frase preta com s and. Essa é uma boa paleta de cores neutras que é ótima para wireframes Gosto de armações de arame que parecem desbotadas, deliberadamente parecendo que não têm cor, como um Para que os clientes entendam que isso não é um design. Falando sobre quando você compartilha wireframes com seus clientes, certifique-se de explicar seu processo e explicar o que são estruturas de arame Muitas vezes, eles não saberão o que são estruturas de arame. Certa vez, um dos meus clientes pensou que essas estruturas de arame eram projetos finais, e ele não ficou muito feliz com isso, se você pode imaginar. Os componentes e estilos principais que eu criei, você pode vê-los na página do kit de wireframe Se quiser fazer edições e alterações, você pode adicionar essas instâncias mestras aqui Você também pode criar e adicionar mais componentes, se quiser. Crie seu próprio kit de wireframe e use-o como modelo para seus projetos futuros. Isso tornará seu estágio de enquadramento de arame suave e rápido. Uma nota sobre ícones. Se a pesquisa no painel de ativos não fornecer nenhum resultado, dê uma olhada aqui para ver o que está disponível. Os nomes desses ícones podem não ser tão intuitivos. Por exemplo, esse ícone de lixeira tem o nome de excluir, e pesquisar na lixeira não trará nenhum resultado Abra o arquivo do kit de wireframe e verifique se você tem a cópia de um arquivo em sua conta Agora estamos prontos para começar o wireframing. Falaremos sobre isso no próximo vídeo. Fique por aqui. 101. Wireframes: página inicial, parte 1: Neste vídeo, começaremos a criar wireframes para nossa página inicial de colaboração com a Tam Dentro do arquivo do kit de wireframe, crie uma nova página clicando no ícone de adição e nomeie-a Vamos adicionar uma moldura e a grade, da maneira usual de fazer isso. Moldura de mesa e nossa grade usual de 12 pontos. Agora que sabemos como criar estilos, vamos salvar esse ótimo estilo para uso posterior neste projeto, porque podemos, então por que agora economizaremos tempo mais tarde. Para que possamos ter algumas ideias sobre qual conteúdo e layout devemos ter. Vamos dar uma olhada no resumo do nosso projeto e no Moodboard. Ser breve é onde está o objetivo e os detalhes de alto nível do projeto, e no Moodboard, temos uma aparência que já combinamos com nosso cliente imaginário Portanto, o site será o padrão, mas o objetivo principal é obter inscrições de acesso antecipado Esse será nosso apelo à ação. Sabemos que haverá um bloqueio e também precisaremos de um local para as pessoas assinarem um boletim informativo. Agora vamos dar uma olhada no Moodboard. S. Pelo resumo, sabemos que o cliente quer um site sabemos que o cliente quer um site mais baseado em fotografias do que em ilustrações Então, acho que essa abordagem de foto de fundo é algo que vai agradar a eles e uma boa abordagem para nosso público-alvo. Poderíamos encontrar uma foto com a qual o público se identifica, para eles possam se ver nela e isso nos ajudará a nos conectar com o público Com base nisso, vamos reestruturar a seção de heróis. Precisamos de uma foto de fundo, não de uma foto real, mas apenas de um espaço reservado Encontre um elemento de imagem e arraste-o para a tela. Em seguida, redimensione para caber na tela cheia. Pegue cerca de 800 pixels de altura, que geralmente é um tamanho decente para a seção de heróis. Agora precisamos de uma barra de navegação, um logotipo à esquerda e os links à direita. Muito simples Vamos usar o estilo de cabeçalho quatro para o logotipo. O estilo do link para os links e botão secundário para a chamada à ação na barra na. Vou redimensionar o botão para torná-lo menor porque usaremos um tamanho normal para botões normais Mamãe. Até agora tudo bem. Agora, vamos ao título e ao subtítulo Vamos escolher um estilo de título e escolher a cor preta do kit de wireframe É uma boa ideia usar essa paleta de cores cinza neutro ao criar wireframes Gosto muito dessa paleta, na verdade, eu a roubei de uma ferramenta de arame que usei no passado Além do preto e do cinza, uma cor primária dessas opções ou escolha sua própria cor primária, ou escolha sua própria cor primária se quiser, mas opte por uma Se você quiser alterar a cor primária dos botões, alterar a cor do campo em todo o componente não funcionará porque ele tem conteúdo misto. O retângulo é azul, mas o texto é branco, então você precisará alterar somente o retângulo Mas a melhor opção é trocar o mestre. É por isso que usamos componentes. Selecione uma instância, clique para ir para o componente principal e lá, basta escolher uma cor diferente para o plano de fundo desse retângulo O mesmo vale para o botão secundário, altere duas cores, uma para a borda e outra para o texto. No meu caso, vou ficar com essa cor primária original. Tudo bem, eu já tenho conteúdo em minha mente. Vou roubar a manchete desta, colaboração instantânea para equipes remotas Como mencionei antes, não somos redatores, então não precisamos ser perfeitos com o conteúdo Tudo o que achamos que funciona e dará uma ideia aos nossos clientes com o mínimo de texto fictício possível Ou simplesmente peça ao Cad GPT que escreva conteúdo para você. Isso é uma coisa válida de se fazer nos dias de hoje. Não estou me preocupando muito com as distâncias aqui, mas ainda assim me certifico de que sejam uma linha aérea Agora, precisamos incentivar os usuários a fazerem algo, que é nosso principal objetivo: obter seus e-mails para acesso antecipado Isso é comumente chamado de call to action ou CTA curto O CTA é um formulário ou apenas um botão. Vamos ver o que nossas inspirações estão fazendo nesse caso. Muitos deles estão usando um formulário com um único campo de e-mail. Acho que é isso que devemos fazer também. Poderíamos ter um formulário pop-up, mas quando é pequeno, especialmente com um único campo, é uma prática melhor porque é menos ameaçador. Está aí mesmo, sem trigonometria muito transparente, pede ao usuário apenas um e-mail e ele vê o que está acontecendo Pronto, de forma simples e rápida, temos um wireframe para nossa seção de heróis Graças a essa chave de wireframe, não foi preciso muito esforço e não tivemos que perder tempo escolhendo telefones e cores É assim que você deve trabalhar com wireframes, pensando no layout e no conteúdo e não se preocupando com a aparência Em seus projetos reais, ao compartilhar o wireframe com seus clientes, você pode adicionar comentários a diferentes seções e elementos diferentes em sua página para mostrar a eles seu processo de pensamento Para fazer isso, alterne para o modo de comentários e, clicando em qualquer lugar no quadro, você pode adicionar novos comentários Os clientes adoram ver o processo de pensamento que você coloca por trás de seus projetos. Porque quando você cria um site e projeta um site para uma empresa, você não está apenas oferecendo a eles algo bonito para brincar, mas uma solução para o problema deles. Muitas vezes, você está dando soluções para vários problemas como gerar vendas ou tráfego, criar presença on-line e boa marca e alguma reputação. Um site que parece sofisticado e moderno, que criará uma imagem e reputação muito específicas para essa empresa E você precisa mostrar que tem uma compreensão profunda dos problemas deles e encontrou algumas soluções possíveis. Em outras palavras, você precisa vendê-los em seus designs. Você fez a primeira venda convencendo-os a contratá-lo por seus serviços Agora você está fazendo outra venda. Você não terminou aí. Você está fazendo outra venda para mostrar a eles que esses designs que você criou são ótimas soluções para os problemas que eles enfrentam como empresa. Não pretendo usar algum tipo de discurso ou técnica de vendas desprezível ao explicar seus designs Basta se explicar como um designer e como você pensou sobre esses elementos que criou. Por exemplo, aquele único campo de e-mail que eu coloquei nos wireframes, eu explicaria isso para o cliente, algo assim Minha sugestão é usar um único campo de e-mail para a chamada à ação e a assinatura em vez de perguntar nome, sobrenome e assim por diante, porque um único campo de e-mail é de baixo comprometimento do usuário , é menos ameaçador e , como também é visível, podemos ajustá-lo porque, se estivermos solicitando várias coisas diferentes , precisaríamos provavelmente colocaríamos um formulário pop-up porque então ocuparíamos muito espaço. Mas ao mostrar o campo, um campo de e-mail está visível, estamos mostrando que somos transparentes. Essa é a única coisa que estamos pedindo nesta etapa no momento, e essa troca de baixo compromisso aumentará a taxa geral de assinatura. E é isso. Agora, se não fizéssemos isso e não explicássemos nosso processo de pensamento, provável que eles simplesmente não saibam o raciocínio por trás de um preenchimento, porque não são designers Eles não estão criando sites e pensam da perspectiva do proprietário da empresa e não da perspectiva do usuário, certo? Então eles vão pensar, espere, eu gostaria de ter mais informações sobre os usuários. Gostaria de saber seu endereço de e-mail, número de telefone, número Seguro Social, detalhes do cartão de crédito e assim por diante. Agora, como você não colocou todos esses campos lá e apenas colocou o endereço de e-mail, eles acham que você está sendo negligente ou talvez você simplesmente não tenha entendido os desafios comerciais deles e o que eles querem da Então, eles sentirão que você simplesmente não os está entendendo e não oferecendo boas soluções para seus negócios. Portanto, é nosso trabalho como designers educar nossos clientes sobre tópicos como esse Mas você não pode educar seus clientes se não se educar primeiro Então, como leitura externa, eu recomendo que você assine blogs e boletins informativos que compartilham informações e pesquisas mais recentes e qualquer coisa nova, basicamente sobre design ou experiência do usuário, tópicos e coisas como esse exemplo, Nielsen Norman Group é um desses lugares onde você pode se inscrever Eles geralmente publicam artigos e pesquisas sobre o usuário tópicos de experiência. Além disso, o prototyper dot IO, que tem esse boletim informativo que o inclui, não é esse o foco principal, mas também inclui as principais postagens, postagens de blogs, geralmente sobre tópicos de design e experiência do usuário e tudo relacionado à web Se você gosta de livros, recomendo ler Don't make me think, de Steve Crook, que é um ótimo livro sobre experiências e usabilidade de usuários na web e em dispositivos móveis E outro, o design das coisas do dia a dia de Don Norman Esse é o mesmo cara normando do Nielsen Norman Group. E não se trata realmente de web design, mas sim de itens e coisas do dia a dia que usamos na vida real. Mas é uma boa introdução à jornada de experiência e compreensão do usuário. O que você precisa procurar é basicamente uma espécie de filosofia por trás do design de coisas, objetos e itens, que inclui a web porque as pessoas interagem com ela e, especialmente, a web, porque geralmente é um pouco mais complicado e difícil de interagir para as pessoas do que itens comuns que usamos no mundo real, como o Fork OK. Então, voltando aos nossos wireframes, mas continuaremos com isso no próximo vídeo 102. Wireframes: página inicial, parte 2: Estamos de volta, continuando com nosso wireframe abaixo da dobra. Vamos ver qual das inspirações poderia funcionar para nossa próxima seção Seria uma boa ideia demonstrar o produto mostrando algumas telas. Uma seção como essa poderia funcionar, ter as telas de um lado e o texto próximo a ela. Poderíamos roubar algum conteúdo do Slack. Usar conteúdo dos concorrentes é uma opção válida. É assim que seus clientes tentarão obter ideias de qualquer maneira. Mas não se esqueça de fazer um comentário sobre isso e dizer de onde você pegou o conteúdo Você não quer que eles pensem que você criou esse conteúdo e, em algum momento, descubram que, você sabe, ele foi roubado do concorrente porque eles vão pensar que você acabou de roubá-lo que você acabou de roubá-lo Aqui, podemos adicionar um link para saber mais a outras páginas em potencial que explicarão os recursos específicos com mais detalhes, como eles fizeram aqui. É uma boa maneira de direcionar visitantes para diferentes páginas do site e também traz um pouco mais de detalhes ao bloco de texto. Já temos um link em grande estilo. Basta mudar a cor para sua cor primária. Também podemos adicionar uma pequena seta a este link. Dentro dos componentes, podemos procurar por um ícone, pegá-lo e colocá-lo ao lado dele. Isso é tudo para a seção. Agora, vamos criar o resto das seções no corpo. Eu estava pensando em uma seção dividida como esta. conteúdo tem o mesmo estilo do que acabamos de fazer, então podemos simplesmente copiá-lo. Para o gráfico, vamos colocar apenas o suporte de imagem por enquanto. Ah, para nossos clientes, explicaremos nossa visão sobre essas imagens de que criaremos uma visão de realidade aumentada, adicionando anúncios da plataforma a fotos reais Digamos que algum conteúdo para gerenciamento simples de tarefas. Vou escrever isso sozinho. Não me julgue. Mamãe. Vamos fazer mais um do mesmo layout com a foto. Vamos apenas duplicar isso. Estou segurando a tecla de opção aqui, então ela se duplica quando eu arrasto a coisa toda, mas você já deve saber disso Quero ver uma métrica fi para reverter o layout desta seção. Agrupe o conteúdo primeiro. Em seguida, selecione tudo e esses dois círculos rosa devem aparecer no meio. Basta segurá-lo e mover o conteúdo para o outro lado. Tão simples que um bebê poderia fazer isso. Agora vamos adicionar uma seção de depoimentos. Gosto muito desse aqui. Vou recriá-lo quase como está. Do ponto de vista do marketing, ter depoimentos em sites de produtos ou serviços é uma Isso aumenta a confiança na marca e o público tem uma ideia melhor do produto ao ler experiências de pessoas reais. Uma ótima maneira de criar depoimentos é adicionar cinco estrelas, assim como eles fizeram aqui As pessoas adoram ver como alguém avaliou o produto. É mais poderoso e simplesmente dizer cinco estrelas na página instantaneamente traz às pessoas sentimentos positivos sobre o produto, porque há uma forte associação no cérebro das pessoas vinculada a esses cinco ícones É uma pequena técnica psicológica. empregadores apreciarão sua compreensão dessas coisas. E. Então, eu tentei combiná-lo aproximadamente com a inspiração, sem usar nenhuma cor específica nem nada. Em designs reais, usaremos estrelas douradas e o carro branco, mas aqui temos que manter o carro cinza, então não queremos nos preocupar com as sombras para tornar o carro branco visível em um fundo branco Agora, basta agrupar tudo e duplicá-lo de forma semelhante à nossa inspiração E o último a sair do quadro. Uma coisa a observar aqui é que não queremos que esse cartão inteiro seja visível. Queremos que seja recortado como se estivesse na inspiração. Então, como fazemos isso? O motivo pelo qual não está recortado é porque não faz mais parte da moldura. Você pode ver isso no painel de camadas. Quando você move algo um pouco para fora da moldura, Figma olha para o cursor e decide se você quer colocá-la na moldura ou fora da moldura com base nisso Você vê como esse grupo é recortado quando o cursor se move dentro do quadro ou se torna totalmente visível quando se move para fora do quadro Para movê-lo de volta, verifique se o cursor está dentro do quadro. Em seguida, posicione com as teclas de seta ou forma que você não mova o cursor para fora. Fantástico. Podemos manter a taxa da barragem dentro dos depoimentos é algo que nossos clientes precisariam perguntar a seus usuários e produzi-lo dessa forma. Vamos adicionar essas setas mais leves, assim como no design. F. Por fim, vamos adicionar rodapé e pronto Como costumo fazer em meus projetos, copiarei o conteúdo do rodapé do nosso exercício anterior, pois usamos a mesma grade de 12 pontos e as colunas se encaixam perfeitamente Essa reutilização de componentes diferentes entre projetos diferentes vem de um pouco de preguiça, mas funciona muito bem no final do dia Você começa a dominar esses elementos comuns medida que os usa em diferentes projetos e começa a entender os benefícios e limitações do layout e, em algum momento, o refina até ter um modelo pessoal quase perfeito Agora, vamos atualizar as cores e os tecidos. M. M. Mais tarde, em um estágio de design, estou pensando em usar um rodapé escuro como este Como sabemos pelo resumo do nosso projeto que precisamos de um formulário de inscrição no boletim informativo, podemos adicionar um formulário de e-mail semelhante aqui no rodapé Mãe, hmm. Mãe ele. Mamãe. Mãe, ele. M. M. H. M. M. M. M. E aí está o nosso rodapé Tudo bem. Molduras de arame para as páginas iniciais prontas Em seguida, vamos estruturar a página do artigo do blog. 103. Wireframes - página de publicação: Neste vídeo, vamos criar estruturas de arame para a página de postagem do bloco. Na verdade, depois que a página inicial estiver pronta, as molduras de arame para o poste do bloco são muito mais simples porque a barra de navegação já está pronta, o rodapé está pronto, basta sair com o meio Não fizemos nenhuma pesquisa para obter inspiração para o bloco e o poste do bloco. Vamos encontrar alguns exemplos e ver o que podemos fazer. Não precisamos criar um moodboard para isso. Vamos dar uma olhada rápida em alguns exemplos. você verá que a maior parte é qualquer forma, você verá que a maior parte é um layout bastante padrão Como você pode ver, a maioria dos exemplos modernos tem uma estrutura semelhante, o título e os detalhes da postagem na parte superior, depois a imagem da capa e o corpo do texto Também podemos fazer o mesmo layout. Primeiro, vamos copiar o Na Bar. Nabar, na maioria dos casos, você deseja ter o mesmo em todo o site Agora, no título, é uma prática comum usar largura estreita para postar conteúdo Nós abordamos isso na parte do bom design. O problema é que parágrafos muito largos são muito difíceis de ler porque você começa a perder os freios de linha Uma largura máxima comum é cerca de 700 a 800 pixels para o corpo do texto. Então, vamos fazer com que o conteúdo seja enquadrado em 700. Isso inclui o título. Não que o título tenha um problema com a habilidade da raça, mas como estamos criando esse conteúdo, guarde as coisas Vamos incluir o título nele também. Abaixo do título, vamos colocar o autor da postagem e a data, assim como Em muitos desses exemplos, gosto de como a imagem da capa vai além do conteúdo, além dessa moldura que criamos. Assim, podemos fazer a mesma coisa e criar talvez 900 pixels para a imagem da capa. Para o corpo, basta inserir um texto fictício. É bom terminar o post com o autor e os detalhes. Já o temos na parte superior, mas é uma prática comum colocar o autor também na parte inferior e um pouco maior dessa vez. M. M. M. Depois do site da página de postagem, geralmente tem um recurso de comentários no final A maioria desses sites usa plug-ins de terceiros para gerenciar os comentários, como o Facebook e o debate Usar plug-ins de comentários de terceiros é uma ótima ideia. A maioria dos usuários já tem Facebook ou discute, e eles podem começar a comentar sem se inscrever e todas essas coisas. Isso é o que eu faço em sites também. Eu uso o plugin de discussão, que é um pouco melhor do que o Facebook porque dá ao gerente do site mais controle sobre comentários e moderação Também aprenderemos como instalar esse plug-in de discussão, que estará na parte avançada deste curso, mas, por enquanto, precisamos apenas colocar uma estrutura de arame que pareça um recurso de comentários Mãe, hmm. Mamãe. Finalmente, vamos copiar o. M Isso é tudo. Vamos dar uma olhada na estrutura de arame no modo de apresentação. Selecione um quadro e clique no botão play. Está ótimo, agora podemos compartilhar isso com um cliente e pronto. Eles também poderão entrar no modo de apresentação a partir do arquivo que você compartilhou com eles. Mas, como outra opção, você também pode compartilhar o protótipo diretamente Quando você compartilha links do Figma com seus clientes, é uma boa ideia explicar como as coisas funcionam, como ver os comentários Você incluiu como adicionar seus próprios comentários, como entrar no modo de apresentação e assim por diante. Sempre que você compartilha algo com os clientes, sejam links Figma, fluxo da web ou qualquer coisa, sempre os guie pelo processo, explique e diga como fazer as coisas funcionarem Não espere que eles descubram tudo sozinhos, todas essas estruturas de arame. Figma e painéis de humor, fluxos e protótipos da web podem ser opressores E se eles não tiverem lidado com esse processo de design , tudo será novo, todas essas novas ferramentas, e eles podem ter dificuldade em descobrir sozinhos Portanto, guie-os em cada etapa do processo, dê pequenas explicações sobre como fazer algo, talvez capturas de tela, às vezes até pequenos tutoriais em vídeo E eles vão te amar por isso. 104. Wireframes - grade de blog: Todo blog precisa de uma página na qual os usuários possam navegar por todas as postagens bloqueadas em um só lugar. Isso é o que vamos fazer neste vídeo. Crie armações de arame para a página inicial dos blocos. Meu design favorito para o blog é um layout de notas, algo como neste exemplo, mas no nosso caso, vamos fazer um pouco mais simples Não precisamos procurar inspiração. Na verdade, temos algo em nosso quadro de humor que podemos usar Esse tipo de layout de cartão seria perfeito para nossa página de bloqueio. Cada cartão de bloco teria uma foto de capa, um título, algumas linhas da postagem e detalhes do autor Então, primeiro, vamos preparar a página. Vamos duplicar a página de postagem e trabalhar a partir daí. Podemos manter a barra de navegação e o rodapé. Do resto podemos nos livrar. E vamos habilitar a grade. Primeiro, podemos colocar um título em um subtítulo. Podemos chamá-lo de blog ou postagens mais recentes ou algo parecido. Agora vamos criar um cartão postal em bloco. Três cartas em uma linha, então seja o melhor layout, eu acho. Mamãe, hmm. Vamos dar uma cor da nossa paleta de cores de armação de arame Em seguida, precisamos de uma imagem em miniatura que possamos arrastar da guia de ativos Em seguida, uma manchete e algumas linhas da própria postagem do bloco O estilo do título três deve ser bom para o título. M. E para o texto, vou usar a legenda. O parágrafo parece ser muito grande. Um conselho: continue com os estilos de kit de wireframe, você deseja limitar suas decisões de design neste estágio o máximo possível O objetivo é se concentrar na estrutura e no conteúdo. Isso parece decente o suficiente. Agora vamos adicionar o autor e data, exatamente como na página de postagem. M. M. M. M. Bem, ótimo. Só uma última coisa. Vamos contornar os cantos, como fizemos com os cartões de depoimento Na verdade, não devemos nos preocupar em arredondar os cantos Isso deve ser deixado para a fase de design. Mas o que eles têm é que já fizemos isso em cartões de depoimento, então podemos muito bem fazer isso aqui Isso é arredondar o retângulo de fundo. Agora, como arredondamos o espaço reservado para a imagem? Se fizermos isso da maneira normal , isso arredondará os quatro cantos, mas não queremos que os cantos inferiores sejam arredondados. Parece estranho. Temos aqui a opção de arredondar cantos independentes. Oito nos cantos superiores e zero nos inferiores. Agora vamos agrupar tudo e depois duplicá-lo para criar uma grade E lá vamos nós. Não estou colocando exemplos de conteúdo individual para cada cartão, não é realmente necessário neste estágio. No entanto, nos designs, nós o faremos, porque ao apresentar os projetos, é importante fazer com que o trabalho pareça impressionante e o mais próximo possível da realidade , para que os clientes possam visualizar o resultado final muito melhor Uma última coisa que precisamos adicionar é a paginação. Você conhece os números das páginas no final da grade, para que os usuários possam ir para a próxima página. Com o Webflow, a melhor maneira de criar paginação é ter os botões seguinte e anterior Então, vamos arrastar um dos botões da aba de ativos. Mude a cor para algo mais sutil. Lembre-se de que alterar a cor de todo o componente em si não funcionará. Você precisa selecionar o retângulo de fundo e alterar a cor lá. Mãe, ele. Diminua a altura do botão e pronto. Levante o rodapé e corte o espaço extra da moldura. Mamãe. A propósito, ao reduzir o quadro inteiro, às vezes ele pode redimensionar Isso tem a ver com configurações restritas de cada elemento no quadro Quero entrar em detalhes agora, mas se isso acontecer, basta segurar o controle ou o comando enquanto redimensiona o quadro, e isso não acontecerá. Tudo bem Todas as armações de arame estão prontas. Podemos compartilhar isso com nosso cliente de duas maneiras. Ou podemos compartilhá-lo em um modo de apresentação, que abrirá cada página individualmente e, para percorrer as páginas, basta clicar nas setas esquerda e direita. Outra forma de compartilhar é compartilhar o arquivo em si. Com wireframes, eu prefiro compartilhar o arquivo porque eles são wireframes, esboços do progresso do trabalho, então parece mais adequado assim Gosto de compartilhar os designs em um modo de apresentação, por isso fica mais próximo da experiência final de um site. Isso é tudo para wireframes. A seguir, começaremos com os designs. Fique por aqui. 105. Design da página inicial do TeamApp: parte 1: O moodboard, nós temos o wireframe. Estamos prontos para criar nossa página inicial. Vamos criar uma nova página e chamá-la design e copiar o wireframe aqui porque será mais fácil seguirmos o wireframe em vez de ir e voltar Ao lado, vamos adicionar um novo quadro e nossa grade usual de 12 pontos. Ok, vamos encontrar a foto de fundo da nossa seção de heróis. Gosto muito dessa foto porque parece inexistente, um pouco mais realista, mostra que ela está trabalhando remotamente e está feliz porque nossa plataforma de colaboração em equipe é muito boa O único problema é que ela está centralizada e queremos ter um layout em que possamos colocar o conteúdo à esquerda, sem que ele se sobreponha ao Se a foto for de boa qualidade, poderemos movê-la e posicioná-la no lado direito. Incluí todas as fotos e ativos no arquivo do projeto. Então, se você quiser reutilizar as mesmas fotos, você pode fazer isso e encontrar isso na página de ativos Mas se você quiser fazer sua própria interpretação, e eu definitivamente recomendo que você faça isso, encontre suas próprias fotos e use essa. Mamãe. Mamãe. Parece muito bom. Há uma boa quantidade de espaço para que possamos colocar nosso conteúdo à esquerda. Agora, vamos escolher a tipografia. Desta vez, vamos tentar encontrar um tipo de letra que funcione tanto em títulos quanto em parágrafos, não por um motivo específico, mas apenas para praticar Para isso, precisamos encontrar algo que seja neutro porque vamos usá-lo para um parágrafo e algo que tenha muitas variações de peso. Podemos restringir isso no Google usando vários estilos. Seis estilos, na realidade, significam três pesos diferentes, porque cada peso tem uma versão em itálico Então, isso não é realmente suficiente. Eu vou escolher pelo menos oito estilos. Na verdade, esse é chamado de trabalho. O Sans pode ser uma boa opção A cabine também não é ruim. Apenas uma rápida verificação dupla do manual do tipo de letra. Lembre-se de que sempre lemos o manual da fonte ou evitamos escolhas embaraçosas Excelente. Tudo seguro nessa descrição. E agora vamos aplicar essa fonte à nossa página. Em vez de criá-lo do zero, vou copiá-lo do wireframe Não é necessário reinventar a roda toda vez. Só estou brincando por aqui sem pensar, para ver o que funciona melhor. Acho que isso vai servir. Como não estamos usando um peso maior, altura da linha não precisa se aproximar A última massa significa menos gravitação total. Espero que você esteja prestando atenção à sua aula de física na escola e ao texto do parágrafo. Precisamos adicionar uma sobreposição escura na imagem, caso contrário, o conteúdo não ficará muito visível Agora, para o formulário de call to action. Vou usar o azul desse design. Mas, na verdade, vou iluminá-lo um pouco para torná-lo ainda mais vibrante Eles também têm esse amarelo na página, então vamos copiar isso também. Talvez encontremos um uso para isso. Você pode escolher cores diferentes se quiser, dependendo de você, até que ponto deseja me acompanhar, pixel por pixel ou talvez remixar um pouco Está tudo bem de qualquer maneira. um valor de aprendizado em ambas as abordagens. Uh hein. Estou apenas observando as margens e distâncias aqui, não estou realmente seguindo a grade, como você pode Sempre confie em seus olhos em todas as diretrizes e regras de design. Segui-los cegamente às vezes resultará em resultados nada ótimos Mamãe. Também estou tentando evitar esse canto da mobília. os objetos na foto e Às vezes, os objetos na foto e os elementos da nossa interface podem interagir uns com os outros. Essa pode ser uma boa interação, mas às vezes pode criar tensão desnecessária. Tudo bem, está linda até agora. Vamos colocar uma barra de navegação. A U h. Vamos fazer margens 12 na parte superior e inferior e 20 nas laterais Se você quiser fazer um botão fantasma aqui, você pode ou até mesmo fazer esse fluxo também. Sinta-se à vontade para remixar R: Vamos adicionar um logotipo também. Aqui está outra maneira simples e rápida de criar um logotipo. Basta escrever o nome em letras maiúsculas e adicionar um ponto no final com alguma cor contrastante E aí você tem um logotipo totalmente novo. Mãe, ele. Até agora parece bom. Uma coisa que eu quero corrigir, porém, é aquela sobreposição escura na imagem No momento, estamos usando uma sobreposição completa, mas a modelo não precisa estar sentada sob uma sobreposição escura porque não temos nenhum conteúdo na frente dela Agora, como podemos iluminá-la, mas manter as outras partes escuras Usaremos um preenchimento de gradiente em vez de um preenchimento sólido, acessaremos o preenchimento que criamos e mudaremos para um gradiente radial Desta vez não é linear. Por quê? Porque com o rádio, podemos criar uma espécie de holofote sobre ela Agora podemos posicionar esse holofote exatamente onde queremos que ele esteja Essa alça à esquerda diminui o raio desse círculo Você também pode jogar com outras alças para obter o resultado exato desejado. Ok, agora de volta para 40% de opacidade. E aí está. Seu rosto não está mais escuro e parece melhor em geral. Essa é uma ótima maneira de utilizar imagens com muitos detalhes e muita coisa acontecendo nelas. Você pode criar holofotes em seus pontos focais e depois escurecer o resto da imagem Tudo bem, vamos fazer uma pausa aqui e continuar o resto no próximo vídeo 106. Design da página inicial do TeamApp: parte 2: E estamos de volta. Vamos criar esta seção agora. Precisaremos encontrar alguns modelos do produto para que possamos exibi-lo Assim como da última vez, vou pesquisar recursos e depois importá-los dentro do Figma Vou tentar palavras-chave diferentes como projeto, tarefa ou painel. Eu já encontrei essa maquete, que vou importar dentro do Figma e depois Se quiser usar a mesma coisa, você pode verificar a página de ativos. Eu o coloquei lá. Mas também se quiser encontrar algo próprio, você pode fazer isso e acessar a página de Recursos, onde pode encontrar diferentes modelos e modelos gratuitos ou algo parecido que você possa incluir como vitrine algo parecido que você possa incluir do produto Essa tela de reunião parece muito boa. Podemos trazer isso e vamos usar nosso próprio azul. R Para selecionar o conteúdo de um grupo, mantenha pressionado a tecla Control ou o comando e selecione com o mouse, ele fará uma seleção profunda semelhante à que você faz clicando e segurando a mesma tecla. Pressione Shift caso queira desmarcar algum dos elementos Uh, como essa tela é bem larga, podemos movê-la para fora da borda. Esse também é um truque muito bom. Vou adicionar uma sombra para torná-la mais visível. Aqui está uma fita de suas sombras. Faça-os sutis , como se isso não chamasse a atenção. Se isso chama a atenção, então é demais. As bordas da tela não têm um bom contraste com o fundo branco. Há uma boa sequência que os designers usam nesse caso. Podemos usar fundo esbranquiçado em vez de um fundo puramente branco Mais ou menos como o que eles estão usando aqui. Podemos pegar essa cor exoesbranquiçada e aplicar em toda a moldura como preenchimento de fundo. Pronto, isso é uma grande melhoria. As bordas da tela estão muito mais nítidas agora. Ah, ah , hein. , hein Vamos virar as esquinas agora. É sempre uma ideia melhor contornar elementos de interface como esses. Parece mais acabado. Cantos pontiagudos parecem que alguém desistiu no meio do caminho Sabe, seria bom fazer algo assim, tirar alguns elementos da maquete Isso adicionará mais dimensão e tornará tudo muito mais interessante. Mm aqui está um Figma legal Você pode copiar as propriedades que se movem de um objeto para outro. Assim como a sombra que acabamos de criar, selecione uma propriedade dentro do painel, clique na borda aqui para selecioná-la corretamente. Em seguida, controle C para copiar e colar no elemento desejado. Ou você também pode criar o estilo a partir dele, salvá-lo e reutilizá-lo em outros elementos R Parece bom até agora. Vamos adicionar o conteúdo. E tudo parece bem. Agora vamos criar uma seção como essa. Normalmente, do jeito que fizemos em outros exercícios, temos a foto na borda, mas esses caras a têm um pouco diferente. Eles têm uma lacuna na borda e também entre as seções, então podemos fazer da mesma maneira. Queremos encontrar fotos que tenham um pouco de espaço livre para colocarmos os elementos da interface como na inspiração. Uma foto ocupada não vai funcionar. Além disso, o que eu geralmente gosto de fazer é procurar fotos do mesmo autor. Quando você usa fotos com estilos diferentes, isso cria uma aparência inconsistente É óbvio que as fotos são de estoque e não foram feitas como parte de uma sessão de fotos para esse site As fotos do mesmo colaborador geralmente têm uma aparência muito semelhante Ele terá o mesmo estilo, a mesma filtragem e, em geral, um preenchimento semelhante a ele O uso dessas fotos cria uma consistência incrível na página. No nosso caso, estamos com sorte, o colaborador da foto do nosso herói tem outras fotos que poderíamos usar Estou pensando em usar esses dois porque eles são tirados na mesma cena naquele sofá de couro Portanto, essa é uma consistência ainda maior. Vai parecer que fizemos nossa própria sessão de fotos para este site. E vou pegar alguns elementos da própria maquete do produto e colocá-los exatamente como dentro da inspiração Basta colocá-los sobre a foto em algum lugar. H. Está muito bonito Tivemos sorte com essas fotos. Eles não têm apenas o mesmo estilo e cena, mas também os dois modelos estão sorrindo e olhando na direção um do outro 107. Design da página inicial do TeamApp: parte 3: Agora, para a seção de depoimentos, vamos realmente copiar o cartão do wireframe e fazer edições nele Teoricamente, isso deveria nos poupar tempo. Vamos encontrar algumas fotos de perfil para depoimentos. Mamãe. Uma coisa que você nunca deve fazer é compartilhar designs com seu cliente que tenha repetidas fotos fictícias como essa Isso não parece muito bom e meio que estraga o impacto que seu design pode causar ao compartilhá-lo com um cliente. Mesmo com os nomes, não leva muito tempo para inventar alguns nomes aleatórios, mas o visual, embora impressionante, parece real e pode ser melhor apreciado. M. M. Existem alguns plugins que você pode usar para o Figma que podem criar conteúdo fictício Este que estou testando atualmente se chama Content real e, na verdade, pode fazer um bom trabalho com a criação de nomes fictícios Dentro dessa página de recursos, coloquei um link onde você pode encontrar todos os plug-ins figma disponíveis Você pode passar por isso e encontrar alguns plugues diferentes que ajudarão você a acelerar seu fluxo Da mesma forma, o que eu gosto de fazer com parágrafos fictícios é usar texto diferente em vez de repetir exatamente a mesma coisa Veja os wireframes, não nos preocupamos com isso porque Eles deveriam ter uma aparência mesclada. Mas no design, queremos que as coisas pareçam o mais reais possível. Mãe, ele. M. Tudo bem, está ótima. Vou fazer a mesma coisa com uma cópia da estrutura de arame e estilizá-la ali mesmo. Mamãe, hmm. Mamãe. Como mencionei antes, quero usar esse estilo escuro. Vamos tentar usar nosso azul escuro. Tudo bem, mas vou dessaturar um pouco, para que tenha menos azul Eu gostaria que fosse um pouco mais sutil, mais em preto ou cinza. Felizmente, sabemos como ajustar as cores, não é? Você pode refrescar sua memória assistindo à aula de ajuste fino na seção de cores mais uma vez Eu tenho ensinado muitos conceitos neste curso, então é natural que eles escapem da sua mente Voltar às aulas quando precisar é uma ótima maneira de solidificar seu conhecimento. Podemos remover um pouco do azul da cor diminuindo a saturação Altere essa faixa para H S B, que é matiz, saturação e brilho, que faz com que a segunda caixa seja saturação e, no valor percentual, apenas diminua-a que é matiz, saturação e brilho, que faz com que a segunda caixa seja saturação e, no valor percentual, apenas diminua-a Ainda tem o mesmo tom e essa nova cor ainda se encaixa bem em nossa paleta Basta brincar com cores e tamanhos aqui. Gosto que os links do rodapé estejam desbotados e pequenos. E é isso. Vamos dar uma olhada no modo de apresentação. Portanto, nossa página inicial está pronta e parece bem elegante. Ainda temos mais duas páginas, a grade de blocos e a página de postagem do blog, e abordaremos isso nos próximos vídeos. 108. Design de postagem de blog: O design da nossa página inicial está inativo. Agora vamos fazer a página de postagem do blog. Isso é o que temos dos wireframes. Vamos copiar esse quadro na página de design para que possamos segui-lo facilmente. Nossa página inicial tem um fundo esbranquiçado, mas no blog, eu prefiro que seja branco É melhor para a legibilidade do texto, o que é muito importante quando se trata de postagens de blog Então, vamos copiar, colar e navegar diretamente do design da página inicial Tudo o que precisamos fazer é mudar as cores. Para os links, o azul escuro é bom e, para o botão, podemos manter o mesmo estilo desse. Mas em vez de cores brancas para o texto e o plano de fundo, podemos usar nossa cor azul primária. Para o blog do autor, ainda não temos um estilo especial, como legenda. Podemos simplesmente aplicar o estilo de parágrafo primeiro, separá-lo e depois editá-lo 15 pixels ficam bem e não se esqueça da cor. cinza ficaria bem aqui, aquele dos estilos locais. Devemos criar um tecido a partir disso. Eu já deveria ter criado isso na página inicial. Havia alguns pequenos elementos de texto como esse e, se eu tivesse feito isso lá, teríamos menos decisões de design a serem tomadas aqui e todos eles seriam vinculados e facilmente editáveis e gerenciáveis no futuro Imagine se o cliente voltar e disser que não gosta do estilo do telefone , você verá o verdadeiro benefício de usar estilos. Agora temos o estilo de legenda e vamos aplicá-lo aos dados também R Para a imagem, vamos tirar uma foto do splash ou pexels Há esse círculo dentro, então o que podemos fazer é definir essa imagem como um preenchimento desse círculo. E basta remover esse ícone do rosto dele. Para a foto da capa, vamos encontrar algo e, assim como a imagem aérea, editá-la como um preenchimento de imagem Excelente. Para o corpo, vamos selecionar o estilo do parágrafo e dar a ele uma cor azul escura. Não prefiro a cor cinza, como na página inicial, porque o cinza não seria tão bom em termos de legibilidade Na página inicial, tudo bem porque o texto não era tanto Mas aqui, é uma postagem de blog, e as pessoas precisam ter uma experiência muito boa e agradável ao lê-la E se eles estiverem apertando os olhos ou se a tela estiver piscando ou se não estiverem vendo a fonte do texto corretamente, eles simplesmente não lerão uma quantidade tão grande E para este blog do autor, a mesma coisa, substitua a imagem e altere os estilos e cores da fonte. Oi mãe dele. Uma caixa de comentários, deixe como está. Não é necessário estilizar isso porque usaremos um plugin, que tem seu próprio estilo. Além disso, não adianta recriar esse estilo aqui, mas às vezes eu faço uma captura de tela de um plugin e a insiro Se é importante meu cliente já saiba como está. E o rodapé é PZ. Podemos copiar e colar, mas há uma opção melhor. Podemos criar um componente a partir dele, porque vamos ter esse rodapé em três páginas diferentes Dessa forma, se decidirmos que precisamos alterar alguns designs, poderemos facilmente alterar uma instância e, em seguida, todas as três serão atualizadas ao mesmo tempo. É isso mesmo. Nossa página de postagem no blog está pronta. Ainda temos mais uma página, que é a taxa de bloqueio, e vamos fazer isso no próximo vídeo. Fique por aqui. 109. Design de grid de blog: Neste vídeo, vamos criar a página inicial do blog. Vai ser muito fácil, já que muito disso está pronto. Já temos wireframes e página BlogPost. Podemos reutilizar elementos dessas duas páginas. Vamos começar duplicando a página de postagem do blog. Exclua tudo o que está ao lado do título e vamos ativar a grade Agora, basta organizar o título e o subtítulo. Agora, para os cartões, vou copiar um dos wireframes e começar a partir daí Se você se lembra de nossa inspiração, os cartões são brancos sobre fundo cinza. Dessa forma, o cartão fica visível. Isso é o que eu quero fazer aqui também, então vamos pintar o fundo de cinza, assim como nossa página inicial Agora podemos mudar a cor do cartão para branco. Em seguida, vamos colocar a imagem da postagem como miniatura. Tudo o que precisamos fazer é colocar a imagem como preenchimento de um retângulo. o ícone do espaço reservado para a imagem Podemos simplesmente ocultar ou excluir Não vamos brincar com isso de novo. Precisamos de outro nível de estilo de título que possamos usar neste cartão 22 em tamanho e meio negrito, acho que parece bom. Além disso, podemos ativar a capitalização do texto. Isso tornará o título mais parecido com o título. Vamos usar isso como estilo de título três , caso precisemos ajustá-lo no futuro Agora, para o texto do parágrafo. Para o autor e o bloco de data. Eu gostaria que fosse menor do que é agora. É uma informação secundária e não deve ter a mesma importância que o parágrafo. Então, vou separar o tecido e alterá-lo para 12 pixels R Para esse pequeno separador, vou usar uma cova leve Essas divisórias, eu sempre prefiro ser mais claras do que o texto ao lado Vamos separar o avatar do autor do componente. E vamos torná-lo dez pixels menor. R Podemos organizar esses elementos usando o recurso de alinhamento da Figma, selecioná-los e centralizar horizontalmente. Podemos organizar R Podemos organizar esses elementos usando o recurso de alinhamento da Figma, selecioná-los e Ou, como a Figma chama, alinhe os centros verticais. Apenas certifique-se de não ter o grupo de camadas ou ele não funcionará. Também podemos usar esse recurso de organização ou distribuição para distribuí-los uniformemente. E uma vez que você fizer isso, o novo campo se abrirá. Essa é a distância entre os objetos. Podemos alterá-lo para algo como dez e o Figma distribuirá os objetos com dez pixels de distância. É muito útil. Estou deixando esse espaço vazio entre o parágrafo e o bloco do autor por um motivo. Estou levando em consideração as ocasiões em que uma manchete se estende por três Dessa forma, garantiremos que o cartão não precise se esticar e que todos tenham a mesma altura. Ótimo. O cartão de bloqueio está pronto. Agora podemos duplicá-los para criar a grade. Devemos colocar conteúdo fictício individual nesses cartões. Apresentar isso assim para o cliente não é legal. O que podemos fazer para economizar tempo é entrar em algum blog e pegar conteúdo de lá com imagens, parágrafos e tudo Por exemplo, podemos acessar medium.com e encontrar conteúdo Para baixar imagens, você pode capturá-las ou usar este link de extensão do Chrome nos recursos Ele digitaliza a página em busca imagens e permite que você as baixe facilmente. Ok , com os nomes deles, vou usar o plugin content real. Eu posso selecionar todas as camadas de nome. E ao clicar na opção de nomes, ela será preenchida automaticamente com nomes aleatórios. Ok, vamos fazer o mesmo com aors. Vamos apenas garantir que o gênero dos nomes corresponda corretamente às fotos. Não queremos uma garota chamada Arthur. Eu estou lá. A coisa toda está muito melhor agora. Parece real e muito mais impressionante do que apenas conteúdo repetido. Mas precisamos corrigir o espaçamento nos blogs aéreos. Agora, os nomes criaram lacunas diferentes. Última etapa, o próximo botão, que podemos simplesmente duplicar dos wireframes e alterar U. Assim como fazemos com os botões secundários, podemos usar a cor cinza e diminuir a opacidade Esse é um truque simples para criar cores da mesma paleta Não fizemos isso em wireframes, mas seria bom adicionar uma seta a esse botão para representar a próxima ação Vou arrastar o ícone diretamente do kit de wireframe. H. Aí está. Isso parece bom. Mova o rodapé para cima e pronto com uma página de blog. R Todos os designs de três páginas já estão prontos. Compartilharíamos isso com o cliente, obteríamos seus comentários e faríamos as revisões necessárias Designs, eu gosto de compartilhar no modo de apresentação, clique em Compartilhar protótipo e envie esse link para o cliente Ele abrirá diretamente no modo de apresentação, explicando como navegar entre as páginas. Algo que pode ser evidente para nós muitas vezes não é muito evidente para os clientes. E isso conclui a seção. Fizemos muito. Aprendemos uma habilidade muito importante, que é o processo de design. Passamos do resumo do projeto para o moodboard e depois para moodboard e depois E, finalmente, fizemos os designs, que não foi muito difícil por causa de todos os pequenos passos que demos antes disso. Sem essas etapas, projetar teria sido muito mais difícil. Seus clientes não saberão como funciona o processo de web design, e eles podem esperar, e muitas vezes o fazem, que você simplesmente se sente e comece a criar o site imediatamente. E muitas vezes eles até preferem isso porque economizarão tempo e dinheiro e terão um site instalado e funcionando o mais rápido possível. Mas criar sites sem designs trará resultados terríveis e, geralmente, custará mais tempo e dinheiro, porque as revisões em sites ativos demoram muito mais tempo do que você faria designs ou mesmo revisões em comparação com wireframes, o que é muito fácil de fazer, certo Você apenas move as coisas. Você não pensa em nada. Agora imagine tudo o que fazemos dentro do Webflow, construímos tudo, todas as estruturas e, de repente, precisamos redesenhar completamente algo e criar uma nova interação ou novo layout E o mesmo se aplica à fase de design em si, porque quando você está projetando, obviamente, você pode projetar sem wireframes e sem conteúdo Mas quando você tem wireframes, quando você tem esse esqueleto e quando você tem conteúdo que está criando, as coisas são muito mais simples E qualquer iteração que você precise fazer durante a fase de estruturação de sua página e estruturação do site muito mais fácil nos wireframes Por que fazer isso na fase de design? Portanto, certifique-se de educar seus clientes sobre seu processo de design Eles vão te amar por seu profissionalismo e por sua confiança em seu processo, mesmo que tenham resistido no início Tudo bem, a próxima seção é sobre como construir tudo isso no Webflow. Fique por aqui. 110. Desenvolvimento de Webflow 2: Muito bem, esta é a minha parte favorita construindo projetos dentro de Wetklo nesta seção. Vamos construir esse design de home page, e vamos fazer isso já usando tudo o que aprendemos no weap Low, mas também alguns novos conceitos que ainda não abordamos. Na próxima seção, vamos aprender interações, Ferramenta dentro do fluxo de choro, e vamos usá-lo para criar algumas interações e animações para trazer toda a página para interações de vida. Tornar o site mais emocionante e impressionante vai ser divertido. E na seção depois que vamos construir log onde vamos aprender o sistema de gerenciamento de conteúdo CMS por fluxo úmido e como transformar qualquer página em uma página dinâmica para extrair informações do banco de dados e como realmente construir um banco de dados dentro, ah chorou fluxo e como estruturá-lo para que possamos criar o blawg agradável com diferentes campos dinâmicos como o nome do autor, manchetes, fotos para cobrir fotos e tudo mais. Então, sem mais delongas, vamos mergulhar, ficar 111. Webflow 2: estilos de fundo: Neste vídeo, vamos construir uma pequena parte da seção de heróis, apenas a imagem de fundo. E para fazer isso, vamos aprender um conceito que ainda não abordamos em profundidade, os estilos de fundo. Para começar, vamos criar um novo projeto. plano Webflow permite apenas dois projetos não hospedados e, se você já atingiu seu limite, o que provavelmente aconteceu, pode excluir um desses projetos anteriores, preferindo o primeiro, o simples Vamos nomear esse aplicativo de equipe e escolher um modelo em branco. Como sempre, começamos com a seção. Já usamos estilos de fundo para definir um preenchimento de fundo de cor sólida para nossos DVBlocks Mas isso é apenas uma pequena parte do que podemos fazer com estilos de plano de fundo. Assim como o Figma, também podemos fornecer preenchimentos de fundo com gradiente, preenchimentos imagem e sobreposições de cores. Tudo isso pode ser acessado clicando neste ícone de adição em planos de fundo A primeira é a imagem de fundo. Isso é o que vamos usar neste caso. Voltaremos a isso mais tarde. Em seguida, temos o gradiente linear, que funciona de forma semelhante ao FigmasGradient Para alterar as cores inicial e final, clique duas vezes nesses marcadores. Você também pode definir o ângulo do gradiente. No Figma, usamos esse bastão que pode ser movido manualmente Mas aqui temos que definir o ângulo girando esse botão ou apenas clicando nesses controles de rotação ou colocando o grau exato nesse campo. Em seguida, temos o gradiente radial. No Figma, podemos mover o posicionamento manualmente arrastando a alça desse stick, mas no Webflow, podemos fazer isso alterando o posicionamento neste mapa De forma semelhante, podemos alterar tamanho do gradiente a partir desses botões Eles têm uma explicação sobre como o tamanho é determinado, mas quem se importa? Basta trocá-los para ver o que funciona para você. A última opção é a sobreposição de cores. Isso é usado principalmente para colocar uma cor semitransparente em cima das imagens, como fizemos na Figma, mas em vez de um gradiente, apenas um Para que isso funcione, precisamos adicionar uma imagem como uma camada extra e colocá-la embaixo da Funciona exatamente como você esperaria. Esconda o show, arraste-os, exclua. Tudo bem, no nosso caso, precisamos adicionar uma imagem de fundo. Precisamos exportar a imagem do nosso arquivo Figma e depois carregá-la aqui Oh, temos três opções de tamanho. O primeiro é personalizado, o que nos permite dar valores personalizados à nossa imagem. A colocação lado a lado está ativada por padrão. Precisamos remover isso daqui. Queremos que a imagem se espalhe e preencha todo o espaço da caixa. Para isso, precisamos selecionar a capa. Com a capa, a imagem será redimensionada e cortada para caber em todo o espaço Em outras palavras, ele cobrirá todo o espaço. Com um container, a imagem será redimensionada para garantir que todas as partes da imagem estejam visíveis Portanto, não importa como você altere as dimensões da tela ou o tamanho do bloco div, a imagem inteira sempre estará visível Isso significa que muitas vezes haverá lacunas vazias. Portanto, a capa é a melhor no nosso caso. Agora, como você pode ver, a configuração da capa é muito fluida. Ele ajusta o tamanho e o recorte para fazer com que a imagem cubra tudo. Se necessário, ele estenderá a imagem inteira além do tamanho original. Quando se trata de cortar, temos um controle sobre de que lado ele cultiva, ou seja, o controle das opções de posicionamento Esse mapa de posicionamento é uma ótima maneira visual ajustar e ver qual funciona melhor. O posicionamento padrão, que fica no canto superior esquerdo, não é muito bom. O laptop que ela está vendo é realmente importante para a história. Sem o laptop na moldura, não sabemos o que ela está fazendo. A imagem fica confusa. Portanto, dado esse fato, precisamos escolher uma posição em que o laptop apareça o tempo todo. A centralização pode ser melhor. Isso ancorará a imagem no centro e cortará qualquer excesso nos quatro lados. Por enquanto, está bom. Quando colocamos o conteúdo, talvez precisemos fazer ajustes. Mas estamos esquecendo mais um tamanho, o mais largo. Temos que verificar lá também. Isso pode não estar visível para você, mas a foto está um pouco desfocada aqui. Por quê? Porque a imagem que exportamos tem 1.440 pixels. Esse é o tamanho da nossa moldura de design na Figma. Portanto, em telas maiores, ela se esticará e a foto perderá qualidade. No momento, a visualização de largura total que estou vendo é de 1.920 pixels Isso é significativamente maior do que a 1.440, então a foto se estende além do tamanho original Para corrigir esse problema, precisamos exportar uma imagem maior do Figma e exportar algo que seja grande o suficiente para cobrir a maioria dos tamanhos de tela E isso geralmente tem 1.920 pixels. Obviamente, são resoluções maiores do que isso, mas não precisamos ficar muito loucos porque essa é uma minoria muito pequena E mesmo nesses casos, pessoas que usam telas muito grandes não usam o navegador na largura total da tela. Muitas vezes, eles ainda o encolhem e talvez ainda o vejam no tamanho de 1920 pixels Ok, para exportar um tamanho maior para nossa imagem, podemos simplesmente inserir a largura que queremos nessa configuração de tamanho. Coloque 1920 seguido por W para largura. Dessa forma, exportaremos a foto em 1.920 pixels Y. Ao fazer isso, certifique-se imagem original que você colocou aqui tenha pelo menos 1.920 Caso contrário, você está apenas esticando a imagem como Spandex, e é a mesma coisa que acontece no Webflow, então é A imagem original que coloquei no Figma era grande. Eu apenas o reduzi para posicioná-lo perfeitamente na moldura Agora podemos voltar e enviá-lo para nossa seção de heróis. E isso é tudo. Aprendemos como usar estilos de fundo dentro do Webflow, principalmente a configuração da imagem e como posicioná-la perfeitamente para garantir se estique e encolha, encolha muito bem Eu pulei algumas outras configurações raramente usadas nos estilos de fundo, mas agora você já conhece meu estilo de ensino Não gosto de encher seu cérebro com coisas até que realmente precisemos delas. Continuaremos com nossa seção de heróis no próximo vídeo, então fique por aqui. 112. Webflow 2: barra de navegação (aplicativo Team): Neste vídeo, vamos criar a barra de navegação. Se você se lembra, a barra de navegação é um componente predefinido no Webflow, que podemos arrastar diretamente na tela a partir daqui e podemos estilizá-la como quisermos Aqui está um truque oculto do Webflow. Pressione Command ou Control E. Você verá essa barra de busca rápida. Aqui podemos pesquisar todos os elementos encontrar ativos e muito mais. Você pode pesquisar a barra de navegação e arrastá-la diretamente para a página ou simplesmente pressionar Enter e inseriremos automaticamente Ok, então o que precisamos fazer com uma barra de navegação? A primeira coisa que notei foi o tamanho do contêiner. Navbar está usando uma largura de contêiner padrão de 950 pixels ou algo parecido Se você se lembra da última vez, usamos um contêiner diferente, mas qual é o tamanho do contêiner que queremos usar? Isso é muito simples de descobrir. Só precisamos medir o contêiner Figma, que tem exatamente a largura total da nossa grade Desenhe um retângulo sobre ele e veja qual é a largura desse retângulo Isso é 1.160 pixels. Agora, o que precisamos fazer no Webflow? Só precisamos pegar o contêiner e definir um novo tamanho máximo de largura. Por que estamos dando a largura máxima e não a largura normal? Porque a largura normal não responde. Queremos que ele diminua quando a tela encolhe, e uma largura regular o manterá em 1.160 pixels, independentemente A barra de navegação é colada nas bordas quando reduzimos a tela, então precisamos adicionar um pouco de preenchimento a E aí está. Em seguida, precisamos mudar o plano de fundo. Nossa barra de navegação no design é transparente. Isso é fácil de mudar. Selecione a barra de navegação inteira, não apenas o contêiner, e altere a cor para transparente Ok, agora vamos adicionar o logotipo. Precisamos exportá-lo da Figma primeiro. Vamos exportá-lo como arquivo SVG porque, para imagens baseadas em vetores, é o melhor formato de arquivo É um arquivo pequeno e nunca perde qualidade, e nunca perde qualidade não importa o quanto você o amplie. Para inserir o logotipo dentro da caixa da marca, precisamos primeiro soltar o elemento da imagem. Você viu o que eu fiz aqui? Solução rápida e, em seguida, pesquise a imagem. E como eu selecionei o elemento da marca, ele caiu logo para dentro quando eu pressionei Enter. Em seguida, vamos estilizar os links. Mas primeiro, precisamos adicionar a fonte ao nosso projeto. Estamos usando um telefone do Google chamado Kavin. Não está na lista de fontes aqui, então temos que adicionar a fonte nas configurações do projeto. Podemos acessar essa página a partir deste link aqui. Vou te levar exatamente ao lugar certo. Acho que estamos usando a maior parte do estilo de telefone, então vamos adicionar tudo isso. E pronto, agora podemos voltar ao designer e começar a construir ou projetar. Se você manteve a guia do designer aberta, atualize-a depois de adicionar a fonte, que a fonte apareça no menu suspenso Agora, a maneira óbvia de aplicar um telefone a algo é selecionando o elemento e alterando a fonte. Mas isso não está utilizando todo o poder do HTML e do CSS. Se aplicarmos um estilo de fonte em algo de alto nível , ele será herdado por todos os filhos O elemento mais alto na hierarquia é o corpo. Podemos acessar o corpo a partir do navegador. Depois de selecionar o corpo, vá para o campo seletor e menu suspenso, selecione o Ao selecionar a etiqueta corporal, você verá que alguns dos estilos de telefone estão em azul. Isso significa que alguns estilos já foram aplicados a ele por padrão. Podemos mudar o telefone para a cabine aqui. Agora, cada novo elemento, tags de cabeçalho do parágrafo serão todas colocadas em um compartimento por padrão até que sejam substituídas Por que essa abordagem é superior à alteração de fontes diretamente em cada elemento? Bem, primeiro economiza tempo. Mas, segundo, apenas alterando a tag body, podemos editar a fonte em todo o site com alguns cliques. É isso mesmo. Agora, os Navinks estão herdando a fonte da tag body. Você pode até clicar nesse link laranja e ele dirá que está herdando o estilo da tag body Agora, vamos estilizar o resto das propriedades nos links. Mude a cor para branco a partir daqui. Os outros links estavam na moda, por que isso? Porque não temos uma classe de estilo aplicada a eles por padrão. Ao trocar o carro no primeiro, o Webflow criou uma nova classe de estilo automaticamente e a chamou de link de navegação Agora podemos pegar essa classe e aplicá-la em outras duas, para que todas as mudanças se apliquem a todas elas. Temos cinco links Nab no design e um deles é um botão Vamos alterar os tamanhos dos links para que correspondam ao tamanho do botão. Se selecionarmos um deles e verificarmos as propriedades de espaçamento, você verá que seus tamanhos são determinados pelo preenchimento Se alterarmos esses valores de preenchimento para que correspondam ao botão em nossos designs , obteremos o tamanho correspondente O preenchimento do botão nos desenhos é 12 na vertical e 20 Vamos estilizar o último link para transformá-lo em um botão. Só precisamos adicionar um plano de fundo e arredondar os cantos. Mas não podemos simplesmente estilizá-lo logo de cara, não é? Ele tem a mesma classe que os outros, então ele vai editar todos os links. O que nós fazemos Essa classe combinada, é claro Vá até o campo do seletor e digite um novo nome ao lado do link Nab. Isso lhe dará uma classe de combinação. CSS diferencia maiúsculas e minúsculas, então não importa se você usa maiúsculas ou minúsculas Eu prefiro usar letras minúsculas para economizar tempo. O Webflow capitaliza automaticamente . Eu sugiro usar letras minúsculas. É mais rápido digitar e você também verá a diferença entre os estilos que foram criados automaticamente pelo Webflow e aqueles que você criou manualmente Tudo bem, então quais são as propriedades do nosso botão? Ele tinha um fundo branco com 20% de opacidade e cantos arredondados de quatro pixels Este A para Alpha é como você pode definir a transparência na cor. Coloque 20, e aí está. Os cantos arredondados devem ser aplicados a partir daqui, abaixo do raio da borda Excelente, vamos corrigir o espaçamento agora. Os links em nossos designs estão a 30 pixels dessa borda superior. Podemos criar isso no Webflow de duas maneiras, adicionando uma margem de 30 pixels na parte superior do contêiner ou adicionando um preenchimento de 30 pixels à própria barra de navegação O resultado é o mesmo, mas o segundo é melhor, por quê? Como o container é uma classe que vamos reutilizar em outro lugar , é melhor mantê-lo intacto A classe Navbar, por outro lado, será usada somente na barra de navegação para que possamos estilizá-la com segurança como quisermos Como você pode ver, o logotipo não está centralizado. É quase imperceptível se você não vê os limites do contêiner, mas não podemos ignorar esses detalhes. Queremos que nosso site tenha uma aparência impecável, uma obra de arte. Então, como centralizamos o logotipo no meio? Sempre que precisar mover ou posicionar algo, sempre comece pensando nas margens e Essas propriedades cobrirão a maioria dos casos. Podemos simplesmente adicionar uma margem superior na parte superior do logotipo e pronto. Estou apenas medindo com um olho aqui. Nossos links de navegação não têm nenhum efeito de foco sobre eles no momento Isso torna a barra de navegação inativa e não é muito divertido interagir com ela Na última vez, adicionamos uma borda subjacente aos links. Desta vez, podemos fazer algo diferente, algo mais simples, como mudança de cor Aqui está um dos efeitos de foco mais simples, rápidos e eficazes que você pode usar em muitos elementos interativos diferentes Altere a opacidade ao passar o mouse. Como aplicamos o efeito de foco aos elementos do estado de foco, que podem ser acessados aqui Vamos mudar a opacidade para 80%. E aí esse efeito simples também funciona na parte inferior. Vamos adicionar um efeito de transição para que a mudança de foco seja agradável e suave Isso precisa ser adicionado em um estado normal, não no estado de foco, mas afetará o foco Você esperaria que fosse editável dentro do efeito de foco, mas não é É assim que o CSS funciona nesse caso. Provavelmente há uma lógica por trás disso. Vamos testar a capacidade de resposta do desktop, não os celulares. Nós faremos isso no final. E é isso. Navbar está com boa aparência. Terminaremos a seção de heróis no próximo vídeo. Fique por aqui. 113. Webflow 2: conteúdo principal: E estamos de volta para criar o conteúdo da seção de heróis. Para Stars, precisamos de um contêiner, certo? E dê a ele uma classe de contêiner que já criamos da última vez dentro do Napbar Tudo bem, vamos colocar nosso conteúdo dentro do contêiner. Temos um título, um parágrafo e um formulário. Vamos estilizar o título e o parágrafo neste vídeo, mas criaremos o formulário no próximo para que possamos abordar os formulários mais detalhadamente, pois ainda não os abordamos. Precisamos de algum espaço nas laterais, assim como fizemos com a barra de soneca Podemos adicionar o preenchimento à caixa do herói. Mas espere um segundo. Isso não parece certo. A barra Nab agora está ainda mais apertada por dentro. Isso porque temos um acolchoamento na barra Nab. E a barra de navegação está dentro do bloco de heróis, então há o dobro da quantidade de preenchimento, totalizando 120 pixels Então, vamos remover o preenchimento da barra de navegação porque não precisamos mais dele. A do herói cuidará disso. Você pode redefinir facilmente qualquer uma das estrelas clicando aqui. Eu costumo usar o atalho, que é Opção mais clique Acho que deveria ser o Aclick for the Windows. Vamos estilizar o título. O tamanho é 55 e o peso é normal. Isso é o mesmo com outras instâncias de um título em todo o nosso design Portanto, será uma boa ideia estilizar esse título como uma tag H one e não apenas como uma classe Lembra qual é a diferença entre uma classe e uma tag? A tag é um elemento HTML básico. É como você diz ao navegador que algo é um título, um parágrafo ou um bloco DO Se estilizarmos uma tag H one diretamente, poderemos controlar todas as tags H one em nosso site sem aplicar nenhuma classe a. Tecnologia de estilo, certifique-se de que nenhuma classe seja selecionada. Portanto, o campo seletor precisa estar vazio. Às vezes, você esquece e nós estilizamos um título diretamente Isso criará automaticamente uma nova classe. Portanto, qualquer alteração se aplicará somente a essa classe. Para corrigir isso, basta remover a classe e começar de novo. E selecione todos os títulos H one no menu suspenso. Agora você está estilizando a tag H one. Isso é exatamente o que queremos. Precisamos do valor da altura da linha. E como nunca alteramos a altura padrão da linha desse título, o campo agora diz Auto O WAP não considera isso um valor, então não vai funcionar para nós. Mas se você clicar no campo, as tags de espaço reservado mostrarão altura padrão da linha em pixels, que é de cerca de 67 pixels Se você quiser usar unidades percentuais em vez de unidades de pixels para a altura da linha, basta fazer as contas. O valor percentual é relativo ao tamanho do telefone. Por exemplo, 100% da altura da linha significa o mesmo que o tamanho do telefone. Para um telefone de 50 pixels, essa é a altura da linha de 50 pixels 200% da altura da linha seria 100 pixels, basicamente o dobro do tamanho do No nosso caso, podemos pegar 67 e dividi-lo por 55 ou pelo tamanho do telefone, multiplicar por 100, para que possamos obter o valor percentual e isso é cerca de 122% Eu geralmente prefiro usar porcentagens porque isso tem um grande benefício Ao alterar o tamanho do telefone em telas menores, não é necessário alterar a altura da linha porque é valor percentual e ele será calculado com base no novo tamanho do telefone. Já a unidade de pixels manterá essa altura conforme você altera o tamanho do telefone. Então, você acabará com algumas situações estranhas de altura de linha. Observe como a caixa delimitadora permanece inalterada. Isso porque a altura da linha é um valor fixo em pixels. Já durante a porcentagem de altura, a caixa delimitadora cresce e diminui de forma consistente com Tudo bem, eu não vou definir isso para a cor branca, você sabe por quê? Porque a maioria das nossas manchetes não será branca. Eles vão ter essa cor azul escura. Então, em vez disso, vamos definir essa cor azul escura aqui e, em seguida, encontraremos outra maneira de mudar essa cor específica para branco. Vou entrar no modo de edição de estilos de cores para poder copiar o código de cores. Caso contrário, ela não aparece logo de cara, pois definimos essa cor como um estilo. Também gostaria de salvar essa cor azul de alguma forma, para não precisar procurar o código hexadecimal toda vez que precisar dele Insira as variáveis. Você provavelmente percebe esse pequeno ponto roxo que aparece toda vez que você passa o mouse sobre alguns estilos Isso permite que você salve valores diferentes que você pode reutilizar e controlá-los em um só lugar Por exemplo, clique nesse ponto e, em seguida, clique no ícone de adição para criar uma nova variável e apenas nomeie essa variável, azul escuro ou azul marinho ou o que você quiser. Essa cor agora se transformou em uma variável que podemos reutilizar em outro lugar, por exemplo, em um botão Você só precisa clicar nesse ponto novamente e agora você pode ver que a variável azul escura está disponível no menu suspenso, que podemos aplicar ao plano de fundo desse Se você acha que isso funciona exatamente como os estilos infigma, você está É exatamente o mesmo conceito com um nome diferente e algumas outras pequenas diferenças, mas a ideia por trás disso é a mesma. Por exemplo, quando você edita sua variável, ela atualiza todas as instâncias do seu lado. Esse é o mesmo comportamento do Figma. Você também pode desvincular o valor da variável e depois editar a cor de forma independente Figma mostra todos os seus estilos no painel aqui quando nenhum elemento é selecionado, mas o Webflow tem um painel dedicado para variáveis, onde você pode gerenciar todas as variáveis em um só Edite-os, exclua-os, adicione novos. Isso mostra todos os diferentes tipos de variáveis que você pode adicionar. Ao excluir uma variável nos locais em que ela foi usada, você receberá essa mensagem. A partir daqui, você pode restaurar a variável ou desvinculá-la E isso é tudo. É um recurso simples, mas útil. Tudo bem, seguindo em frente. A etiqueta H one está pronta. Se adicionarmos um novo título, agora continuaremos com os estilos de título Então, que tal aquela cor branca para a manchete do herói? Dessa forma, podemos simplesmente adicionar uma nova classe a ela e depois estilizá-la em branco. Eu gosto de adicionar um nome de classe branco, neste caso, se a cor for a única coisa que estou mudando. Dessa forma, a turma deixa claro o que faz, e eu posso reutilizá-la sempre que precisar um título branco ou de qualquer outro texto branco Sempre que você estiver tentando aplicar uma nova cor a algo que já tem uma variável aplicada, você precisa primeiro desvincular a cor da variável e depois poderá colocar a cor personalizada Essa opção aparece quando você clica nela, não a partir desse ícone de lápis. A propósito, muitos nomes de cores comuns funcionam dentro desse preenchimento, então você pode simplesmente digitá-los como branco ou preto, rosa e assim por diante. Mais uma coisa que eu gostaria de mudar é a margem superior. Há uma margem superior padrão de 20 pixels nas tags H one. Isso adicionará espaço extra ao nosso espaçamento entre as seções Então, vamos nos livrar disso. Se precisarmos, podemos sempre adicioná-lo ao título específico Quanto ao parágrafo, não vamos estilizar a tag. vamos estilizar a classe Em vez disso, vamos estilizar a classe porque o parágrafo na seção do herói é diferente em comparação com qualquer parágrafo ou em qualquer outro lugar da página. Por fim, vamos posicionar o conteúdo do herói corretamente no meio Isso é tão simples quanto adicionar uma margem na parte superior, mas não queremos adicionar uma margem no contêiner. Vamos reutilizar essa classe de contêiner em toda a nossa página e já a temos na Navbar Portanto, adicionar uma margem na parte superior alterará todas as instâncias desse contêiner. Há duas maneiras de fazer isso. Poderíamos adicionar uma classe de combinação ao contêiner e depois na margem Dessa forma, nosso contêiner base ficará intacto, mas uma opção um pouco melhor é adicionar uma caixa extra e colocar o conteúdo dentro Então, podemos estilizar essa caixa como quisermos. Eu prefiro essa opção porque é um pouco limpa e oferece mais flexibilidade no futuro. Adicione um novo bloco D e arraste os elementos para dentro. Talvez você ache mais fácil fazer isso a partir do navegador. Vamos chamar esse bloco de imersão de algo como conteúdo de herói e adicionar uma margem semelhante à que temos nos designs Vamos dar a ele uma largura máxima para que fique bem contido em nossos designs Veja, usar o Dibblock separado já nos deu mais flexibilidade do que podemos fazer com Excelente. Vamos verificar a capacidade de resposta. Perfeito. Agora tudo parece nítido. Só temos um formulário restante, o que faremos a seguir. 114. Webflow 2: formas: E estamos de volta neste vídeo, vamos aprender o básico dos formulários dentro do weblog Dentro do painel Elementos, há uma seção especial dedicada aos formulários e elementos do formulário. primeiro passo é sempre adicionar um bloco de formulário, que já vem com alguns elementos. Podemos remover tudo isso como quisermos e adicionar mais elementos dentro do bloco de formulário. Vamos dar uma olhada. Do que é feito esse bloco de formulários? Existem três grupos dentro do formulário, que contém tudo o que vemos atualmente. Assim como o campo e o botão de envio , temos uma mensagem de sucesso que fica oculta no início e só aparece quando o formulário é enviado com sucesso. E a mensagem de erro que só aparece quando há algum tipo de erro quando usuário estava tentando enviar o formulário. Se quisermos adicionar novos elementos ao formulário, podemos arrastar itens como menus suspensos e caixa de bate-papo Cada campo do formulário tem suas próprias configurações. Se você clicar nesse ícone de engrenagem ou clicar duas vezes no campo do formulário, ele mostrará a configuração desse campo de entrada. O primeiro item nas configurações é o nome do campo. Esse nome é interno. É exatamente o que vemos dentro do banco de dados. Os usuários não verão o nome. O rótulo do campo está do lado de fora. Não está nas configurações. É apenas um bloco de texto normal que fica em cima do próprio campo, que podemos editar e estilizar mesma forma que faríamos com qualquer bloco de texto. Mas se quisermos uma aparência mais minimalista em o rótulo esteja dentro do campo e não fora dele, como temos em nossos designs, podemos adicioná-lo em um campo de espaço reservado E então podemos nos livrar do rótulo. A próxima configuração é o tipo de texto. Isso significa que tipo de texto é aceito nesse campo. No momento, ele está configurado para e-mail, então só permitirá e-mails e qualquer outra coisa causará um erro. Se você quiser coletar nomes e texto normal , definiremos isso como plano ele aceitará qualquer tipo de informação. Você também tem opções de senha, telefone e número. Abaixo, temos a opção de tornar o campo obrigatório e talvez o obrigatório e talvez foco automático significa que o campo será selecionado imediatamente à medida que a página for carregada um campo de seleção suspenso, clique em Configurações para editar a lista de opções que está dentro do Você pode editar as opções, excluí-las, adicionar mais, reordená-las, basicamente tudo o que você espera Não precisamos de uma lista suspensa para nosso formulário, para que possamos nos livrar dele Tudo bem, vamos estilizar nosso formulário. Em nossos designs, fizemos com que o formulário fosse horizontal, o campo e o botão próximos um do outro. Aqui eles estão alinhados um em cima do outro. Então, como podemos alinhá-los um ao lado do outro? Bem, o bloco de formulário não é diferente de todos os outros elementos desta página. Podemos dar classes e estilizá-las no painel Estilos. O flexbox é uma escolha óbvia quando se trata de alinhamento horizontal Certifique-se de selecionar o elemento do formulário em vez de um elemento do bloco do formulário, pois estamos tentando alinhar o campo e o botão O bloco de formulários contém mensagens de formulário, sucesso e erro em seu interior. Então, ele vai alinhar esses três elementos. Isso é o que vai acontecer. Então, mais uma vez, selecione o elemento chamado formulário e, em seguida, dê a ele uma flexibilidade de exibição Agora podemos estilizar o campo e o botão de forma independente. Nosso campo tem 56 pixels de altura, cantos arredondados e tem um texto interno de 16 pixels com uma cor cinza. E agora, para tornar o texto do espaço reservado dentro do campo com uma cor diferente, você verá que alterar a cor não faz nada Isso porque essa cor de texto altera a cor do texto que o usuário realmente digita dentro. Você pode verificar isso no modo de visualização. Mas não é isso que queremos mudar. Do jeito que estava, estava tudo bem. Para estilizar o campo do espaço reservado, vá até os estados do campo e selecione o espaço reservado Agora podemos alterar a cor do texto do espaço reservado. Excelente. Agora, para o botão. Vamos dar a ele um botão de nome de classe. O texto dentro do botão Formulário pode ser editado nas configurações, assim como outros elementos do formulário. Isso é um pouco diferente de outros botões nos quais podemos editar o texto diretamente clicando nele. R Eu quero que você preste atenção em algo aqui. Você vê como o botão é um pouco mais alto que um campo. Mas o botão, na verdade, não tem altura e tem um preenchimento de apenas nove pixels Então, por que é tão alto? Isso se deve às configurações fornecidas à caixa flexível principal Você vê aqui que diz estiramento. Isso significa que as crianças flexíveis sentirão a altura da caixa flexível até serem instruídas de outra forma Se você mudar isso, a altura mudará com isso. Mas você pode se perguntar por que o campo tem uma altura diferente. Isso tem a ver com uma margem padrão que é aplicada ao campo. Essa margem extra de dez pixels está esticando o flexbox. Portanto, o botão agora tem mais espaço para preencher. Se removermos essa margem do campo, botão diminuirá e corresponderá ao tamanho do campo Mas vamos manter essa margem por enquanto. Às vezes, quando temos vários campos, precisamos dessa margem. Podemos corrigir esse problema simplesmente atribuindo ao botão uma altura fixa. Quero que você analise mais de perto esse comportamento, porque muitas vezes você se depara com essas irregularidades no Webflow ou geralmente quando está projetando e desenvolvendo um site, porque todos os elementos e todas as configurações interagem entre si e alteram a estrutura do Então, uma margem aqui pode estar mudando algum outro comportamento em um elemento muito diferente, certo, exatamente como aconteceu neste exemplo. Sempre que algo assim acontecesse comigo no começo, eu sempre pensava: Oh, isso é um bug? Por que não está funcionando assim? Sempre achei que fosse algo com o weblo. Então eu saía no fórum procurando por esse bug com um botão , formulário ou algo assim. E então, em algum momento, chego à resposta, e a resposta seria bem simples. É por isso que eu quero que você aprenda a procurar as pistas quando fica preso em algo e pense nisso como um quebra-cabeça Você sempre acha que existe uma solução. A resposta está em algum lugar lá. Não é que a ferramenta esteja quebrada, seja um bug ou algo não esteja funcionando corretamente, mas há algum tipo de quebra-cabeça que precisa ser resolvido. Pelo que me lembro, muitas vezes é frustrante quando você está lidando com uma ferramenta e está tentando construir algo e simplesmente não está indo do seu jeito e não está funcionando, e você pode se sentir frustrado e pode ficar desanimado e não gostar Então, eu quero que você respire fundo e olhe para isso de uma forma que seja um quebra-cabeça e haja uma pista, e você só precisa chegar à resposta Então, verifique cada elemento e veja qual estilo pode ser interagido com outra coisa. E você chegará à resposta e se sentirá muito bem com isso. Tudo bem, vamos dar uma olhada no formulário no modo de visualização Tudo parece bom, mas o botão pode usar um efeito de foco. Não sei por que esse texto é tão leve aqui. Pode ser porque brincamos com o texto do espaço reservado e tornamos a opacidade um Independentemente disso, basta reaplicar essa cor cinza aqui e eu resolverei o problema Um simples estado dela fará uma pequena mudança na cor. E é isso. Outra coisa que podemos mudar são as mensagens de sucesso e erro. Para fazer isso, primeiro precisamos mostrar os estados, o que podemos fazer nas configurações do formulário. Selecione o bloco de formulários e vá para o painel de configurações. Aqui, podemos alternar entre os estados normais de sucesso e erro. Depois de ativar o estado de sucesso, você poderá interagir com ele e alterá-lo conforme desejar. Podemos até arrastar outros elementos dentro ou alterar o plano de fundo, estilizar o texto ou outros enfeites Em vez dessa mensagem de sucesso, também podemos redirecionar os usuários para uma página de agradecimento diferente, o que podemos fazer adicionando uma URL de redirecionamento nesse campo Mas, no nosso caso, vamos manter a mensagem de sucesso. mesmo vale para a mensagem de erro, altere o estado para mostrá-la e, em seguida, estilize-a como quiser. Estou muito bem com essa mensagem de erro padrão e seu estilo, então vamos mantê-la como está. E isso é tudo para o formulário por enquanto. Depois de publicarmos nosso site, testaremos o formulário no site ativo e veremos como podemos gerenciar os envios do formulário 115. Webflow 2: Modelo, seção 1: E estamos de volta neste vídeo, vamos fazer uma pequena parte da seção a seguir, apenas o conteúdo. Lembre-se do que fizemos no site anterior: criamos um bloco de seção genérico. Nós lhe demos alguns preenchimentos padrão e pronto. Assim como fizemos com o elemento container, ter essa seção genérica nos dá um bom controle sobre o layout do site. Então, vamos lançar uma nova seção e dar uma aula. Dê um pouco de preenchimento na vertical e na horizontal. Precisamos de 60 pixels nas laterais da barra Agora, então vamos repetir isso. Para o preenchimento vertical, vamos usar 80 porque em nossos designs, geralmente usamos espaçamento de 160 pixels entre as seções e 80 pixels na superior e inferior somam Não tenho uma regra estrita sobre o tipo de preenchimento a ser usado Dependendo do site, isso pode mudar e, na maioria das vezes, estou apenas de olho na coisa E agora vamos colocar outro contêiner dentro e aplicar o contêiner de classe existente. Nos desenhos, temos uma cor de fundo esbranquiçada, um pouco azul e acinzentada na página Fizemos isso para que pudéssemos ter melhor contraste nos cartões brancos que colocamos na página. Vamos aplicar esse plano de fundo à seção genérica. O título já está no estilo certo porque já estilizamos a tag H one Não fizemos isso para o parágrafo, então vamos fazer o mesmo, ou seja, vamos estilizar uma tag de parágrafo. Portanto, todos os nossos textos genéricos de parágrafos são estilizados sem adicionar nenhuma classe a eles. Para fazer isso, primeiro selecione o parágrafo, depois vá para o campo seletor e selecione todos os parágrafos Tudo bem, agora vamos colocá-lo como de costume, 18 pixels de tamanho, 26 pixels de altura da linha, e pegar o código de cores a partir daí. Excelente. Agora, para o link Saiba mais, há dois elementos aqui, texto e o ícone de seta. Existe uma maneira de realmente inserir uma seta como texto, como um símbolo, mas estou planejando animar essa seta no futuro e, nesse caso, precisaremos de uma seta para ser um objeto separado Portanto, temos um elemento de texto e imagem. Vamos em um link de texto. Assim como com o título e o parágrafo, também podemos estilizar a tag Links. Então, em vez desse azul genérico, vamos mudá-lo para o nosso próprio azul. E todos os links agora terão essa cor específica. Agora, se colocarmos um hiperlink para o texto em qualquer outro lugar, ele herdará a cor dessa tag de link Mas não podemos mudar muito tag Links, como o tamanho do texto, por exemplo, porque os links ficam em outros lugares, como parágrafos, botões e assim por diante Então, se estilizarmos e atribuirmos a todos os links com 16 pixels, se vincularmos algo dentro do título ou dentro de uma legenda ou de um tipo diferente de texto , todos eles se tornarão 16, por exemplo, assim Então, tudo o mais que precisamos estilizar com um link, vamos estilizar a classe e não a tag. Para remover o sublinhado do link, basta acessar a declaração de texto e pressionar nenhum Ok, agora precisamos de uma seta, que é apenas um elemento de imagem. Vamos exportar a imagem da seta do Figma e inseri-la aqui Exporte como SVG, isso é melhor para essas imagens. Às vezes, as exportações do Figma acabam em uma pasta compactada com zip Você vai ter que extraí-lo primeiro. No meu Mac, vou clicar duas vezes e isso vai extraí-lo. Acho que no Windows, basta clicar com o botão direito do mouse e extrair aqui. Há um espaço de quatro pixels antes da seta. Não está exatamente alinhado com o imposto, então vamos adicionar uma margem negativa no topo Menos dois pixels parecem suficientes. Ok, está tudo bem, mas há um problema. Se você conferir a prévia, verá que o texto é um link. Você pode ver esse cursor mudando de uma seta de ponteiro para uma mão, mas o ícone da seta não faz parte desse link É um objeto separado. Esse não é o melhor arranjo. Idealmente, queremos que a seta seja clicável e faça parte do link dois Existe uma solução muito simples para isso. Só precisamos colocar esses dois elementos dentro de um bloco de links. Para refrescar sua memória, temos dois elementos de link dentro do painel Um é um link de texto normal e o outro é um bloco de links. Um bloco de links é como um bloco div, mas é um link. Então, qualquer coisa que colocarmos dentro fará parte desse único link. Então, adicionamos o bloco de links e, em seguida, arrastamos esses elementos para dentro desse bloco. Mas, na verdade, podemos arrastar o elemento link para dentro porque isso não é permitido. Em vez disso, precisamos adicionar um bloco de texto normal. Como você pode ver, no momento em que colocamos texto dentro do bloco de links, ele fica azul. Isso porque esse bloco de links faz parte da antiga tag de links que acabamos de estilizar Vamos adicionar essa classe ao texto. O sublinhado deveria desaparecer, mas não desaparece. Temos que remover o sublinhado do próprio bloco de links Eu escolhi um caminho muito estranho para demonstrar essa implementação do link Mas a razão pela qual fiz isso é porque teria sido uma maneira natural de você pensar, e será uma maneira natural de você passar por esse processo porque quando quiser adicionar um novo link, você vai dizer: Ok, deixe-me adicionar um link de texto, certo? E então você vai ter que adicionar talvez um ícone ao botão ou o que quer que seja, e você vai pensar, A, como eu faço isso? Agora, esse ícone não é clicável. E você pode ficar preso porque sabe que precisa descobrir isso. É por isso que eu queria seguir esse tipo de caminho equivocado, para que de caminho equivocado pudéssemos entender exatamente como voltar e refazer tudo da maneira que realmente queremos porque você se depara com esse tipo de cenário quando quer construir algo, de cenário quando quer construir algo, segue a maneira natural de assumir que vai funcionar e depois não funciona, e você assumir que vai funcionar e fica preso, e você meio que volta e depois reduz um pouco algumas coisas. Esse tipo de tentativa e erro e percorrer os caminhos acidentados do aprendizado será a melhor maneira de você entender esse conceito Sempre que você estiver fazendo isso sozinho e criando um site por conta própria, há um lugar onde você sempre pode ir e encontrar respostas, que é o WebLofum em Eles são uma comunidade excelente, as pessoas respondem lá. Até o weblo tem pessoas que trabalham para essa comunidade e para o fórum, e elas também dão respostas lá Mas também outros designers do Webflow , como eu e todos os outros, estão contribuindo e respondendo a perguntas. Então, se você estiver preso em algum lugar, pesquise no Google e procure nos formulários do Webflow, porque muitas vezes outras pessoas e outros web designers fizeram a mesma pergunta que você, então você já pode encontrar respostas lá Se não, pergunte a si mesmo e você definitivamente encontrará alguém para ajudá-lo orientá-lo e lhe dar respostas E você encontrará o link para o fórum Webflow na página de recursos Então vá dar uma olhada. Tudo bem. Por fim, precisamos colocar esses dois elementos lado a lado. Temos duas opções. Uma é usar um flexbox, mas a segunda opção mais fácil é alterar a propriedade de exibição do texto No momento, é um bloco. Bloquear significa que ele se estenderá e ocupará toda a linha do pai. É por isso que o ARR é forçado a pular para a segunda linha. Mas se mudarmos para bloco embutido ou embutido, seta voltará A seta é um elemento de imagem e, por padrão, os elementos já estão definidos como bloco embutido, então é por isso que não precisamos alterá-la Vamos adicionar o espaço na parte superior deste link Saiba mais. Tudo bem agora, se verificarmos o modo privado, a seta fará parte do Link dois E é exatamente disso que precisamos. Finalmente, precisamos dar a esse conteúdo uma largura máxima para que ele não se estenda por todo o contêiner Não vamos tocar no contêiner, é claro, vamos soltar outro bloco div e mover todo o conteúdo dentro dele Vamos dar a ela uma largura máxima de 464 pixels , exatamente como em nossos designs E aí está. Isso é muito melhor. Isso é tudo por enquanto. Adicionaremos a imagem no próximo vídeo. Fique por aqui. 116. Webflow 2: seção de modelo 2: E estamos de volta. Neste vídeo, adicionaremos a imagem a esta seção. Como de costume, precisamos exportar a imagem, agrupar tudo primeiro e dar um nome a ela. Não podemos exportar diretamente esses ensaios. Se o fizermos, o Figma exportará a imagem recortada. Você pode ver isso na pré-visualização, mas não queremos uma imagem já recortada Queremos que seja recortado pelos próprios limites da página, mais como se fosse uma parte escondida Arraste uma cópia desse grupo inteiro para outro lugar na página. Isso revelará todo o gráfico. E agora podemos exportá-lo. Precisamos de PNG e dois X para resoluções de tina. Vamos adicionar um elemento de imagem dentro desse contêiner e, em seguida, fazer o upload da nossa imagem. A Selecione alto DPI já que estamos usando dois x. Tudo bem. Agora, o que fazemos? Já fizemos algo muito parecido no site anterior, então muitas coisas continuarão iguais. Precisamos que a imagem vá para a direita. Como sempre, o Flexbox é uma ótima opção para isso. Isso é o que usamos da última vez também. Para criar um Flexbox, precisamos de um bloco Dao extra onde colocaremos conteúdo e imagem Vamos criar uma nova classe. E mude a tela para flexionar. Vamos colocar o alinhamento no centro. E já que estamos nisso, vamos definir o justificado para o espaço entre eles. Por quê? Porque queremos que o conteúdo seja colado na esquerda e a imagem na borda direita Isso não vai mudar nada neste estágio, porque realmente não há espaço dentro do flexbox E a forma como o espaço entre as configurações funciona é como uma mola. Ele insere uma mola no meio que empurra os elementos para os lados Mas com espaço zero, não há nada a ser empurrado. Se reduzirmos a imagem , ela funcionará. Ele será pressionado contra a borda do flexbox. Se você se lembra da última vez, usamos um truque especial para mover a imagem até a borda e, além dela, usamos margem negativa. Então, vamos fazer a mesma coisa aqui. Agora, você verá que, no início, a margem negativa não move a imagem, mas, em algum momento, ela começa a se mover. Para ser honesto, não tenho 100% de certeza por que isso está acontecendo. Definitivamente, tem a ver com o fato de a imagem ser muito grande e ultrapassar os limites dos pais. É por isso que eu sempre aconselho nunca estilizar imagens diretamente. Coloque-os em um blog div e, em vez disso, estilize isso. Você terá um comportamento mais previsível e adequado porque o Flaxbox faz coisas estranhas com imagens, e é melhor tê-las dentro seu próprio Dvlock dedicado e, em seguida, ele se comportará adequadamente e você entenderá está acontecendo e não precisará lidar com algum comportamento estranho quando a margem não estiver lidar com algum comportamento estranho quando a se movendo e, em algum momento, ela começará a se mover , e assim por diante. Mas desta vez, usei apenas a imagem para que pudéssemos aprender com nossos erros. Uma última coisa que precisamos corrigir aqui é esse problema de transbordamento. Para corrigir isso, precisamos pedir à seção que recorte os elementos se eles transbordarem além das bordas É simples. Só precisamos definir overflow como oculto Não se esqueça de que a configuração de estouro é definida no pai, não na imagem em si. Vamos criar uma classe de combinação chamada overflow hidden. Não queremos mexer com nossa seção padrão e depois aplicar essa configuração de estouro Excelente. Vamos verificar novamente a pré-visualização e a capacidade de resposta. E terminamos com esta seção? 117. Webflow 2: seções de fotos: Neste vídeo, vamos criar essa seção. O layout é muito semelhante à seção anterior que já fizemos, então por que não duplicá-lo e começar a partir daí Selecione a seção inteira e basta copiar e colar Control C, Control V. Vou soltar um após o outro. A ordem do conteúdo é invertida. Podemos mudar isso arrastando o elemento da imagem para cima, e isso colocará a imagem primeiro Essa imagem tem uma margem negativa aplicada a ela, mas desta vez não precisamos dela. Para remover isso, precisamos remover a classe porque não podemos fazer nenhuma edição na margem em si, isso afetará a imagem anterior. E agora vamos substituí-lo pela nossa própria imagem. Desta vez, vamos explorar o JPAG porque não temos um fundo transparente, e o JPAG é sempre uma opção melhor do que PNG em termos Mesmo assim, vamos compactá-lo em nosso compressor de imagem Vamos substituir o conteúdo. Oh, lá vamos nós. Remova a classe de combinação overflow da seção. Não precisamos mais disso. Ok, precisamos de algum espaçamento entre os dois Vamos adicionar a margem à imagem. Ok, então o que está acontecendo aqui? O conteúdo foi empurrado para a direita e para fora da página. A imagem deveria encolher, mas essa não é outra razão pela qual é melhor colocar imagens dentro de um Dibblog, especialmente ao lidar com Acho que já aprendemos nossa lição, então vamos envolvê-la no Dibblock Quando digo embrulhar algo dentro do DivLog, basicamente significa colocá-lo dentro de um Diblog Crie uma nova classe e atribua a ela uma margem de 60 pixels. Desta vez, a imagem está diminuindo adequadamente. Na verdade, não é a imagem, mas o invólucro da imagem está diminuindo adequadamente elemento da imagem obedece aos limites de seu pai A próxima seção é muito simples. Duplique essa nova seção, altere a ordem dentro da caixa da bandeira Embora, nesse caso, precisemos da margem do outro lado, crie uma classe compa para o elemento do invólucro da imagem Aplique zero à direita e 60 à esquerda e substitua o conteúdo. Excelente. Essas seções estão ótimas. No próximo vídeo, vamos criar a seção de depoimentos Isso vai ser divertido. Fique por aqui. 118. Webflow 2: componente deslizante: Tudo bem, agora precisamos criar a seção de depoimentos Decidimos usar esse tipo de controle deslizante, às vezes chamado de carrossel ou controle deslizante ou controle deslizante de carrossel Para criar isso no Webflow, precisamos usar um componente muito útil chamado logicamente Neste vídeo, conheceremos o componente deslizante e, em seguida, concluiremos a seção de depoimentos em um vídeo posterior Vamos começar com a seção usual, contêiner, etc. Em seguida, em um título. Agora vamos adicionar um controle deslizante, que podemos encontrar apenas pesquisando dentro de um localizador rápido Ou no painel de elementos na seção Avançado. Este é um controle deslizante, um componente pré-fabricado que tem muita liberdade para ser personalizado, mas às vezes tem suas limitações Como quase tudo no Webflow, componentes pré-fabricados não são a única maneira de criar esses layouts Poderíamos construir nosso próprio controle deslizante do zero, mas dá um pouco mais de trabalho, e esse controle deslizante pré-fabricado faz um trabalho muito bom na maior parte do tempo O Slider ocupa uma largura total de seu contêiner principal. Portanto, se o movermos diretamente no corpo, fora do recipiente e da seção, ele se estenderá de ponta a ponta. Vamos ver do que é feito. Há quatro elementos no interior. O primeiro é a máscara. É aqui que nossos slides vão. No momento, há dois slides padrão dentro. Claro, não estamos limitados a dois. Depois, temos as setas esquerda e direita, que são blocos de links com ícones de seta dentro E por último temos a navegação deslizante. Esses são os pontos brancos que você vê no meio. Eles são clicáveis e o levarão ao slide correspondente O slide em si é apenas um bom e velho Dvbloc. Não há nada de especial neles. Eles podem ser estilizados como qualquer outro desenvolvimento e podemos colocar qualquer outro elemento dentro Vamos mudar o plano de fundo de cada slide para que possamos ver melhor o que está acontecendo. Vamos verificar isso no modo de visualização. Dois slides, setas vermelhas e azuis e os pontos de navegação alternam entre esses Basicamente, o que está acontecendo é que há dois blocos DV próximos um do outro, horizontalmente, e os controles se movem entre esses blocos de mergulho com Isso é tudo. Há várias maneiras de alternar entre os slides dentro do designer usando Controles. Ou nas configurações do controle deslizante, que tem suas próprias setas ou nesse menu suspenso, onde podemos selecionar exatamente o slide que queremos É assim que alternamos entre os slides para que possamos editá-los individualmente. Temos duas opções para adicionar slides. Primeiro, podemos adicionar um novo slide no painel de configurações pressionando Ed slide. Para poder ver as configurações do controle deslizante, você precisa selecionar algum elemento do controle deslizante Como você pode ver, agora temos três slides. Isso também adicionou um novo bloco DV de slides dentro do navegador A segunda opção é duplicar o elemento do slide, clicando com o botão direito do mouse e duplicando ou com o controle C normal V. exclusão de slides acontece de maneira semelhante Selecione um slide na tela ou no navegador e pressione a tecla Delete Como o slide é apenas um DVlock normal, podemos adicionar outros elementos, como texto, imagens, botões e assim por diante Acabamos de adicionar isso ao primeiro slide. O segundo slide azul ficará vazio. Também podemos adicionar conteúdo semelhante ou diferente no slide azul. Então esse é o controle deslizante. No próximo vídeo, vamos transformar esse controle deslizante feio em lindo carrossel feito de cartões de depoimentos 119. Webflow 2: controle deslizante de testemunhos: Então esse é o componente deslizante, mas esse controle deslizante de fluxo parece muito diferente dos nossos designs As setas são diferentes, seu posicionamento é diferente. Não há pontos de navegação e estamos vendo vários cartões ao mesmo tempo Neste elemento deslizante, vemos apenas um slide por vez Mas não se preocupe, podemos realmente estilizar o controle deslizante de forma a torná-lo exatamente igual aos nossos designs Primeiro, vamos adicionar um espaço entre o controle deslizante e o título Assim como qualquer outra coisa, podemos estilizar todo o elemento deslizante, que novamente é um bom e velho bloco dV com vários outros elementos dentro Selecione o elemento deslizante, atribua a ele uma classe e a margem superior de 120 pixels Vamos nos livrar desse fundo cinza. Também faz parte do elemento deslizante. Vá para as configurações de fundo e altere-as para transparente. E vamos mudar a cor da seta para que possamos vê-las. Os ícones aqui são base de texto. Então, se mudarmos a cor do texto, isso atualizará a cor dos ícones. E nós não precisamos desses pontos de navegação, então vamos nos livrar deles Mas a exclusão não funciona. Weblo acha que não precisamos do controle deslizante e exclui tudo Portanto, há outra maneira de remover alguma coisa. Selecione não exibir nenhum e ele sairá do continuum do espaço-tempo Flutuando em algum lugar em uma dimensão diferente. Em seguida, precisamos criar um cartão de depoimento. Isso deve ser bem simples. Vamos colocar um novo bloco DV dentro de um dos slides e construir todas as peças necessárias Dê a ele uma classe de cartão de depoimento, um fundo branco e as mesmas dimensões de nossos designs E arredondar as esquinas. Agora vamos adicionar uma sombra de caixa, assim como no Figma. Para ver as configurações da sombra, certifique-se de selecionar um objeto correto que tenha uma sombra aplicada a ele. Se você estiver usando um estilo de sombra como o que estou aqui, você pode desvinculá-lo do estilo para poder ver exatamente o que está acontecendo lá dentro Esses são todos os valores. Precisamos recriar a sombra dentro do Webflow Há um valor extra dentro do weblo, o tamanho, mas você pode ignorá-lo Como você pode ver, o cartão não está totalmente visível, o controle deslizante o recorta Isso porque o controle deslizante tem uma altura padrão. Sim, diz altura automática, o que significa que deve ser expandida com base em seu conteúdo, mas não é outro caso os valores padrão não sejam verdadeiros, digite manualmente automaticamente mais uma vez e pressione Enter. Ok, agora para o conteúdo dentro do cartão, temos estrelas e o parágrafo. Precisaremos exportar os ícones de estrelas do Figma, exportar todas as cinco estrelas como uma, agrupá-los se não for um único grupo para você e exportar como SVG Precisamos aplicar preenchimento ao cartão. Temos 40 pixels em todos os lados, exceto na parte superior, que tem 60 pixels. Precisamos de uma distância das estrelas, que é de 30 pixels. Uma pequena margem negativa para alinhar melhor as estrelas. E precisamos do bloco do autor. Exporte esses avatares como dois X P e G. Vamos adicionar um novo bloco de mergulho e organizar os detalhes do autor nele Primeiro a imagem, depois os dois blocos de texto. Dê ao bloco de texto um pouco de classe e estilo, da mesma forma que o Agora precisamos mover o texto na lateral do avatar. Como podemos fazer isso? Obviamente, poderíamos seguir o caminho usual de usar um flexbox, mas precisaríamos de uma caixa extra para isso, e precisaríamos de mais cliques Uma opção mais simples é usar float. Sob a posição, descemos para flutuar e sair. Abra isso. Existem três opções, nenhuma, flutuação esquerda e direita Os ícones meio que mostram o que ele faz. Selecione flutuador esquerdo. Isso posicionará a imagem à esquerda do texto. E isso é tudo. Precisamos ajustar um pouco espaçamento agora ao lado da imagem Em seguida, entre a imagem e o parágrafo, que tem 70 pixels. E, finalmente, precisamos adicionar uma pequena margem em cima do nome do autor para centralizar o texto com o avatar. Agora vamos duplicar esse primeiro slide e ver onde estamos Como você pode ver, estamos vendo apenas um slide por vez, mas queremos que eles sejam exibidos um ao lado do outro conforme se encaixam e deslizem entre as partes visíveis e invisíveis. O motivo pelo qual estamos vendo um slide por vez tem a ver com as configurações de largura do elemento do slide. Ele está configurado como automático, o que significa que vai esticar 100% do contêiner principal. Se dermos uma largura fixa , ela encolherá adequadamente Então, vamos dar a mesma largura do nosso cartão de depoimento. Se você notar que a caixa de slides está encolhida agora, ela é tão larga quanto o cartão E agora vamos duplicá-lo. Exclua os outros e duplique aquele com a largura correta E aí está. Agora eles estão se alinhando exatamente como queremos Vamos adicionar uma margem à direita para criar a separação. Ok, vamos verificar o modo de visualização para ver onde estamos. Tenha quatro slides e eles deslizam exatamente do jeito que queremos, exceto por uma coisa. Em nosso design, a página mostra o maior número possível de cartões e o resto sai da página. Mas aqui, eles não. Eles só aparecem dentro do componente deslizante Então, como podemos mudar isso? Se você selecionar um elemento de máscara, outro bloco D onde todos os slides estão aninhados, você notará que, dentro das configurações de estouro, ele está definido como oculto Isso significa que todos os slides que ultrapassam os limites da máscara são recortados Na verdade, tudo o que vai além é cortado. Até as sombras nas cartas, se você olhar mais de perto. Para mostrá-los, basta mudar isso para visível e pronto. Agora todas as cartas estão visíveis. Mas há um problema. Eles não recortam quando a página termina, eles expandem os limites da página. Mas nós já sabemos como consertar isso, não é? Só precisamos aplicar o mesmo estilo oculto de overflow à seção, assim como fizemos com a imagem do painel Temos até uma aula para isso. Não precisamos mudar nada, aplique a mesma classe que já aplicamos em uma das seções. Excelente. Vamos preencher os cartões com nosso conteúdo, e então teremos que cuidar das setas e pronto R Há apenas uma coisa que precisamos corrigir com as cartas. No momento, temos conteúdo com a mesma altura. Mas e se tivermos depoimentos com durações diferentes? O cartão não se expande porque tem uma altura fixa. Então, vamos mudar a altura de volta para automática. Portanto, ele se expande com base no conteúdo. Em um projeto real, você deve tentar controlar a duração dos depoimentos Este é bom, mas quando a diferença entre corte longo e curto é muito grande , não parece muito bom. Os depoimentos podem ser truncados, significa que você pode Mas se seu cliente não quiser que eles sejam cortados, talvez seja necessário um layout diferente. Algo que se acumula verticalmente. Uma dessas opções poderia ser a grade de alvenaria. Uma coisa que eu não gosto é como os slides se movem. Vários deles deslizam com cada clique, mas eu prefiro que o deslizamento mova um slide por vez Isso é simples de corrigir. A quantidade de deslizamento é controlada pela largura do elemento da máscara Se alterarmos a largura da máscara para corresponder à largura de cada slide , obteremos um movimento de um slide por vez. Ok, sempre com boa aparência. A última coisa que precisamos cuidar são as flechas Para isso, precisamos aprender um novo conceito, o que faremos no próximo vídeo. Fique por aqui. 120. Webflow 2: posicionamento: Bem-vindo de volta. Neste vídeo, vamos cuidar das setas em nosso controle deslizante Para colocá-los no canto inferior direito do nosso controle deslizante, como temos nos designs, precisamos aprender um novo conceito Esse conceito é chamado de posição. Posição é um estilo CSS que nos dá uma quantidade enorme de controle sobre nossos objetos. Esse estilo pode ser alterado a partir daqui. Temos cinco valores de posição diferentes, estáticos, relativos, absolutos, fixos e fixos. Vamos examinar cada um. Organizei cinco cartas aqui e, uma por uma, aplicaremos diferentes configurações de posição a elas para ver o que acontece com elas. Estática ou também chamada de automática é a posição padrão de quase todos os objetos. Elementos estáticos se comportam da maneira que já estamos familiarizados com eles, como um documento do Word fluindo de um após o outro As coisas ficam um pouco mais interessantes do ponto de vista relativo. O objeto relativo é a posição em relação a si mesmo. Eu sei que isso não diz nada para você. Deixe-me demonstrar. Vou me inscrever em relação a esta caixa e nada acontece. Muito sem intercorrências Mas uma coisa aconteceu as configurações de posição agora têm mais alguns controles. Recebemos esses controles semelhantes aos que temos com o espaçamento. Podemos ajustar esses valores e a caixa se moverá. Basicamente, estamos dando à caixa uma margem superior de 100 pixels. Funciona de forma bastante semelhante com uma exceção, e você verá essa exceção quando eu mostrar o que acontece quando você edita a margem em vez desse posicionamento relativo. Você vê que a margem alterou o fluxo da página. A altura do contêiner principal foi aumentada porque essa margem precisa caber nesse espaço. Mas quando você usa o posicionamento relativo, o fluxo do documento não é afetado de forma alguma. Você pode mover o objeto para onde quiser, mas no fluxo do documento, ele ocupará apenas o espaço original. Esse é um poder de posição relativa. Nós a retiramos completamente de seu próprio lugar, mas as cartas que estão aninhadas dentro uma caixa flexível ainda não se moveram Eles agem como se o cartão ainda estivesse lá. Agora, quanto à posição absoluta, o objeto Absolutely Position é removido do fluxo do documento e fica em uma nova camada, como objetos dentro da Figma Na Figma, todos os elementos estão quase totalmente posicionados. Todos eles existem em sua própria camada. posicionamento absoluto geralmente é o que usamos quando precisamos sobrepor elementos ou colocá-los um em cima do outro Agora, uma mensagem importante para o posicionamento absoluto está aqui. Ele nos diz o que esse objeto está posicionado em relação ao fato de termos o mesmo campo para o elemento relativo, mas esse sempre diz si mesmo porque é isso que o relativo faz É sempre uma posição em relação a si mesma e isso pode ser alterado. Mas o elemento absoluto, ele pode ser relativo a qualquer um de seus elementos pais. No início, você verá que geralmente é relativo ao elemento do corpo, que significa relativo à página inteira. Por exemplo, se definirmos o valor da posição esquerda como zero, será a posição zero pixels da borda esquerda do corpo. No momento, não está exatamente na borda porque tem margem nas laterais. Se colocarmos 100 pixels na posição esquerda, ele se moverá 100 pixels da borda. E se dermos a ela uma margem superior de zero pixel , ela se moverá até o topo da página. E aquele recipiente rosa vai parecer que a caixa não está realmente lá. Mas se verificarmos o navegador, veremos que a caixa absoluta ainda faz parte do contêiner Como eu disse, o elemento não vendido pode ser relativo a qualquer um de seus pais, se optarmos por fazê-lo Agora, para escolher o pai, há um pequeno truque que precisamos fazer. Temos que mudar a posição desse pai para qualquer coisa menos estática. Por exemplo, se quisermos que o R seja posicionado em relação ao recipiente rosa , temos que mudar a posição do contêiner para algo menos estático Normalmente, mudamos para relativo porque essa é a maneira mais fácil de não alterar o fluxo do documento. No instante em que você altera a posição do elemento pai, a caixa de posição obsoleta volta para o contêiner rosa e se posiciona ao redor desse contêiner se posiciona ao redor desse Se você verificar as configurações agora, verá que está escrito em relação ao contêiner principal. Como temos zero pixel na parte superior, ele está posicionado no canto superior esquerdo E à medida que alteramos esse valor, ele se moverá em relação ao contêiner pai. Agora, se quisermos que ele seja posicionado em relação a algum outro contêiner principal, por exemplo, o contêiner avô, precisaremos mudar a posição de estática para outra coisa nesse Mas há uma regra importante. Ele se posicionará em relação ao primeiro elemento pai que não tem uma posição estática. Então, agora, nada aconteceu quando mudamos a posição do contêiner principal porque o contêiner pai rosa ainda tem uma posição não estática, então a caixa continuará em relação àquela dentro E se mudarmos a posição dos contêineres principais para estática, isso acontecerá. Agora, como mostrado aqui, isso é relativo ao contêiner do avô Webflow tem algumas predefinições de posição úteis aqui para um elemento absoluto Essa é uma maneira rápida e prática de mudar as posições. Canto superior esquerdo, canto superior direito, quatro superiores, quatro inferiores e assim por diante. Você pode ver que, à medida que os valores abaixo são atualizados com eles, é mais fácil alinhar as coisas visualmente dessa forma, em vez de precisar calcular quantos pixels você deve colocar nos quatro lados A seguir está a posição fixa. Os elementos fixos são posicionados em relação à janela de visualização, ou seja, à parte visível da página em qualquer Se escolhermos uma das predefinições, ela será corrigida adequadamente Como você pode ver, o elemento fixo é exatamente isso, fixo. É como um objeto absoluto puxado para fora do fluxo do documento, sem afetar outros elementos, sentado em uma camada totalmente nova e, ao contrário do objeto absoluto, é fixo em relação à tela visível Não importa onde você o role, ele permanecerá fixo. Essa posição é frequentemente usada para barras de navegação. Você sabe quantos sites têm uma barra de navegação que sempre é fixada na parte superior da página enquanto você rola. Isso está usando uma posição fixa. Finalmente, temos a posição fixa, o que é um pouco complicado O que o sticky faz é agir como um elemento fixo, mas apenas dentro de seu contêiner principal, mais fácil de mostrar do que explicar Então, agora, nada acontece. Ele simplesmente age como um elemento estático normal porque duas condições precisam ser atendidas para que ele funcione. Primeiro, o pai precisa ser alto o suficiente que haja espaço para ele rolar para dentro. Caso contrário, não adianta. Então, vamos deixar o contêiner um pouco mais alto. Segunda condição, precisamos colocar algum valor personalizado geralmente na primeira posição. Por exemplo, podemos colocar zero. E agora você verá que funciona. O que acontece é que ele é fixado na tela enquanto percorremos o contêiner principal Quando o elemento adesivo atinge a parte inferior do contêiner principal, ele não passa por ele O que o valor máximo faz é dizer a partir de que ponto se deve manter. Nesse caso, ele cola no momento em que o elemento adesivo está a zero pixels da janela de visualização Se colocarmos algo como 30 pixels , ele ficará no momento em que 30 pixels da borda superior da tela. Para as coisas que crescem horizontalmente e precisam ficar na horizontal, em vez da posição superior , usaríamos o valor da posição esquerda ou direita Não vou demonstrar isso porque precisaríamos disso muito, muito raramente. Essas são todas as posições, estáticas, que é o padrão para quase todos os elementos, e fluem naturalmente com um documento relativo, que é meio estático, mas pode ser movido de seu lugar sem alterar o fluxo do documento e mover nenhum elemento próximo, absoluto, que é o posicionamento selvagem do grupo, ele é retirado do fluxo de documentos e é posicionado em relação ao primeiro pai que não tem uma posição estática Corrigido, que é igual ao absoluto, mas é relativo à janela de visualização, sendo fixado na tela visível, usada principalmente para barras de navegação, e o sticky, que é quase fixo, mas no estéreo é fixado apenas dentro dos limites do contêiner Tudo bem, essa é a ideia geral de posicionamento. No próximo vídeo, vamos pegar esse conhecimento e aplicá-lo às setas em nosso controle deslizante de depoimentos . Fique por aqui. 121. Webflow 2: setas deslizantes: Tudo bem Bem vindo de volta. Neste vídeo, finalmente cuidaremos dessas setas no controle deslizante No vídeo anterior, aprendemos uma técnica importante que será útil para posicionar adequadamente essas setas Para começar, vamos substituir os ícones de seta por nossos próprios ícones Podemos fazer isso simplesmente excluindo ícone existente e inserindo o elemento da imagem em seu lugar Basta arrastar um elemento de imagem dentro do bloco de seta e inserir a imagem da seta que vamos exportar do Pigma E o mesmo vale para a seta direita. Agora vamos precisar do recurso de posição para colocar essas setas na parte inferior. Agora vamos precisar do recurso de posição para colocar essas setas na parte inferior Se você der uma olhada nas configurações de posição, elas já estão definidas como obsoletas por padrão, ao contrário da posição estática usual, e isso explica por que as setas estão na parte superior do É isso que o posicionamento obsoleto faz. Ele retira o elemento do fluxo da página. Eles vivem em uma dimensão diferente, como camadas e figma. Isso é exatamente o que precisamos Posição obsoleta com um posicionamento no canto inferior direito Depois de pressionar na posição inferior direita, a seta será colocada no canto inferior direito do elemento deslizante Agora, por que o elemento deslizante? Porque é o primeiro pai que não tem uma posição estática. Lembre-se de que o truque do elemento absoluto é relativo ao primeiro pai não estático. Se não houver tal pai , ele será relativo ao corpo. Nesse caso, ele pularia para a parte inferior da página. Portanto, se você perceber que não funciona da maneira esperada, verifique o pai e verifique se está definido como relativo. Vamos verificar o design para ver as distâncias. As setas estão 60 pixels abaixo do controle deslizante. Agora, aqui está uma parte interessante. Precisamos adicionar 60 pixels em um desses valores de posição, mas qual deles? Vamos experimentar todos eles e ver o que acontece. Nenhum deles realmente funciona. Por quê? A seta está posicionada assim no canto inferior direito. Isso significa zero pixels da direita e zero pixels da parte inferior. Os valores da posição nos dizem exatamente isso. Se adicionarmos 60 pixels na parte inferior , ele se moverá 60 pixels para cima a partir da borda inferior Para que ele saia do controle deslizante , precisamos usar valores negativos Na verdade, funciona mais assim. Ele calcula a distância entre parte inferior do controle deslizante e a parte inferior do bloco de setas Muitas vezes, temos que compensar a altura do elemento A propósito, certifique-se de digitar PX ao lado de 60. Por padrão, como você pode ver, diz porcentagem. Portanto, o campo é definido como valor percentual. E se você digitar 60, ele pensará que você quer dizer 60%. Agora vamos aplicar a mesma classe à segunda seta, para que não precisemos fazer todas essas alterações novamente. Vamos mover a seta para a esquerda em direção à esquerda. Podemos fazer isso colocando algum valor na posição correta. Mas antes de fazermos isso, vamos dar à seta esquerda uma classe de combinação Caso contrário, as alterações serão aplicadas a ambas. Novamente, estamos atribuindo valor à direita porque estamos dizendo que você afaste esse valor da borda direita. Excelente. Vamos conferir a prévia e ver como ela funciona. Só há um problema. Se você observar mais de perto os blocos de setas, verá que eles estão meio que se sobrepondo As caixas são um pouco largas demais e, na pré-visualização, a caixa inteira pode ser clicada Assim, o usuário também pode interagir com o espaço vazio. Um pouco de interação com o espaço vazio é bom, então o usuário não precisa ser tão preciso ao mirar a flecha, mas o excesso a torna estranha Além disso, a sobreposição causará alguns problemas, pois esses são links Para corrigir isso, precisamos alterar a largura dos blocos de setas. Vamos dar um pouco de tamanho. Eu acho que 40 pixels é bom. Eu estilizei a seta para a direita, que tem a classe base Dessa forma, as duas setas foram atualizadas ao mesmo tempo por causa da classe base vinculada Há mais uma coisa que podemos fazer com flechas. Podemos escondê-los em cada extremidade. Podemos fazer isso nas configurações do controle deslizante. Na verdade, essa é uma melhor experiência do usuário. Dessa forma, o usuário sabe para que lado pode deslizar e ver quando os depoimentos chegaram ao fim E temos apenas uma última seção restante. O rodapé. Faremos isso a seguir. Fique por aqui. 122. Webflow 2: rodapé (aplicativo Team): Na parte de trás. Neste vídeo, vamos criar a seção final da página inicial, que é o rodapé Não vamos construí-lo do zero. Vamos usar o incrível recurso de copiar e colar do weblo. Basicamente, vamos copiar o rodapé inteiro do nosso projeto anterior de aplicativo de bate-papo e colá-lo no projeto atual Esse é um recurso útil. Ele permite que você reutilize componentes em seus projetos e também permite copiar diferentes elementos ou componentes dos projetos do Webflow de outras pessoas Por exemplo, o Webflow tem uma biblioteca de projetos de demonstração onde outros designers do weblo podem mostrar os Muitas vezes, se o autor permitir, você pode clonar o projeto e copiar qualquer componente de lá Você pode copiar a página inteira ou copiar partes. Você encontrará pessoas compartilhando aqui coisas como kits de interface de usuário ou kits de wireframe Você sabe, aquele kit de wireframe que usamos no Figma, sim, interfaces como essa também podem ser encontradas aqui Você terá que criar seus próprios kits e depois copiar e colar todos os elementos e componentes que desejar. Tudo bem, então vamos ver como esse copiar e colar funciona. Depois de ter um projeto em sua conta, abra os dois projetos no designer selecione o elemento que você deseja copiar. No nosso caso, seção de rodapé com tudo o que está dentro, pressione Control C ou Command C e, em seguida, vá para o projeto atual e selecione onde você deseja colá-lo No nosso caso, temos que selecionar o corpo, para que ele cole ali mesmo e não dentro de alguma outra seção. Em seguida, pressione Control B e pronto. Agora, todo o rodapé foi duplicado em nosso projeto atual Podemos editar tudo sobre esse rodapé sem afetar o projeto original anterior Os estilos foram levados consigo e novas classes foram criadas. Quando você copia classes com o mesmo nome , o weblo renomeará essa classe conflitante, exatamente como diz nesta mensagem Por exemplo, a seção do nome da classe que já temos em nosso projeto atual. Então, o Webflow deu um nome diferente à nossa seção duplicada. Outra coisa, você notará que depois de colar o rodapé, ele não tem a mesma aparência do original porque alguns dos estilos estão sendo herdados Por exemplo, o telefone de texto não foi transportado. Está mostrando a fonte do nosso site para este projeto, que é cabine. O telefone não foi transportado porque é herdado do corpo. Na realidade, isso é exatamente o que queremos. Não queremos a vanguarda desse projeto. Queremos que a fonte seja o que está dentro do nosso projeto. Tudo bem, agora vamos estilizar esse rodapé e fazer com que pareça com nossos designs Vamos começar com as classes, a seção e o contêiner duplicados e trocá-los para nossas classes existentes qualquer aula extra que não precisemos Na verdade, podemos eliminar e limpar em nosso site. Nós podemos fazer isso a partir daqui. Clique em limpar e o Webflow nos mostrará todas as classes que não estamos usando atualmente em nossa página e apenas removerá todas elas. E se não estivermos usando, isso significa que não precisamos deles. Em seguida, vamos criar uma classe de combinação para a seção de rodapé e alterar a cor do plano de fundo Além disso, vamos alterar o espaçamento na seção de rodapé porque é um pouco diferente da seção normal Agora, vamos editar os links de Potter. A cor é branca com 60% de opacidade. E também temos que mudar a cor Her para um azul diferente. E excelente. Agora, o logotipo, que é bem fácil. Próximas manchetes do rodapé. Esse é um pouco mais interessante. Ele não tem uma classe como Footer links. Isso porque, no projeto anterior, não tínhamos uma aula para essas manchetes de rodapé Em vez disso, usamos a tag H three. Então, quando copiamos o rodapé, Webflow apenas aplicou a tag H three do projeto atual Vamos fazer o mesmo estilo da tag H three. É claro que podemos criar uma nova classe ou mudar a abordagem para algo como h2h4 ou qualquer outra coisa, mas estilizar H Há um espaço extra no topo do título, como você pode ver Vamos nos livrar desse espaço. Tudo bem, até agora tudo bem. Temos que fixar a margem na seção de depoimentos. Você vê como a seta está muito perto do rodapé. Isso porque a flecha é um elemento absoluto. Ele ignorou a margem Atypil que está na seção e fica por cima Não se esqueça de criar uma nova classe de combinação, ou você também mudará todas as outras seções. Ele já tem uma classe de combinação, mas está tudo bem. Podemos ter várias classes de combinação. Vamos compensar esse preenchimento extra. E, por fim, basta atualizar o conteúdo. Está tudo pronto, e ainda temos uma coisa no formulário de e-mail. Nós vamos fazer isso no próximo vídeo. 123. Webflow 2: forma de rodapé: Neste vídeo, temos uma última coisa a fazer para finalizar o rodapé: o formulário de e-mail Este título aqui que está inscrito em nosso boletim informativo não é um link, é apenas um título, mas mesmo estilo de outros rodapés ou Precisamos transformar isso em um texto normal e remover o efeito Hor. É assim que faremos isso. Adicione um bloco de texto normal e atribua a ele a mesma classe de rodapé ou link. Agora, não é mais um link, mas o efeito Hover ainda está lá Para nos livrarmos disso, duplicaremos uma classe e a nomearemos como texto de inscrição Agora podemos acessar o efeito Hover e nos livrar dele. Excelente. Agora vamos criar o formulário do boletim informativo. Vamos começar copiando o formulário de e-mail que já temos acima e começar a partir daí. E, naturalmente o espaçamento será um problema aqui, especialmente quando reduzimos, então teremos que fazer alguns ajustes no layout O conteúdo aqui é uma caixa flexível organizada em colunas. Para começar, podemos nos livrar da largura que aplicamos às colunas do rodapé Isso faz com que tenham a mesma largura, independentemente do conteúdo interno, o que, neste caso, realmente não funcionará. Há também uma coluna vazia extra que anteriormente costumávamos ter um espaço igual entre o logotipo e os links. Desta vez, teremos que perdê-lo. E isso é uma melhoria extra. Agora, vamos alterar a largura da primeira coluna com o logotipo dentro. Está se alongando demais. Excelente. Isso pode ser suficiente. Agora vamos discar o formulário. Agora, este formulário está usando as classes acima, o formulário da seção de heróis, então precisamos duplicar toda vez que estivermos mudando algo interno, então não se esqueça disso Vamos começar com a cor de fundo do campo. Parece haver algum estilo padrão na borda do campo, então vamos mudar a borda para transparente ou zero pixels. Lembre-se de que o texto dentro do campo é o texto do espaço reservado, que pode ser estilizado na lista suspensa do estado Eu sei sei que o botão é um pouco mais divertido. Decidimos ter um botão que é uma seta e está no topo do campo, não fora dele, então temos que pagar por nossa criatividade. Felizmente, já aprendemos a usar a posição, para que possamos fazer esse Precisaremos fazer algumas coisas para que isso funcione. Primeiro, vamos transformar nosso botão em uma seta. Isso é bastante simples. Vamos colocar a seta como imagem de fundo do botão. Em botões normais, poderíamos inserir diretamente a seta interna, mas quando se trata de botões de formulário, eles funcionam de forma um pouco diferente. Aqui está o que precisamos fazer. Livre-se do texto e da mensagem de ponderação que está dentro das configurações do botão, mas coloque algo como uma única letra Não é possível deixá-lo completamente vazio porque caso contrário, o Webflow inserirá algum texto padrão Agora, remova a classe existente e crie uma nova classe, algo como botão de seta. Podemos facilmente fazer a letra desaparecer transformando o texto em uma cor transparente. Isso é tudo. Agora não estará visível. Problema resolvido. Em seguida, exporte a seta do FCMa e adicione-a como imagem de fundo do botão Temos que alterar algumas configurações aqui. Remova o ladrilho e posicione a imagem diretamente no centro. Em seguida, remova o fundo azul alterando-o para transparente. Precisamos combinar a altura do botão com a altura do campo. No momento, não está correspondendo porque o campo tem uma margem extra na parte inferior por padrão. Mude isso para zero e o botão deverá corresponder exatamente à altura. Caso contrário, verifique as configurações do formulário. É uma caixa flexível e algo pode estar lá dentro, ou simplesmente alterar a altura do botão manualmente, exatamente como o campo que deve fazer o trabalho Em seguida, vamos colocar o botão na posição absoluta. E alinhe-o à direita. No momento em que você fizer isso, o botão pode desaparecer. Agora, por que isso? Porque a posição é relativa ao corpo. Precisamos que a posição seja relativa ao seu elemento pai direto, que é a forma. Lembre-se do truque: se mudarmos a posição do pai para relativa ou outra coisa , o botão se posicionará em relação ao pai. E isso resolverá nosso problema. Agora, vamos fazer um teste na prévia. Sempre funcionando bem, exceto uma coisa para um e-mail muito longo o texto vai se misturar com a seta. Consertar isso é muito fácil. Só precisamos adicionar preenchimento extra ao elemento do campo. Dessa forma, o texto deixará de passar por baixo da seta. Não, é perfeito. E também precisamos alterar a mensagem de sucesso para ativar o estado de sucesso, selecionar Bloco de formulários e, nas configurações, clicar na guia Sucesso. Verifique se você selecionou o bloco do formulário e não o campo. Selecionar apenas o campo mostrará opções diferentes nas configurações. Agora, a caixa fica mais larga em comparação com o campo do formulário e altera toda a estrutura do rodapé Não é uma boa ideia. Para corrigir isso, podemos atribuir a todo o nosso bloco de formulários uma largura fixa, o mesmo tamanho que temos nos designs, que é 267 pixels Isso manterá o campo, as mensagens de sucesso e de erro do mesmo tamanho. Agora vamos discar o resto. O tamanho do texto é muito grande em comparação com outros conteúdos de rodapé Devemos combinar o tamanho da fonte. E talvez o último preenchimento. E também precisamos atualizar o conteúdo. Quanto à mensagem de erro, parece bom assim. Tudo bem, verifique a capacidade de resposta e veja como tudo fica dentro do modo de visualização Nossa página inicial está pronta e, na próxima seção, aprenderemos como usar a ferramenta de interação wFlows, para que possamos criar algumas animações para nossa página e dar vida a ela . Fique por aqui. 124. Interações: dando vida ao seu site: No lado direito, onde estão todos os painéis, há um dedicado às interações. Então, o que são interações? Simplificando, é quando o usuário interage com algum objeto em nossa página e, ao fazer isso, algo mais acontece com esse ou outro objeto Ao usar interações, podemos fazer que o mouse interaja com um elemento. Isso é chamado de gatilho e anima outro objeto, mesmo que ele não esteja completamente relacionado Isso é chamado de ação. Cada interação começa com o gatilho. Primeiro, precisamos selecionar um elemento com o qual queremos interagir e, em seguida, selecionar o tipo do gatilho. Por exemplo, a interação pode ser acionada clicar ou passar o mouse e outras opções Também existem acionadores de página, o que significa que não precisamos interagir com nenhum elemento específico, mas uma animação pode ser acionada por ações relacionadas à página Por exemplo, quando a página é carregada, cada tipo de acionador tem seu próprio conjunto de opções. Por exemplo, o mouse pode ser acionado ao passar o mouse ou com o mouse Uma é quando o mouse se move sobre o objeto e outra quando ele se afasta dele. E, finalmente, você tem ações ou, em outras palavras, animação. No menu suspenso, você verá que há várias predefinições, como fade, light e assim E a primeira opção é a animação do figurino, e é aí que a mágica acontece. Aqui, podemos especificar qual elemento será animado e criar um conjunto completo de ações cronometradas. E temos essa linha do tempo de animação com um controle granular sobre cada Então, essa é uma visão geral rápida e aproximada das interações. Não se assuste se você não pegou tudo. Aprenderemos isso lentamente fazendo e, no próximo vídeo, começaremos com algumas interações simples. Fique por aqui. 125. Interações: interação de cartões 1: Neste vídeo, vamos animar esses cartões aqui Ficaria muito legal se esses cartões, em vez de serem apenas estáticos , fossem fixados na foto, se os animássemos. Estou pensando em algo como deslizar de baixo para dentro. Para animar esses cartões, precisamos mudar um pouco nosso layout existente Os cartões fazem parte da imagem de fundo no momento e, como estão atualmente, podem ser animados. Precisaremos desses cartões como imagens independentes, então vamos até a Figma e exportá-los. Essas cartas têm uma sombra sobre elas. Eles não estão realmente fazendo muita coisa, então vamos nos livrar disso. Se realmente quisermos uma sombra, sempre podemos editar dentro do Webflow Vamos exportá-los em PNG. Eu testei isso com o SVG Export, mas acabou sendo um arquivo maior que o PNG Às vezes isso pode acontecer, então você pode acabar com um SVG grande, então preste atenção nele Além disso, precisamos exportar a foto de fundo de forma independente. R Então, vamos ver que tipo de layout temos e como podemos mudar esse layout. Portanto, há nosso flexbox, que tem dois blocos div internos, imagem e conteúdo Dentro do invólucro da imagem, temos nossa imagem atual. Aqui está o que poderíamos fazer. Podemos colocar todas as nossas três imagens dentro do invólucro de imagens ou usar um posicionamento obsoleto para os cartões Dessa forma, eles serão empilhados em cima da imagem de fundo I Vamos substituir a foto atual. Tudo bem. Agora, vamos dar a essa imagem a mesma classe e, em seguida, aplicar o posicionamento absoluto e partir daí. Lembre-se do importante ajuste com elementos absolutos, eles precisam de um pai com uma posição relativa. Como você pode ver aqui, agora, diz que é relativo ao corpo. Precisamos ser relativos ao invólucro da imagem. Dessa forma, vamos posicioná-los exatamente onde queremos. Então, vamos mudar a posição dos invólucros da imagem para relativa. A propósito, a segunda carta não desapareceu. Está embaixo do primeiro. Eles estão exatamente na mesma posição porque estamos usando a mesma classe. Agora podemos posicionar as cartas no canto superior direito e depois movê-las a partir daí. Podemos simplesmente pesquisar os valores dentro do Figma. Quanto eles estão separados das bordas e usam exatamente esses valores. Ao inserir esses valores, não se esqueça de adicionar PX no final Caso contrário, ele usará o valor percentual e enviará os cartões para outro lugar. Mas, por algum motivo, nossos valores da Figma simplesmente não funcionam no Webflow. Por que isso? A diferença vem do fato de que, no Webflow, estou trabalhando em um tamanho de tela menor, que tem 992 pixels de largura, enquanto o tamanho do meu quadro no Figma é Para resolver esse problema de capacidade de resposta, precisamos usar unidades responsivas como porcentagem, algo como 10% em ambos os lados Vamos posicionar a segunda placa em seu local dedicado para que possamos ver melhor com o que estamos trabalhando. Para fazer isso primeiro, adicione uma classe de combinação a ela e, em seguida, altere somente o valor da posição superior É melhor gerenciar o valor da posição correta pela classe base, pois ambas as cartas estarão sempre à mesma distância da direita. Agora, a posição da segunda placa não é muito consistente entre as telas. Por que isso? Porque os cartões não têm um tamanho responsivo Eles têm um tamanho fixo , independentemente da tela. Em uma tela menor, a placa superior cobre quase toda a metade da imagem de fundo, mas na tela maior, ela cobre apenas uma fração disso. Portanto, precisamos tornar os tamanhos dos cartões responsivos também. Podemos fazer isso facilmente dando aos cartões uma porcentagem de largura. Os tamanhos percentuais são relativos ao elemento pai, que nesse caso é a coluna da imagem. O tamanho da imagem principal é relativo à coluna dois da imagem. Então, quando a coluna da imagem encolhe, todas as imagens dentro dela diminuem Para combinar perfeitamente nossos designs, vou mudar temporariamente a imagem principal de volta para a que tínhamos antes com cartões nela, e vou usá-la como um guia para dimensionar os cartões e suas posições com precisão. Você não precisa fazer isso, mas é conveniente para mim agora. Vamos verificar a capacidade de resposta. Agradável. Agora, todas as cartas soam proporcionalmente à imagem principal E agora vamos fazer a mesma coisa com o segundo gráfico. Uma duplicata da classe de cartas em vez de criar outra classe de combinação, ela terá uma posição diferente à esquerda de qualquer maneira Desta vez, não precisamos alterar a posição relativa porque o invólucro da imagem é da mesma classe acima e está herdando o mesmo posicionamento relativo Excelente. Os layouts estão prontos Agora vamos criar interações. 126. Interações: interação de cartões 2: Tudo bem, nossos cartões estão todos configurados e prontos para serem animados Vamos começar com esse, na verdade. O cartão do calendário pode ser mais fácil. Então, primeiro passo, você selecionará primeiro o cartão do calendário e depois acessará o painel de interações. Certifique-se de ter isso selecionado. Caso contrário, não vamos configurar as interações no cartão, e você pode estar configurando outra coisa. Aqui, o Webflow tem duas versões do painel de interação. Há uma com o GSAP e a outra são as interações clássicas. Nesse caso, você deseja selecionar as interações do SAP. A partir dos gatilhos, agora clicamos em passar o mouse, rolar e Nesse caso, o que vamos fazer é animar esse cartão que, quando o usuário rola na página, esse cartão é animado e meio que desliza para dentro e Isso é um gatilho de rolagem. Vamos selecionar rolar e nomear esse slide. E o que podemos fazer esta carta é deslizar pela esquerda. Então, vamos chamar esse slide para a esquerda. Então, aqui está o que temos agora. Temos gatilhos e ações. Mostra exatamente o que está acontecendo. Acione o cartão de calendário de rolagem. Esse é o nosso gatilho. E agora temos ação. Neste menu suspenso, teremos várias predefinições diferentes que o Webflow acabou de criar e que já têm várias predefinições diferentes que o Webflow acabou de criar e que Webflow acabou de criar alguns valores aplicados, algumas animações diferentes com algumas animações diferentes E uma, que é a primeira, uma animação personalizada, que vai deixar a animação em branco do zero, e é isso que vamos selecionar, para possamos aprender facilmente como criar animações Então, selecione o primeiro. E agora vamos chegar a essa visualização de animação com uma linha do tempo aqui e algumas propriedades que podemos alterar A primeira coisa que queremos examinar são as propriedades. Então, no nosso caso, queremos que isso fique à esquerda e entre da esquerda para a direita. Isso é definido por essas duas colunas e duas diferentes. Toda animação sempre tem um ponto de partida. Qual é seu estado original? E então, onde isso termina? Ela cresce? Comece invisível, depois aparece a partir de dois. Isso é o que isso representa. Agora, no nosso caso, queremos que isso termine aqui exatamente como o projetamos. Então, na verdade, não queremos mudar nada nos dois. Queremos mudar algo no formulário. Então, selecione e clique novamente e isso desativará dois. Quando você não muda nada nos dois, o Webflow assume que você está acabando com estado inicial em que você o projetou Então, o que queremos mudar aqui? Temos algumas opções que já estão aqui. Podemos adicionar mais propriedades que podemos alterar e animar. Nesse caso, o que queremos mudar é a opacidade, porque queremos que isso apareça Queremos que isso seja invisível e depois apareça. Outra propriedade que queremos alterar é sua posição no eixo X. Queremos que ele se mova da esquerda para a direita, e esse é o eixo X. Não precisamos de Y e não precisamos de escala. Portanto, valores positivos nos fazem sair da direita. Precisamos basicamente de valores negativos. Negativo, digamos, 50 pixels. Você não quer muito longe, ele começará menos 50 pixels e depois retornará à posição original de zero pixel. E para a opacidade, queremos que ela comece com 0% de invisibilidade e vá para 100%, o que obviamente é o que ela fará sozinha Não precisamos especificar isso. Agora, essa é uma interação de rolagem que não estamos adotando porque é rolar no movimento e não é como aparecer de uma só vez E, como você pode ver, essa posição na linha do tempo também está se movendo A interação Be scroll tem dois tipos de interações. Uma é que ele aciona. Depois de rolar para algo, ele é acionado e reproduz outro que E o que precisamos fazer é voltar ao nosso gatilho. Esse é o nosso gatilho. Nós estávamos aqui agora. Foram ações. Foi aqui que criamos animações personalizadas. E vamos voltar ao gatilho de rolagem, clicar nele e teremos algumas opções aqui para alterar as configurações do gatilho. Cada gatilho terá um conjunto diferente de opções que podemos alterar, por exemplo, clicar terá suas próprias opções, mouse sobre, passar o mouse terá suas próprias opções e assim por diante O Scroll tem opções diferentes aqui. Dois tipos de controles que o pergaminho tem. Uma é esfregar na rolagem, e é isso que é selecionado por padrão Isso é esfoliação em rolo. Esfregar significa limpar a linha do Essa é uma linguagem de jargão que vem da animação. Então, o cronograma está se apagando. Essa coisa que é como percorrer a linha do tempo, é chamada de depuração É por isso que se chama scrub on Scroll. Então é isso que está acontecendo. Então, animar é rolar. Não é isso que queremos. O que queremos é a segunda, que são ações de gatilho. E o que isso faz é que, quando o gatilho é atingido, ele reproduz a animação de uma só vez. E depois de mudar isso para o gatilho, você verá esse botão de reprodução aqui. E, como você pode ver, essa é exatamente a animação que queremos. Agora, outra opção, vamos voltar às configurações do gatilho. Outra opção que precisamos mudar é onde ela realmente começa? Esse é o começo. Onde a rolagem é acionada? Ela é acionada quando esta carta aparece aqui? Ele é acionado quando aparece no meio? Ele é acionado quando aparece em algum lugar aqui? E é aqui que podemos definir exatamente onde o gatilho acontece. Temos duas opções aqui, que são elemento e janela de visualização E quando esses dois se alinham, é quando o gatilho acontece Então, neste caso, o que temos é parte superior do elemento aqui, encontra a parte inferior da janela de visualização visualização é igual à tela, tela visível da página, parte inferior da janela de visualização Quando esses dois se encontram, é quando você aciona a animação de rolagem. Como você pode ver, fechamos usando esses marcadores. Eu geralmente desativei, mas para este vídeo, na verdade, é muito bom. Eu posso mostrar exatamente onde esse gatilho acontece. E esse gatilho acontecerá aqui mesmo , bem no início de quando pudermos realmente, vamos lá e deixe-me mostrá-lo para você na página real. Estamos entrando, certo, e prestem atenção agora, é invisível E no momento em que eles emitem, aparece. Não é assim que queremos, certo? Queremos que ele apareça em algum lugar quando estivermos na metade da tela Então, o que vamos mudar aqui é, por exemplo, se você mudar de cima para baixo, como você pode ver, o gatilho agora muda para a parte inferior, mude para o centro. Vou mudar para o centro, mas vamos manter essa blusa. E agora vamos mudar a janela de visualização. Se mudarmos para o topo, ele será acionado aqui. Então, quando isso se encontra aqui, é muito longe, um bom lugar seria o centro. Então, aqui, quando cartão está em algum lugar aqui na página, é quando ele vai ser acionado. Esses campos também podem assumir valores como 20% a 80% da tela e palavras simples como superior central e inferior. Tudo bem, esse é o posicionamento perfeito. Vamos fazer um teste. Quando você está testando, role as animações para fora do local , para fora do local vá para a pré-visualização e comece de novo Você pode prestar atenção. Aqui está o começo, aqui está o início do scroller Quando esses dois vão se encontrar, é aí que o gatilho acontece. Isso é muito bom. Agora, se quiser jogar novamente, você precisa reiniciar o modo de visualização mais uma vez, voltar e jogaremos novamente. Tudo bem, isso é muito bom. Na verdade, vou desativar esses marcadores. É uma distração Agora, outra coisa, a animação não é muito suave. E para mudar alguma coisa na animação, voltamos às ações, e esta é a nossa animação, animação personalizada, vamos aqui. Agora, como podemos mudar e tornar essa animação um pouco mais suave? E isso acontece por meio de flexibilização e duração. No momento, a atenuação está definida como linear e temos algumas opções diferentes aqui, mas o que vou fazer é clicar nessa e mostrar aqui melhor como essa animação de atenuação Cada animação tem tempo e progresso. Essa é a hora. Isso é progresso. Hora do porquê progredir. Linear significa que, com o passar do tempo, mesma quantidade de progresso decorre na animação Então Bam Bam bum, bum, bum, bum, bum bum no mesmo ritmo. É por isso que linear não faz uma animação muito boa e interessante. Você pode visualizar isso aqui a caixa se move em uma taxa constante. Não é isso que queremos. outra opção que é facilitar. Facilitar significa que começa devagar. Vamos mudar isso para extremo para que você possa ver melhor. Começa muito devagar. Então está na hora, certo? Muito pouco progresso é feito no início. Não, não, não há progresso, e na metade, ele gira e depois acelera, e todo o progresso é Pode pré-visualizar isso. Veja, desacelera e depois acelera. Isso está facilitando. Então, temos facilidade. Vamos mudar para o extremo para torná-lo um pouco mais proeminente. O que acontece com facilidade é que ele começa super rápido. Então, muito progresso acontece muito, muito rápido, depois diminui a velocidade e tem uma aterrissagem muito suave. Vamos ver. Então começa muito rápido e depois tem uma aterrissagem suave muito boa. Para animações que aparecem permanecem e simplesmente caem em um só lugar, geralmente a facilidade é o que queremos Então, vamos manter isso tranquilo e extremo ou qualquer outra opção que também façamos. O que também pode ser selecionado nesse menu suspenso está disponível, poderoso Prato. Agora, é um pouco rápido demais. Portanto, a duração padrão do Webflow o torna um pouco rápido demais. Isso ocorre em segundos, pode ser alterado para milissegundos, 1 segundo, dois segundos ou meio segundo ou qualquer um dos pontos decimais que você Vamos tentar por 1 segundo. Aí está. Agora está tudo bem. Excelente. Vamos tentar. Perfeito. Isso é o que nós queremos. Tudo bem. Agora, a mesma coisa para os cartões de eventos. Vamos sair disso daqui. Novamente, selecionaremos uma das cartas do evento e clicaremos novamente em Scroll trigger. E desta vez, vamos fazer esse slide de baixo para baixo. Carro de eventos Trigger Scroll. Isso é o que nós queremos. Vamos alterar as configurações das configurações de rolagem. Agora, aqui está uma parte importante e uma coisa que eu quero que você garanta que você tenha o mesmo que eu, que é o alvo de cada alvo . Cada alvo da interação dentro Webflow terá maneiras diferentes de direcioná-lo Você pode direcionar a classe, você pode direcionar o elemento diretamente. Você pode segmentar uma página e algumas outras opções. Então, nesse caso, automaticamente porque nosso cartão tem uma classe aplicada a ele, ele é direcionado automaticamente, por padrão, ele selecionará uma classe E aqui, podemos selecionar qual classe queremos. E se você desativar isso, você pode ver que poderá selecionar qualquer uma das classes que você já criou dentro do seu site. E agora, uma vez que eu mudo isso para seta, por exemplo, isso ser selecionado não importa. Agora estamos animando a seta. Não estamos mais animando o cartão. Agora, o que você precisa prestar atenção aqui, depois de ter um cartão de evento, ter certeza de que essa classe e essa classe compartilham a classe base, porque se você acionar esse cara, vamos ver, role. Você verá que o Webflow adicionou classe base e a classe combinada, o que significa que somente esta carta será Queremos que essa animação e interação sejam aplicadas em ambas. Então é aqui que você tem que ter certeza. Classes, se suas cartas tiverem classes diferentes aplicadas a elas ou se tiverem uma classe combinada, certifique-se de selecionar a classe base E se você selecionou acidentalmente uma das cartas que tem uma classe de combinação aplicada a ela, basta removê-la basta removê-la E aperte enter ou simplesmente saia. E agora esse é o gatilho correto selecionado. Mas deixe-me voltar porque eu estrago as coisas aqui. Tudo bem. Portanto, temos o gatilho correto, o pergaminho e o carro do evento. Isso é o que você quer. Se você tem outras classes básicas , você tem que removê-las. Nas configurações, novamente, queremos que a parte superior do elemento encontre o centro da janela de visualização, e é aí que ele é acionado, e não queremos esfregar Queremos ações desencadeadoras. Feche e agora vamos adicionar uma ação. Animar. Na verdade, vou desativar esses marcadores. Eu sei que eles acabaram de entrar no. E nesse caso, o que queremos animar, certo? Queremos novamente animar a opacidade. Não queremos desativar, então eu seleciono entre desativar dois. Dois já estão definidos. Essa é a posição final. Queremos animar a opacidade e não queremos mais animar o eixo X. Queremos animar YXs. Não precisamos de escala. Então, queremos que ele se mova verticalmente. É isso que o YxS faz. Então, de baixo, vamos ver se são valores positivos ou valores negativos. Então, são valores positivos. Então, 50 pixels da parte inferior, 0% de opacidade, o que significa que é invisível, e então aparece Isso é exatamente o que queremos. Agora, duração, 1 segundo, tente combinar suas durações e atenuações em todos os lugares. É melhor quando o mesmo tipo de animação é animado na E tivemos facilidade de saída de energia para os selecionados. Vamos fazer um teste. Agradável. Isso está funcionando muito bem. Às vezes, apenas uma coisa a observar, às vezes o que acontece é que sua animação começará em algum lugar no meio dela. Se você estiver brincando com animador com um painel de interação, ele pode começar 0,5 segundo ou algo parecido, e começará no meio ou em algum lugar mais tarde Você não quer isso. Então, caso você tenha algum valor aqui, basta redefini-lo ou defini-lo como zero. E certo, vamos entrar no modo de visualização e fazer um teste. Perfeito. Mais uma vez. Excelente. Excelente. E essas são nossas animações. Essas interações foram muito simples de configurar, mas deram muita vida à página. Agora a página parece um pouco mais ativa, um pouco mais amigável e interativa. 127. Interações: interação de seta: Neste vídeo, vamos animar esse ícone de seta ao passar o mouse Então, sempre que passamos o mouse sobre o bloco de links, o ícone da seta se move levemente para a direita Animação muito simples. Em primeiro lugar, precisamos de classes corretas. Então, vamos renomear isso para algo um pouco mais memorável, como o ícone de seta Esse é o nosso ícone de seta, e o pai é nosso bloco de tinta. Podemos deixar isso como um bloco de links. Isso funciona para nós. Então, qual é o nosso elemento de gatilho? Nosso elemento acionador é todo o bloco de links. Então, sempre que eu passo o mouse aqui ou aqui, a seta precisa ser animada Então, tudo isso é o gatilho. Então, enquanto você selecionou o bloco de links, vá para o painel de interações e selecionaremos o gatilho em que passar o mouse Vamos chamar esse link de hover. E, por padrão, ele selecionará o gatilho correto, que é o bloco Link, a classe. Está selecionando o correto porque selecionamos o bloco de tinta antes de adicionarmos um novo gatilho Mas se você não fizer isso, obviamente você pode simplesmente mudar o alvo a partir daqui. Se você tiver um elemento ou outra coisa selecionada, altere-o para a classe e, a partir daqui, você pode simplesmente encontrar o bloco Link da classe e aplicá-lo. Agora, ao fazer isso, certifique-se ter um bloco de link de classe como classe base, e essa é a mesma classe aplicada a todos os outros blocos de link, pois queremos reutilizar essa interação em todos os lugares Então, se você tem uma classe base ou alguma outra classe duplicada aqui ou outra coisa, basta verificar isso, certifique-se de que outros elementos, outros blocos de links tenham a mesma coisa E se você acidentalmente selecionou uma com essas classes de combinação, basta remover essa classe de combinação extra Tudo bem. Então, qual é o tipo aqui? O tipo é mouse, Enter. Tudo bem. Isso é o que queremos neste caso. E agora precisamos configurar uma ação. Gosto da primeira, a animação personalizada. Aqui estamos definindo qual é o objetivo da nossa animação. Tínhamos como alvo um gatilho, com o qual interagimos Agora, o que é afetado e o que é animado. Neste momento, diz que o alvo é o elemento desencadeador. Nesse caso, bloqueio de links. Não é isso que queremos animar. Queremos animar o ícone da seta. Então, selecione isso e vá até o menu suspenso para que possamos alterar o destino da nossa animação Temos várias opções diferentes e duas opções principais que normalmente usaremos para direcionar elementos específicos. Uma é atingir o elemento. Elemento significa que você está visando um elemento específico muito, muito exclusivo Nesse caso, somente essa seta e não as outras setas abaixo. Como queremos reutilizar essa interação, uma abordagem melhor é direcionada usando uma classe porque eles também têm uma classe de ícone de seta compartilhada Dessa forma, podemos ter uma interação controlando todos os blocos de links. Então, vamos selecionar a classe. Agora, nesse caso, não queremos isso. Não queremos o bloco de links. Não estamos visando isso, então remova isso e aplique o ícone de seta ou qualquer classe que você tenha chamado de ícone Isso é bom. Então, basta verificar o alvo, o ícone de seta. Sempre que precede com um.in front, isso significa que é uma classe CSS É assim que você escreve classes CSS dentro do código. Ponha alguma coisa. Tudo bem. Agora, o que animamos Queremos que ele se mova ao passar o mouse, certo? Então, neste caso, não queremos que from seja definido porque from é como está. Queremos definir dois. Isso é o que acontece na animação. Então, se você selecionou uma opção, basta clicar nela em Desmarcada para que ela fique apagada e não toquemos E se você tiver dois desmarcados, você pode aplicá-los assim Agora podemos editar algumas das propriedades. Assim, podemos animar a flecha. Opacidade, não precisamos disso, movimento Y, não precisamos disso, escala, não precisamos O que precisamos é nos mover no eixo X. Então, digamos algo como oito pixels. Ele se move oito pixels, e valores positivos significam que eles se movem para a direita. Valores negativos significariam que eles se moveriam para a esquerda. Precisamos de algo positivo neste caso. Vamos ver, como você pode ver, ele se move e se anima Agora vamos testar essa prévia interna. Muito bom. Ele anima um pouco devagar demais, quando podemos alterar essa duração. Vamos tentar 0,2. Isso é muito bom. Mas, obviamente, como você pode ver, ele fica preso, certo? Ele fica em um só lugar. Queremos que isso se mova para a direita ao passar o mouse e fora quando o mouse sair para retornar ao seu lugar original Então, vamos voltar. Agora vamos configurar um novo gatilho. Esse gatilho estava basicamente com o mouse pressionado, e podemos definir um novo gatilho, outro passar o mouse, novamente no bloco de links Se, no seu caso, você selecionou acidentalmente algo na tela e isso mudou sua turma, basta selecionar a turma correta E nesse caso, mudaremos o tipo de mouse enter para mouse leave. Acione cada folha do mouse. Isso é exatamente o que queremos. E a partir do controle, podemos realmente mudar isso e mandar reverter, que coloca a animação trás em relação à sua posição atual E reverso significa reverter essas ações. O que quer que tenhamos configurado, obviamente temos apenas uma ação aqui. Portanto, essa ação simplesmente reverterá para trás. Vamos fazer um teste. Bom. Tudo funcionando bem. Agora vamos ver outros. E, como você pode ver, instantaneamente , os outros também estão funcionando, e não tivemos que aplicar a interação nos outros porque estamos usando classes. Apenas para solucionar alguns problemas, caso você tenha alguns erros e não esteja funcionando para você, caso os outros links não estejam funcionando para você, verifique isso primeiro, ative o painel da caneta e verifique se você tem o ícone de seta aqui, a seta que eu posso aplicar aqui, certo? Isso é SAM Isso é o mesmo. E isso é o mesmo aqui. Esse pequeno ícone de parafuso mostra que essa coisa faz parte de algum tipo de interação, seja um gatilho ou é afetada por uma interação Além disso, nosso painel nos mostra isso. Então, se você rolar um pouco, ele mostra todos os elementos que estão sendo acionados ou fazem parte de algum tipo de interação. Além disso, temos um painel aqui que mostrará todas as interações que temos nesta página. Portanto, certifique-se de que esse seja um ícone de seta. Todos eles compartilham a mesma classe, e todos os links Link Block compartilham a mesma classe. É um bloco de links para mim também. Bloco de links aqui também. É por isso que está funcionando. E então, dentro das interações, você precisa garantir que mouse mostre que são as classes que estão sendo selecionadas, Link blog, classe, Link blog, hover leave, class, Link block E dentro da animação, novamente, alvo, ícone de seta de classe. É isso que queremos. Agora, há um pequeno problema que precisamos corrigir porque em telas menores, você não conseguirá vê-lo. Se você prestar atenção, quando eu passo o mouse sobre este, o outro também anima Isso porque temos como alvo uma classe. Então, estamos dizendo que sempre que estou passando o mouse aqui para saber mais, anime uma classe chamada oicon e essa é uma classe Este é um ícone de herói com nome de classe, e este também. Então, todos os três estão animados. Mas não é isso que queremos. O que queremos é apenas animar o que está dentro do elemento acionador E nós temos essa opção. Então, está dentro das ações. Agora dentro do gatilho porque isso é um problema com o ícone Então, é o que está sendo animado. Então, dentro das ações. Ícone de seta. Aqui temos a opção de filtrar. E temos poucas opções aqui dentro do fogão direto, qualquer uma delas funcionaria internamente E a partir dessa lista suspensa, queremos dentro do elemento acionador Pode ter, por padrão classe selecionada ou outra coisa, mas precisamos de um elemento acionador. Agora, isso está nos dizendo que ícone de seta animada está dentro do elemento acionador, não todo ícone de seta Agora, vamos jogar isso de novo, expandir a tela para que possamos ver alguns deles juntos. E como você pode ver agora, quando eu passo o mouse sobre este, o outro não anima E tudo pronto. Tudo bem, então esses são os princípios básicos das interações Há infinitas possibilidades do que pode ser feito com interações no Webflow Você pode ir e eu aconselho fazer isso para ir à vitrine e você verá algumas pessoas fazendo animações e interações muito malucas, e nós lhe daremos boas ideias sobre o que pode ser feito dentro do Webflow e daremos algum tipo de inspiração para As interações no início podem parecer um pouco assustadoras, mas, na realidade, depois de superar esse pequeno obstáculo, você verá como elas podem ser simples, divertidas e quantas opções diferentes você tem para criar algo muito interativo, algo muito bonito E você poderá criar interações complexas com apenas alguns cliques, algo que provavelmente levaria meses de prática de Javascript para conseguir isso sem a Web. Mais vídeos sobre interações na parte avançada deste curso, algo para você aprofundar seu conhecimento e ganhar um pouco mais de Embora o que já aprendemos seja suficiente para você começar a trabalhar em projetos reais. Na próxima seção, cuidaremos da versão móvel da página inicial do nosso site neste caso E na seção seguinte, aprenderemos tudo sobre o CMS e como adicionar um blog ao nosso site 128. Responsivo: Navbar (aplicativo de equipe): Tudo bem. Neste vídeo, começaremos a otimizar a versão móvel da nossa página inicial, começando pela barra de navegação No projeto anterior, tornamos a barra de soneca totalmente visível no tablet Vamos ver se podemos fazer o mesmo aqui. Para mostrar os nablns no tablet, selecione Barra de navegação e vá para o Aqui você encontrará opções para o ícone do menu. Quando o ponto deslizante está no tablet, significa que o menu de hambúrguer será exibido no tablet e em todos os dispositivos menores Se o movermos para baixo, o tablet será desativado. Isso é excelente. Não há necessidade de mudar nada. Tudo se encaixa muito bem. Adoro quando as coisas funcionam facilmente assim. Vamos ver o que precisa ser feito para a barra Na no cenário móvel. São apenas cores e algum espaçamento. No projeto anterior, o menu suspenso estava se estendendo de ponta a ponta, mas aqui não está Isso porque temos um arranjo um pouco diferente para a barra N. Está dentro da seção de heróis, que tem acolchoamento, e o menu suspenso se estende apenas até a própria barra de soneca. Poderíamos nos esforçar, se quiséssemos , talvez usando margens negativas Mas, pessoalmente, estou muito bem com isso não se estendendo de ponta a ponta Então, vamos deixar como está. Para alterar a cor do botão do menu, basta alterar a cor do texto do bloco. São ícones de colagem de fontes, então a cor da fonte mudará. O mesmo vale para o tamanho. Só precisamos aumentar o tamanho da fonte e ela crescerá. Acho que usamos 30 pixels anteriormente. E vamos ajustar o preenchimento de todo o botão clicável É um pouco grande demais, o ideal seria ter o mesmo tamanho dos botões e links na barra, que têm 44 pixels de altura, eu acredito, então se o texto tiver 30 pixels, preenchimento de sete pixels deve fazer com que seja 44 Agora, vamos estilizar o estado aberto do menu para mostrar o menu enquanto estilizamos, selecionar qualquer elemento na barra NAB e, na guia de configuração, clique em Agora, os itens do menu são clicáveis e podemos selecioná-los e estilizá-los A cor de fundo vem desse bloco de menu NAV. Então, vamos selecioná-lo e mudar o plano de fundo para eu diria, nossa cor azul escura que usamos no rodapé E o mesmo vale para o plano de fundo no botão do menu. Ao fazer alterações no estado aberto do botão de menu, certifique-se de que o campo seletor mostre essa classe aberta verde É assim que definimos o estado aberto. Às vezes, o menu pode estar aberto, mas essa classe de estado aberto não está lá, então nenhuma alteração será refletida como você deseja. Basta atualizar a tela e abrir o menu novamente. Vamos dar um acolchoamento adequado. Você consegue perceber por que o botão está se estendendo até as bordas? É porque a tela está configurada para bloquear e os elementos do bloco ocupam toda a largura disponível. Precisamos alterá-lo para exibir o bloco embutido, assim como os botões padrão Agora está quase certo. Mas precisamos alinhá-lo à esquerda Tivemos esse desafio semelhante no projeto anterior. Os blocos embutidos agem como texto. Portanto, se o contêiner principal tiver um alinhamento central esquerdo ou direito, ele alterará esse Nesse caso, o pai não é o menu, mas diz que, na realidade, está alinhado à esquerda, não é Isso acontece às vezes. Então, vá e volte e aplique o alinhamento à esquerda manualmente para que a alteração seja refletida Além disso, vamos adicionar algumas margens esquerda e superior para alinhar o botão corretamente Tudo bem, está melhor. Finalmente, vou arredondar os cantos dos planos de fundo. Isso dará uma aparência um pouco mais bonita. Não precisamos disso nos quatro lados. Para o botão de menu, precisamos dele nos cantos superiores. Clique nessa opção para adicionar cantos individuais. Para o menu NaF, queremos todos os cantos além do canto superior direito Dessa forma, o botão e o menu se conectarão perfeitamente, como um único objeto Isso é perfeito. Agora, vamos ver como fica no modo de visualização. Uma última coisa, você vê que o logotipo aqui tem um pouco de preenchimento. Esse preenchimento não existe nas versões para tablet e desktop. O Webflow o está inserindo em versões móveis. Não precisamos desse acolchoamento porque temos o nosso, então livre-se dele Tudo bem. Passando para a versão retrato. Na verdade, não há nada que precise ser ajustado para a barra. As almofadas precisam ser consertadas, mas isso faz parte da seção de heróis Então, vamos fazer isso no próximo vídeo. 129. Seção responsiva: herói: E voltando a este vídeo, vamos adaptar a seção de heróis aos diferentes dispositivos. Não há muita coisa que precise ser feita, então deve ser rápido. Vamos reduzir a altura da seção do herói no tablet É muito alto nesse caso. Algo como 680 pixels deve ser bom. E precisamos ajustar a margem do conteúdo para que ele seja centralizado novamente. Cento e 30 pixels parecem bons. Passando para o cenário móvel. À primeira vista, parece que não há nada que precise ser corrigido aqui, mas podemos esquecer que não estamos vendo o verdadeiro cenário móvel aqui. Isso é muito alto. Para visualizar isso corretamente, o melhor é verificá-lo em um celular real, mas podemos reduzir a altura do navegador para ter uma ideia aproximada do que estamos trabalhando Isso é algo como vai parecer . Nada está visível aqui. espaçamento vertical é crucial no cenário móvel, por isso precisamos tornar nosso conteúdo mais compacto e confortável Primeiro, vamos reduzir o preenchimento das seções. E remova a altura fixa da seção do herói. Queremos que seja automático nesse caso, portanto, seja tão alto quanto o conteúdo. Ok. Da mesma forma, vamos reduzir o preenchimento horizontal Em dispositivos menores, o espaço é escasso. Eu diria que preenchimento de 30 pixels nas laterais em vez de 60. Em seguida, devemos reduzir um pouco o tamanho do telefone ou o tamanho padrão H um é 55 Isso pode ser um pouco grande demais para celulares. Eu escolheria 35 ou 40. Lembre-se de que o estilo do título vem da tag H one. Para adicionar a tag H one em todo o cenário móvel, primeiro remova qualquer classe aplicada e, no menu suspenso, selecione todos os títulos H Você deve obter o mesmo ícone de paisagem à esquerda. Isso é importante. Dessa forma, sabemos que estamos afetando todos os dispositivos móveis e não o tablet ou o desktop. Uma vez que caímos, podemos devolver aquela classe branca. Uma última coisa para a vista da paisagem. O conteúdo e a imagem de fundo estão interagindo muito mais agora Nas versões acima, o conteúdo está em uma área plana desfocada, mas aqui está cobrindo o rosto da modelo Isso dificulta a leitura do texto . Primeiro, vamos mover essa palavra para a próxima linha. Mas isso não é suficiente. Então, vamos adicionar uma sobreposição escura na imagem de fundo 30% parecem suficientes. E isso é feito para uma vista da paisagem. Então, o retrato precisa de mais algumas coisas. Primeiro, vamos mudar a direção do formulário para vertical para que o campo fique na parte superior do botão. Isso é muito fácil porque definimos esse formulário como uma caixa flexível Então, tudo o que precisamos fazer é mudar a direção. Verifique se você está selecionando o elemento correto. Há formulário e bloco de formulários. Em segundo lugar, precisamos corrigir o plano de fundo do herói. É aqui que esse posicionamento personalizado útil, porque nenhum dos alinhamentos predefinidos funciona para nós. Acho que 55% faz um trabalho melhor. Ok, vamos verificar a fluidez. Opa, o campo não está se estendendo até o fim porque tem uma largura máxima. Então, vamos removê-lo neste caso e configurá-lo como nenhum. Isso o tornará tão largo quanto o pai. Lembre-se de que todas as alterações de estilo que fizermos nessas versões afetam apenas para baixo e não para cima na hierarquia Portanto, esse campo só será refletido no retrato do celular e não na paisagem, tablet ou desktop. Tudo pronto para a seção de heróis, vamos dar uma olhada no modo de pré-visualização, certificando-se de que tudo esteja bonito e funcionando corretamente. Excelente. Continuaremos com as seções a seguir nos próximos vídeos. 130. Responsivo: seção de mockup: E seguindo em frente com a próxima seção. Para o tablet, é bem fácil. Só precisamos mover essa imagem mais para a esquerda. Ao clicar nele, você verá que ele tem uma margem negativa. É isso que faz com que ele saia tanto da página. Vamos diminuir a margem negativa. Eu acho que isso parece muito bom. -350 pixels. Verifique a fluidez e pronto. Agora, para o cenário móvel, vamos começar pelo preenchimento de seções Reduzimos o preenchimento horizontal na seção do herói São 30 pixels. Nunca comparamos isso com o resto das seções. Não podemos fazer a alteração nesta seção diretamente porque ela tem uma coboclasse aplicada Se reduzirmos o espaço, isso só se aplicará a essa classe de composição e a nenhuma das outras seções Então, o que podemos fazer é selecionar outra seção que não tenha uma classe compo como a próxima, por exemplo, ou podemos nos livrar da classe compo por um momento Estilize essa seção e, em seguida, coloque a classe coo de volta. Mas isso é mais complicado. Então, vamos estilizar esta seção abaixo. E, claro, isso também aplicou o preenchimento na seção acima. Da mesma forma, podemos alterar o valor mais apropriado e diminuí-lo para algo como -260 pixels Novamente, verifique a fluidez. Mais uma coisa que eu gostaria de corrigir aqui é o preenchimento vertical na seção No modo paisagem, o espaço vertical é muito limitado. Se você puder imaginar que está vendo isso em um cenário móvel real, entenderá que haverá algumas lacunas nas quais não está realmente vendo muito conteúdo. Uma coisa a observar sobre a visualização de paisagem móvel é que não é apenas a paisagem móvel, mas também alguns tablets em frotas ou o que quer que sejam chamados, porque você verá no visualizador que mostram tamanhos diferentes para dispositivos diferentes Portanto, não é apenas o cenário móvel na realidade, mas o chamamos cenário móvel apenas para facilitar as coisas. Ok, então temos um preenchimento vertical de 80 pixels em nossas seções padrão Vou reduzir isso para cerca de 60 pixels, assim como selecionamos anteriormente uma seção que não tem uma classe de conversa e estilizamos essa Ok, passando para o retrato móvel. A imagem nesta seção nem está visível. Então, o que vamos fazer é mudar a direção da caixa flexível para vertical Há outra direção que podemos mudar. Podemos reverter a ordem dentro da caixa flexível, e ter a imagem primeiro faz mais sentido E agora podemos estilizar a imagem. Um problema é que a imagem é muito pequena, então devemos aumentar o tamanho. Aumentar o tamanho da imagem tem alguns prós e contras. Não podemos alterar a largura nas configurações da imagem. Essas são configurações globais de imagem. Então, se mudarmos o tamanho aqui, isso afetará cada tamanho de tela. Veja agora a imagem sumiu da área de trabalho. Portanto, o local ideal é estilizá-lo a partir do painel de estilos. Aqui, há outro que não o faça. Não estilize a altura. Quando você estiliza a altura, ela não preserva a proporção e você obtém uma imagem de espaguete Os valores de largura são a melhor opção, mas aqui também algumas coisas se comportarão de maneira estranha Dependendo da situação, largura fixa ou a largura mínima funcionam melhor. Por exemplo, o valor da largura normal não altera o tamanho. Mas a largura mínima faz um bom trabalho. Não que isso seja um bug ou algum tipo de falha, geralmente há uma resposta para esses comportamentos misteriosos Nesse caso, a largura não ajuda muito porque há uma largura máxima de 100%, o que significa que ela deve ser tão larga quanto o contêiner principal. Basicamente, está substituindo a largura, mas a largura mínima ignora isso porque vem antes da largura máxima Não se preocupe se você não está entendendo tudo isso. Normalmente não me preocupo muito com o raciocínio. Eu apenas jogo com valores e vejo qual deles funciona. Tudo bem. Eu diria que 380 pixels parecem bons. Agora precisamos corrigir a margem negativa, talvez alinhar a borda da imagem com o conteúdo OK. Algo em torno de -90 pixels E vamos adicionar alguma margem na parte inferior. Perfeito. Vamos verificar a fluidez e estamos prontos para Não me preocupo muito com o tamanho da tela, menos de 320 pixels de largura. Essa é uma ocorrência muito rara especialmente para nosso público-alvo, que são Eu não acho que nenhum deles tenha Nokia em 95. Além disso, a fluidez parece ótima. Continuaremos com o resto no próximo vídeo. Fique por aqui. 131. 124 Corpo responsivo NOVA UI: Continuando de onde paramos, abordaremos as versões responsivas dessas duas seções do corpo Temos que abrir algum espaço nesta seção. Não há espaço suficiente para que tudo caiba. Para começar, podemos reduzir o espaço entre a imagem e o conteúdo, digamos de 60 a Em seguida, podemos deixar essas imagens saírem da página. Na realidade, assim como na maquete acima. Não há razão para não podermos fazer isso. Só precisamos definir uma margem negativa. Isso realmente parece muito legal. Ok, isso ainda não é suficiente. A imagem é muito pequena, e isso ocorre porque o conteúdo está ocupando muito espaço e fazendo com que a imagem diminua O que podemos fazer aqui é definir a largura máxima do conteúdo que ele não cresça além de um certo ponto. Primeiro, vamos renomear essa classe para um invólucro de conteúdo para que saibamos com o que estamos trabalhando Essa classe é compartilhada entre os três blocos de conteúdo. Agora podemos dar ao invólucro de conteúdo uma largura máxima de algo como 50%. Isso deve criar uma aparência mais equilibrada Na verdade, na versão para desktop, o conteúdo também está crescendo um pouco. Eu não tinha percebido isso antes, mas essa imagem é um pouco pequena demais nas telas estreitas do desktop. É bom em telas maiores, mas seria bom se aumentássemos as telas de desktop mais estreitas, como minha tela de 992 pixels aqui Agora podemos definir a largura máxima de 50% na área de trabalho, pois para telas maiores, ela será mais larga do que a que temos atualmente. Vou apenas aumentar a largura máxima atual em pixels para algo como 410 pixels Isso agora dá à imagem um pouco mais de espaço para crescer. 50% no máximo com, neste caso, claramente não é suficiente. Vamos aumentá-lo um pouco para que possamos ajustar o conteúdo adequadamente. Eu apenas moveria a imagem um pouco para a direita para que mais da garota ficasse visível. Agora, passando para o retrato móvel. O layout aqui já é vertical. Por quê? Porque estamos usando o mesmo contêiner de caixa flexível acima. E quando o estilizamos acima, o mesmo layout vertical foi aplicado a ele. Só precisamos reverter a ordem. Também precisamos eliminar a largura máxima dos invólucros de conteúdo Como queremos que o conteúdo preencha toda a largura, desta vez, não selecione nenhum no menu suspenso, basta ajustar a imagem Aqui, vou diminuir a margem negativa para algo como -30 pixels e adicionar um pouco de espaço abaixo para que ela não fique colada ao título e zero pixels no lado direito Essa é toda a fluidez , parece muito boa. Agora vamos aplicar ajustes semelhantes na segunda seção, começando pelo tablet, já que não tocamos em nada disso. Primeiro, o invólucro da imagem, precisamos das mesmas margens acima, mas em direções opostas Como você pode ver, há esse estouro por causa da imagem que está saindo da página Portanto, precisamos aplicar a classe de combinação que já temos para a seção de estouro Isso é tudo que o cenário móvel está se saindo muito bem sozinho. Agora, para o retrato móvel, precisamos exatamente do mesmo espaçamento da imagem acima O mesmo estilo não foi usado neste porque esse wrapper de imagem tem uma classe de combinação aplicada a E as margens esquerda-direita são substituídas por essa Mas não a margem inferior, essa também foi transportada para esse elemento. Aí está. O retrato do celular está ótimo. Verifique a capacidade de resposta. Verifique o modo de pré-visualização para ver as animações e tudo mais. Certifique-se de que tudo esteja bem e funcionando bem. No próximo vídeo, passaremos para a seção de depoimentos 132. Responsivo: testemunho e rodapé: A seção de depoimentos é relativamente simples. Para o tablet, está bom do jeito que está. Basta beber esse espaço entre o título e o slide. Metade disso deve ser bom. O cenário móvel também é muito bom. Agora, no modo retrato, precisamos alterar a largura dos cartões de depoimento Obviamente, poderemos colocar apenas uma carta por vez. A largura está sendo definida pelo elemento deslizante. Se mudarmos isso do valor do pixel para 100% , ele será tão largo quanto o contêiner principal. Então, basicamente, estendendo-se de ponta a ponta. Mas o que seria bom é mostrar ao usuário que há mais depoimentos, e não é apenas um depoimento solitário que Então, se mudarmos a largura para 90%, isso deve trazer uma pequena parte da próxima carta para a tela visível. Isso é ótimo, mas o conteúdo é um pouco estreito demais, então vamos abrir mais espaço para ele reduzindo as margens Primeiro, podemos metade da margem à direita, para que mais cartas apareçam a partir da próxima, o que significa que podemos aumentar a largura do slide em mais de 90% para talvez 95%. Agora, para o preenchimento, a E isso é tudo. A seguir, o rodapé O rodapé, se você se lembra, não criamos do zero Nós o copiamos do nosso projeto anterior. A melhor parte de reutilizar seus componentes em diferentes projetos é essa Eles já estão otimizados. Todas essas mudanças responsivas que fizemos no primeiro projeto serão carregadas com o componente quando você as copiar para um projeto diferente Não precisa fazer isso de novo. Uma grande economia de tempo. Embora precisemos fazer alguns ajustes porque alteramos o layout do rodapé Como esse problema de espaçamento, por exemplo, provavelmente em um projeto anterior, tínhamos um plano um pouco diferente para isso, mas aqui, se você verificar a versão para desktop, as colunas são distribuídas igualmente de ponta a ponta Esse também é um layout muito bom para o tablet. Então, vamos redefinir o estilo para que ele seja herdado da versão para desktop Agora, no cenário móvel, talvez pudéssemos mudar a justificativa de volta para a esquerda As colunas estão um pouco dispersas. Podemos dar um passo a mais e tentar alinhar a da empresa com a coluna de inscrição abaixo Só precisamos reduzir a largura da coluna do logotipo. E esse alinhamento faz com que pareça mais bonito. Dentro do retrato móvel, vamos retornar a largura da primeira coluna ao tamanho original porque há espaço e esse slogan fica melhor em duas linhas. A coluna de inscrição agora está enterrada na parte inferior do rodapé Esse não é realmente o melhor arranjo. Seria melhor se o trouxéssemos para o topo, porque ninguém vai se preocupar rolar até o Agora, veja como o Flexbox é incrível. O Flexhil tem seu próprio conjunto de configurações. Existem algumas configurações de dimensionamento nas quais cada criança pode substituir as configurações gerais de dimensionamento do flexbox, e também podemos substituir o alinhamento e Então, se mudarmos a ordem da nossa última coluna, podemos realmente criá-la primeiro. Mas não queremos isso exatamente primeiro. Preferimos que viesse depois da coluna do logotipo. Mas não se preocupe, também podemos fazer isso. Só precisamos dar à coluna do logotipo o mesmo estilo de ordem, e ela voltará ao topo. Ao fazer isso, verifique se você tem uma classe de combinação aplicada Caso contrário, essa alteração será aplicada a cada pé ou coluna, e isso não dará os resultados esperados. Eu não apliquei nada porque já tínhamos classes de combinação na primeira e na última coluna Tudo bem, vamos verificar a capacidade de resposta. Ok, temos esse problema de estouro com o campo de e-mail. A largura fixa de 267 pixels é demais nessa tela minúscula Então, em vez de fixo, podemos mudar para a largura máxima de 267 e alterar o valor fixo para 100%, que ele se estenda quando tiver espaço Um excelente. Oh, está bem agora. É isso mesmo. A página inicial está pronta e ficará ótima, independentemente do dispositivo ou do tamanho da tela Na próxima seção, vamos criar um blog, que é feito por um super poderoso CMS web low, e vamos aprender tudo sobre isso Vai ser divertido. Fique por aqui. 133. 126 CMS: Até agora, estamos construindo um site estático em vez de um site dinâmico. Isso provavelmente não diz muito a você. Deixe-me explicar. Digamos que temos uma página de artigo para nosso blog. Quando precisamos de uma nova postagem no blog, podemos simplesmente duplicar essa página e alterar o conteúdo, sem problemas Agora, e se em algum momento decidirmos que queremos fazer algumas alterações no layout desse modelo de página de artigo? Bem, não tem problema. Podemos copiar essas alterações para a segunda página do artigo. E quando você tem 100 páginas de artigos , está pronto para desistir de sua carreira de web design. Isso é conteúdo estático. Cada página é independente uma da outra e o conteúdo dessa postagem do blog existe somente nessa página específica. Insira conteúdo dinâmico. Desta vez, o conteúdo não está dentro de cada página , agora vive no banco de dados, bem organizado, como em uma E então, em qualquer lugar do site, podemos referenciar qualquer um desses itens do banco de dados e exibi-los na página. Esse banco de dados é chamado de CMS, abreviação de Content Management System Conheço um nome muito sexy com conteúdo dinâmico. Temos apenas um modelo de página de artigo, uma página mestra. Nessa página mestra, podemos referenciar esses itens do banco de dados sempre que qualquer página do artigo for carregada. O Webflow extrairá o conteúdo apropriado para cada item. Agora, se fizermos alguma alteração nessa página mestra, ela será refletida instantaneamente em todas as outras páginas, mesmo que tenhamos 5.000 delas. Esse é o poder do Webflow, CMS e do conteúdo dinâmico Vamos aprender tudo sobre isso nesta seção. Como criar itens do CMS, como criar páginas mestras, como referenciar o CMS e assim por diante. Fique por aqui. 134. Blog e CMS: Webflow CMS: Antes de começarmos a projetar e criar nossa página de postagem do Master Blog, precisamos primeiro criar um banco de dados para nosso blog. Isso acontece no Webflow CMS, que podemos acessar aqui Há um link para tutoriais em vídeo do Webflow. Eles têm esse lugar no site chamado Webflow University Há um ótimo conteúdo lá, e eles cobrem todos os aspectos do Webflow Definitivamente, recomendo me familiarizar com isso. Eles têm vídeos e artigos escritos. Portanto, o CMS ou o banco de dados de conteúdo do nosso site é dividido no que é chamado de coleções Imagine uma coleção como uma planilha independente. Digamos que se tivéssemos um site muito grande como o EU Demi, teríamos uma planilha para todos os cursos, uma planilha para todas as postagens do blog, uma planilha para todas as páginas de ajuda e suporte e assim por ajuda e suporte e Vamos criar nossa primeira coleção e ver o que acontece. Em nosso projeto, precisamos de uma coleção para postagens de blog. É aí que manteremos nossas postagens no blog com manchetes, imagens, tags, etc Aqui temos algumas opções para nomear a coleção, algumas configurações, uma parte importante criação de campos que farão parte dessa coleção. Novamente, pense nisso como uma planilha. Quando você cria uma nova, ela está vazia, então você precisa adicionar novas colunas, certo? E você intitulará essas colunas como título, tags corporais, Ral para a imagem, etc Isso é basicamente o que é, e cada linha faz parte de um grupo que faz uma postagem específica no blog. O Webflow aqui tem modelos de coleção. É para nos ajudar a começar a algumas coleções comuns que podemos criar. preciso dizer que a primeira é a postagem do blog, provavelmente a coleção mais comum para todos Depois de clicar nele, o Webflow criará uma nova coleção com alguns itens necessários para começarmos Vamos examinar cada um deles e editá-los conforme necessário em nosso blog. Primeiro, temos o nome da coleção. Isso não é grande coisa, o que você chama. É interno e não é visível para o público. O Webflow o chamou de postagem no blog, que podemos manter. Em seguida, vem o URL da coleção. É assim que a URL de cada postagem do bloco será estruturada, assim como mostra o exemplo abaixo, é a palavra que vem logo após o domínio. Aqui eu prefiro usar a palavra blog. É muito mais específico do que a palavra postagem. É um pouco mais comum usar um blog do que um post. E agora as coisas importantes. É disso que cada uma das postagens do nosso blog é feita. Cada campo é um tipo de conteúdo. Há muitos tipos diferentes de conteúdo. Por exemplo, há texto simples, existe texto rico, preocupe-se com isso mais tarde. Há uma imagem, há uma cor, há um interruptor para ligar ou desligar algo. Na verdade, vamos dar uma olhada na postagem do nosso blog e ver que tipo de preenchimentos precisamos Então, primeiro, temos uma manchete, certo? Isso no Webflow é igual ao nome da postagem do blog. Bem, não é exatamente a mesma coisa, mas podemos transformá-la em uma manchete e fazer com que o nome e a manchete sejam a mesma coisa texto de ajuda abaixo é para nós e para os membros da equipe que criarão novas postagens em bloco Não precisa colocar nada aqui. A manchete do título diz tudo. Então temos um autor e uma data. Nos preocuparemos com o autor mais tarde. Para a data, na verdade, não precisamos adicionar nenhum campo extra. Cada nova postagem de bloco que criarmos virá com uma data de criação. É por isso que ele não está incluído nessa lista de campos. Passando para a próxima, temos imagem principal de um poste de bloco. O Webflow já incluiu esse campo. Podemos colocá-lo no topo após o título para seguir a ordem A ordem realmente não importa. É só para nós. Em seguida, em nosso blog, temos o corpo da postagem. Grablo também incluiu um campo para isso. Esse campo tem opções extras verdadeiras, caracteres mínimos e máximos. Isso se precisarmos adicionar algum tipo de limitação ao conteúdo do nosso blog. Eu diria que não é necessário. E, finalmente, novamente, temos um autor que desta vez tem um pouco mais de informações sobre ele. Nos preocuparemos com o autor mais tarde. Vamos criar uma coleção separada para autores. resumo da postagem não está realmente na página do nosso blog, mas precisaremos dele na página inicial do blog onde mostramos todas as postagens do nosso blog em cartões No resumo da postagem, é uma boa ideia limitar o número de caracteres. Os cartões têm um layout muito rígido, então não queremos que um resumo seja muito longo. Em nossos projetos, usamos um resumo com no máximo três linhas. Isso tem cerca de 140 caracteres. Agora, quanto à imagem em miniatura, isso é algo que aparece no cartão de bloqueio Podemos ter isso como um campo independente ou podemos simplesmente reutilizar a mesma imagem principal Facilitaremos a criação de novas postagens no blog, com menos itens para carregar. Característica e cor, nós realmente não precisamos deles neste caso, então vamos nos livrar deles. E aí está. Temos quatro campos que formarão cada uma das nossas postagens de bloco. No lado direito, temos uma visualização prévia do editor que mostra todos esses quatro campos que temos em nossa coleção. Este formulário é o que preencheremos sempre que quisermos criar uma nova postagem no blog. Ok, clique em Criar coleção para concluir esta etapa. E isso é tudo. Nosso banco de dados de postagens no blog agora está pronto. Então, para recapitular, temos a capacidade de adicionar um banco de dados ao nosso site Em outras palavras, um CMS, um sistema de gerenciamento de conteúdo Dentro desse banco de dados, temos a capacidade de criar muitas coleções diferentes. Coleções são uma espécie de planilha que conterá todo o conteúdo que faz parte dela Por exemplo, postagem no blog. Essa é uma coleção e todas as postagens do blog em uma planilha Cada postagem do blog é feita de determinado conteúdo, como título, imagem principal e corpo da postagem Eles são chamados de campos de coleção, e temos controle total sobre isso, o que adicionamos e o que removemos. No próximo vídeo, adicionaremos novas postagens de bloqueio ao nosso CMS. Marque por aí. 135. Blog e CMS: itens de CMS: Nosso banco de dados para Block post está pronto. Agora podemos começar a criar e adicionar novas postagens no blog. Para voltar à coleção Block Post, clique no CMS e depois em Block Post Certifique-se de não clicar no ícone de engrenagem, que o levará ao local para editar as configurações. Esse é um lugar para adicionar novas postagens no blog, mas isso também pode ser feito no editor Podemos adicionar novas postagens de bloqueio a partir desse botão azul. Na verdade, o Webflow tem essa opção de gerar algum conteúdo fictício para nós Espere alguns segundos e você entenderá. Se você clicar em um deles, abrirá a postagem do blog. Aqui podemos ver todos os campos que criamos anteriormente. Desta vez, tudo preenchido com algum conteúdo fictício que o Webflow gerou para nós Há um título e uma imagem principal. Temos o corpo da postagem e o resumo da postagem. Tudo isso é editável mesmo depois de publicarmos e publicarmos nossa postagem. Vamos criar uma nova postagem no blog do zero para que possamos entender como cada um desses campos funciona Podemos usar o conteúdo de nossos designs. Então, vamos preencher cada um desses campos. Quando você insere o título, ele será usado automaticamente como URL Se você quiser ter algo diferente para o URL, não há problema. Você pode editar esse URL aqui. Eu mantenho manchetes e URLs sempre iguais. Só faz mais sentido dessa forma. Então temos a imagem principal. E eu vou fazer o upload dessa imagem aqui. Agora, o corpo da postagem é um tipo especial de filme. É chamado de rich text. Podemos colocar títulos no texto, subtítulos, imagens, vídeos, citações, marcadores e esse tipo Temos diferentes tipos de manchetes. Temos imagens. Não precisamos de arquivos individuais para todas essas coisas. Um arquivo de rich text pode cuidar de todo o conteúdo dessa forma E nesse campo de rich text, temos muita liberdade para estilizar o texto de maneiras diferentes ou adicionar vídeos do YouTube diretamente entre o texto. Esse evento tem alguns controles de layout para exibir o vídeo em várias posições diferentes. Embora não seja realmente assim o resultado final será, o resultado final depende de como estilizaremos esse bloco e falaremos mais sobre isso posteriormente. Por fim, temos um campo de resumo da postagem, que é esse. Clique em Criar e será adicionado ao banco de dados. O status tem essa mensagem preparada para publicação. Isso significa que na próxima vez que publicarmos nosso site, todas as postagens pendentes serão publicadas. Mas, no nosso caso, eles realmente não irão a lugar nenhum porque criamos apenas um banco de dados. Não criamos uma página de blog que extraia esse conteúdo do banco de dados. Faremos isso no próximo vídeo. 136. Blog e CMS: página da coleção: Então, criamos um banco de dados para o nosso blog, e tudo bem. Mas onde em nosso site isso é visível? Onde estão essas postagens do blog além estarem escondidas em algum lugar dentro do Webflow Bem, agora, em nenhum lugar, mas nos próximos vídeos, vamos revelá-los No momento em que criamos uma nova coleção dentro do CMS, uma nova página é criada automaticamente no Painel de Páginas Na parte superior, há páginas estáticas. É aí que estão nossas páginas iniciais e qualquer outra página que criamos que não faça parte do CMS Na parte inferior, temos essa página chamada páginas de coleção do CMS Essas são páginas mestras que podem ser preenchidas pelo conteúdo dinâmico do banco de No momento, temos uma página, modelo de postagem de blog. Eu chamo isso de MasterPage Webflow chama isso de modelo. De alguma forma, prefiro que Master Page faça mais sentido. Cada coleção de CMS recebe uma dessas páginas. No momento, está completamente em branco, assim como qualquer outra nova página que criamos. Mas esta página vai se transformar em nossa página de postagem de blog a partir de nossos designs. Funciona da mesma forma que qualquer outra página estática, com apenas uma diferença. Podemos vincular elementos aos itens do banco de dados. Deixe-me demonstrar. Por exemplo, temos um título na postagem do nosso blog, certo? Vamos adicionar um título Se nós mesmos escrevermos o texto dentro desse título , esse conteúdo será estático, assim como qualquer outra página Mas como essa é uma página do CMS, temos uma opção extra nas configurações desse título, um ponto roxo ao lado do campo de texto Ao clicar nele, você verá algo familiar. Alguns dos campos das configurações da coleção. Manchete da postagem de verão em algumas datas. Como esse é um título, podemos selecionar o título. Voila. Agora, esse elemento principal não é mais estático, é dinâmico e está extraindo conteúdo do banco de dados Deixe-me adicionar os outros dois campos, a imagem e o corpo da postagem. Assim como fizemos para o título, para a imagem, temos que adicionar um elemento de imagem Não podemos preencher um elemento de título com uma imagem ou um DVBlog com um Os tipos de campo e os tipos de elementos precisam corresponder. Bem, não é exatamente igual, mas seja compatível. Por exemplo, o campo de título em nosso CMS é texto simples, compatível com qualquer tipo de elemento de texto, seja título, bloco de texto Ok, então a mesma coisa que vamos fazer com a imagem, clique em Configurações de imagem e depois no ponto roxo. Aqui temos apenas uma opção, imagem principal, porque esse é o único campo em nosso banco de dados compatível com o elemento imagem, o que faz sentido. No momento em que seleciono o campo da imagem principal, ele vincula e extrai o conteúdo do banco de Deixe-me reduzir isso um pouco. Vamos adicionar o último item do CMS, corpo da postagem. Esse campo no CMS é um campo de rich text. Nunca tivemos que usar elementos de rich text até agora, e agora posso vincular esse elemento de rich text ao campo do corpo da postagem em nosso banco de dados E aí está. Ele é preenchido instantaneamente com o conteúdo que está dentro do CMS Agora, essa imagem e o texto do título fazem parte da mesma postagem do blog Qual deles mostra aqui realmente não importa. Assim que publicarmos esta página, todas essas postagens de registro serão publicadas e cada uma delas publicará seu próprio título, sua própria imagem e seu próprio texto Na barra de ferramentas superior, temos a opção de percorrer diferentes postagens de blog e ver como elas se parecem No momento, está tudo muito feio, mas vamos estilizar e criar nossa página como costumamos fazer O conteúdo dinâmico não afeta a forma como fazemos o design da página. Então, para recapitular, para cada coleção que criamos dentro do banco de dados CMS, Webflow cria automaticamente uma página Essa página, ao contrário de outras páginas, é uma página dinâmica. Ele tem a capacidade de se vincular a campos no banco de dados e extrair conteúdo de lá Somente campos e elementos compatíveis podem ser unidos, por exemplo, campos de imagem com elementos de imagem ou campos de texto simples com qualquer tipo de elemento de texto, como título, blog de texto, link etc No próximo vídeo, começaremos a criar e estilizar esta página de postagem do blog 137. Blog e CMS: barra de navegação e título: Neste vídeo, começaremos a criar nossa página de postagem no blog. Para acessar esta página, acesse o painel de páginas e, na parte inferior, você tem essa página com um ícone roxo. Esse é o único. Eu já adicionei todo esse conteúdo aqui, mas vou me livrar completamente dele e começar do zero. Então, com base em nossos designs, primeira coisa que precisamos é de uma barra de navegação. Obviamente, não vamos construí-lo do zero. Vamos copiá-lo da nossa página inicial e partir daí. Então, volte para a página inicial e selecione todo o elemento Navbar Certifique-se de selecionar tudo e não apenas o contêiner, clique em Controle C, volte para a página do bloco e cole lá. Quando você cola um objeto, clique primeiro na tela ou você receberá essa mensagem de erro. O Webflow precisa saber exatamente onde você está colando seu elemento Lá vamos nós. Bem, nada está visível agora porque nossa barra de navegação é branca Então, vamos estilizar os elementos dentro da nossa Navbar, assim como em nossos designs Começando com os links, no momento, eles são brancos, então precisamos tê-los escuros. Para fazer isso, precisamos primeiro aplicar uma classe de combinação e depois estilizá-la Caso contrário, isso mudará os dois originais na página inicial Em seguida, aplique a classe de combinação ao resto dos links. mesmo vale para o botão Nav, precisamos de uma classe de combinação extra O fundo do botão é nosso azul primário com 15% de opacidade Por fim, o logotipo, que precisamos exportar da FIGMA. Está colado nas bordas. Em nossa página inicial, a Navbar está dentro da seção de heróis, que tem É por isso que não está colado nas bordas. Mas aqui está fora dessa seção. Também poderíamos colocá-la dentro da seção aqui, mas uma opção melhor é simplesmente criar uma classe de combinação para o Nabbar e adicionar preenchimento diretamente E isso é tudo, a barra de navegação está pronta. Passando para o resto da página do bloco, temos o título, a imagem e o conteúdo Como de costume, vamos começar com uma seção e um contêiner. A seção é cinza. É isso que estamos usando na página inicial. Mas para o poste do bloco, decidimos usar branco liso. O problema com o bloqueio de postagens é que você deseja o máximo de legibilidade É um conteúdo longo e, se o contraste não for suficiente ou houver algum tipo de diminuição da legibilidade por algum outro motivo isso realmente nos prejudicará Criar uma seção branca é simples, apenas uma nova classe de combate, e isso é tudo. Certifique-se de usar outro nome, preferência algo específico para a classe base, como seção branca. Isso diz muito mais do que apenas branco, e garantimos que não entre em conflito com nenhuma outra classe. Eu estou bem. Agora, vamos adicionar um título. Já sabemos o que fazer com esse título, certo? Vamos vinculá-lo ao item do CMS. Excelente. Os limites do nosso poste de bloqueio nos designs são um pouco diferentes. Estamos usando um layout mais estreito com uma largura máxima de 700 pixels. E a largura máxima do nosso contêiner genérico aqui é de 1160 pixels Isso significa que precisamos criar um contêiner diferente para nossa postagem no blog. Então, vamos dar a ela uma classe combinada ou talvez até mesmo duplicar a classe e dar a ela uma largura máxima de 700 pixels Tudo bem, está parecendo bom. Em seguida, temos o segmento de autor e data, mas vamos fazer isso no próximo vídeo. 138. Blog e CMS: bloqueio de autor: Neste vídeo, vamos criar essa linha de autor e data abaixo do título Acho que a abordagem mais simples seria usar um flexbox para isso Vamos adicionar um novo bloco MTD e atribuir a ele o autor e a data da classe Em seguida, vamos adicionar uma imagem. Em seguida, precisamos de um nome para o autor. Adicione um blog de texto normal. Dê uma nova aula. Estilize como Figma. I Precisamos alterar a propriedade de alinhamento do flexbox para algo como center Em seguida, temos esse divisor. Poderíamos usar um colchete de linha para isso ou apenas estilizar um diblock com largura e cor de fundo Mas acho que o suporte de linha é mais fácil. Acho que é isso que estamos fazendo no Side fix M de qualquer maneira. Só precisamos de uma cor diferente para isso. E depois a data, vamos reutilizar o blog de texto do mesmo autor e até mesmo manter a A data é a data de publicação dessa postagem específica do blog. Já podemos vincular isso ao CMS. Não precisávamos criar o campo de data porque cada item do CMS vem com ele Temos até três opções de datas diferentes aqui. Nesse caso, publicar em é o que precisamos, mas como você pode ver, ele desaparece Isso porque ainda não publicamos nosso site ou nenhuma das postagens do blog, então esse campo de data está vazio. Vamos usar um campo de data diferente, talvez criado ou atualizado, e depois poderemos voltar a publicá-lo. Ou continue assim. A atualização também é um indicador de data bastante decente. Com datas, podemos até mesmo alterar o formato da data. Isso importará com base em onde nosso público-alvo mora. E, por fim, vamos adicionar uma margem em cima de tudo para separá-la do título Tudo bem, tudo está ótimo. Agora, o problema é o seguinte. Esse autor que acabamos de criar, é um conteúdo estático. Quando publicamos nossos posts no blog, todos eles terão o mesmo autor, mas isso não está certo, não é? Para um blogueiro independente, claro, é sempre o mesmo autor, mas para o site de uma empresa, sempre haverá mais de uma pessoa criando blogs para o site Também precisamos que essas informações do autor sejam dinâmicas, mas não criamos campos CMS para isso, então ainda não podemos vinculá-las ao banco de dados Vamos fazer isso no próximo vídeo. 139. Blog e CMS: campo de referência: Como discutimos anteriormente, os elementos do autor no momento são estáticos, mesma imagem e nome do autor para cada postagem do blog, mesmo que houvesse 5.000 postagens em bloco. Precisamos transformar os autores em conteúdo dinâmico. Dessa forma, teremos vários autores e escolheremos um para cada postagem do bloco. Há duas maneiras de transformar autor em conteúdo dinâmico. Uma delas é adicionar um avatar e o nome do autor como campos à nossa coleção de postagens de blog existente , algo assim. Então, toda vez que criarmos uma nova postagem no blog, poderemos fazer upload da imagem, nome ou qualquer outra informação relacionada ao autor. Em seguida, vincularíamos esses campos em nossa página e pronto. Mas isso significa que, para novas postagens no blog, teremos que inserir as informações do autor, fazer o upload de uma imagem e colocar o nome dele. Se você quiser a biografia ou outras informações deles , faça tudo isso e repita o mesmo processo para a próxima postagem, mesmo que o autor seja o mesmo. Felizmente, há outra opção. Podemos criar uma coleção separada para aors. Assim como fizemos com a postagem do blog, podemos criar um banco de dados CMS para carros onde salvaríamos todos os aors com seus perfis, fotos, nomes, biografias, informações de contato e qualquer outra informação E então podemos extrair todas essas informações do banco de dados para as postagens do nosso blog. Tudo bem, então vamos criar uma nova coleção para os autores Clique aqui para criar uma nova coleção. Na verdade, o Webflow também tem um modelo para autores, mas não vamos usar o modelo desta vez e adicionaremos campos do zero para que você possa entender melhor como isso funciona Então, para começar, precisamos de um nome. Qualquer coisa funciona aqui, isso é interno. Embora ele preencha automaticamente o URL com o mesmo nome , podemos mudar isso O URL é público e importa o que colocamos lá. Gosto de usar uma forma singular para o URL porque seria algo como os autores John Smith, e isso meio que faz mais sentido do que autores no plural Para os campos, o que precisamos? Obviamente, o nome que já está lá. Então temos um avatar ou, em outras palavras, foto de perfil. E também na parte inferior da postagem do nosso blog, o segmento de autores também tem uma pequena biografia Vamos adicionar esses campos. Quando adicionamos um novo campo, temos que escolher o tipo de campo, o campo e as informações serão afetados por isso. Nesse caso, vamos criar um campo para o avatar, então, obviamente, esse será um tipo de imagem. Podemos tornar esse campo obrigatório. Portanto, sempre que adicionamos um novo autor, garantimos que sempre haja uma foto de perfil enviada Em seguida, biografia do autor, bem simples. Novamente, um texto simples. Temos a opção de campo de linha única ou múltipla. Você pode ver como o campo muda no modo de visualização com várias linhas, e isso depende da empresa, mas poderíamos colocar a contagem máxima de caracteres para a biografia. É uma boa ideia. Dessa forma, não teremos um autor com uma biografia duas páginas e outra com uma frase. E crie uma coleção. É isso mesmo. Se precisarmos editar ou adicionar mais campos a essa coleção, não há problema. Sempre podemos fazer isso mais tarde. Finalmente, vamos fazer com que o Webflow adicione alguns itens fictícios a esta coleção Às vezes, pode ser necessário um pouco de atualização para aparecer. Tudo bem, nossa coleção está pronta. Vamos conectá-lo aos nossos elementos em nossa página. Exceto que podemos fazer isso agora. Não há opção para Avatar e nome do autor. Por quê? Porque essa é uma coleção totalmente independente que ainda não tem nada a ver com bloquear postagens. Então, precisamos criar algum tipo de link entre essas duas coleções, e isso acontece por meio de campos de referência. É apenas outro tipo de campo dentro da coleção. Vamos voltar para a coleção de postagens do blog. Clique no ícone de configuração e adicionaremos um novo campo. E escolha um tipo de referência. Agora, o que esse tipo de elemento faz é que podemos extrair informações de um banco de dados diferente, no nosso caso, a coleção do autor. E, em uma lista suspensa, selecione uma coleção apropriada, que é Faça com que seja necessário, salve e salve a coleção também. Agora, vamos entrar em uma das postagens do blog e você verá que temos um novo campo que é uma lista suspensa de autores E essa lista suspensa está examinando o banco de dados de aors e obtendo informações desse banco de Portanto, não precisamos fazer upload informações do autor toda vez que criamos uma nova postagem no blog. Vamos examinar todas as postagens do blog e escolher um autor para cada uma. Agora, quando voltarmos à nossa página mestra da postagem do blog, teremos mais opções nas configurações de encadernação. Há uma seção totalmente nova com arquivos da coleção do autor Novamente, esses campos são mostrados somente para elementos compatíveis. Avatar não está aqui, mas o Avatar está definitivamente disponível para o elemento de imagem. Selecione o nome do autor aqui e o avatar para a imagem. Agora, à medida que alternamos entre as diferentes postagens do blog, os autores atualizam adequadamente. entanto, há um problema com o avatar, mas vamos resolver isso no próximo vídeo. 140. Blog e CMS: ajuste do objeto: Paramos daqui, onde o avatar não está com a melhor aparência. Isso porque não estilizamos a imagem de forma que ela tenha a mesma aparência, independentemente do tipo de foto que enviamos No momento, ele muda a forma com base na própria imagem. A imagem que tínhamos antes da Figma já era oval e do tamanho certo É por isso que nenhum estilo foi necessário. Sem um estilo adequado , teríamos que fazer upload de imagens já recortadas e ovais E deixar isso para criadores de conteúdo e clientes é uma má ideia. Primeiro, isso adiciona trabalho extra. Em segundo lugar, teríamos que ensiná-los a fazer um corte oval e deixar muito espaço para erros. A melhor coisa é estilizar nosso espaço reservado de imagem de uma forma que fique ótima, independentemente da imagem inserida Primeiro, vamos torná-lo oval. Fazemos isso arredondando os cantos da borda. Então, precisamos que tenha a mesma largura e altura. Podemos aplicar esse valor nas configurações da imagem ou no painel Estilos. Tudo bem, o formato é bom, mas se você notar que a imagem interna está esticada, é o caso de todas as imagens que não têm dimensões iguais Ou seja, se a largura e a altura do arquivo de imagem original não forem do mesmo tamanho. Então, como podemos corrigir isso? CSS e Webflow têm uma propriedade útil para isso chamada ajuste de objeto No Webflow é encurtado para simplesmente caber. Tudo o que precisamos fazer aqui é aplicar a cobertura sob essa propriedade de ajuste. Essas configurações são bastante semelhantes às que você vê nos estilos de fundo. A capa aqui funciona exatamente como funciona dentro de imagens de fundo. A imagem cobre todo o espaço desse elemento e a quantidade excedente é simplesmente cortada Isso ainda tem as mesmas configurações de posição, assim como estilos de fundo, caso você precise alterar a posição. Mas, no nosso caso, precisamos centralizá-lo. Agora temos a melhor solução, que funcionará com todas as formas e formatos de imagem. Os criadores de conteúdo podem enviar o que quiserem. E tudo isso é feito com um cabeçalho da postagem do nosso blog. Fique por aqui para o resto. 141. Blog e CMS: imagem principal: Neste vídeo, vamos adicionar a imagem principal e, novamente, vinculá-la a um campo CMS Embora essa imagem seja mais larga em nossos designs, ela é mais larga do que o contêiner do conteúdo. São 900 pixels em vez de 700. Isso significa que não podemos colocar essa imagem dentro do mesmo contêiner de um título Precisamos de um recipiente diferente para isso. Então, vamos adicionar um novo contêiner, dar a ele uma nova classe e mover a imagem para dentro dele. Eu estou lá agora, está quase certo. Em nossos designs, há uma certa altura na imagem, o que a torna mais agradável. E, no momento, está apenas crescendo e diminuindo com base na imagem original Isso criará um layout que não é uniforme e, em alguns casos, tem uma aparência muito estranha Por exemplo, se fizermos upload de uma imagem vertical grande, ela preencherá grande parte da página, empurrando o texto para baixo Esse é, novamente, o mesmo problema que enfrentamos com o avatar do autor. Assim como da última vez, podemos resolver esse problema usando a propriedade de ajuste do objeto. Primeiro, precisamos dar a essa imagem a largura e a altura que desejamos. Para altura, são 450 pixels. A, mas o que fazemos com a largura? Não podemos dar 900 pixels porque nem sempre são 900. Quando a tela encolhe, precisamos que ela diminua. Agora, tecnicamente, podemos fazer isso porque a imagem já tem uma configuração padrão de 100% de largura máxima, então ela ainda diminuirá Mas eu prefiro usar um valor relativo e dar 100% de largura. Isso tornará a imagem tão larga quanto a mãe, que, nesse caso, é nosso contêiner de blocos modificado. Como aconteceu com os avatares, obteremos essa imagem deformada porque estamos alterando a proporção da imagem original, que vamos corrigir facilmente alterando o ajuste para a Perfeito. Agora é uniforme para qualquer tipo seja qual for a forma ou formato da imagem ou o tamanho, e terá a mesma posição e dimensões, e ficará ótima. Por fim, basta adicionar uma margem superior à imagem para combinar com o design É isso mesmo. A seguir, trabalharemos no corpo. Fique por aqui. 142. Blog e CMS: texto rico: Em seguida, precisamos adicionar o corpo da postagem. Adicionar isso é relativamente simples. Só precisamos arrastar um elemento de texto rico. Por que rich text? Porque esse é o tipo de campo dentro do CMS. Precisamos adicionar isso dentro de um contêiner diferente. O contêiner da imagem é mais largo que o resto, então precisamos do mesmo contêiner que criamos acima para o cabeçalho e colocar texto rico dentro dele. Tudo bem, está melhor. E vamos adicionar uma margem inferior ao elemento da imagem para criar uma separação. Vincule o campo CMS como você faz com qualquer outra coisa. Agora, aqui está uma parte divertida. Precisamos fazer algumas alterações de estilo em nosso elemento de rich text. Por exemplo, combine a cor do texto com a que temos nos designs. Decidimos usar uma cor mais escura no design e também precisamos de algum espaçamento entre parágrafos diferentes e Vamos começar com a cor. A maneira óbvia seria dar uma classe e alterar a cor da fonte. Isso estiliza parte do texto, mas não todo, especialmente o principal, o parágrafo. O parágrafo tem seu próprio estilo e está sendo substituído pela tag HTML de parágrafos, algo que criamos logo no início de nossa página inicial Como o rich text é apenas um elemento principal, um parágrafo, que é um elemento secundário, pode sobrescrever qualquer um dos estilos do rich text Isso significa que precisamos estilizar o parágrafo diretamente, mas no momento não temos acesso a ele. Depois de conectado ao CMS, podemos selecionar elementos individuais dentro dele Podemos desconectá-lo do CMS a partir daqui, mas isso exclui todo o conteúdo fictício que ele Então, vamos manter este conectado e adicionar outro rich text estático para que possamos estilizá-lo como quisermos. A primeira coisa que precisamos fazer ao estilizar um texto rico é aplicar uma classe a ele Isso é importante e você verá o porquê daqui a pouco. Vamos começar com um parágrafo. Se estilizarmos um parágrafo como costumamos fazer, você verá que isso só aplicará a cor vermelha a esse parágrafo específico. E nenhum outro parágrafo dentro desse bloco de texto de ponte. Para estilizarmos todos os parágrafos dentro do bloco de texto em forma de crista, precisamos fazer isso da mesma forma que costumamos fazer quando precisamos estilizar todos os parágrafos na lateral usando Clique fora do campo para poder selecionar elementos individuais novamente. Em seguida, selecione um dos parágrafos, remova qualquer classe, se houver alguma, e dentro do seletor, selecione todos os parágrafos Abaixo do seletor, você receberá essa pequena mensagem com o ícone de adição, seletor de rede e o nome da sua classe de Rich text, qualquer que seja o nome Se você não está recebendo essa mensagem , isso significa que você não tinha uma classe aplicada ao próprio bloco de Rich text. Sem a turma do blog principal em Rich Text, você receberá essa mensagem em vez disso. Portanto, certifique-se de primeiro fornecer à classe de soma Rich Text, qualquer classe exclusiva, não importa o nome que você dê a ela. Quando a classe estiver lá, selecionar uma tag lhe dará opção de aninhar a tag dentro da sua classe de Rich text. Isso se aplica não apenas aos parágrafos, mas a todo tipo de elemento dentro do bit Rich Text, cabeçalhos, aspas, itens da lista e assim por diante Você pode fazer uma anotação sobre este vídeo neste momento se quiser voltar a ele mais tarde. Então, aqui estão as etapas. Primeiro, certifique-se de que o Rich text tenha uma classe. Em segundo lugar, selecione o parágrafo dentro do seu rich text. Você pode selecionar um parágrafo enquanto estiver dentro do campo dessa forma. Clique no rich text e selecione um parágrafo como esse ou simplesmente selecione-o no navegador. Qualquer parágrafo serve. Em terceiro lugar, no seletor, selecione a tag rosa de todos os parágrafos Sem selecionar isso, você estará apenas apagando um parágrafo individual. Por fim, clique nesse ícone de adição para aninhar essa tag na classe principal de rich text É assim que deve ficar. Com uma seta dizendo que quando aninhado dentro do nome da sua classe, sem aninhamento, em vez de todos os parágrafos dentro do rich text, você estilizará todos os parágrafos dentro do nome da sua classe, sem aninhamento, em vez de todos os parágrafos dentro do rich text, você estilizará todos os parágrafos na lateral. Não é isso que queremos. Essa etapa é fácil de esquecer. Isso acontece comigo até hoje. E agora você pode usar o estilo. Agora, cada tipo de parágrafo pode ser estilizado de uma só vez. Até mesmo outros tipos de texto herdarão o estilo do parágrafo a menos que você tenha algum estilo mais específico aplicado a eles. Eu sei que textos ricos são um pouco confusos, mas você vai pegar o jeito depois de algumas vezes Se você remover a classe do rich text, verá que todos os novos estilos desaparecem. Então, basicamente, isso funciona exatamente como um estilo de classe normal, mas com controle granular extra para tipos individuais de conteúdo dentro dela A cor vermelha restante para outros textos vem da classe principal do rich text, então podemos editá-la lá. Agora você pode ver que todas essas alterações também estão sendo aplicadas ao nosso rich text dinâmico, porque ele tem a mesma classe. Se não tivesse a mesma classe , permaneceria inalterado Portanto, caso seu Rich text conectado não seja atualizado com os novos estilos, verifique se talvez não tenha uma classe ou tenha uma classe diferente aplicada a ele. Há mais tipos de conteúdo de texto que precisamos estilizar. Para estilizá-los, precisamos repetir o mesmo processo. Por exemplo, esse é um tipo de texto de citação. É um bom elemento dentro de blocos quando você quer citar alguém. Assim, podemos estilizá-los de forma diferente, torná-los em itálico, o que é mais adequado para citações Maior altura da linha, um pouco mais de espaço ao redor. Nem podemos estilizar a borda. Também podemos estilizar imagens. Por exemplo, o espaçamento é um pouco apertado em torno das imagens Apenas tenha uma coisa em mente. A imagem está dentro de outra coisa chamada figura. É melhor adicionar espaçamento a essa. Também inclui legenda interna. Também podemos estilizar marcadores. Eles são muito pequenos agora. Vou mantê-lo do mesmo tamanho do texto do parágrafo. R Temos que estilizar H três títulos porque agora eles são brancos Acho que os estilizamos branco em algum lugar da página inicial Tudo bem, não precisamos mudar tudo. Vamos ver como é o conteúdo real. Talvez adicione um pouco mais de espaçamento para g dois cabeçalhos. Você viu o que eu fiz aqui? Eu cometi um erro e esqueci de aninhar a tag dentro da classe Rich Text Então, quando fiz as mudanças de estilo, eu realmente estilizei todos os dois títulos H na lateral. Isso não é o que eu quero. Então, vou redefinir o estilo, aninhar a tag clicando neste ícone de adição e, em seguida, estilizar do zero. Livre-se do rich text estático e pronto. Se você precisar voltar e alterar o estilo, basta adicionar um novo texto rico e aplicar sua classe a ele. Então, isso é texto rico. Talvez seja um pouco difícil de entender no começo, mas com um pouco de prática, você vai pegar o jeito Ao contrário dos parágrafos, manchetes ou livros didáticos comuns, texto rico pode conter vários tipos de conteúdo. Obviamente, podemos colocá-los dentro de todos os títulos diferentes que temos Podemos colocar imagens, temos vídeos. Podemos citar, podemos colocar marcadores, números e todas essas coisas. E dentro do Webflow, elementos de estilo em rich text têm suas próprias instruções específicas que acabamos Basicamente, o primeiro passo é dar uma classe ao Rich text. Então, tem uma aula muito específica, certo? É preciso estilizar esse rich text específico primeiro, certo? Portanto, você não pode dizer basicamente que cada texto rico desta página, em parágrafo, dentro de todos esses blocos de preenchimento de texto rico terá esse tipo de estilo específico. Em vez disso, o que você está fazendo é dizer que um texto rico que tem esse estilo específico, digamos, é um texto rico muito bom. Os parágrafos dessas classes sempre serão assim. Isso é o que você está fazendo na realidade. E na segunda etapa, você seleciona a tag apropriada. Então, quando você quer, por exemplo, estilizar um parágrafo, você seleciona todos os parágrafos, certo? E então, na etapa três, você seleciona essa opção de aninhamento Basicamente, você está dizendo que eu não estou estilizando todos os parágrafos do site Estou estilizando parágrafos que estão aninhados nessa classe Você está dizendo: Ok, esta é a aula. E se eu estiver aplicando essa classe a um texto rico , toda vez que isso acontecer, todos os parágrafos internos serão assim Então, esses são os campos de rich text, como estilizá-los e como trabalhar com eles. O exemplo que eu dei foi dentro do CMS e dentro da postagem do blog Normalmente, este é um lugar onde usamos Rich text interno, como um blog ou artigo. Então, na maioria das vezes, estamos usando isso dentro do CMS. No entanto, isso não significa que não possamos usá-lo em outras páginas estáticas regulares. Todo o estilo, tudo funciona exatamente da mesma forma, e você pode adicioná-lo a uma página normal e estilizá-la exatamente com as mesmas instruções Portanto, as instruções sobre como estilizar texto rico não têm nada a ver com um CMS. É assim que o Rich Text funciona. 143. Blog e CMS: parte inferior do bloqueio do autor: E continuando de onde paramos, agora precisamos adicionar o bloco inferior do autor. Isso é bem simples. Vamos começar com o novo DV Block, que vamos transformar em flexbox e adicionar algum espaçamento Agora, para a imagem do perfil do autor, vamos copiar a acima para que tenhamos menos alterações a fazer. Agora precisamos de alguns blocos de texto, mas vamos colocá-los em outro bloco diurno para que fiquem bem agrupados no lado direito da foto Conecte o texto ao CMS. E depois, basta estilizar cada um individualmente. E vamos combinar todos os estilos da mesma forma que temos dentro dos designs. E aí está tudo bem e com estilo. Podemos verificar a aparência de diferentes postagens de bloqueio alterando a postagem de bloqueio na parte superior. E isso é tudo para este blog. 144. Componentes do Webflow: Neste vídeo, vamos adicionar um rodapé à página. Nada é mais fácil do que isso. Podemos copiar o rodapé da página inicial e colá-lo aqui Está pronto, nada deve mudar e já está responsivo Mas há uma maneira ainda melhor de fazer isso. Agora imagine que temos um site e ele tem muitas páginas, especialmente muitas páginas estáticas. Em cada uma dessas páginas, normalmente teremos a mesma barra de navegação e o mesmo rodapé, certo? E, às vezes, algumas seções, como uma seção de chamada à ação, talvez também sejam repetidas. Então, vamos ter, digamos, 20 ou dez páginas em todas essas páginas, o mesmo componente, como o rodapé, que se repete repetidamente Agora, quando queremos editar isso, certo? Queremos editar o rodapé, teríamos que editar um dos rodapés, certo, pegar esse rodapé , copiá-lo e substituí-lo em todas as Agora, quando se trata de estilos, podemos facilmente cuidar disso, certo? Já aprendemos que temos estilos CSS, temos tags HTML. Podemos simplesmente entrar em um lugar e alterar uma instância e, em todo o lado, tudo será atualizado. Mas e quanto ao conteúdo? Que tal todo o esqueleto e a estrutura do rodapé? Digamos que decidamos que uma coluna precisa ser removida, ou temos que substituir o texto de talvez apenas um pequeno título que esteja corrigindo e mudando alguma coisa Na figma, temos algo que resolve esse problema, os componentes Podemos criar um componente e, em seguida, qualquer outra instância desse componente pode ser atualizada em qualquer lugar, certo, até que seja substituída, obviamente Também temos algo semelhante no Webflow. Ao lado da guia de elementos, há uma guia para componentes. Os componentes do Webflow funcionam como componentes no FigMA. Lembra desses? Como fazer qualquer alteração no componente principal, mesmo no conteúdo, atualizará todas as outras instâncias desse componente. Os componentes no Webflow funcionam de forma semelhante. Podemos criar um componente a partir de qualquer coisa e depois reutilizá-lo em todo o site Vamos criar um componente a partir do rodapé. Vou excluir este e criar um componente a partir do da página inicial Para criar um componente, basta clicar com o botão direito do mouse no elemento. Nesse caso, a seção inteira que contém todo o material do rodapé e clique em Criar componente Dê um nome a ele e crie. Vai ficar verde. Isso significa que agora é um componente. Você também verá um indicador diferente dentro do navegador com o nome desse componente Agora vamos voltar para o poste do bloco. Se você for ao painel Componentes, verá que agora há um componente de rodapé lá Você pode rastrear esse componente na página ou no navegador, certifique-se de soltá-lo dentro do elemento do corpo E aí, o rodapé inteiro está aqui. Temos duas maneiras de fazer alterações nos componentes. Primeiro, podemos editar o componente principal. Isso significa que qualquer alteração será aplicada a todas as instâncias desse componente no site. Deixe-me arrastar outra instância aqui para que possamos ver as mudanças em tempo real. Para editar o componente mestre selecionado, clique em Editar componente. Você também pode clicar com o botão direito do mouse e fazer o mesmo. Todas as alterações que você fizer aqui serão aplicadas em todos os lugares. Não importa em qual página você está editando o componente. Se você clicar em editar componente , isso sempre afetará o componente mestre. Você pode mover os itens e prestar atenção ao que acontece com o item acima, pois você pode ver que as trocas também foram feitas lá, ou você pode alterar o texto. Todas as alterações também foram atualizadas por meio de outras instâncias. Não importa em qual página você está editando o componente. Se você clicar em editar componente , isso sempre afetará o mestre. Para sair do modo de edição, clique novamente na parte superior. Ou clique em qualquer outro lugar na tela ou pressione Escape. Agora vamos ver a página inicial. Lá. A mudança também foi refletida instantaneamente nessa instância. Para editá-lo novamente, basta repetir o processo. Agora, digamos que em determinadas páginas queremos conteúdo diferente, mas não queremos alterar o componente principal, apenas conteúdo diferente na página de bloqueio. Podemos fazer essas alterações usando as propriedades dos componentes. Entre no modo de edição do componente e, em seguida, selecione o elemento que você deseja editar dessa forma adicionando. E no painel de configurações ao lado do texto, clique nesse pequeno ícone e crie uma propriedade. Agora, isso nos permite sobrescrever o texto padrão desse título Para substituir o texto, primeiro você precisa sair do modo de edição dos componentes Lembre-se de que sempre que estiver no modo de edição, você está editando o componente mestre. Quando você clica em voltar para a instância e normalmente seleciona o componente , você está trabalhando com a instância. É confuso Sim, mas você vai entender isso depois de um pouco de prática. Como você pode ver, o elemento de texto agora é selecionável. E se clicarmos duas vezes nele, poderemos editar o texto. Certifique-se de clicar duas vezes no cabeçalho do elemento de texto e não clicar duas vezes acidentalmente no próprio componente, pois então você entrará no modo de edição, então clique duas vezes nesse elemento Agora podemos reescrever e sobrescrever o texto padrão. Isso não afetará o componente principal. Isso só mudará essa instância específica. Você pode repetir o mesmo processo para qualquer outro texto. Editar componente, propriedade do cabeçalho. Volte para a instância e comece a digitar. Ou talvez você queira ocultar esse formulário de e-mail em determinadas páginas. Pressionar a tecla delete não vai funcionar. O que você precisa fazer é selecionar o elemento, a coluna de rodapé inteira nesse caso e, em seguida, acessar as configurações desse elemento Aqui você verá uma opção de visibilidade. Clique em Criar. Isso abrirá uma opção para ocultar ou mostrar esse elemento nessa instância específica. Se selecionarmos oculto, você verá que ele saiu dessa instância, mas ainda está lá na outra. Elas são chamadas de propriedades do componente e, dependendo de um elemento selecionado, você terá opções diferentes. Mas digamos que queremos que esses elementos retornem à forma original e continuem extrair valores do componente mestre Podemos fazer isso redefinindo essas propriedades a partir desse painel Quando você seleciona uma instância de componente e não está no modo de edição, esse painel exibirá todas as propriedades que fazem parte desse componente, e as propriedades que estamos usando e substituindo estarão em azul, mais ou menos como no painel de estrelas Clique no texto azul e você terá opção de redefini-lo para o valor padrão da propriedade. E redefinir a visibilidade do formulário de e-mail trará de volta essa coluna oculta Uma coisa que você notará no painel de configurações é que todas as propriedades que criamos ainda estão lá. E se você tentar editar texto em seu componente mestre, verá que ele não permite que você faça isso. Isso porque as propriedades que criamos ainda existem e ainda estão conectadas. Enquanto a propriedade existir, edição da propriedade acontece nas configurações da propriedade, no mesmo local em que você criou a propriedade. Portanto, se precisar alterar o conteúdo na propriedade padrão, você pode fazer isso aqui. Você se livra dessas propriedades no modo de edição, acesse as configurações da propriedade e clique em Desconectar Agora, não temos mais nenhuma propriedade e todas as instâncias não serão editáveis e serão idênticas ao componente mestre Às vezes, queremos fazer grandes mudanças em uma das instâncias, como alterar a ordem das colunas. Nesse caso, precisamos desvincular completamente a instância do componente Isso pode ser feito com o botão direito do mouse, clique na instância e depois desvincule a instância Agora, isso é completamente independente do componente. Então, para recapitular, os componentes são reutilizáveis e conectados, muito úteis para seções e blocos repetidos, como barras de navegação e como barras de navegação Você pode criar um componente a partir de qualquer coisa. Você pode fazer certas alterações em instâncias como atualizar o texto ou ocultar determinados elementos. E para nossa página , está quase pronto. Só precisamos otimizar as versões responsivas, mas desta vez é bem simples A maior parte está pronta. Fique por aqui. 145. Blog e CMS: postagem responsiva: E estamos de volta para um design responsivo. Há muito pouco que precisa ser feito, que possamos cuidar disso em um único vídeo. A barra de navegação precisa de alguma edição para o modo paisagem. Primeiro, vamos fixar as margens. Nossa seção padrão tem preenchimento lateral de 30 pixels, mas a barra de navegação, nesse caso, tem um de 60 pixels Isso porque essa é uma barra de navegação um pouco diferente da nossa página inicial Então, basta diminuir o preenchimento para 30 pixels e pronto. O ícone do menu precisa de uma cor diferente. É branco, então não podemos vê-lo agora. Antes de mudarmos a cor, precisamos ter certeza de aplicar uma classe de combinação ao botão do menu, ou ela afetará a da página inicial Está parecendo bom. Vamos verificar o modo de pré-visualização. Então, aqui temos um pequeno conflito entre as cores do plano de fundo e do link e a cor do botão do menu. Os links estão aqui. Eles não desapareceram. Eles são apenas de cor escura pelo mesmo motivo do botão do menu. Acabamos de alterá-los anteriormente quando estávamos projetando nossa barra de navegação. E como eles precisam permanecer escuros, nesse caso, só podemos alterar o plano de fundo desse menu suspenso. Então, mudá-lo para um cinza muito claro, vai ficar bem. Tudo bem, o NABA está bem em todas as telas. Agora vamos verificar o cabeçalho com a imagem principal. O tablet está muito bom. O modo paisagem parece bom à primeira vista, mas pense novamente, ele será estreito. Portanto, a imagem tão alta ocupará muita tela visível. Essa imagem também funcionará melhor no modo paisagem, especialmente porque é isso que os criadores de conteúdo enviarão. Algo como 250 pixels de altura deve trazê-lo às dimensões adequadas. Da mesma forma, para o modo retrato, precisaremos reduzi-lo um pouco mais 150 pixels parecem bons. Também vou reduzir o espaçamento ao redor da imagem, tanto na paisagem quanto no Há algo divertido que podemos fazer com a imagem principal. No desktop, temos esse layout não tradicional imagem principal está saindo do contêiner principal, mas em telas menores, isso não acontece porque o preenchimento da seção está colocando tudo em um só lugar mas em telas menores, isso não acontece porque o preenchimento da seção está colocando tudo em Mas há uma maneira de contornar isso. Se dermos à imagem principal uma certa margem negativa, isso cancelará o preenchimento da seção Portanto, a seção do tablet tem um preenchimento de 60 pixels. Assim, podemos dar à imagem uma margem negativa de 60 pixels, e isso cancelará o preenchimento e ficará de ponta a ponta, fazendo com que pareça mais interessante Mas, em vez de aplicar a margem negativa diretamente na imagem principal, envolveremos a imagem em um bloco div e aplicaremos margens negativas a Isso também cairá em cascata para o celular, mas precisamos nos ajustar Na seção móvel, o preenchimento é de 30 pixels, então também precisamos ajustá-lo para 30 pixels negativos E isso será exatamente de ponta a ponta. Agora, vamos verificar o resto da página. O rich text não precisa de ajustes. Já é responsivo e tem uma boa aparência em todas as telas. No retrato, podemos até mesmo cortar um pouco de espaço à direita e aproximar o conteúdo dele Isso é tudo. O rodapé não precisa de nada. É o mesmo rodapé da página inicial e já está otimizado Esta página agora está totalmente pronta e com uma aparência deslumbrante. Nos próximos vídeos, criaremos a página inicial do blog 146. Blog e CMS: página inicial do blog: Agora, uma última página que nosso blog precisa é página inicial do blog, aquela grade que criamos A página inicial do blog será uma combinação de página estática com conteúdo dinâmico, ao contrário da página de postagem do blog, que é uma página totalmente dinâmica O que vamos fazer é criar uma página estática regular e, em seguida, inserir itens do CMS dentro dela Então, para começar, crie uma nova página. Vamos chamá-lo de blog e garantir que o slug de URL seja blog. Começando com a barra de navegação, é exatamente igual à da página de postagem do nosso blog, então podemos copiá-la Mas, em vez de copiar, é melhor criar um componente a partir dele. Com o botão direito, clique na barra de navegação e selecione Criar componente. Chame-o de navbar e estamos bem. Agora podemos arrastar isso diretamente na nossa página de bloqueio. Em seguida, precisamos da seção e do contêiner usuais. Temos um pequeno problema com cor de fundo da barra de navegação aqui porque precisamos que ela seja cinza Poderíamos arrastá-lo para dentro de uma seção, mas precisaríamos trocar os acolchoamentos e todas essas coisas Poderíamos criar uma classe de combinação e dar a ela um fundo cinza, mas isso significa que precisaremos desvinculá-la do componente, o que não é um problema, mas é bom que ela seja vinculada A melhor opção é colocar a barra de navegação dentro de outro bloco div e dar a esse bloco div uma cor de fundo Todas essas opções são apropriadas e válidas, mas essa foi a melhor porque eu não precisei alterar nenhum dos elementos padrão ou símbolos. Agora, vamos adicionar um título e subtítulo, bem simples E nada precisa ser ajustado nesse caso. Agora, para a parte divertida, primeiro, vamos criar um cartão estático depois descobrir como transformá-lo em um item dinâmico que extrai conteúdo do CMS Vamos adicionar um novo bloco DO e atribuir a ele uma classe de grade de blocos. É aí que manteremos todos os cartões de bloco com uma margem superior de 60 pixels. Em seguida, precisamos de um novo desbloqueio chamado cartão de bloqueio. Vamos fazer esse fundo branco. Dê os cantos arredondados e um pouco de largura. Por enquanto, vamos dar a esse cartão uma largura fixa. Não vamos usar uma largura fixa no final porque vamos organizá-la em um layout de três colunas. Mas, por enquanto, vamos fazer isso para que possamos ver corretamente o que estamos projetando. Ele desaparece quando damos uma largura, está vazio. É por isso. Não se preocupe. Em seguida, precisamos de uma miniatura. Isso precisa de uma altura. A altura exata dos desenhos será suficiente. Podemos adicionar uma imagem aleatória por enquanto para que possamos ver o que está acontecendo. E vamos alterar a configuração de ajuste para cobrir para que a imagem não pareça distorcida Há apenas uma coisa: o cartão de bloco tem cantos arredondados, mas essa miniatura não Está saindo dos cantos com suas bordas pontiagudas. Isso acontece porque, por padrão, estouro é visível em qualquer bloco div Mas se alterarmos o transbordamento para oculto no cartão de bloqueio , isso cortará tudo que estiver fora dos limites, arredondando assim os cantos da miniatura Em seguida, precisamos de conteúdo, que vamos agrupar em um bloco div Dê a ele um preenchimento de 20 pixels. Vamos estilizar o título em um parágrafo. Para o cabeçalho, podemos criar uma das tags, talvez H dois ou H três. Lembre-se de como estilizar as tags de título, alterar a tag nas configurações, depois ir para o seletor e, no final, você poderá selecionar essa tag específica e aplicar todos os estilos de gravação dos designs, 22 pixels em negrito e assim por diante E uma última coisa: remova a margem superior dela. Agora, para o autor e o bloco de data, precisaremos de um novo bloco de fazer para isso. Já temos exatamente o mesmo bloco na página de postagem, então vou tentar reutilizar a mesma classe aqui No entanto, precisará de ajustes. Vamos verificar as classes que usamos lá. Se aplicarmos essas classes, devemos obter os mesmos resultados. Copiar seria uma opção mais fácil, mas não funciona com itens dinâmicos , pois eles estão vinculados. Tudo bem, agora vamos ajustar isso usando classes de combinação. O avatar tem 30 pixels em vez de 40. O texto tem 12 pixels. E tem um espaçamento diferente na lateral, então vamos ajustar isso também. E, finalmente, a margem superior. Uma coisa que eu gostaria de acrescentar a esta carta é o efeito de passar o mouse. Uma coisa que podemos fazer é adicionar uma sombra de fundo ao passar o mouse Isso seria uma boa interação. Já sabemos como criar a sombra, certo? Nos cartões, fizemos isso nos cartões de depoimento, e podemos fazer exatamente o mesmo aqui e podemos simplesmente reutilizar os mesmos valores para a sombra Vamos adicionar um efeito de transição, para que não seja tão abrupto e irregular. Há mais um efeito de foco que podemos adicionar. Poderíamos fazer a carta se mover um pouco. Isso com uma sombra criará um efeito de carta sendo levantada no ar Muito simples de fazer no estado de foco e com efeito de transformação E no eixo vertical, mova cerca de dois pixels. Precisamos de menos dois pixels para levantá-lo. Valores positivos o moverão para baixo. Não precisamos adicionar o efeito de transição porque adicionamos um para todas as propriedades, então isso também cuida da transição da mudança. É por isso que gosto de usar todas as transições de propriedades em vez de uma individual para cada atributo. Excelente. A placa está pronta, mas ainda não vamos conectá-la ao CMS Faremos isso no próximo vídeo. Agora, vamos terminar a página. Precisamos adicionar o rodapé, que é fácil, pois basta arrastar um componente de rodapé na E pronto, super fácil. Agora vamos criar um link para essa página de bloqueio para que as pessoas possam acessar essa página de bloqueio pela barra de navegação ou pelo rodapé Em seguida, selecione o link e vá para a configuração do Spanel. Conectado à página de bloqueio, que agora aparece em um menu suspenso. E a mesma coisa no rodapé. E não vamos esquecer a barra de navegação da página inicial porque a barra de navegação não está conectada ao componente E isso é tudo. Agora, a página de bloqueio pode ser acessada de qualquer lugar do site. Tudo bem, em seguida, conectaremos a rede ao CMS. Fique por aqui. 147. Lista de coleções: Há duas maneiras de extrair itens do CMS. Uma delas é usar páginas de coleção. Isso é o que fizemos com a postagem do blog. Cada nova coleção que criarmos terá uma página de coleção criada automaticamente para eles, que podemos acessar aqui. Mas e se quisermos levar o conteúdo do CMS para outro lugar? Por exemplo, em páginas estáticas como a página inicial ou na página do blog, onde temos todos esses cartões de bloqueio Insira a lista de coleções. A lista de coleções é um elemento que pode ser arrastado do painel de elementos em qualquer página e em qualquer lugar da página Quando você arrasta uma lista de coleções na página, você recebe um monte de caixas roxas vazias. Nada para ver aqui ainda. Primeiro, precisamos conectá-lo a uma coleção específica. No nosso caso, postagens no blog. Agora entendemos isso. As caixas ainda estão vazias, mas cada caixa corresponde à postagem do bloco em nosso banco de dados. A lista de coleções, por padrão, exibe todos os itens desse banco de dados específico. Temos controle sobre quantos mostrar por vez, mas discutiremos isso mais tarde. Também recebemos esses controles de layout. Nossa grade de blocos tem três colunas, então podemos facilmente mudá-la para ela. Agora, nossos cartões de bloco serão exibidos em uma grade de três colunas, exatamente como pretendíamos. Bem, ainda não. Eles ainda estão vazios. Se você verificar o modo de visualização, eles desaparecerão. Para começar a vincular elementos ao CMS, primeiro precisamos arrastar os elementos para dentro de uma dessas caixas roxas Depois de fazermos isso, cada elemento interno ganhará qualidades dinâmicas e teremos opção de nos conectar a um campo específico do CMS Nesse caso, precisamos arrastar todo o cartão de bloqueio em uma das caixas Não importa qual. Não há como selecionar o cartão de bloqueio inteiro na tela, então certifique-se de selecioná-lo no navegador Em seguida, enquanto estiver selecionado, clique e arraste-o em uma das caixas roxas. Se isso for complicado, você pode fazer isso a partir do painel do navegador e arrastá-lo para dentro do item da coleção Tudo bem, tenho certeza que você tem dúvidas sobre o que acabou de acontecer, por que as cartas do bloco se multiplicaram O problema é que a lista de coleções funciona como uma página de coleção. Um significa que todos agem como um organismo, como uma espécie de mente colmeia Depois de vincularmos os elementos aos campos do CMS, conteúdo apropriado será extraído Então, vamos conectar os elementos aos campos apropriados. Veja no momento em que você se conectou ao campo CMS, o título de cada cartão é atualizado instantaneamente com base na postagem de bloco específica à qual eles estão conectados Até que façamos essas conexões , todos os elementos são normais, elementos estáticos, e cada item será exatamente a mesma coisa. Até agora, tudo bem. E vamos mudar a data para um formato mais curto. Precisamos fazer algumas alterações no espaçamento. Primeiro, vamos remover essa largura fixa da placa de bloco. Isso vai atrapalhar e bagunçar as coisas. Não queremos um cartão fixo, queremos que ele se estique e encolha de acordo com a largura da página Já existe algum espaçamento aplicado ao item da coleção por padrão Podemos adicioná-lo lá em vez de adicionar novas propriedades de espaçamento ao cartão de bloco Ele tem preenchimento de dez pixels nas laterais. Em nossos designs, o espaço entre cada cartão é de 30 pixels, ou seja, 15 pixels nas laterais. E também a margem inferior ou o preenchimento. Realmente não importa, nenhum deles funciona. Agora, vamos cuidar dessa distribuição ímpar das cartas Isso acontece quando as alturas de cada item são diferentes, então eles são dispostos de forma confusa, quebrando nossa grade organizada Podemos corrigir isso facilmente com um flexbox. Portanto, precisamos aplicar o flexbox ao primeiro pai que contém esses itens de coleção Esta é a lista da coleção. Certifique-se de não selecionar o invólucro da lista de coleções. É um avô com todas essas coisas lá dentro. Primeiro, você terá todos os itens compactados em uma única linha. Tudo o que precisamos fazer aqui é habilitar o empacotamento. Então, obtemos exatamente o layout que estamos buscando. Só tem uma coisa. Esses cartões não são realmente clicáveis. Como realmente acessamos as páginas de bloqueio que elas representam? Para isso, precisamos de um elemento de link que se conecte à página de bloqueio. No momento, nenhum dos elementos são links, portanto, nenhuma das configurações tem a opção vincular o URL ao link do CMS Então, precisamos transformar um deles em um elemento de ligação. Isso pode ser um título, por exemplo, que pode ser um link ou uma imagem em miniatura ou ambos, ou podemos transformar o cartão inteiro em Como fazemos isso usando o elemento link Block? Então, teríamos que colocar o cartão inteiro dentro do bloco Link. Todas essas são opções muito válidas. Sites diferentes lidam com isso de forma diferente. Neste layout atual que temos, eu gosto de ter o cartão inteiro clicável Se tivéssemos links diferentes para lugares diferentes, por exemplo, o nome do autor levando à página de um autor, ou se houvesse um link para uma categoria , não conseguiríamos colocar tudo dentro do bloco de links porque você não pode aninhar links em outros links. Mas nesse caso, nós podemos. Então, vamos em frente. Basta adicionar um elemento de bloco de links dentro do item da coleção. Ao obter as configurações, você terá esse ícone de página roxo. Isso permite vincular a uma página de coleção. Escolha isso e selecione a postagem atual do blog. Agora, esse link irá para a página de postagem do bloco. Por fim, vamos mover o cartão inteiro dentro desse bloco de tinta. Na verdade, não precisamos desse Diveblog extra. Podemos aplicar a classe block card ao próprio bloco de links e nos livrar do bloco div extra Como agora é um bloco de links, todo o texto dentro do cartão está sublinhado Esse é apenas um comportamento normal dos links. Podemos eliminar esse sublinhado nas configurações de decoração de texto Selecione nenhum. Vamos dar uma olhada na prévia e testar o link. Há uma coisa que me incomoda alturas um pouco diferentes das cartas. Para ser honesto, está tudo bem assim, mas alturas iguais fariam com que parecesse mais bonito. É isso que temos em designs, não é? Todas as cartas têm a mesma altura independentemente do conteúdo, que torna a grade um pouco mais organizada Para fazer o mesmo, basta esticar as cartas para preencher o espaço vazio. O item da coleção, por ser uma criança flexível, já está se esticando, mas a carta de bloqueio não é se dermos 100% de altura a uma carta de bloqueio, que preencherá o espaço vazio Lembre-se de que você só precisa estilizar um dos cartões de bloqueio e todos eles terão o mesmo estilo Tudo parece bom, exceto uma coisa. O autor e o bloco de datas estão em posições diferentes em todos os lugares. Em nossos designs, nós os colamos na parte inferior, o que cria um layout muito melhor. Como podemos fazer isso acontecer? Primeiro, se você der uma olhada no elemento principal, que é o conteúdo do cartão , verá que ele não está se estendendo até a parte inferior Então, primeiro, definitivamente precisamos fazer esse alongamento. Desta vez, 100% de altura não vai funcionar porque isso significa 100% da altura dos pais. cartão de bloco é o pai, que é mais alto porque também há a imagem dentro Então, se dermos 100%, não apenas preencherá o espaço vazio, mas também ultrapassará as fronteiras. Então, de que outra forma podemos fazer com que ele preencha o espaço? Aqui está uma maneira de transformar a placa principal na placa de bloco, uma caixa flexível com um alinhamento vertical E então, nas configurações flexíveis para crianças, podemos alterar o tamanho para ampliar o conteúdo do cartão Agora, para a segunda etapa, precisamos colar de alguma forma o bloco do autor na parte inferior. Uma opção óbvia é transformar novamente o bloco de conteúdo em um flexbox com alinhamento vertical E altere as configurações de justificação para espaçar entre elas. Isso vai empurrar os objetos até as bordas. Agora, o bloco do autor está colado na parte inferior de cada cartão, o que é lindo, mas isso também faz com que o resumo da postagem seja espaçado uniformemente Nós não queremos isso. Queremos que resumo da postagem seja agrupado junto com um título Isso é fácil de corrigir. Só precisamos colocar o título e o resumo da postagem em um bloco div, e isso é tudo Quando digo embrulhar algo, isso significa adicionar um novo bloco div e colocar os elementos dentro Embrulhe como uma caixa de presente. E isso é tudo. Vamos conferir a prévia. Tudo funcionando muito bem. Há outra coisa que precisamos fazer. Precisamos adicionar uma paginação. Paginação significa distribuir esses cartões de bloco em páginas diferentes Não queremos que todos os cartões sejam carregados nesta página. Quando tivermos mais de 20, 30 cartões de bloco, a página ficará mais lenta. É por isso que precisamos de paginação. Faremos isso na próxima lição. Fique por aqui. 148. Blog e CMS: paginação: Neste vídeo, vamos adicionar a paginação. Sem dividir os cartões de bloqueio em páginas diferentes, cada cartão de bloqueio E quando temos muitas postagens de log, isso faria com que a página carregasse muito lentamente e não seria o ideal. Para 20 cartas, isso mesmo. Mas para 50, 60 e mais, isso tornará a página consideravelmente mais lenta Criar uma paginação na lista de coleções é tão fácil quanto marcar uma caixa no Então, aqui decidimos quantos itens devem ser exibidos por página? Queremos um número que seja adequado para nossa grade de três colunas, algo que seja divisível por três, como nove, 12, etc Dez não é bom porque então você terá vagas vazias. O número ideal é algo que pode ser dividido em layouts de três e duas colunas 12 é a melhor opção. Portanto, além da paginação, existem algumas outras configurações para listas de coleções Vamos dar uma olhada neles rapidamente. Os filtros são legais e muito úteis. Por exemplo, podemos filtrar a publicação por autor ou publicação criada este mês. Ou podemos adicionar campos extras para essa filtragem em nossos campos de coleção Em seguida, esses campos aparecerão aqui e poderemos filtrar itens com base neles. Então, por exemplo, uma maneira de fazer isso é filtrar categorias. Então, toda vez que criamos uma postagem no blog, escolhemos uma categoria do blog, certo? Então, diríamos que talvez isso seja sobre culinária, talvez seja culinária espanhola, culinária italiana, culinária francesa, qualquer coisa. E então teríamos páginas dedicadas para cada categoria, certo? Então, todas as postagens do blog sobre culinária francesa, todas as postagens do blog sobre comida chinesa. E em cada uma dessas páginas , criaríamos esse filtro. Portanto, mostre apenas aqueles que estão categorizados e têm uma categoria de francês e aqueles que têm uma categoria de comida chinesa e assim por diante Opções semelhantes se aplicam à classificação. Podemos classificar a ordem das postagens por vários critérios e regras diferentes. E, novamente, podemos criar páginas separadas para diferentes ordens de classificação e, em seguida, incluir esses links na parte superior para que os usuários possam navegar até lá. Há uma última configuração, limitando o número de itens mostrados Isso é semelhante à paginação, embora limite totalmente o número de itens e não adicione páginas extras para exibir Um exemplo prático disso seriam sugestões semelhantes de postagem de bloqueio abaixo de uma postagem de bloqueio real Para fazer isso, adicionaríamos outra lista dinâmica abaixo. Nós o preencheríamos com postagens de blog e depois limitaríamos os itens a dois ou três Portanto, ele mostra apenas algumas sugestões de postagem. É assim que essas configurações da lista de coleções podem ser simples e poderosas . Depois de ativar a paginação, você faz com que os botões seguinte e anterior se movam entre as Então, estilizar é bem fácil. Basta selecionar o botão. Dê a ele uma cor de fundo. Altere a cor do imposto. Adicione um pouco mais de espaçamento. Adicione um pouco de efeito de foco. Sempre adicione efeitos de foco aos botões e links. É importante que os usuários entendam o que é um objeto interativo e o que não é, e o efeito de passar o mouse é a melhor maneira de fazer isso Recentemente, eu estava lendo uma biografia de Steve Jobs, e li essa linha quando ele estava dizendo que a tecnologia tem que fazer você sentir que pode dominá-los. E isso é muito verdadeiro. É por isso que a tecnologia e os produtos simples e minimalistas são sempre melhores do que produtos complicados que têm vários botões e mostradores. Portanto, sempre que você criar e projetar seus sites, nunca esqueça a usabilidade e nunca esqueça como o usuário interagirá com ela Portanto, certifique-se de que, se houver um botão, certifique-se de que o botão tenha um efeito de foco ou algum tipo de interação com ele para que possamos entender que essa coisa é clicável Certo? Ou se houver um link, o link muda de cor? Existe algum tipo de indicador de que esse é o link e você pode clicar nele e ele nos levará a algum lugar e assim por diante. Não é tão difícil, mas é preciso prestar atenção e não ser preguiçoso, porque muitos web designers são muito preguiçosos porque, se não fossem, não teriam tantos sites ruins que às vezes nos deixam loucos De qualquer forma, de volta à paginação. Então, voltando a estilizar nosso botão. Podemos aplicar a mesma classe ao botão anterior. O nome da classe não faz sentido. Talvez eu deva usar o botão de paginação. Isso é um pouco melhor. Ao selecionar algum elemento da paginação, você terá essa opção extra nas configurações Isso mostrará a contagem de páginas, o que às vezes é útil para exibir. Também poderíamos estilizar isso se você quiser, mas acho que isso é o suficiente. É isso mesmo. Nosso anúncio em bloco está pronto. Só precisamos torná-lo responsivo e faremos isso no próximo vídeo. Fique por aqui. 149. Blog e CMS: página de blog responsiva: Agora vamos tornar nossa página de bloqueio responsiva. O desktop está indo bem. As cartas diminuem para um tamanho razoável, então ainda podemos manter três colunas Nos tablets, a história é diferente. É demais para três, então temos que usar duas colunas. Podemos alterar o layout a partir dessas configurações. Isso afetará a versão dois para desktop. É global, não específico do dispositivo. Mas é bem simples. Esses itens estão dentro de um flexbox com a embalagem ativada Isso significa que as cartas saltarão para a próxima linha quando não houver espaço. Se dermos ao item da coleção uma largura de 50%, isso organizará instantaneamente tudo em duas colunas. Fácil assim, eles se esticarão e encolherão para ocupar o espaço adequado Agora, para a paisagem, é um pouco complicado. Em tamanhos maiores, é perfeito. Mas quando você diminui para um tamanho menor , duas colunas são demais. Uma opção é criar um layout de coluna única, então precisaríamos definir a largura como 100%. Uma única coluna não é ruim nesse caso, mas você sabe qual seria o layout perfeito? Se pudéssemos ter um layout de duas colunas e , em seguida, alguma largura específica para que ele se transformasse em uma única coluna. Por exemplo, se definirmos a largura mínima do item da coleção para 300 pixels, dessa forma, os cartões serão reduzidos até 300 pixels e, em seguida, serão agrupados na segunda linha, criando um layout de coluna Mas isso é uma ideia. Na tela grande, temos essa lacuna. Idealmente, queremos que ele mude para 100% de largura no momento em que eles passarem para uma única coluna. Felizmente, existe um truque avançado para isso. Podemos definir essas regras específicas nas configurações flexíveis para crianças, abaixo das Remova as configurações de largura mínima antes de começar a editar essa parte. Existem três campos com crescimento, redução e valor base A combinação desses três valores gera resultados diferentes Não vou me aprofundar na lógica de como todos eles funcionam, mas vou explicar a única variante de que precisamos agora. Dentro da base, podemos definir um valor como 300 pixels. Em seguida, no campo de redução, podemos especificar para não reduzir além desse valor O valor para isso precisa ser zero. Se for igual ou superior , significa que pode diminuir além desse valor Portanto, com a redução definida como zero, ela não diminui além disso, e as cartas passam para a próxima linha É como definir um mínimo. Agora, como o crescimento está definido como zero, ele não cresce além de 300 pixels nem diminui 00 basicamente significa não crescer, não encolher. Basta mantê-lo em 300 pixels. Mas se definirmos crescer para um , permitiremos que ele cresça além 300 pixels para ocupar qualquer espaço disponível. E isso nos dá um layout absolutamente perfeito duas colunas inteiras e, quando fica muito pequeno , se transforma em uma única coluna de largura total. Se você não entendeu isso totalmente, não se preocupe. É um conceito complicado. Saiba que esse controle granular é uma opção quando você precisar Então, aleatoriamente, você pode jogar com valores diferentes até obter o resultado desejado De qualquer forma, é o que eu faço na maioria das vezes. Por fim, vamos ver o modo retrato. Devido às configurações flexíveis para crianças que definimos no modo paisagem, o retrato está automaticamente no modo de coluna única, embora com um problema Como não permitimos que ele diminua abaixo de 300 pixels, ele ultrapassa as bordas da página Agora, como estamos usando configurações secundárias flexíveis, não podemos editar com configurações aqui porque as configurações secundárias flexíveis ignoram esses Então, voltamos o flex child ao valor padrão, que é o encolhimento, se necessário, e então poderemos alterar a largura Há uma última coisa que podemos consertar. Ter preenchimento nas laterais cria esse pequeno desalinhamento nas bordas da nossa página Você sabe onde todo o nosso conteúdo está alinhado. Isso está sendo um pouco minucioso, mas eu gosto das coisas da forma mais exata possível Você também deve fazer o possível para desenvolver esse hábito. obsessão por detalhes é uma boa qualidade para um web designer Então, como podemos corrigir esse pequeno desalinhamento? Não podemos ter uma classe de combinação especial para as cartas que estão nas bordas Eles são um, lembre-se, Hive Mind. Mas é bem simples. Podemos adicionar uma margem negativa ao pai que contém todos esses itens. -15 pixels em ambos os lados e pronto. Você tem cartas alinhadas agora exatamente nas bordas. E é isso. Realmente, é isso. Nosso site está totalmente pronto. É responsivo. Está lindo. É rápido e poderoso. As pessoas pagam um bom dinheiro por isso. Na próxima seção, daremos retoques finais e publicaremos o site 150. Como lançar: SEO e publicação: Vamos começar com o SCO e alguns outros retoques finais. Precisamos preencher os detalhes de SEO de todas as nossas páginas, começando pela página inicial Já fizemos isso antes, então deve ser bem simples, exceto pela página dinâmica de postagem do blog Isso é um pouco diferente. Não se esqueça das configurações do gráfico aberto. Isso é para todas essas redes sociais, Facebook, Twitter e outras coisas. Ou a imagem, ela precisa de uma URL. Podemos escolher uma imagem no painel Ativos e obter uma URL a partir dela. Eu vou usar essa imagem. Em seguida, basta pegar o URL e colá-lo no campo. A mesma coisa para a página do blog. Não tenho nenhuma regra específica sobre o que você deve colocar em SEO, desde que não esteja vazio. O resto depende da empresa e da mensagem que os clientes desejam enviar. Agora, uma parte divertida, SEO para a página dinâmica. Você notará um link extra em uma página dinâmica, esses links roxos para adicionar um campo. Então, o nome da postagem do blog pode ser estático, certo? O nome deve ser o mesmo do título da página de postagem do blog Podemos adicionar esse título assim. Aí está. O nome da página do blog. E se você clicar nessas setas, poderá facilmente acessar diferentes postagens Podemos adicionar qualquer outra coisa antes ou depois desse campo dinâmico. E dentro da meta descrição, podemos adicionar um texto de resumo da postagem. Essa é outra razão pela qual resumo da postagem é um campo tão útil de se ter E para a imagem do gráfico aberto, podemos selecionar diretamente a imagem do CMS. Quão bom é isso? Portanto, cada postagem apresentará sua própria imagem principal. Isso é tudo para o SEO. Existem alguns links que precisamos conectar na barra de navegação e no rodapé Por exemplo, o logotipo, é uma boa prática vinculá-lo à página inicial É o que as pessoas esperam. Quanto aos outros links, não temos páginas para eles, então temos que deixá-los como estão, exceto pelo blog que já conectamos. Não vamos esquecer o rodapé. Também precisamos vincular esse logotipo à página inicial. Se você não vê as configurações do link, talvez tenha apenas um logotipo sem um bloco de links. Somente elementos de link podem ser conectados a outras páginas. Então, se você está sentindo falta, basta adicionar um novo blog de links e colocar sua imagem dentro. Nem precisa adicionar uma turma ao link, edite as configurações diretamente. Excelente. É um bom momento para verificar todos os links em um modo de visualização e ver como tudo isso fica em telas diferentes. Adoro o resultado. É um site bonito, rápido e sólido Agora vamos cuidar da compressão da imagem. Essa é uma etapa importante porque todas as nossas imagens têm um tamanho de arquivo muito grande, que tornará os sites mais baixos. Vá para ativos, expanda o painel, selecione todos os ativos e clique em compactar Algumas das imagens não serão selecionadas para compactação, e tudo bem porque algumas delas estão no formato SVG e não precisam de compactação Queremos mantê-los no SIG. Espere um pouco e você receberá uma notificação quando todas as imagens forem compactadas Agora, essas eram imagens em nossas páginas estáticas, mas também temos um monte de imagens dentro do CMS Há imagens tanto na coleção de autores quanto na coleção de postagens do blog. Podemos fazer a compressão diretamente daqui, e isso comprimirá todas as imagens de uma só vez dentro de todo o CMS em ambas as coleções Isso levará um pouco mais de tempo pois há muito mais imagens, mas não precisamos esperar aqui. Podemos simplesmente continuar com as etapas restantes. Tudo bem, antes de clicarmos em publicar, vamos às configurações do projeto Precisamos fazer o upload de um favican assim como fizemos da última vez Lembre-se de como fizemos isso, tivemos que criar ícones de favican e web clip no Figma O favicon e o clipe da web precisam ser criados em tamanhos precisos, 32 por 32 para o favicon e 256 por 256 Então, vamos desenhar um quadro que seja exatamente 256 por 256. Em seguida, dê um pouco de cor. Então, raio do canto Crie um pequeno ícone a partir do logotipo e pronto. para o fabricante, precisamos de exatamente 32 por 32, mas não podemos simplesmente redimensionar o quadro como está porque o texto interno não será dimensionado No entanto, a ferramenta de escala é feita exatamente para esses fins de redimensionamento. Podemos inserir as dimensões desejadas e tudo será reduzido proporcionalmente É isso mesmo. Agora exporte-os em PNG em um X e carregue-os nas configurações laterais. Verifique se as dimensões estão corretas ou ocorrerá um erro. E está tudo pronto. Agora podemos clicar em publicar no domínio Webflow E esse é o nosso pequeno site elegante. Vamos verificar tudo, verificar se está funcionando corretamente. seguir, vamos testar formulários e ver como os envios de formulários são gerenciados no weblo. Fique por aqui. 151. Como enviar o formulário: Y. Agora vamos testar nossos formulários. criamos um formulário bem simples Desta vez, criamos um formulário bem simples, apenas um endereço de e-mail. Podemos enlouquecer com formulários no Webflow, mas sejam formulários preenchidos em uma única etapa ou em várias etapas, todos funcionam da mesma forma todos funcionam da A submissão correu muito bem. Esse é um comportamento padrão. O envio acontece diretamente na página. Quando você atualiza a página , essa mensagem desaparece e podemos enviar o formulário novamente. Não estamos limitados a esta versão. Também podemos redirecionar os usuários para uma página diferente após o envio, como uma página de agradecimento ou uma página de confirmação, seja o que for Tudo o que precisamos fazer para isso é criar essa página no Webflow e adicionar o URL nas configurações do formulário Podemos enviar envios automaticamente por e-mail. Podemos fornecer o endereço de e-mail de uma pessoa que receberá as inscrições Normalmente, o endereço de e-mail do seu cliente, e ele receberá um e-mail como esse. Adoro que o Webflow também cuide disso, e não preciso obter um plug-in ou instalar algum aplicativo de terceiros para gerenciar as notificações e todas essas coisas Também podemos personalizar essas notificações por e-mail quando nosso site tem um plano de hospedagem. Ok, agora vamos ver o que aconteceu com o envio do nosso formulário. Vá para as configurações do projeto e clique na aba Formulário. É aí que você verá o envio. Há muita coisa que podemos fazer com esses envios. Nós podemos deletar. Podemos exportá-lo para CSV Outra coisa que podemos fazer é integrar os envios de formulários com outros aplicativos Por exemplo, para ferramentas de marketing por e-mail como o Mailchimp, novos envios podem ser enviados para essas plataformas de marketing por e-mail, onde seus clientes podem fazer suas coisas com eles e novos boletins informativos por e-mail, material promocional e material promocional E isso é tudo o que há para enviar formulários. 152. Introdução ao freelancing: Já passei por um aprendizado intenso até agora. Ótimo trabalho. Até agora, você tem uma experiência prática muito boa com Figma e Webflow Você pode assumir um projeto real e passar da estrutura de arame ao design e, em seguida, à construção de toda a enchilata Isso não significa que você saiba fazer tudo. Também não sei como fazer tudo, especialmente quando as tecnologias da web mudam constantemente. Você continua aprendendo. Quando um cliente me pede para fazer algo que eu nunca fiz, eu entro na Internet e geralmente procuro tutoriais em vídeo, se existirem Se não, pergunto nos fóruns. E às vezes, na maioria das vezes, na verdade, alguém já perguntou algo parecido e eu já consigo encontrar uma resposta em algum outro fórum ou no WebflowsFM, na verdade, que é uma Eu já mencionei isso, cadastre-se e acesse o Webflos e toda vez que tiver alguma dúvida, sempre vá à Comunidade Webflos e encontre respostas lá, porque toda vez que você fica preso, as respostas geralmente Eu vou e construo uma solução para o cliente. Esse é o fluxo de trabalho diário de um web designer. Você nunca para de aprender. Mas o importante é que você tenha base suficiente para assumir projetos reais. E é nisso que vamos nos concentrar nesta parte do curso. Conseguir trabalho. Os conceitos que você aprende também podem ser aplicados ao trabalho em tempo integral, mas vamos nos concentrar principalmente no trabalho freelancer Você aprenderá sobre estratégias de preços, propostas, plataformas de freelancers e outros lugares e outras formas de encontrar trabalho E vamos conectar você a um site de portfólio incrível. Então, vamos embora. 153. Site de portfólio: Tenho uma empresa com dois dos meus amigos, e contratávamos muitas pessoas naquela época. E o que a maioria dos candidatos faria é se subestimar Eles vinham e diziam: Sabe de uma coisa? Oh, eu sou apenas um iniciante. Eu não tenho muita experiência, sim, mas, você sabe, eu aprendo rápido Mas minha conclusão como seu potencial empregador é que você é péssimo. Como eu sei disso? Você acabou de me dizer isso. Começar em qualquer nova profissão é difícil, porque as pessoas querem contratar profissionais. Eles não querem iniciantes, eles querem profissionais. Essa é a verdade. Mas aqui está um grande erro que muitas pessoas cometem. Eles acham que ser profissional é alguém com anos de experiência, de jeito nenhum. Um profissional é alguém que leva seu trabalho a sério, alguém que parece capaz de fazer **** e alguém que deseja oferecer um capaz de fazer **** e alguém ótimo serviço a seus clientes ou empregadores Então, como você se faz parecer um profissional? Para começar, você precisa mostrar o que pode fazer. E no web design, isso é feito com um portfólio. Você já projetou e construiu dois projetos neste curso, e isso já é algo para mostrar. Mas minha recomendação seria fazer mais um projeto, do design à construção, fora deste curso. Isso lhe dará três peças de portfólio, e isso é o suficiente para você ir lá e começar a se candidatar a empregos. E o mais importante, fazer outro projeto independente proporcionará prática e experiência fora deste curso guiado. Mas as peças do portfólio não são suficientes para parecer um verdadeiro profissional. Precisamos de um site de portfólio porque o que você acha? Um web designer profissional não teria seu próprio site pessoal? Mas você ficaria surpreso que uma grande parte dos web designers, na verdade, eles não têm seu portfólio em plataformas como B hands ou dribble, e é isso que eles compartilham com seus clientes em potencial, enviando o link para o perfil com todo o trabalho do portfólio carregado Eu nunca faço isso. Primeiro, isso não me faz parecer um profissional. Como web designer freelancer, você é essencialmente uma empresa que presta serviços aos seus clientes, certo? E nenhum bom negócio jamais faria algo assim. É como ser um fotógrafo profissional com portfólio apenas no Instagram. Quero ser um fotógrafo profissional que tenha seu próprio estúdio fotográfico, não apenas um perfil no Instagram. E segundo, eu os estou enviando para um lugar com outros bons designers. Isso é apenas uma má ideia. Estou ajudando eles a encontrar outra pessoa. Estou exibindo meu trabalho ao lado dos melhores trabalhos de design do mundo. E mesmo que eu fosse o melhor candidato disponível para eles, eu não pareço mais tão bem. Meu trabalho não parece tão impressionante ao lado dos melhores trabalhos do mundo. E terceiro, estou perdendo a oportunidade de fazer uma proposta persuasiva para eles com meu site, certo? Posso mostrar a eles meu processo de design. Eu posso escrever um conteúdo muito persuasivo e convincente e um direito de cópia para convencê-los de que, você sabe, eles deveriam Eu poderia impressioná-los com meu próprio site, e posso solicitá-los a agir para que possam entrar em contato ou, você sabe, enviar um formulário ou Não estou dizendo que você não deveria ter perfis nessas plataformas. Às vezes, você pode até encontrar trabalho por lá, mas também não é um lugar para direcionar seus clientes em potencial. Além disso, você é web designer. Você nunca pensou em criar um site para si mesmo. Isso simplesmente não parece sério. É como ser um mecânico de automóveis que nunca teve um carro. O site do portfólio pode fazer muitas vendas e propostas para você E tive clientes que me contrataram só porque gostaram do meu site. Nem mesmo pensando ou olhando para o portfólio das peças do meu portfólio, eles simplesmente gostam muito do próprio site. Então, sabendo por experiência própria o quanto um bom site de portfólio pode ajudar, eu projetei e construí um site de portfólio incrível para você. Este modelo de portfólio vem com uma ressalva. Hoje em dia, muitos dos meus alunos trabalham freelancers em plataformas como Upwork e fiber Muitos desses alunos usarão o mesmo site de portfólio nos projetos do curso. Se você também planeja trabalhar como freelancer nessas plataformas , eu não recomendaria usar esse modelo de portfólio Há uma grande chance de o mesmo cliente receber propostas de dois de meus alunos que estão usando o mesmo trabalho em seu perfil Isso também se aplica aos projetos do curso. Fora dos mercados de freelancers, tudo bem. O mundo é grande, mas mercados são mais parecidos com pequenas aldeias Nesse caso, uma abordagem melhor seria criar seu próprio site de portfólio e alguns projetos conceituais independentes. Isso também será uma boa prática para você. Ou você pode comprar um modelo de site de portfólio pago no Webflos Também existem modelos gratuitos, mas é claro que os pagos têm designs melhores, mais opções e menos chances do que muitos outros freelancers no mercado que usam o mesmo modelo Ok, então, se essas condições funcionarem para você, no próximo vídeo, mostrarei como instalar este site para você mesmo, como adicionar seu próprio conteúdo e como fazer algumas personalizações para torná-lo mais 154. Tour do site de portfólio: Eu mostro como instalar um site e movê-lo para sua conta do Webflow. Deixe-me fazer um tour pelo site, mostrar o que é e mostrar qual é o design thinking por trás de tudo isso Parte do conteúdo que você verá em uma página é um texto reservado, como este título E no próximo vídeo em que mostro como instalar este site no ícone do Webflow, você substituirá o conteúdo genérico por suas informações pessoais O site é bem simples, do jeito que os sites de portfólio deveriam ser. Temos apenas duas páginas, uma página inicial e páginas de CMS para cada projeto O conteúdo do site está em uma narrativa em primeira pessoa. Esse é o tipo de estilo que eu adoro para sites de portfólio. Se estou vendo o portfólio de alguém, estou interessado na pessoa por trás dele, então quero ver uma interação amigável para que eu possa sentir a personalidade da pessoa. Também quer ver uma informação clara do que você faz, qual é a sua especialidade Do que trata este site? Linguagem clara e direta. Posso trabalhar com você? Você está disponível para trabalhar? Como posso trabalhar com você? Quais são as etapas e assim por diante? Além disso, uma vitrine muito direta do portfólio. Alguns sites de portfólio o têm em uma página separada, e isso é muito trabalhoso. Preciso encontrar um link, clicar nesse link, esperar a página carregar novamente para finalmente ver seu trabalho. Então, eu gosto de mostrar peças do portfólio na página inicial imediatamente após a seção de heróis Não olhe diretamente na sua cara. A forma como você exibe as peças do seu portfólio também é importante. Muitos sites de portfólio que eu vi têm uma forma muito confusa, criativa, mas muitas vezes confusa de mostrar trabalhos anteriores Freqüentemente, eles usam apenas miniaturas, sem títulos, sem descrição Você tem que chegar a uma conclusão sozinho. Não é legal, me fazendo trabalhar. Aqui, como você pode ver, tudo está super claro. Nós temos um título. Se não tivermos certeza do que é isso, há um título menor dizendo o trabalho mais recente, não há como se confundir com isso. Uma descrição do projeto, que é muito importante porque muitos designers não fazem isso na página inicial Os clientes podem nem mesmo visitar a página do projeto. Eles querem obter informações diretamente daqui. E é importante dizer a eles que tipo de projeto é esse. Você o projetou? Foi um trabalho individual, trabalho em equipe? Qual foi o seu papel? Para que serve o site e assim por diante? Eles querem saber essas informações essenciais para entender o que diabos estão vendo adicionei algumas tags para fornecer informações digitalizáveis sobre tipos de projetos, como desenvolvimento de Webflow, projeto conceitual. Dizer que é um conceito em uma tag é uma maneira sutil de ser honesto sobre o fato de ser um projeto conceitual Projeto conceitual significa que não foi projeto realmente pago que você fez para algum negócio ou produto existente. Mas você fez isso para praticar ou para este curso ou por qualquer outro motivo. Você quer evitar uma decepção embaraçosa mais tarde, quando seu cliente perguntar algo sobre a empresa de aplicativos de bate-papo para a qual você trabalhou E, claro, lindas maquetes do projeto. forma como você mostra as telas do projeto também é importante. A seção O que eu faço é exatamente o que diz. Este é um lugar para fornecer uma descrição mais detalhada dos serviços que você fornece e apresentar um pouco mais. Aqui está uma dica profissional de redação. Se você quiser escrever um texto persuasivo, faça com que seja sobre eles. Fale sobre como você resolverá os problemas deles e melhorará suas vidas, não o quanto seu web design e as ideias de casinhas são sua paixão. Por fim, uma seção muito óbvia. Se eles quiserem trabalhar com você, qual é o próximo passo deles? Agora vamos conferir a página do projeto. As páginas do projeto são bastante simples, algumas descrições do projeto e uma grande Há muitas maneiras diferentes de demonstrar o trabalho do seu portfólio, mas esse é um estilo que eu uso em meu próprio site e o que mais gosto. Alguns designers gostam de fazer um estudo de caso, então eles terão uma grande apresentação do projeto e uma boa explicação do processo, objetivos e desafios. Basicamente, uma pequena história sobre como o projeto se concretizou Essa é uma abordagem excelente e mostra todo o trabalho que você dedicou a ela e mostra aos seus clientes em potencial os bastidores de seu processo. A razão pela qual eu não faço esse estudo de caso é simples. É muito trabalhoso. A quantidade de vantagem não é tão grande, principalmente por causa de quem é nosso público-alvo. Como web designers freelancers, nossos clientes, 90% das vezes são empreendedores não designers Um bom portfólio de páginas com capturas de tela simples de sua senha é informação suficiente para eles. eles não vão se aprofundar qualquer forma, eles não vão se aprofundar no estudo de caso Eles apreciarão o fato de estar lá e pensarão ainda mais em você, mas a quantidade de trabalho que temos que dedicar à criação do estudo de caso para cada portfólio é demais. Talvez no começo tenhamos entusiastas suficientes, mas depois não teremos, e simplesmente não vamos manter nosso site atualizado por causa disso É aí que vamos nos enganar no futuro, porque atualizar o portfólio vai dar tanto trabalho que simplesmente não faremos isso e acabaremos com peças antigas do portfólio, e esse é o pior resultado. Seus designs serão profissionais e, em geral, as tendências de web design mudarão, então seus designs mais antigos parecerão datados e não modernos. Mas se for muito simples de atualizar, você será mais incentivado a mantê-lo atualizado. Portanto, o projeto Prey só precisa um parágrafo de descrição e uma captura de tela, que você pode exportar diretamente do Figma, é muito fácil O link para o site ao vivo é opcional. É muito útil para clientes que estão analisando o projeto. Eles podem ver o site em ação brincar com ele e ver todo o trabalho que você fez, não apenas a captura de tela, mas as interações e tudo Embora eu tenha uma regra sobre isso, vinculado apenas a sites ativos dos quais você se orgulha. Sites de clientes reais são organismos vivos e, quando você termina um projeto, o cliente pode mudar as coisas no site. Eles podem adicionar uma nova seção, mudar as coisas por conta própria, contratar outra pessoa para novas atualizações e assim por diante. Então, em algum momento, seus preciosos designs podem acabar parecendo horríveis, e você não quer mostrar um site que foi Mesmo que seja você quem está matando. Bem, é isso. minimalista, bonito Site pessoal minimalista, bonito e forte para demonstrar seu trabalho e mostrar aos clientes em potencial seu profissionalismo e habilidades de web design 155. Instalando o site de portfólio: Neste vídeo, mostrarei como instalar o site do portfólio em sua própria conta do Webflow Assim, você pode personalizá-lo, alterar coisas, editar conteúdo, até mesmo personalizar o estilo e publicar como seu site pessoal. Eu criei uma vitrine desse projeto aqui. Este é um lugar onde os designers do Webflow podem compartilhar seus projetos com outras pessoas. Acesse este link para acessar a página, os links nos recursos deste vídeo. Quando estiver nessa página, você verá esse botão de clonagem que permite clonar todo o projeto em sua própria conta Clique sobre isso. Há uma mensagem de aviso dizendo que podemos criar um novo projeto em nossa conta porque atingimos o limite. No plano gratuito, você só pode ter dois sites não hospedados no Webflow Portanto, como você já criou dois projetos, o aplicativo de bate-papo e os sites do TeamMP , você enfrentará esse problema Você tem três opções. Faça o upgrade para um plano pago, crie uma conta separada ou exclua um dos projetos existentes. Tudo bem, depois de resolver esse problema de limite, você poderá criar um novo site. É isso mesmo. Agora você tem sua versão deste site. Você já sabe como fazer tudo o que precisa fazer aqui, mas deixe-me mostrar coisas que você deve editar. Primeiro, o nome. O logotipo é apenas a etiqueta, então basta colocar seu nome lá como quiser, se quiser nome e sobrenome ou apenas nome ou sobrenome , o que você preferir. Também há o nome na manchete. Não se esqueça de mudar isso. Há o nome no rodapé e também no texto de direitos autorais, coloque seu nome e sobrenome lá Por fim, existem nomes nos campos de SEO. Página inicial de dois lugares e o modelo do projeto. Depois, há links de e-mail em dois lugares. Há um na barra de navegação e outro no rodapé. Tanto a barra de navegação quanto o rodapé são componentes esperados, por isso também estão sincronizados na página do projeto Esses são links de e-mail, então você precisa colocar seu endereço de e-mail dentro do link. Então, quando as pessoas clicam nele, novo e-mail é pré-preenchido com seu endereço. R Não se esqueça de alterar o texto e a configuração do link. Isso é tudo para as informações pessoais. O resto é conteúdo que você pode atualizar conforme desejar. Ou não fique à vontade para mantê-lo como está, mas dar um toque mais pessoal seria uma ideia melhor Você pode dar a este site suas próprias cores pessoais, se quiser. A atualização é muito fácil. Todas as cores são globais. Isso significa que você pode atualizar a cor global e todas as instâncias dessa cor serão atualizadas instantaneamente. Clique em Editar e escolha uma cor diferente no mapa ou cole o código da cor. A mesma coisa que você pode fazer na cor de destaque. Seja qual for a cor usada para os planos de fundo, não se esqueça de atualizar as miniaturas do projeto adequadamente Elas são imagens independentes e, portanto, não são atualizadas automaticamente com uma cor global. Eu preparei o arquivo Figma para essas miniaturas para que você possa facilmente atualizar e exportar novas posteriormente. Deixe-me mostrar como fiz esse efeito de destaque para que você saiba como reutilizá-lo se decidir O texto destacado está dentro de um bloco DV, que tem um elemento de cabeçalho interno e um bloco DV normal como O destaque tem posicionamento absoluto. É por isso que está empilhado atrás do texto. Se você quiser destacar algum outro elemento de texto, basta copiar toda a caixa de destaque e editar o texto dentro dela Por causa desses destaques, esse título não é um texto fluido É um monte de elementos embutidos independentes sentados um ao lado do outro Portanto, para mover a ordem, você precisa arrastar os elementos ou alterar a ordem no navegador Lembre-se de que o texto destacado pode se estender em duas linhas. Portanto, tente destacar no máximo duas palavras consecutivas, como web designer ou tenha várias caixas de destaque próximas outra se você realmente precisar de um destaque mais longo Os destaques do link funcionam um pouco diferente. Na verdade, muito mais simples do que manchetes. É só uma sombra de caixa. E se você precisar aplicar esse estilo em qualquer outro lugar, basta selecionar uma classe chamada link amarelo. E o texto destacado será adicionado com seu efeito de foco Como você provavelmente notou, a página tem interações muito legais como aqueles destaques no carregamento da página e aquela linha de rolagem se movendo como uma cobra para cima e para baixo Deixe-me mostrar onde estão essas coisas. Se você acessar o painel Interações, verá que há três interações no carregamento da página. Existem interações bem simples. O primeiro controla esses destaques. segundo é para o deslizamento do conteúdo e o terceiro é para a linha de rolagem no loop Provavelmente não precisará editar nada disso, exceto um destaque, porque se você adicionar algum elemento de destaque, também precisará adicioná-lo à interação. Por exemplo, essa nova caixa destacada não é animada. A melhor coisa é simplesmente adicionar texto dentro das caixas de destaque existentes. Mas se você realmente precisa adicionar novos , aqui está o que você precisa fazer para que o novo texto também seja animado A animação de destaque é muito simples. A caixa varia apenas de 0% a 100%. Isso é tudo. O estado inicial é definido como escala vertical zero. E então muda para um, o que significa 100%. Portanto, ele cresce de 0 a 100% em seu tamanho original. E o mesmo é feito para cada destaque de forma independente. É por isso que o primeiro corre e depois o segundo. Então, para animar o terceiro, selecione-o na tela e nos estados iniciais, quando esse ícone de adição aparecer, clique nele e selecione a escala e coloque zero abaixo do valor X. Mas antes de fazer isso, desative esse bloqueio porque isso preserva proporção e não queremos isso Queremos que ele encolha e cresça apenas horizontalmente. Agora precisamos adicionar um estado final, que é transformá-lo em um, e vamos adicionar isso no final. Por quê? Porque queremos que ele seja animado um após o outro, não ao mesmo tempo Novamente, desative o bloqueio e coloque um abaixo do valor X. Reproduza a animação para ver como ela está funcionando. Funcionando bem, só precisamos combinar a flexibilização com a de outras. Estou usando nosso quádruplo e 0,6 segundos. Então confira a prévia. Eu sou perfeito. Quanto às outras interações, provavelmente você não precisará alterar nada , mas se fizer isso, todas as configurações ficarão visíveis para você ver como elas estão configuradas e o que precisa ser alterado Para encontrar essas interações, você precisa selecionar um elemento correto. Então, a interação aparece no painel. interações que são acionadas pelo carregamento da página aparecem o tempo todo, não importa qual elemento você tenha selecionado, mas aquelas que têm um gatilho de elemento, você precisa selecionar o elemento de gatilho exato. Para encontrar essas interações, você pode vê-las no navegador Todos os elementos acionadores têm esse ícone de raio próximo a ele Isso significa que há uma interação nesse elemento. Por exemplo, invólucro de botão. É aí que a interação de passar o mouse para o botão é configurada. Tudo bem, a última coisa importante que você precisa saber é como gerenciar projetos. Eles são itens do CMS, então você pode gerenciá-los facilmente dentro do CMS Vou adicionar um novo projeto para que você possa ver o que é o quê. Nome, descrição, bem simples. Há duas imagens que você precisará gerar para novos projetos, uma miniatura para a página inicial e a tela inteira do A tela cheia é simples. No figma, acesse o design da sua página e exporte o quadro inteiro Em seguida, basta fazer o upload para o campo correspondente, mas certifique-se de compactar a imagem, ou será um arquivo muito grande Quanto à miniatura, acesse este arquivo Figma que eu compartilhei com você, link nos recursos Há uma página chamada assets, e é aí que você pode criar suas miniaturas A propósito, você verá aqui há um favican e um clipe da web Use isso para gerar seus próprios e atualizá-los nas configurações do seu projeto. Arraste a imagem para dentro. E posicione-o como quiser. E a mesma coisa para o grupo traseiro. Em seguida, exporte a miniatura e faça o upload no CMS. Então você tem um URL ativo do site. Se você deixar isso vazio, Link não aparecerá, então você pode deixá-lo vazio sem problemas. Certifique-se de ativar essa opção. Isso é para que o projeto apareça na página inicial. Eu adicionei isso para que você tenha a opção desativar ou ativar qualquer projeto na página inicial Se você está se perguntando como eu fiz isso, são filtros. Então eu criei essa alternância e, na página inicial, criei o filtro para a lista de coleções dizendo que exibirá aquelas com a que exibirá aquelas Muito fácil. Então você tem essas três tags que aparecem abaixo do título. E é isso. Depois de salvar, vá para a página inicial, você pode ver que o novo projeto aparecerá em cima dos outros. E tem um link para a página do projeto, que também está pronta. Isso é tudo o que você precisa fazer para adicionar mais projetos. A propósito, esses projetos na página inicial são uma lista de coleções. Lembra desses? O conteúdo está vinculado aos campos do CMS. Além disso, a lista de coleções tem uma ordem de classificação aplicada a ela. Eu o configurei do mais novo para o mais antigo com base na última vez em que o item do CMS foi atualizado Se você quiser alterar essa ordem de classificação para outra coisa, você pode fazer isso aqui, talvez da mais antiga para a mais recente. Bem, essas são todas as coisas importantes que você precisa saber sobre este site. Se você ficar preso, me avise e eu vou te ajudar. 156. Encontrar trabalho online: Para trabalhar e onde encontrá-lo. Há muitas maneiras de um web designer freelancer encontrar trabalho A primeira e óbvia opção, que são plataformas on-line como freelancer.com e, obviamente, org.com, ou localmente na cidade em que você mora e se relacionando com pessoas do setor, networking com startups, indo a conferências de tecnologia, fazendo amizade com outros web designers de sucesso que podem enviar trabalhos para geralmente com web designers é que eles ficam lotados porque, você sabe, um designer só pode fazer um site por vez, certo? Você não pode fazer dez, 20 sites simultaneamente. Então, bons designers compram livros com muita facilidade, e o que acontece é que eles enviam trabalhos para seus amigos ou outras pessoas que recomendariam a seus clientes e assim por diante. Além disso, no LinkedIn e em sites de empregos regulares, como o Supercruter, existem maneiras mais do que suficientes de encontrar E se você pesquisar isso no Google, encontrará mais e mais opções. A questão é: qual dessas opções é o lugar perfeito para você procurar trabalho? Coisas como sua habilidade atual, sua personalidade ou sua experiência, onde você mora, a cidade em que você mora. Todas essas coisas determinarão qual dessas opções será perfeita para você neste estágio. Eu posso te dizer qual vai funcionar melhor para você. Ninguém pode, mas a melhor abordagem é escolher um de cada vez e examinar a lista. Neste vídeo, falarei sobre plataformas on-line e encontrar trabalho em plataformas on-line. Eu vou te dar uma visão geral dos maiores. Há muitos desses. Existe o Upwork, existe a fibra, existe o freelancer.com. Pessoas por hora, ladrilho superior e assim por diante. A lista é infinita. E se você pesquisar no Google, encontrará mais e mais. E a cada ano, obviamente, mais e mais dessas plataformas surgirão. competição muda à medida que alguns deles saem do primeiro lugar e outros os substituem ou surgem novos. Primeiro, Upwork. Foi aqui que encontrei meu sucesso. Encontrei trabalho suficiente no Upwork para estar ocupado em tempo integral. O Upwork é enorme. É uma empresa pública, que significa que está negociando na bolsa de valores. Acho que é a primeira plataforma de freelancers a se tornar pública. Os empregos são abundantes aqui, que significa que a concorrência é Eu tenho um vídeo dedicado sobre Upwork e como ter sucesso nele, então vamos abordá-lo em detalhes lá Vou te ensinar algumas estratégias sobre como ter sucesso e alguns erros comuns a serem evitados. Depois, temos o Fiber, que é um pouco diferente no Upwork, os clientes publicam vagas e os freelancers licitam, mas no Fiber, os freelancers publicam serviços e os clientes os compram diretamente Por exemplo, esse freelancer aqui diz que criará um site responsivo do Webflow por E ele oferece três pacotes diferentes, básico, padrão e premium. Gosto muito dessa abordagem baseada em serviços em fibra. Na verdade, fiz meu primeiro freelancer em fibra. Isso foi há um tempo atrás. Eu fiz designs de currículos por cinco dólares Naquela época, na fibra, esse era o preço: você só podia cobrar cinco dólares e oferecer alguns upgrades Mas como preço base para cada serviço listado, havia cinco dólares, daí o nome fibra Eles mudaram sua abordagem desde então e agora você pode precificar seus serviços como quiser. Eu sempre contratei freelancers em fibra para fazer trabalhos rápidos e pequenos de tradução, edição de vídeo e coisas assim Como cliente, é ótimo comprar um serviço que seja como um produto acabado completo. Sem negociações e tudo mais. Por favor, envie detalhes, espere alguns dias pelos resultados e pronto. Você até define datas de entrega específicas que deve cumprir depois de ter todas as informações e ativos do cliente. Então, se eu fosse criar um serviço de web design aqui, provavelmente aqui está o que eu faria pessoalmente. Eu diria que vou criar um site para um tipo específico de negócio. Por exemplo, um site para freelancers ou um site de portfólio ou contadores, etc. Vou criar muitos desses shows. É assim que se chama aqui, então vou criar alguns modelos ou apenas usar modelos do mercado Webflow Existem muitos modelos bonitos vendidos no Webflow e até modelos gratuitos muito bons Eu contaria o custo do modelo no preço total, talvez usaria modelos gratuitos para preços básicos e, em seguida, pagaria modelos com preços premium. E então, quando as pessoas compravam meu trabalho, eu pedia que escolhessem qual modelo quisessem e oferecessem cores, tipos ou outras personalizações com base em Dessa forma, os clientes sabem de antemão o que estão recebendo. Não há discussão sobre designs e não preciso criar e criar um site inteiro do zero. Estou simplificando grosseiramente o processo aqui, é claro. Eu poderia fazer um curso inteiro só sobre isso. Lembre-se de que você criaria um serviço completo e pronto para seus clientes. Você precisará pensar muito nisso para criar um pacote realmente bom, e faremos algumas tentativas e erros até que você acerte. Na verdade, isso é exatamente o que eu estava fazendo com os designs de currículos. Eu estava dando a eles cerca de cinco modelos de currículo para escolher. Eles o escolheriam, então eu preencheria seus detalhes e pronto. Ninguém nunca teve nenhuma reclamação sobre o design porque sabia o que estava recebendo desde o início Depois, temos o LinkedIn. Essa não é uma plataforma freelance típica como Upwork ou fiber Funciona de forma bem diferente. No LinkedIn, os clientes geralmente não publicam pequenos trabalhos freelance e esperam por Em vez disso, trata-se mais de se posicionar e ser descoberto ou entrar em contato diretamente com as pessoas. Há algumas maneiras diferentes de trabalhar aqui. Primeiro, você pode usar a seção de empregos e pesquisar cargos como web designer ou fazer com que o próprio LinkedIn recomende empregos com base em seu perfil Algumas delas são funções autônomas ou contratadas, mas muitas são de tempo integral, o que definitivamente é algo que eu recomendo que iniciantes considerem Como iniciante, você deseja abrir suas opções o máximo possível e não se limitar a trabalhar como freelancer Se você mora em uma grande cidade desenvolvida, suas opções serão melhores porque os empregos aqui se inclinam para contratações locais Mas também existem opções remotas , e você pode explorá-las país por país. Porém, observe que mesmo os cargos remotos geralmente exigem uma contratação local com sede no mesmo país. Portanto, se você mora em um país desenvolvido , isso restringirá um pouco suas opções. Mas ainda não está para ser descontado. Muitos dos meus alunos encontraram empregos remotos fora de seus países. A vantagem de procurar uma posição mais permanente em comparação com o trabalho como freelancer é que você só precisa ter sorte Portanto, vale a pena tentar até mesmo a estratégia de agulha no palheiro. Se você mora em U, então este país limita um pouco as despesas para você Para as empresas europeias, contratar em toda a UE é uma prática fácil e comum Muitas vagas permitirão candidatos de toda a UE Mas essa não é a principal vantagem do LinkedTI. A verdadeira oportunidade vem da divulgação. Muitos freelancers no LinkedIn buscam proprietários de empresas, fundadores, startups ou nichos específicos, como dentistas, salões ou agências, salões ou agências, e os abordam com seus serviços. Ou eles buscam postagens de outras pessoas que estão procurando um web designer ou um desenvolvedor de site e, em seguida, enviam mensagens diretamente para essas pessoas. Muitos dos meus alunos mencionam LinkedIn como sua fonte de trabalho, então definitivamente vale a pena explorá-lo Se eu estivesse começando hoje, eu definitivamente usaria o LinkedIn ao lado de pelo menos uma plataforma de freelancer Essas três definitivamente oferecem mais oportunidades e devem ser a primeira linha de abordagem para você, mas existem outras plataformas que vale a pena mencionar Pessoas por hora são uma espécie de mistura entre fibra e Upwork Os clientes podem encontrar freelancers diretamente pesquisando habilidades específicas e, em seguida, revisando os perfis dos freelancers e entrando em contato Além disso, eles podem publicar projetos como Upwork e o freelancer e receber propostas de freelancers E, assim como o Fiber, você pode publicar serviços aqui. Eles chamam isso de ofertas no Fiber, é chamado de show. Eu usei o PeoplePerHour como freelancer e como cliente Eu fiz alguns designs de currículos aqui naquela época e contratei web designers e desenvolvedores web várias vezes aqui. Top tell é um site de freelancers que tem uma abordagem bem diferente dos outros. Este site vai ser um pouco cedo para você em sua carreira, mas ainda vou entrar aqui para que você saiba o que está por aí. Top tell tem um processo de seleção muito rigoroso para freelancers Eles fazem entrevistas, desafios, análises de portfólio antes de aceitarem você na plataforma. Eles querem os melhores talentos lá, daí o nome dos dez melhores. Como afirmam, apenas 3% dos candidatos são selecionados. Portanto, considere o Toptal depois de se destacar em suas habilidades. Obviamente, isso significa que os clientes que procuram freelancers neste site estão procurando um serviço premium e não têm medo de pagar adequadamente Então, como você pode ver, mesmo em plataformas online, há lugares para encontrar trabalho bem remunerado. No geral, as possibilidades on-line são infinitas, mas a concorrência também é acirrada, porque existem muitos web designers por aí É o mundo inteiro competindo pelos serviços. Mas não desanime. Na realidade, a maioria dos web designers e a maioria dos talentos que estão se candidatando a empregos nessas plataformas são terríveis. Nem são medíocres. Eles estão abaixo da medíocre. Na verdade, os clientes também têm dificuldade em encontrar bons talentos. Freqüentemente, meus clientes, quando vêm até mim e eu estou ocupada e talvez esteja lotada e não tenha capacidade para realizar novos projetos, eles me perguntam: Ok, então você conhece alguém que possa recomendar porque acessamos este site e não encontramos ninguém porque há muita concorrência e muita concorrência e muito barulho acontecendo lá fora. Que encontrar o talento para eles é um pouco difícil. E o problema com essa plataforma é que, como qualquer pessoa pode participar e ela está aberta ao mundo e o mundo é muito grande, muitas pessoas participam sem nem mesmo ter nenhuma habilidade Por exemplo, as pessoas alegarão que são web designers e farão qualquer coisa antes mesmo de fazerem um curso de web design, certo? Se você pode imaginar, qualquer criança ou qualquer pessoa vem aqui e pensa, você sabe, eu vou ganhar muito dinheiro online, e eles começam tipo, bem, fazer web design. Acabei de instalar um site de espaço quadrado para alguém ou acabei de aprender a instalar um tema WordPress. E agora sou web designer ou desenvolvedor web, certo? E para alguém como você, que trabalhou tanto nisso, e sejamos honestos, esse curso foi muito importante. Portanto, se você trabalhar e se estiver trabalhando nisso, se estiver levando isso a sério, você será imparável E se você prestar bom serviço e prestar um bom serviço com o aprimoramento e o processo que você já definiu, ter um ótimo site , mostrar portfólios e algumas outras dicas e truques que vou lhe ensinar mais tarde nesta parte do curso, você estará quilômetros à frente da concorrência, que está apenas brincando, não um bom serviço e prestar um bom serviço , com o aprimoramento e o processo que você já definiu, ter um ótimo site, mostrar portfólios e algumas outras dicas e truques que vou lhe ensinar mais tarde nesta parte do curso, você estará quilômetros à frente da concorrência, que está apenas brincando, não sabendo o que estão fazendo na realidade, e são apenas pessoas aleatórias em todo o mundo. 157. 151 Encontrando estúdios de trabalho: Encontrar trabalho on-line não é o único lugar. Também temos muitos empregos disponíveis localmente. Em um desses lugares, estariam os estúdios. Então, seriam agências de marketing, agências digitais, agências criativas, estúdios de design. Eu não sei Eles têm muitos nomes diferentes. Basicamente, são empresas que fazem web design e trabalho digital para seus clientes. Quem quer que seja cliente individual ou empresarial, certo? Então, se eles são agências de publicidade, por exemplo , agências de marketing, eles estão sendo contratados por alguma grande empresa que precisam uma página de destino ou site Então, esse tipo de estúdio que eles contratam, eles têm funcionários internos, certo? Obviamente, eles têm designers e desenvolvedores internos e tudo Mas o que acontece são muitas agências de médio, médio e médio porte como essa e estúdios Eles têm uma pequena quantidade de funcionários internos e têm como um exército de freelancers da Flórida Eles fazem a maior parte do trabalho. Então é assim que eles funcionam. Meu maior compromisso profissional foi na verdade, com esse estúdio e trabalhamos por um longo tempo e eles receberam muitos trabalhos para mim e eu aprendi muito com eles. E isso não significa que eles precisem ser estúdios locais que podem ser de diferentes países, cidades e até continentes diferentes Eu mesmo trabalho com o estúdio que estava na Austrália e muito, muito longe de onde eu moro, que é na Europa e em Portugal. Agora, a forma como você pode abordar os estúdios dependerá caso a caso, mas aqui estão algumas estratégias sobre como abordá-los Eu tenho um amigo que é ilustrador e ele tem essa abordagem Já uma vez eu perguntei a ele, você sabe, como você consegue seus clientes? Porque ele não trabalha em plataformas de freelancer na Flórida. E ele me disse que apenas envia spam para eles. Então, ele tem essa lista de e-mail de diferentes clientes em potencial, como agências, empresas, agências de publicidade que publicam livros ou revistas porque esses são os revistas porque esses são os tipos de clientes com os quais ele trabalha E toda vez que ele precisa trabalhar, vez em quando ele envia e-mails usando algum software de e-mail E basicamente, ele perguntará sobre o trabalho dizendo: “Oh, vocês precisam um ilustrador ou algo parecido? E não sei exatamente quais são os usuários fiscais e como ele aborda , mas sei que ele pergunta e pergunta se eles precisam de um ilustrador E o que acontece é que, às vezes, na hora exata, uma dessas empresas precisará um ilustrador para a hora exata Então eles voltam para ele dizendo que, sim, nós realmente precisamos de um ilustrador Ele é contratado. E é uma ótima abordagem porque isso economiza o tempo do outro, do outro cara. Portanto, eles não precisam publicar um emprego em plataformas de freelancers ou em qualquer outro lugar, examinar os portfólios de pessoas diferentes e entrevistá-las mais do que É muito fácil quando alguém já veio até você na hora certa. Cada estúdio de design terá seu próprio estilo de design que eles usam em sites. Ali, teremos abordagens específicas com os designs. Eles podem ser um pouco mais baseados em ilustrações podem ser mais fotografias, podem ser mais baseados em tipos e design baseado em layout. Então, quando você aborda isso, quando você decide abordar estúdios de design, veja exemplos de trabalho e a maioria deles obviamente terá seu portfólio funcionando em seu site, examine-os e entenda e que tipo de estilo eles usam em sua abordagem, aqueles que você combina com o estilo ou refina seu portfólio de uma forma estão preenchendo essa lacuna entre seu trabalho e portfólio deles para que ele corresponda o máximo possível Porque sabíamos que isso se aplicava aos estúdios. Eles vão ver se têm menos do que dezenas e centenas de candidatos diferentes que estão procurando. Obviamente, você se inclinará e escolherá alguém que realmente combine com seu estilo. Como eles sabem que sim, você se conectará facilmente ao design deles, ao fluxo de trabalho Portanto, eles não precisam treiná-lo se você é como um ilustrador e gosta mais de sites baseados em fotografia. Agora, eles teriam que treiná-lo novamente sobre como fotografar, ou talvez precisem mudar completamente e alterar seu estilo de design Então, preencha essa lacuna entre isso e seu portfólio e você aumentará suas chances de ser contratado por eles. Quando eu era gerente da empresa, tínhamos isso de volta e vimos postado on-line e tínhamos um monte de candidatos, obviamente, se candidatando. Mas um desses caras, um dos candidatos, apareceu na nossa porta. Acabou de aparecer em nosso escritório e eu tinha um currículo impresso e um currículo dele. E ele acabou de entregar isso. Ele disse que eu vou gostar de Ohio. Eu estava me candidatando a este anúncio de emprego e só queria entregá-lo pessoalmente ao meu currículo. E fiquei tipo, fiquei muito surpreso, mas também muito impressionado, ao ver esses caras meio confiantes e audácia aparecerem e virem se candidatar E quando tive que passar por 200 candidaturas de emprego diferentes, uma pessoa realmente se destacou , obviamente, porque você apareceu. Ninguém mais fez e ninguém mais fez nada diferente. E, curiosamente, eu provavelmente desistiria candidatura dele se ele não tivesse aparecido, porque currículo não era forte o suficiente e sua experiência não era boa o suficiente para o que estamos procurando Mas como você apareceu, seu amor é memorável e eu meio que gosto dessa confiança e ele tem uma atitude meio proativa e conseguiu a entrevista, ele realmente pulou a parte da entrevista e chegou à fase final, fase de seleção final para os seleção final para os E ele só conseguiu isso porque apareceu. Às vezes, basta aparecer e entregar seu portfólio impresso, porque poucas pessoas estão fazendo isso. As pessoas que contratam estão ocupadas e apreciam qualquer passo extra que o candidato dê. Ninguém pode aproximar você da oportunidade de emprego. As pessoas dentro desses estúdios usando o LinkedIn e o Facebook, você pode definitivamente encontrar pessoas que trabalham nesses estúdios e depois se conectar com elas diretamente ou usando outros sites de redes sociais, provavelmente como Facebook, Instagram, Twitter e mensagens diretas Eu mesmo nunca fiz isso, mas conheço muitos freelancers, eles fazem coisas assim Eles se conectam com pessoas dentro de você, mesmo aquelas que estão realmente contratando os gerentes ou fundadores dos estúdios Se você é esse tipo de pessoa e consegue se conectar facilmente com estranhos, experimente. Eu não sou esse tipo de pessoa e isso não funciona para mim, mas talvez seja bom para você. Então, apenas lançando isso como uma ideia 158. Encontrando trabalho: networking: Outra opção óbvia, mas muitas vezes esquecida de encontrar trabalho é o networking Em todas as grandes cidades, há enxames de empreendedores e startups que estão se apressando de empreendedores e startups que estão se apressando e tentando fazer seus negócios funcionarem e todos precisam Você está em um mercado muito bom. Todas as empresas, sejam pequenas ou grandes, internacionais ou locais, até mesmo profissionais individuais como você e eu, fotógrafos, treinadores, organizadores do CMI, todos precisam Onde você faz networking? Comece com um encontro. Met up, se você nunca o usou, é um lugar onde as pessoas organizam diferentes eventos em torno de um tema ou tópico específico. Por exemplo, esse grupo, Lisbon UX, organiza diferentes encontros e eventos relacionados ao design na minha cidade Intérpretes, startups e outros designers são conexões muito valiosas para você, e costumam ir a encontros como esse porque organizam seus próprios tipos de encontros e organizam suas próprias palestras, workshops e diferentes tipos de eventos que atraem o público certo que podem ser úteis para você Certa vez, ganhei um show em um evento como esse. Certa vez, participei de um workshop sobre como reestruturar meu site Realmente, eu participei de um workshop sobre isso. Não que eu precisasse aprender, mas pensei, sabe o que? Vai ser divertido. E o que você sabe? Eu ganhei um show com isso. Mesmo que você encontre o público certo no mitaps, perceberá que muitos deles não têm um orçamento bom o suficiente para pagar bem por projetos de sites É bom quando você está começando e está sacrificando algum pagamento pela experiência e pela rede, mas em um estágio posterior, não é a melhor opção Um lugar melhor para encontrar peixes maiores são conferências, conferências tecnologia ou outras conferências relacionadas a startups. As startups costumam ir a lugares como esse para expor seus produtos, encontrar investidores ou encontrar clientes para sua empresa Essas conferências são pagas, então é mais adequado em uma fase posterior, uma vez que você comece a trabalhar como freelancer e possa pagar um pouco pelo marketing Muitas cidades terão incubadoras de startups e você pode verificar se sua cidade tem essas incubadoras, porque nesses lugares eles meio que porque nesses lugares eles meio montam muitas startups, e estão sempre organizando diferentes eventos, e estão sempre organizando demonstrações e coisas assim, e muitos empregos e trabalhos freelancers podem ser encontrados nesse ecossistema e verificar se sua cidade tem essas incubadoras, porque nesses lugares eles meio que montam muitas startups, e estão sempre organizando diferentes eventos, demonstrações e coisas assim, e muitos empregos e trabalhos freelancers podem ser encontrados nesse ecossistema e ambiente. E muitas pessoas que são web designers, designers ou desenvolvedores, são uma multidão e boas conexões para você se desenvolver e crescer. E se você odeia networking, então não faça isso. Dedique seu tempo e esforço em algo mais adequado para você e sua personalidade. Eu mesmo não gosto de fazer networking. Eu prefiro mastigar um copo do que ir falar com as pessoas. É sempre melhor colocar seus esforços em algo que combine com você Eu tenho uma regra para você. Não faça nada que faça você odiar web design. Você gostar e curtir web design é crucial para o seu sucesso Um fator melhor para tornar você lucrativo e bem-sucedido do que qualquer talento ou educação universitária sofisticada E sua diversão com o web design depende de muitas coisas, porque, assim como qualquer outro trabalho, envolve muito mais do que simplesmente sentar e projetar, certo? Está procurando clientes e negociando, enviando propostas, todas as reuniões e todas essas coisas. Portanto, torne o máximo dessas coisas agradáveis também. 159. 153 Encontrando conclusão do trabalho: Essas são algumas das muitas opções que você tem à sua disposição para encontrar trabalho autônomo. Eu queria te mostrar todas essas opções porque às vezes os freelancers esquecem que há mais lugares para encontrar trabalho do que apenas o Upwork Eu não cobri todos eles e eu não poderia fazer isso. empregos geralmente vêm de lugares inesperados, mas aqui está o que você deve fazer. Exponha-se ao maior número possível de oportunidades. Bata no maior número possível de portas, como qualquer outra coisa na vida, você tem que tentar a sorte o máximo de vezes possível, como disse Wayne Gretzky, você perde 100% das fotos que Tudo bem, a seguir vamos mergulhar fundo no Upwork, 160. Visão geral do Upwork: Ao longo dos anos trabalhando no Upwork como freelancer e contratando outros freelancers, acumulei algumas dicas e truques interessantes que usei para ter sucesso no Upwork, e quero compartilhar essas dicas com você para você não precise perder anos de tentativa e erro tentando descobrir como fazer as coisas funcionarem no Upwork Então, coloquei todas essas dicas em vídeos diferentes e meio que as compilei em temas diferentes. Mas antes de chegarmos a essas dicas, deixe-me fazer um rápido tour pelo Upwork É assim que o upwork funciona. Um cliente publica um trabalho que deseja realizar, como o design e a criação de um site para uma startup. Eles fornecem detalhes, às vezes um orçamento predefinido e às vezes sem um orçamento definido como uma taxa horária Os freelancers licitam para o trabalho, enviando propostas com preços, então o cliente responde às propostas e inicia uma conversa com os freelancers de que gosta Muitas vezes, eles podem fazer entrevistas por telefone. Finalmente, eles fazem sua escolha e concedem o trabalho a uma pessoa. O contrato e o faturamento são todos gerenciados por meio da plataforma Se você estiver trabalhando com uma taxa horária , acompanhará o tempo por meio do aplicativo deles. Todo o tempo é registrado automaticamente e o cliente é cobrado automaticamente e o método de pagamento do cliente é cobrado automaticamente Isso é ótimo porque você não precisa se preocupar com faturamento, transferências de dinheiro e tudo uso do Upwork é gratuito, mas cobra comissões do que você Por exemplo, digamos que você fature um cliente no total de $5.000. O Upwork manterá 10%. Procurar emprego é bem simples. Você pode pesquisar vagas por palavras-chave, habilidades ou outros filtros. Pesquisar corretamente será importante para encontrar os empregos certos. palavras-chave para você serão design do site, web design, fluxo da web, empréstimo, página da web, site responsivo e assim por diante Não se esqueça de emprestar páginas. estão em alta demanda e são mais simples do que sites Em termos de design e desenvolvimento, as páginas de empréstimo são todas as mesmas páginas da web que criamos até agora É apenas uma única página em vez de um site inteiro. As palavras-chave não são a única forma de pesquisar. Muitas vezes, eles não são a melhor maneira, pois retornam tudo o que menciona sua palavra-chave em qualquer lugar do anúncio de emprego. A busca por habilidades pode ser um pouco mais direcionada nesses casos. Você pode fazer isso na Pesquisa avançada. Selecione uma habilidade no menu suspenso e pesquise, mas uma habilidade por vez, caso contrário, ele procurará empregos que correspondam a todas as habilidades que você selecionou. Essas são habilidades selecionadas quando eles estavam criando o trabalho, portanto, podem ser um pouco mais precisas do que apenas palavras-chave na descrição É assim que se parece o anúncio de emprego normal. Este é um projeto de tarifa horária. Isso aparece aqui. As descrições de cargos no Upwork são, na maioria das vezes, muito ruins Muitas vezes, não são fornecidas muitas informações detalhadas sobre o projeto. Os funcionários poderiam usar algum treinamento sobre como publicar descrições de cargos adequadas para atrair o público certo. Para se candidatar ao emprego, você precisa enviar uma proposta. É assim que o formulário de envio de propostas se parece. Você seleciona as tarifas que propõe para este trabalho. O tipo de cobrança é definido pelo próprio cliente. Portanto, se for o faturamento por hora, você só poderá propor tarifas por hora Para tarifas fixas, você deve propor apenas uma taxa fixa. Carta de apresentação é uma mensagem que você escreve para o cliente. É aqui que você tenta fazer essa proposta e convencê-los a contratá-lo, basicamente. O resto, como seu portfólio, suas avaliações e tudo mais, eles podem conferir diretamente no seu perfil. Tenho experiência em publicar anúncios de emprego no Upwork, e isso me deu uma vantagem que outros freelancers não tinham Eu sabia algo que eles não sabiam. E então você vai. Isso é o que um cliente diz depois de publicar uma vaga. Uma lista de propostas de freelancers. Esta é a página mais importante onde acontece a tomada de decisão pelo cliente. É aqui que eles filtram os freelancers com os quais não querem trabalhar e escolhem os que querem. Tenho várias dicas excelentes sobre como ter sucesso nesta página e se destacar da multidão, mas mais tarde. O cliente pode ver sua tarifa proposta aqui, neste caso, de hora em hora, pois é isso que eu defino como faturamento do projeto Eles podem ver seus ganhos vitalícios em upwork, seus cargos e crachás, que discutiremos com mais detalhes, e algumas linhas da carta de apresentação Quando o cliente clica em um deles, ele obtém uma visualização da proposta, que é basicamente a mesma do perfil do freelancer mais a carta de apresentação Agora, todos os outros detalhes do seu perfil e da carta de apresentação serão importantes. O cliente pode verificar as avaliações e classificações do trabalho anterior, quanto você ganhou nesses trabalhos. Eles podem ver seu portfólio. Essas são capturas de tela que você pode enviar na seção do seu portfólio Eles podem ver suas habilidades. Mantenha essas habilidades genuínas e concentre-se em seu domínio. Não coloque coisas como o Microsoft Word. Isso não faz com que você pareça um web designer melhor, e eles podem ver seu histórico de empregos fora do upwork, se você adicionar algum Se você tem histórico de emprego, é uma boa ideia adicioná-los aqui. experiência anterior também conta e pode ajudar a aumentar sua credibilidade Embora, o que quer que você coloque, tenha que ter uma boa aparência. Seu emprego de verão na KFC não vai acrescentar nada. E é isso. Essa é uma visão geral do Upwork. 161. Dicas 1 a 3: obtendo seu perfil aprovado: Você pode trabalhar no Upwork. Primeiro, você precisa ser aprovado Isso é meio que uma má notícia no começo, mas depois de ser aprovado, é uma boa notícia, porque isso significa que a Upwork está tentando manter o mercado estável e apertado Portanto, não está superlotado, superlotado de freelancers, porque se houver muitos freelancers, a concorrência será demais e os E, basicamente, não será um grande benefício para os freelancers que estão trabalhando no upwork nem para os clientes, porque então eles simplesmente terão que passar por muitos freelancers diferentes e muita concorrência. Quando você abre uma conta como freelancer no Upwork, você envia sua inscrição e eles precisam analisá-la em alguns dias e aprovar ou rejeitar Se você for rejeitado, não se preocupe porque você pode se inscrever novamente e não há limite quantas vezes você pode se inscrever novamente no Upwork, e você apenas melhorará seu perfil e se inscreverá seu perfil e E se isso não funcionar , a experiência repetida com esse processo de inscrição não é muito sobre o que falar. Eu consegui. Foi aceito, fim da história. Mas há um artigo que vou vincular aos recursos, e eu quero que você leia esse artigo porque há ótimas dicas, e eu quero que você leia esse artigo antes de se inscrever no Apwork E aqui estão algumas dicas que estou descaradamente roubando A Upwork quer criar um equilíbrio no mercado entre o número de vagas publicadas e, em seguida, os freelancers que licitam essa vaga Então, quando esse equilíbrio perturba, e digamos que alguém publique um design de logotipo e você tenha 1.000 freelancers licitando para esse trabalho , as coisas saem Portanto, sempre que esse equilíbrio é perturbado, o aumento fecha a porta Estão se candidatando a essa habilidade específica. Então, por exemplo, se formos designers de logotipo, certo, e Pork tem muitos designers de logotipo, mas não há vagas suficientes publicadas nessa categoria, então eles meio que fecharão temporariamente as portas para novos aplicativos e novos freelancers que estão entrando nessa categoria Então, até que esse tipo de equilíbrio volte a funcionar. Uma maneira de evitar que isso aconteça com você durante o processo de inscrição é mostrar que suas habilidades se estendem entre muitas categorias diferentes Como web designer, você se enquadra automaticamente em várias categorias. Primeiro, na família de desenvolvimento, você tem design web e móvel, além de desenvolvimento web, e na família de design e criação, você tem a categoria de gráficos e design. E talvez até mesmo outros para coisas como experiência do usuário e design da interface do usuário já que eles não estão listados lá. Caso você tenha outras habilidades e planeje realizar outros trabalhos, talvez como design de logotipo ou marca , você também pode incluí-las. Mas não se esforce artificialmente porque , de tempos em tempos, eles verificam o nível de habilidade, então podem fazer algumas entrevistas para verificar se você sabe e se é capaz nessas categorias Além de escolher categorias, o upwork também solicita habilidades específicas que você possui Liste o máximo de habilidades possível, e o Upwork tem esse enorme banco de dados de habilidades onde você pesquisa e, em seguida, ele é preenchido automaticamente e oferece a opção que você precisa selecionar Por exemplo, em termos de web design, essas são habilidades que você poderia usar facilmente. Coisas como web design, obviamente, design responsivo, Figma, fluxo da web, páginas de empréstimo e Eu escolho apenas habilidades genuínas que sejam relevantes para o trabalho. Não coloque o Microsoft Word porque isso não é relevante para sua categoria de trabalho. Vou deixar você ler o resto das fitas deste artigo em si. Existem quatro, então dê uma olhada. Ok, voltando ao meu próprio conteúdo e não roubando conselhos de outras pessoas Não faça upload de trabalhos de portfólio deste curso. Aqui está o porquê. Como há muitos estudantes neste curso, e muitos de vocês provavelmente usarão o Upwork para se inscrever, acabarão se inscrevendo com as mesmas peças do portfólio se usar aquelas que já criamos e criamos neste curso E se a mesma pessoa estiver analisando sua inscrição no Upwork ver dois candidatos diferentes se inscrevendo com exatamente o mesmo portfólio, isso levantará sinais de alerta para 162. Dicas 1 a 3: obtendo seu perfil aprovado: Qual é a primeira coisa que seu cliente diz em seu perfil ou em sua proposta? Sua foto de perfil. Eles tomarão uma grande decisão apenas olhando a foto do seu perfil. Todos nós fazemos isso. Vamos jogar um jogo. Leia 1-10 o quão competente esse cara parece. Não é necessário analisar apenas uma primeira sensação de 1 a 10, a probabilidade de ele realizar o trabalho Definitivamente, estou dando dez para ele. Ele está sorrindo, está bem vestido, o fundo é agradável A foto parece profissional. Agora, que tal esse cara? Eu vou dizer três. Não verifiquei mais nada no perfil dele, mas parece que o sangue já quer escanear meu dinheiro. É assim que as fotos podem ser poderosas. Você não precisa estar bonito ou bonito porque não é um concurso de beleza, mas precisa parecer confiável Tire uma foto de cabeça muito boa e não tente economizar tempo e acessar perfil do Facebook e pegar algo de lá, porque provavelmente no seu perfil do Facebook, você tem fotos que estão legais, bonitas ou bonitas E esse não é o critério a ser usado para tirar uma boa foto de chapéu, uma boa foto de perfil no upwork porque os clientes não querem que você seja, você sabe, bonito ou bonito ou pareça um cara legal Não é isso que eles estão procurando. Eles estão procurando uma pessoa competente. Portanto, você precisa encontrar uma foto em que pareça confiável e competente, ou seja, algo em que esteja olhando diretamente para a câmera, sorrindo e, sorrindo e preferência, em um Agora, não precisa ser capturado no estúdio, obviamente, você pode estar no fundo do céu, certo? Você pode estar em um fundo de algo simples, algo que não está chamando a atenção e desviando a atenção do seu Se você teve apenas 1 hora para preparar seu perfil no Apwork, passe 45 minutos na foto do perfil e 15 minutos no resto Essa é a importância da foto do perfil. E, vá lá, é tão fácil. Nós temos telefones hoje. Sim, você provavelmente tem um smartphone muito bom que tira fotos incríveis. Basta encontrar um lugar muito bom, vestir-se bem, cortar o cabelo, talvez aparar barba e tirar uma boa foto de rosto O Upwork tem um processo de verificação de identidade. É simples. Você precisa fazer o upload do seu documento de identidade oficial e concluir uma videochamada com eles. Depois de verificado, você receberá esse selo azul. Essa é uma excelente maneira de aumentar a confiança em seu perfil com muito pouco esforço. O título é o que aparece abaixo do seu nome. Web designer é um título dissidente, mas é um pouco chato Isso é o que a maioria das pessoas faz, então não há nada que você faça. Adicionar um pouco mais de força vai ajudar muito, por exemplo, um web designer especialista ou web design P, web designer rápido e eficiente Fala um pouco mais sobre você, mesmo sendo um título autoproclamado, ainda se destaca. Imagine que haja duas propostas. Um diz web designer e o outro diz web designer especialista. Você se sentiria um pouco mais atraído pelo especialista. Uma abordagem ainda melhor é mencionar os resultados finais, por exemplo, design e construção de sites impressionantes, sites de primeira linha, web design sem complicações Para dar um passo adiante, você pode até mesmo misturar e combinar esses estilos, como um web designer especializado, sites poderosos e impressionantes ou profissional de web design, um serviço de primeira linha Essas são propostas para um dos empregos que eu publiquei, e era um emprego na página de empréstimo Agora, quantos desses cargos correspondem ao que eu publiquei? Só um. E até ele tem a palavra-chave mais importante escondida no fundo do título. Estou procurando alguém que crie páginas de empréstimo. Como posso saber se você é a pessoa certa se não há menção de páginas emprestadas em seu título Sim, desenvolvedores web, Wordpress e PHP podem criar páginas de empréstimo Mas como eu sei disso? Eu pedi uma página de empréstimo Você me dá o Wordpress como resposta. Afinal, o que diabos é o Wordpress? Não sou desenvolvedor nem web designer. Se eu fosse, criaria minha própria página de empréstimos. Não estou familiarizado com sua tecnologia e linguagem. Provavelmente sou um intérprete que precisa de uma página para alguma coisa E mesmo que eu estivesse familiarizado com a tecnologia e conhecesse toda a linguagem, eu ainda gostaria de encontrar alguém especializado exatamente no que estou perguntando Então, se eu estou pedindo que eu precise terminar a página de empréstimo, eu definitivamente gostaria de procurar alguém que seja especialista em páginas de empréstimo ou se especialize apenas em páginas ou se especialize apenas em Se eu quiser marketing no Facebook, certo, talvez anúncios no Facebook, quero alguém que seja um profissional de marketing de anúncios no Facebook, não um profissional de marketing digital geral. Isso é banana. Em que eles estão pensando? É muito fácil competir com a maioria dos freelancers Samson Você pode ser o melhor web designer que existe, mas se estiver vendendo soquetes, nunca vou acessar seu portfólio O Upwork tem esse recurso chamado perfis especializados. Então você tem um perfil geral, como um web designer, e então você pode ter um perfil especializado, como Webflow ou designer LandiPage Ao se candidatar a empregos que procuram designers do Webflow, você pode usar esse perfil especializado e se candidatar com ele Isso é muito mais eficaz do que apenas se inscrever como web designer e depois precisar explicar na carta de apresentação que você trabalha no Webflow Talvez eles nunca consigam ler sua carta de apresentação. Outra informação que realmente se destaca nos perfis é o selo de pontuação de sucesso no trabalho Para obter esse selo no Upwork, você precisa trabalhar com pelo menos três clientes diferentes Portanto, não há muito que você possa fazer sobre isso. Você só precisa esperar. Mas há algo que você poderia fazer. Você pode trazer projetos externos para o Upwork para obter esses requisitos mínimos o mais rápido possível Você pode encontrar pessoas ou empresas em sua rede que precisam um site e fazer um projeto para elas. E você pode dar a eles um grande desconto ou talvez até mesmo criar um site para eles por um preço simbólico muito pequeno em troca de fazer isso no Upwork, fazer todo o processo no Upwork e depois dar um feedback no final tipo de situação ganha-ganha para os dois no início funciona para você. Você obterá um pouco de tração e obterá esses requisitos mínimos no Upwork e, além disso, eles terão um site por um preço muito barato Batch pode melhorar significativamente sua taxa de contratação, então pode valer a pena passar por todo esse processo se você estiver com dificuldades para conseguir clientes no início. Caso você considere passar por todo esse processo, vinculei aos recursos uma página da Upwork sobre como eles calculam essa pontuação de sucesso no trabalho Leia isso primeiro para que você possa entender como funciona. A fórmula não é totalmente compartilhada porque é totalmente secreta, então não é garantido quando você a receberá Mas eles fornecem uma boa orientação sobre como isso funciona, para que você possa entender quando esperar receber esse selo 163. Dicas 10 a 12: consiga o emblema de “melhor combinação”: Cada anúncio de emprego pode receber uma grande quantidade de propostas. Aqui estão 15. Isso já é muito, certo? Mas, na verdade, está em um lado menor. Os clientes podem receber mais do que isso, geralmente de 20 a 50 e às vezes até mais de 50 propostas. O cliente vai passar por cada um deles? Na verdade, não. Eles manterão seus olhos no topo. O que isso significa? Você tem que encontrar maneiras de acabar no topo? Work coloca as melhores combinações no topo e até adiciona esse emblema brilhante de melhor combinação à proposta Isso coloca esses freelancers milhas à frente de todos os que estão abaixo. Como freelancer, você não vê se recebeu esse selo ou não, mas clientes em potencial sim, e você deve sempre buscá-lo Então, como você consegue esse distintivo? Ninguém sabe realmente qual é o algoritmo por trás disso. Upwork realmente não compartilha essas informações, mas depois de analisar as propostas que eu geralmente recebo, descobri vários ingredientes principais Ao criar seu perfil, upwork solicitará que você escolha seu nível de experiência Essa mesma pergunta é feita aos clientes quando eles publicam a vaga. Você pode ver facilmente o nível de experiência que o cliente escolheu para o trabalho específico. Inscreva-se no nível de experiência correspondente. Esse é provavelmente o fator mais importante na determinação desse lote. No trabalho que eu havia postado, eu estava solicitando um nível de especialista, e a maioria das propostas eram de freelancers intermediários e iniciantes Em que eles estão pensando? É uma perda de tempo de todo mundo. Há empregos suficientes em cada nível, então inscreva-se nos correspondentes. Se você não gosta de empregos em seu nível de experiência , altere seu nível no perfil. Fácil assim. O segundo critério mais importante parece ser as habilidades. Quando os clientes publicam o emprego, eles são solicitados a selecionar as habilidades específicas que estão procurando em um freelancer. Eles recebem o mesmo banco de dados de habilidades que você usou em seu perfil, e você também pode ver essas informações no anúncio de emprego. Candidate-se a empregos com habilidades correspondentes. Por exemplo, eu não tenho nenhuma dessas habilidades selecionada no meu perfil. Então, se eu me candidatar a esse emprego, não conseguiria uma boa pontuação. Portanto, sempre verifique as habilidades que o cliente selecionou para o trabalho e certifique-se de que você também as tenha em seu perfil, e elas correspondam, pois isso definitivamente aumentará suas chances de ser a melhor opção. Agora, o upwork só permite que você selecione no máximo dez habilidades Portanto, haverá algumas habilidades relacionadas que você talvez precise omitir. Mas às vezes você verá um trabalho que usa exatamente as habilidades que você teve que deixar de fora. O que você pode fazer nesse caso é remover algumas e adicionar as habilidades que faltam do trabalho e criar uma combinação. Isso pode ser um pequeno truque que o Upwork pode conhecer, então o algoritmo pode ignorar as alterações de então o algoritmo pode ignorar as alterações perfil de última hora Mas ainda vale a pena tentar. Pelo menos o cliente verá que você tem as habilidades que ele estava procurando. Quando o cliente está selecionando o nível de experiência desejado de um freelancer, ele mostra a faixa de preço aproximada esperada Você deseja combinar seu lance com o intervalo sugerido de aumento de trabalho. Se o cliente selecionou um especialista e pagou mais de $50 por hora, Upwork não gostará se você licitar 30 por hora Você está fazendo com que você e a Upwork percam uma receita maior. Para descobrir qual é a faixa de preço atual do seu nível, você quase pode publicar um anúncio de emprego para chegar à etapa e ver as faixas de preço mais recentes. Não é preciso nada para fazer isso. Você não precisa publicar o trabalho no final. É apenas uma das etapas do assistente de anúncio de emprego. E você pode fazer isso de tempos em tempos para ter os valores mais recentes. 164. Dicas 13-14: proponha o preço certo: Aqui estão algumas dicas sobre preços. Muitos freelancers acham que os clientes escolhem preços mais baixos E se fizerem lances baixos, acham que parecerão mais atraentes para os clientes, como uma espécie de pechincha Freelancers que têm esse tipo de mentalidade, têm esse tipo de gosto e atitude negativos em relação ao upwork e a essas plataformas de freelancers, pensando que agora todo mundo está competindo pelo preço, e há muitos preços, muitas pessoas competindo com o preço, então todo mundo está meio que baixando Mas eles não poderiam estar errados. Se isso fosse verdade, você não teria alguns freelancers recebendo $500 por hora no Os sites são produtos de alto valor. Eles não são como papel higiênico o mais barato recebe mais vendas. As empresas usarão o site para seus próprios negócios para que possam obter mais vendas, certo? Isso representará sua empresa, representará seus negócios e sua marca, para que eles não queiram produtos baratos. Eles querem padrão, querem qualidade. E, muitas vezes, eles ficam mais do que felizes em pagar por isso. Assim como muitos de nós que estamos felizes em pagar 1.000 dólares pelo iPhone, em vez de pagar 100 dólares pela Ao licitar pouco, você não só ganha menos dinheiro, mas também ganha menos empregos Parece contra-intuitivo, mas os clientes realmente preferem preços mais altos Por quê? Porque o preço é uma forma de saber se algo é de qualidade ou não. Sabemos que nem sempre é verdade e percebemos isso, mas muitas vezes podemos nos ajudar, certo? Por isso, usamos os preços como um dos indicadores para avaliar se algo será de alta qualidade ou não. Ao dar um lance baixo, você está sussurrando silenciosamente para seus clientes que Veja esta lista de propostas. Mais abaixo você rola, mais deprimente a situação parece. Pessoas menos qualificadas, sem classificação, sem empregos anteriores , pior apresentação e você também obtém preços mais baixos. Portanto, estar no fundo do poço não parece nem um pouco atraente. Os talentos menos experientes são classificados na parte inferior. Portanto, preços mais baixos estão associados qualidade inferior, basta olhar para esta lista. Essa lista é um indicador claro para o cliente de que ele deve ter cuidado com preços baixos. Nesse caso, preços mais baixos parecem um sinal de alerta, não uma pechincha Como cliente, quando estou contratando freelancers, odeio a pergunta: qual é o seu orçamento, porque na maioria das vezes, não sei qual é o meu orçamento Sei que quero que algo seja feito, mas muitas vezes não sei quanto vai custar. Não sei qual é o bom valor para pagar. Então, fazer essa pergunta meio que me coloca nesse estado confuso em que não sei como responder. Mas quando você publica uma vaga na Upwork, como cliente, e se escolhe uma tarifa fixa, Upwork perguntará qual é o seu orçamento? E para alguém como eu, que não sabe exatamente qual é seu orçamento e não gosta de responder à pergunta, o que fazemos é tentar escolher o menor número que vem à nossa mente. A última coisa que você quer fazer é pagar demais por alguma coisa. Então, se eu não souber quanto algo custa, vou apostar muito menos em minhas estimativas do que realmente custará, porque eu realmente não quero pagar demais Então eu não quero dizer, você sabe o que? Eu pagarei 2000 por esse trabalho. E se custar apenas 300 dólares? Então, vou presumir que os freelancers vão abusar de mim por eu meio que colocar esse orçamento alto Então, agora todo mundo vai tentar tirar proveito disso, e eles dirão: Oh, vamos fazer isso por 2000, vamos fazer isso talvez por 1.500, e assim por diante, quando, na realidade, o trabalho custa apenas $300 Portanto, para evitar pagamentos excessivos, você verá que os clientes geralmente pagam orçamento muito menor do o que realmente estão dispostos a pagar E no final do dia, eles ficarão bem pagando 203 vezes mais do que propõem como orçamento Portanto, quando você vê um número no orçamento, não considere 100% verdade, que essa é exatamente a quantidade de dinheiro disponível que eles têm. Às vezes é verdade, certo? Portanto, as empresas terão exatamente essa quantia de dinheiro disponível para esse projeto. Mas muitas vezes isso não é verdade. São apenas clientes tirando números de suas cabeças. E quando você vê esse orçamento, simplesmente ignore-o e proponha quanto vale o projeto para você? A menos que você veja na descrição do cargo que eles significam explicitamente que esse é orçamento máximo deles e é isso que eles pagarão 165. Dicas 15-16: seja o freelancer que eles não vão resistir: centro freelance bem-sucedido geralmente não tem a ver com as habilidades, mas sim com o serviço que você fornece aos seus clientes Você pode ser o melhor web designer, mas se os clientes não gostarem de trabalhar com você, se você não estiver prestando um serviço de alta qualidade, eles não voltarão para comprar mais. Porque o que acontece com clientes satisfeitos é que eles não apenas voltam para buscar mais e trazem mais trabalho para você, mas também trazem outras pessoas. Eles indicam seus amigos que geralmente são empresários e intérpretes Seus amigos geralmente são outros empresários e outros intérpretes Portanto, eles têm um acesso muito bom para trazer mais trabalho para você. Grande parte dos meus clientes, na verdade, são referências. Tipo, eu trabalho com um cliente. Eles estão muito satisfeitos porque eu ofereço um serviço de altíssima qualidade e, em seguida, ficam felizes em me recomendar a seus amigos. Mas se eu não prestasse um bom serviço, mesmo que eu construísse um bom site, mas eles fossem, você sabe, talvez eu tenha sido negligente, talvez eu não soubesse, eu basicamente penso em um Talvez eu simplesmente não tenha sido muito legal. Talvez eu tenha sido rude ou talvez não respondido aos e-mails ou ligações deles ou algo parecido Então, eles não ficarão confiantes em me recomendar a seus amigos porque sempre que você recomendar algo para seu amigo, você quer ter certeza de que não vai, você sabe, estragá-lo, certo, que o que você recomendar a ele, será bom e benéfico para eles Portanto, eles precisam estar 100% confiantes de que tudo o que estão recebendo, o que estão recomendando, é bom para seus amigos Então, aqui estão algumas dicas sobre como ser aquele freelancer a quem os clientes sempre retornam para obter mais. Você sabe quais são os critérios que os clientes nunca ignorarão Eles podem ignorar coisas como seu portfólio, sua experiência anterior, talvez até avaliações de emprego, mas há uma coisa que eles nunca, nunca ignorarão , que é a confiança Eu confio nessa pessoa? Se a resposta não for 100% sim, então você não está conseguindo o emprego. Não importa o quão incrível todo o resto em seu perfil. Se eu não confio em você, então tudo pode ser mentira. Tudo o que você diz pode ser mentira. Tudo o que vejo no perfil pode ser mentira. Tudo o que você promete pode ser uma mentira, e eu nunca vou confiar em você com meu dinheiro e meus negócios. A melhor maneira de perder minha confiança como cliente é tentar me vender algo. Se você está tentando me vender algo, então você tem uma agenda, certo? Você tem a agenda secreta que deseja fazer a venda. E se eu reconhecer que você tem essa agenda, então como eu sei que tudo o que você diz é verdade, como eu sei que tudo o que você está tentando fazer é para me ajudar, mas não apenas para beneficiar a si mesmo? A solução é muito simples. Mude sua agenda pessoal de vender para ajudar. Você pode dizer, espere um segundo, mas minha agenda é vender meus serviços, certo? Estou fazendo negócios. Estou tentando ganhar dinheiro. Não estou aqui para fazer caridade ou trabalho voluntário. Como faço para mudar minha agenda para apenas ajudar quando preciso vender? Eu sei que é verdade, mas nada muda na realidade. Nada muda na superfície. Você ainda vai receber o pagamento. Você ainda vai ganhar dinheiro. Mas tudo muda no fundo. A maneira como você fala, a maneira como aborda seus clientes, a maneira como você se conecta com eles, todas essas pequenas milhares de microdecisões e microinterações mudam quando sua agenda muda de vender para ajudar. E isso não vai passar despercebido. Seus clientes confiarão em você instantaneamente, e isso geralmente importa mais do que seu portfólio. Uma coisa incrível e útil que você pode oferecer aos seus clientes é aliviar a dor que eles estão sentindo nesse campo. Imagine por um minuto que você é proprietário de uma empresa que precisa um site e foi a estúdios de design e descobriu que, você sabe, não pode pagar os preços astronômicos deles por projetos de web design Então, o que você faz é usar plataformas de freelancers como o Upwork para, você sabe, um freelancer individual que cobrará um pouco menos Agora, pense em quanta confusão e incerteza você terá que lidar se não for um intérprete dessa área, desse tipo de indústria de web design ou qualquer outra coisa Se você está apenas fazendo negócios regulares , provavelmente não conhece nenhuma dessas tecnologias. Você não sabe onde construí-lo. Você não sabe o que é Wordpress ou o que é Webflow, HTML ou CMS Você não sabe muito bem como julgar quem é um bom freelancer, quem é um bom web designer e quem é um web designer ruim. Então, você está lidando com muita incerteza e, à medida que fizer mais pesquisas, descobrirá que, em vez de obter clareza, na verdade, está ficando um pouco mais confuso. Como você pode ver, os clientes precisam se preocupar com tantos detalhes estranhos e colocar seu dinheiro em risco. Então, como você pode ajudá-los? Há várias maneiras de ajudá-los, e uma delas é definitivamente contar a eles e mostrar que entendemos o processo, certo? Todas as coisas que vamos cuidar para eles e eles não precisam se preocupar com coisas como a tecnologia, certo? Onde vamos construir essa coisa? Onde vamos lançar algo como o Webflow, certo? Eles não precisam se preocupar com o fato de termos resolvido isso. Também podemos explicar o processo para eles, assim como nosso processo de design, que vamos do resumo do projeto e depois ao wireframing e depois ao design e, finalmente, construímos tudo no Webflow Então, podemos explicar que, você sabe, eles estarão envolvidos e terão controle sobre cada etapa do processo para que saibam o que está acontecendo, e não precisam simplesmente comprometer uma grande quantia de dinheiro e esperar que tudo corra bem porque eles estarão envolvidos em todo o processo e terão a capacidade de se ajustar ajuste o caminho no curso para garantir que estamos indo na direção certa Dessa forma, agora eles podem relaxar em nossa parceria porque veem que cuidamos disso , conhecemos o processo e podemos orientá-lo. Dessa forma, agora eles podem relaxar e não precisam arriscar muito ao trabalhar conosco. Faça isso e você fará com que eles comam suas mãos porque outros freelancers, provavelmente, não estão fazendo isso, certo? Eles não os estão levando para esse processo guiado, mas você está. Outros freelancers estão lá para receber seu dinheiro, mas você não está. Você os protegerá. 166. Dicas 17 a 22: Escreva letras de capa muito boas: Empregos, você geralmente precisa enviar cartas de apresentação com suas propostas. Esses são apenas um pequeno e-mail ou uma mensagem que você envia a um cliente quando está enviando uma proposta. Em plataformas de trabalho e freelancers, geralmente há um campo que você preenche e envia Fora das plataformas, geralmente é um e-mail que você enviou para eles com sua proposta. É isso mesmo. Ser freelancer não me ensinou a escrever boas cartas de apresentação A contratação de freelancers funcionou. Como cliente, tive a experiência de receber cartas de apresentação que foram ótimas porque estavam funcionando bem comigo como cliente, e havia muita porcaria que eu estava recebendo que tornava muitos freelancers completamente incontratáveis Aqui estão algumas dicas para escrever cartas de apresentação muito boas. Uma carta de apresentação que me faz dormir instantaneamente é onde o freelancer fala sobre si mesmo. Eu publico o trabalho, descrevo meu problema e a solução que estou procurando, e você responde com o quão incrível você é. Quase todos esses freelancers estão falando sobre si mesmos. Eu sou isso e tenho aquilo. Eu tenho essa quantidade de experiência e já fiz isso no passado. Francamente, querida, eu não me importo. Diga-me como você vai resolver meu problema. Fale comigo sobre o projeto. Como você pode me ajudar? Mostre-me que você é incrível. Não se gabe disso. Ok, se você pode falar sobre si mesmo, então o que você diria? Muito fácil. Comece a dar ideias. Imagine que eles já contrataram você e comece a pensar em seu projeto. Como você vai projetá-lo? Quais seriam algumas coisas divertidas de se fazer? Envie links para sites de exemplo e diga que você poderia fazer esse tipo de interação ou esse tipo de seção de heróis. Ninguém faz isso. Se eu visse uma proposta com ideias e exemplos, eu diria: Obrigado. Essas são ótimas ideias. Você me entende. Isso é o que eu quero. Pronto, você está contratado. Quais exemplos reais? Aqui está uma carta de apresentação real que enviei no Appwor, que me deu um emprego imediatamente, sem uma entrevista Começo vinculando páginas de exemplo. Pego modelos de páginas de empréstimo, nem mesmo meu trabalho, e mostrei a ele como exemplos Eu mostrei a ele o que eu ia fazer. Agora ele pode ver com seus próprios olhos e eu facilitei sua vida. Em seguida, dou a ele um rápido resumo do processo, como eu faria tudo isso, disse que ficaria bem e se converteria de forma eficaz Esse é o objetivo dele, não é? Agora ele sabe que eu entendo seu objetivo. Depois, faço algumas perguntas significativas que mostram que não estou pintando o quadro de rosa e considerei os detalhes do projeto Observe como eu só começo a falar sobre mim mesmo depois de tudo isso no exato momento e onde isso diz sobre mim. Há um pouco mais de blá blá blá sobre mim, mas eu recortei porque hoje eu nem faria isso porque hoje eu nem faria Eu simplesmente o manteria sem esse parágrafo. Aqui está outro exemplo de uma boa carta de apresentação que recebi em um dos meus anúncios de emprego. Essa pessoa tem mais de 50 mil ganhos no Upwork e isso mostra o porquê Ele vai direto ao ponto. Ele é útil. Ele até vai me mostrar como atrair visitantes para minha página. Ele entende meus objetivos e me faz perguntas significativas. A mensagem é curta e doce, sem perder meu tempo com um monte de penugem enlatada Não tente economizar tempo enviando modelos de cartas de apresentação e cartas de apresentação em lata. Eu odeio cartas de lata. Que se dane com eles e que se danem as pessoas que as enviam para mim. Economizando seu tempo, mas desperdiçando o meu? Não, obrigado Bons clientes notam cartas a quilômetros de distância e nem se preocuparão em lê-las. Às vezes, em cartas de apresentação, você quer dar exemplos de seus trabalhos anteriores, certo? Então, muitos freelancers, o que eles vão fazer é consultar e vincular seu portfólio de trabalho ao Apwork Mas o que você pode fazer é porque você tem um site, você pode enviar links para o seu site. Sejam peças de portfólio no AP Work elas não são exibidas da maneira mais lisonjeira No entanto, no site, eles parecem muito atraentes porque é o seu site , são suas coisas, certo? Tudo está meio organizado e bem. E você tem um pouco mais de conteúdo, e é sua oportunidade de usá-lo, você sabe, para mostrar que na verdade você não está apenas trabalhando, mas é muito profissional, tem seu próprio site e meio impressiona eles com toda a apresentação que você Mas só se você publicar esse site em seu domínio personalizado pessoal, porque meu portfólio slash 123 dot webflo dot IO, não parece muito profissional, parece amador, e eu não levo ninguém freelancer a sério, que me envia seu portfólio, que está no dot Webflow ou algo assim ou no dot wiggly ou wix.com esse site em seu domínio personalizado pessoal, porque meu portfólio slash 123 dot webflo dot IO, não parece muito profissional, parece amador, e eu não levo ninguém freelancer a sério, que me envia seu portfólio, que está no dot Webflow ou algo assim ou no dot wiggly ou wix.com, porque isso não parece você está levando sua profissão a sério. Então, ganhe 15 dólares por mês no primeiro mês de assinatura do weblo e você estará muito à frente de outros freelancers que E você só precisa pagar pelo primeiro mês. Quando você começar a ganhar dinheiro, ele simplesmente se pagará. Na página em que um cliente recebe todas as propostas , ele já pode ver algumas linhas iniciais de uma carta de apresentação do freelancer. Muitos freelancers começam com algo como “querida senhora”. É assim que as pessoas se conectam? Caro senhor, Madame? Parece tão impessoal e simplesmente estranho. Costumo dizer isso. Caro gerente de contratação. Que diabos? Gerente de contratação, quem? Ei, por que você está me chamando de nomes aleatórios? E quem fala assim? Na verdade, isso é culpa da Upwork, porque em uma de suas postagens no blog, eles aconselham usar aquele gerente de contratação de veados, que provavelmente foi escrito por um de seus funcionários que nunca foi freelancer ou cliente porque esse é o conselho mais estúpido que eu Portanto, tenha cuidado ao ler os conselhos do próprio Upwork. Então, se você pode dizer isso, então o que você diria? Bem, deixe-me resolver um grande mistério. O que você diz quando cumprimenta alguém em seu ambiente de trabalho? Você diz “querida senhora” ou diz “Oi”. Olá. Bom dia Olá. Simples assim. Por que complicar isso Todos eles também são profissionais e educados. Não seja estranho. Basta ser natural e amigável. Isso é tudo. Agora, alguns de vocês provavelmente vêm de países e culturas onde o uso de palavras, senhor, é meio que necessário para ser educado Este é, por exemplo, um caso na Índia. E quando trabalho com freelancers da Índia, eles sempre me ligam, senhor. Eles dizem: Oi, senhor, sim, senhor. Obrigada, senhor. Eu fico um pouco estranho quando eles fazem isso Não use senhor com todo mundo ao redor do mundo porque não faz parte da cultura de todo mundo. Por exemplo, na América do Norte, Grã-Bretanha e Austrália, a palavra senhor é usada em situações muito impessoais Por exemplo, quando você quer chamar a atenção de um estranho, tipo, Oh, desculpe-me, senhor, você deixou cair Mas o ambiente de trabalho nesses países é mais amigável. Não há distância de status honorífico entre as pessoas devido à idade ou posição profissional Portanto, nunca um funcionário ligaria para seu chefe. Senhor, mesmo que esse chefe fosse Bill Gates, eles provavelmente diriam algo como Bill ou Sr. Gates, mas não, senhor. Então, você vai parecer um pouco estranho e impessoal se usar isso com pessoas que não estão acostumadas com esse tipo de cortesia Verifique de onde eles são e use, senhor, somente se for esperado naquele país. 167. Dicas 23-25: não fique suspenso: Às vezes, freelancers são suspensos ou banidos do trabalho por fazerem algo que é contra seus termos e condições Vou lhe dar algumas dicas para garantir que você não se encontre em uma situação muito complicada com eles. Tentar receber pagamentos fora do AppOrg viola seus termos e condições E se eles suspeitarem que você está tentando fazer isso, provavelmente bloquearão sua conta. Esse motivo é claro e simples. APOC ganha dinheiro com transações e transações de pagamento que acontecem entre você e o cliente E se você tentar retirar esses pagamentos da plataforma , eles não ganharão dinheiro e você os irrita Você pode encontrar mais informações sobre isso em seus termos e condições, e a cláusula é chamada de evasão, não circuncisão, e você pode descobrir mais Isso se aplica não apenas aos projetos atuais que você recebe do cliente, mas também a todos os projetos subsequentes que vêm do mesmo cliente. Eles têm esse período de 24 meses sem evasão. Portanto, no momento em que você começa a trabalhar com os clientes, há um período de 24 horas em que você deve manter o relacionamento desse cliente no Upwork e receber o pagamento no Upwork Portanto, há uma espécie de gatilho em sua comunicação que pode levantar essa bandeira vermelha Então, porque as mensagens acontecem usando a plataforma de mensagens Aforce, certo? Então, nesta mensagem, você discute coisas como pioneiro. Essas seriam as palavras de gatilho da bandeira vermelha que instantaneamente acionam essa suspensão automaticamente. Se você mencionou coisas como Payoneer, PayPal, transferências bancárias, IBANs, qualquer coisa que seja pode ser associada ao fato de você estar tentando receber E não importa, mesmo o cliente esteja iniciando a discussão e queira que você seja pago externamente, se você concordar com isso ou se for você, se você mencionar algo como sim ou qualquer outra coisa , você será suspenso mesmo que eles solicitem Portanto, certifique-se de que, se o cliente pedir, você sabe, vamos levar isso para fora, diga não, você quer manter as coisas no Upwork Agora, a maioria das suspensões acontece automaticamente. É só que se você menciona algo , a IA é, você sabe, acionada e todas essas coisas. Mas às vezes talvez você mencione PayPal não porque queria receber pagamentos externos, mas talvez esteja dando um exemplo de um site do PayPal. Talvez você esteja tentando criar um site para o setor bancário ou talvez esteja criando uma carteira eletrônica ou algo relacionado a financiamento. Mas tudo bem porque se você for suspenso automaticamente, poderá apelar e, em seguida, um ser humano examinará sua comunicação. E se eles estão convencidos de que você não estava tentando receber pagamentos externos, mas estava meio que discutindo isso que fazia parte do projeto , tudo ficará bem. E eles suspenderão a proibição. Agora, naturalmente, se você está discutindo isso no Skype ou em uma videochamada que não faz parte do Upwork, certo? Você sabe, é impossível para o Upwork descobrir, mas eu tenho alguns bons motivos para você permanecer realmente no Upwork No final das contas, trabalhar mais é uma coisa boa. Isso permite que muitos freelancers encontrem trabalho. Todos nós queremos que a Upwork ganhe dinheiro e não feche negócios E se a maioria de nós deixar de trabalhar no relacionamento, um dia, eles simplesmente fecharão Upwork, 10% não é tão grande. UDumi, por exemplo, pega pelo menos 50% do que eu ganho aqui Então, o aumento do trabalho não é tão ruim. Finalmente, não ter que lidar com o faturamento é incrível. Seus clientes são cobrados automaticamente. Você nunca precisa lidar com faturamento e a busca por pagamentos Isso economiza muito tempo e problemas. Como freelancer, às vezes há casos em que você precisa perseguir os clientes para pagar em dia. Mas com o Upwork, é bom porque cartão de crédito é cobrado automaticamente E se o cartão de crédito não estiver funcionando bem, o cliente será suspenso no Upwork, então você também sabe disso Isso economiza muito tempo e problemas. Não coloque nenhuma habilidade que você não tenha em seu perfil. Às vezes, o Upwork faz uma verificação aleatória de habilidades de freelancers, e eles fazem o tipo de testes orais e fazem uma entrevista com um freelancer para garantir que tudo o que eles colocam em suas habilidades seja verdadeiro Quando, na verdade, minha conta foi congelada por causa dessa verificação de habilidades, eles meio que iniciaram a verificação de habilidades em minha conta, e eu fiz uma entrevista com uma pessoa de atendimento ao cliente, e eles estavam meio que me questionando sobre HTML e CSS E foi estranho porque eu nunca coloquei HTML e CSS como minhas habilidades, mas acho que porque eu estava na categoria de web design, eles presumem que, você sabe, eu deveria saber HTML e CSS, embora eu nunca tenha afirmado que sabia disso. Felizmente, consegui apelar e explicar a eles que não preciso HTML e CSS para fazer meu trabalho. Nunca afirmei que sabia disso, e eles entenderam e descongelaram Mas se eu os tivesse em minhas habilidades , eu estaria totalmente ferrado O fato é que o Upwork é uma plataforma muito grande tantas pessoas e muito dinheiro sendo transferido para lá, que também atrai malfeitores, que estão tentando burlar o sistema, abrindo contas fraudulentas e se envolvendo em algumas atividades fraudulentas diferentes Portanto, a Upwork é muito diligente e reprime muitas contas diferentes para garantir que as pessoas que estão lá afirmem para garantir que as pessoas que estão lá quem são, afirmem que são ou que conhecem habilidades e possam cumprir o que prometem aos clientes Portanto, certifique-se de que tudo o que você coloca no Apork seja verdadeiro e autêntico e que você não esteja tentando manipular o sistema porque eles não têm uma grande tolerância Então, mesmo que algo esteja como, você sabe, instável, basta remover qualquer coisa que não seja 100% verdadeira 168. Dicas 26-28: Não se deixe enganar: O trabalho é grande, muito grande, e há muito dinheiro circulando e muito dinheiro que pode ser ganho. Então, quando há dinheiro, sempre há maus atores tentando enganar as pessoas Aqui estão algumas dicas para não ser enganado no Upwork. Nunca faça trabalhos gratuitos ou experimentais no Upwork. Existe um golpe em que alguns ********* pedem que você faça um trabalho experimental. Você precisa realizar algum trabalho gratuito antes que eles possam lhe conceder um emprego, então eles precisam testar suas habilidades ou algo E o que eles fazem é pedir muitos freelancers diferentes que façam esse trabalho gratuito, e então eles meio que coletam esse trabalho gratuito e depois usam esse trabalho gratuito para algum outro cliente e meio que são pagos por isso, sem fazerem nenhum trabalho Aqui está um vídeo de um dos freelancers da Upwork que gravou um desses O link está nos recursos, se você estiver interessado. Esta é uma dica repetida, mas desta vez por um motivo diferente porque não apenas porque você pode ser banido pelo upwork, mas também pode ser enganado se fizer coisas fora do Se um novo cliente que ainda não pagou e você não teve nenhuma relação de trabalho pedir que você tire as coisas da plataforma para economizar dinheiro ou, você sabe, se livrar da comissão , os alertas devem entrar em sua cabeça instantaneamente Obviamente, para os clientes, é mais seguro manter as coisas funcionando porque eles têm algumas garantias do trabalho contínuo, certo? Se as coisas derem errado, pelo menos o trabalho pode meio que intervir e mediar a Então, quando eles pedem que você leve coisas de fora , pode ser de má qualidade, e se algo parecer de má qualidade, provavelmente 169. Preços: quanto você cobra?: Bem-vindo ao tópico assustador para a maioria dos freelancers. Preços. Quanto você cobra? Estar confuso sobre preços no começo é certo. Eu também estava bastante confuso quando comecei. Lembro-me do meu primeiro projeto de página de empréstimo que fiz, cobrei $200 E foi muito trabalhoso, na verdade. Eu estava emprestando design e construção de páginas. Eu escrevi a cópia e o conteúdo da página de empréstimo. Era o Projeto 2 de marketing. Eu criei anúncios no Facebook, criei banners e anúncios para o Facebook e fiz tudo por Então eu fiz o upgrade para a taxa horária, era de $20 por hora, e isso já era um upgrade decente para mim, porque, nesse ritmo, consegui me sustentar totalmente freelancer basicamente Depois, fiz o upgrade para $30 por hora, que foi minha tarifa por algum tempo Então eu dobrei para $60 por hora. E agora eu cobro principalmente uma taxa fixa e cerca de, em média, $5.000 pelo design e construção de um site Atualizar de 30 a 60 dólares por hora foi uma das coisas mais emocionalmente desafiadoras de se fazer para mim Eu me senti muito culpada, especialmente quando tive que dizer aos meus clientes existentes que dobraria a taxa de que eles já estavam trabalhando comigo há algum tempo. Racionalmente, eu sabia que fazia sentido, mas emocionalmente eu estava suando Mais tarde, percebi que estava passando por duas falsas crenças na minha cabeça. Primeiro, eu estava projetando meus próprios problemas financeiros nos clientes. Em vez de ver isso da perspectiva deles, eu estava vendo isso da minha própria perspectiva, comparando com meus próprios hábitos de consumo de dinheiro, me sentindo culpada porque eu mesma teria dificuldade em pagar $60 por hora por qualquer coisa Segundo, pensar que o preço que eu cobro está diretamente relacionado ao nível da minha habilidade Então, se eu cobrar o dobro do valor, agora eu deveria ser duas vezes mais habilidoso. E você pode pensar, mas isso não é verdade? Um preço mais alto não deveria significar melhor habilidade? Na verdade, de jeito nenhum. Aqui está a verdade mais importante sobre preços. O quanto você cobra depende de quem está comprando. Existe um incrível coach de negócios para pessoas criativas. O nome dele é Chris Doug, e uma vez eu estava assistindo sua palestra sobre preços, e isso me surpreendeu Percebi o quanto eu não sabia sobre meus próprios preços. Imagine um cenário em que dois clientes em potencial se aproximem de você. Ambos querem um site muito semelhante, mesma quantidade de páginas, a mesma funcionalidade, algo que levará o mesmo tempo para você projetar e desenvolver. Então, obviamente, você dá a eles a mesma taxa, mas esses clientes não poderiam ser mais diferentes. O primeiro é um contador independente, um cara pequeno. O segundo é um grande escritório de advocacia que ganha milhões de dólares por ano. O que você acha? Um site vale o mesmo para eles? Absolutamente não. Um novo site pode trazer mais negócios para esses dois clientes, mas mais negócios para os contabilizados podem significar mais 100 dólares por mês e, para o escritório de advocacia, isso pode significar mais 100.000 por Mesmo site, mesmo esforço de sua parte, mas grande diferença de valor com base no cliente. Portanto, qualquer que seja a taxa que você dê a esses dois clientes, provavelmente é muito cara para o contador e ridiculamente barata para o Você acabará perdendo os dois clientes potenciais. Você pode pensar: Bem, pelo menos o escritório de advocacia ficará entusiasmado em conseguir um preço tão barato, mas não ficará. Pagar $5.000 por um site que pode gerar mais 1 milhão por ano parece irreal É um número muito pequeno. Eles não confiarão no seu trabalho. Mas se você ajustasse seus preços com base em quem declinou, digamos, oferecendo hipoteticamente 2.000 para o contador e 20 mil para o escritório de advocacia, você pode acabar emprestando esses dois empregos porque os preços pareceriam razoáveis para qualquer Steve Jobs pagou 100.000 pelo próximo logotipo. Os logotipos valem 100 mil? Para ele, foi. Para uma pequena startup , o custo de um site não depende de duas coisas. Primeiro, quem está pagando? E segundo, qual é o valor que eles esperam ganhar com isso? O valor esperado também é um fator importante a ser considerado. Imagine o mesmo cenário com um grande escritório de advocacia, mas desta vez, eles não precisam um site para gerar novos negócios para si mesmos. Eles só precisam de um site com algumas páginas e informações de contato. Essa é uma história diferente. Eles não planejam ganhar muito valor com isso, então 20 mil pode parecer demais para pagar. Eles provavelmente pagarão mais do que o contador independente, mas não tanto quanto os 20 mil. Então, para determinar o preço certo a ser cobrado pelo site, você precisa primeiro entender quem é seu cliente e depois entender qual é o valor eles planejam obter O valor dependerá de cada projeto, e você pode descobrir fazendo várias perguntas como qual é o objetivo do site e o que eles esperam ganhar com isso? Quanto aos clientes, podemos dividi-los em quatro categorias. Um cliente privado é alguém que está pagando pelo projeto do próprio bolso. Então, podem ser profissionais independentes como nós, freelancers, consultores ou startups que não têm financiamento Esses caras, eu diria, custam no máximo $2.000, mas se houver muito valor a ser obtido com o site , eles podem aumentar Quando se trata de tarifas horárias, é um pouco mais confuso para os clientes entenderem se algo é barato ou caro, porque se você não sabe quanto vai custar, não sabe se, por exemplo, $50 por hora é caro ou barato Demora duas, 3 horas, é bem barato, mas se levar 100 e 200 horas, muito caro. O que acontece com as tarifas horárias é que os clientes geralmente usam sua própria experiência e ideias abrangentes sobre se algo é barato ou caro com base no custo por hora E eles usam seu próprio tipo de referência cultural onde quer que morem, quantos serviços diferentes quantos serviços diferentes pagam e os comparam a eles. E minha regra com taxas horárias é que nunca fique abaixo de $20 por hora porque a maioria de seus clientes virá de países desenvolvidos e, em países desenvolvidos, qualquer coisa abaixo de $20 por hora chega muito perto do salário mínimo E o salário mínimo é algo que, você sabe, um zelador receberá Você está oferecendo serviços altamente qualificados e não deve receber um salário mínimo. E se você se considera um faxineiro, então você vai parecer um faxineiro e vai assustar qualquer cliente decente porque ninguém quer que seu site seja construído por Tenha estúdios e agências como estúdios criativos, agências de design, empresas de TI e tudo mais. Geralmente, serão agências e estúdios de pequeno e médio porte , porque os grandes, na maioria das vezes, têm sua própria equipe em tempo integral e não se envolvem e não precisam contratar freelancers Ao trabalhar com agências, geralmente a tarifa horária é a melhor opção por dois motivos. Primeiro, é mais simples. Você não precisa renegociar toda vez em cada novo projeto Em segundo lugar, devido às revisões e projetos terem um pequeno escopo os projetos estão basicamente ficando cada vez maiores, e você precisa trabalhar um pouco mais, porque o que acontece é que, quando você projeta e constrói algo, , os projetos estão basicamente ficando cada vez maiores, e você precisa trabalhar um pouco mais, porque o que acontece é que, quando você projeta e constrói algo, a equipe da agência fornece feedback Então você teria que fazer as revisões, e eles as enviariam ao cliente, e então os clientes terão seus próprios comentários e suas próprias alterações que desejam fazer, e então você terá fazer outra rodada de revisões Com uma taxa fixa, o próprio estúdio não precisa se preocupar com essas revisões, então eles acumularão tudo se estiverem pagando por hora. Agora, eles terão que estar um pouco mais atentos e cautelosos com a quantidade de revisões que você está fazendo, porque isso vem do pagamento que eles recebem do cliente final E, geralmente, quando trabalham com os clientes finais, eles não trabalham por hora. As empresas geralmente não trabalham com base na taxa horária, mas trabalham por projeto. Portanto, eles cobrarão uma taxa fixa do cliente final e precisam garantir que o custo não saia muito do controle. E quando eles estão pagando taxa fixa, eles não se importam, e você pode simplesmente, você sabe, trabalhar nisso o quanto eles quiserem. Em termos de taxa horária, isso realmente depende do tipo de cliente com quem eles próprios trabalham. Normalmente, eu diria que eles entre $20 e $17 por hora eles nunca ultrapassarão Acho que eles nunca ultrapassarão os 17 dólares por hora Nesse caso, para eles, fará sentido contratar um funcionário em tempo integral e extrair o máximo possível dele, E também depende do país em que eles estão localizados, ou talvez da cidade em que estejam localizados e se estão trabalhando com os clientes locais ou com os próprios clientes on-line. Porque se eles estão trabalhando com clientes locais, e você provavelmente pode descobrir isso facilmente , isso significa que você vai cobrar mais, certo? Porque com os clientes locais, os preços geralmente são mais altos porque você tem um número muito limitado de agências e estúdios na cidade e está atendendo seus clientes, e as coisas estão um pouco mais altas do que on-line, porque , você sabe, grandes corporações não vão contratar uma agência on-line. Eles vão contratar alguém que seja local, alguém que eles possam conhecer e alguém que eles possam processar se as coisas correrem mal. Se você estiver negociando com estúdios, não tenha medo de reduzir sua tarifa normal, pois o fluxo constante de trabalho e a redução horas não faturáveis justificam totalmente o desconto que você lhes dará Ao trabalhar com clientes finais diretos, você realmente precisa fazer propostas, certo? Você tem que enviar propostas ou contratos e negociar entrevistas e coisas assim Mas ao trabalhar com estúdio, você só faz isso uma vez, certo? E então, a cada novo projeto que surge, você não precisa passar por todo esse processo de negociação e entrevista ou todas essas coisas, porque a agência do estúdio está fazendo isso com o próprio cliente final Assim, você obtém o projeto que já está pronto para ser executado e pronto para ser construído. Então você tem pequenas e médias empresas. Normalmente, são empresas de médio porte que estão ganhando dinheiro ou startups que têm financiamento. Esses caras normalmente iam provavelmente de 2000 para cima até atingirem o máximo de talvez 1015000 E, finalmente, você tem grandes empresas com muitos funcionários que ganham muito dinheiro, e esses caras provavelmente começam com 15 mil ou mais. Mas você não precisa se preocupar com esses caras porque eles realmente não trabalham com freelancers Eles gostam de contratar empresas e estúdios, especialmente os locais. Então, agora não precisa se preocupar eles, porque nunca trabalhei com eles e não conheço freelancers que acabam trabalhando com grandes empresas. Vamos recapitular Portanto, avaliamos com base em quem é nosso cliente, quanto mais valioso o site para ele, mais cobramos por ele. Para entender quem são nossos clientes, precisamos descobrir mais sobre eles. Onde eles são pagos? O que eles esperam ganhar com o site? Eles precisam de um site para si mesmos ou são uma agência? E, em seguida, proponha o preço em conformidade. 170. Preços: por hora x taxa fixa: Vamos comparar as taxas horárias com as fixas. Ambos têm suas próprias vantagens e desvantagens. A vantagem de cobrar a taxa horária é que é muito simples. Você realmente não precisa se esforçar para calcular quanto deve precificar um determinado projeto Basta dar uma taxa e pronto. Não é necessário negociar toda vez que você tiver mais trabalho do mesmo cliente Não precisa se preocupar com a possibilidade de as revisões saírem do controle. Mais revisões significam mais dinheiro. As reuniões e a comunicação podem levar muito tempo. Alguns clientes podem querer reuniões pelo Skype regularmente, mas se você também cobrar por isso, e deveria, eles se certificarão de não desperdiçar seu tempo E se o fizerem, pelo menos você será pago por isso. A desvantagem da taxa horária é que ela não diz nada para a maioria dos clientes Por exemplo, $100 por hora. Isso é caro ou é barato? Quem sabe? Se você terminar em 3 horas , é barato, mas se precisar de 80 horas, é caro. Além disso, os clientes terão uma reação emocional a determinadas tarifas horárias. Eles acharão certas tarifas muito caras, mesmo que o preço final seja o mesmo. Eles podem ficar bem pagando cinco mil pelo site, mas se você lhes disser 100 dólares por hora, eles podem enlouquecer É mais difícil para os clientes decidirem porque taxa horária torna incerto quanto será a fatura final À medida que você se torna mais eficiente e rápido em seu trabalho, você ganha menos por projeto. Os benefícios da taxa fixa são que é mais fácil de vender. Os clientes veem um número claro e se sentem mais seguros com ele. À medida que você se torna mais eficiente, você ganha mais dinheiro. Portanto, você tem a chance de ganhar muito mais dinheiro por hora sem parecer muito caro. Não há limite de quanto você pode cobrar, enquanto que na taxa horária, há limites mentais. Por exemplo, 300 dólares por hora serão um limite mental para a maioria dos clientes O lado ruim da taxa fixa é que as revisões podem sair do controle se não forem claramente definidas Por exemplo, duas revisões gratuitas e, depois disso, aplicar uma determinada taxa horária E quando seu cliente solicitar uma terceira revisão , você começará a cobrar. Às vezes, pode ser desconfortável falar sobre isso. É muito desconfortável para mim, mas aprendi minha lição quando acabei ganhando um salário mínimo em um dos projetos por causa de inúmeras revisões Outra desvantagem, calcular é uma dor. Você precisará trabalhar mais no cálculo para definir claramente quanto tempo levará para concluir o projeto e garantir um preço lucrativo Isso envolve muitas suposições e, até que você aprenda todas as lições da maneira mais difícil, você acaba perdendo algum dinheiro Então, qual deles você deve escolher? Assim como com os valores, é uma boa ideia ir caso a caso e cliente por linha Por exemplo, com estúdios e agências, sua melhor abordagem provavelmente seria usar tarifas horárias. E quando se trata de garantias finais, provavelmente opte por taxas fixas e taxas fixas Como as tarifas fixas são um pouco mais difíceis de navegar no início, não há problema em optar por tarifas horárias para Eu mesmo tenho uma mistura de burritos. Comecei com uma taxa fixa, mas logo depois percebi que estava perdendo dinheiro porque não estava definindo as estimativas corretamente e estava perdendo dinheiro com as revisões Depois mudei para a tarifa horária, o que foi ótimo, e mantive por muito tempo a tarifa horária porque era simples para mim Adoro a simplicidade e , no momento, tenho as duas coisas. Com meus clientes de longo prazo, faço a tarifa horária e , com os novos, faço a tarifa fixa. Mas com clientes de longo prazo, eu trabalho de hora em hora porque faço muitos tipos diferentes de trabalho, como design de interface de usuário, por exemplo , para aplicativos móveis, e esses projetos esportivos podem ficar monstruosamente grandes estranhos e é impossível colocar uma taxa fixa neles Então, você sabe, uso de hora em hora porque simplifica e facilita a consideração de um critério final a ser considerado: escolher o que você se sente confortável com. Porque, no final das contas, é o seu trabalho e você precisa fazer isso todos os dias, e é importante tornar cada aspecto do seu trabalho o mais agradável possível E se algo lhe causar ansiedade como aconteceu comigo , não há problema em sacrificar algum dinheiro pela paz de espírito e conforto. 171. Modelo de proposta: taxa fixa: Do lado das plataformas de freelancers, forma como você envia propostas, tudo depende de você Você pode enviar um e-mail para eles, enviar uma mensagem, falar por telefone ou enviar um Raven Tudo depende de você. Você é o chefe. Algumas opções são melhores do que outras. Se você quiser parecer sério e impressionar seus clientes , enviar um documento de proposta adequado e bem elaborado é a abordagem correta Isso é o que os freelancers profissionais fazem. Para ajudá-lo a fechar mais negócios, criei um modelo de proposta muito sólido para você. É um arquivo Figma, o link que você pode encontrar nos recursos Como você pode notar, ele foi desenvolvido o mesmo tema do site do portfólio. Isso ajudará você a definir sua marca pessoal, parecer mais profissional, como alguém que pensou nos menores detalhes. Você se destacará instantaneamente da concorrência, e se destacar é o que você precisa se seus clientes tiverem vários freelancers para escolher Deixe-me mostrar o conteúdo e explicar por que coloquei o que coloquei e quais são as coisas que você precisará editar ao gerar uma proposta. O cabeçalho é bem simples. Edite o logotipo, coloque o que quiser no título. Você pode até mencionar o nome da empresa como a proposta do site do Google. É um belo toque personalizado e seus detalhes e os detalhes do seu cliente. A visão geral é um lugar onde você mostra que entende o projeto e sabe o que vai fazer. Você diz a eles seu objetivo e explica qual é o resultado final Inseriu um pequeno resumo sobre como seu site será hospedado em incríveis servidores Webflow, tornando-o seguro e super rápido Este é um bom lugar para mostrar um pouco sobre o quão bom será o resultado final para criar entusiasmo. Não, você não vende o quão incrível você é. Eles querem um site, não sair com você. Em seguida, temos uma análise de preços. Esse é um preço fixo. Também criei um modelo para projetos com tarifas horárias. Tem uma tabela de preços diferente e alguns outros conteúdos também são diferentes, o que explicarei depois disso. O detalhamento do preço mostra diferentes partes do seu trabalho. Se você tiver mais itens, basta duplicar as linhas e adicionar mais ou remover conforme desejar Gosto de dividir o design e o desenvolvimento em itens separados. Há duas fases diferentes e, com alguns projetos, você pode até mesmo fazer apenas uma delas. Por exemplo, se eles já tiverem designs, você pode simplesmente fazer o desenvolvimento do Webflow Também adicionei algumas coisas extras que estão incluídas no preço. Isso aumenta o valor que eles estão obtendo com o preço, como desenvolvimento responsivo e sessão de treinamento Dessa forma, a lista de preços parece muito mais valiosa e cheia de benefícios do que apenas um valor único de $2.500 Parece que eles estão recebendo muito mais. Sobre esses valores específicos, estou apenas colocando números aqui, não significa que é isso que você deve cobrar Você pode cobrar menos ou muito acima desse valor. Tudo depende da categoria de clientes com quem você trabalhará, conforme discutimos na classe de preços. Vou te dar apenas um conselho sobre valores. Use valores arredondados. Não faça 999 Isso só vai parecer estúpido. Seus clientes estão cientes do fato de que você quem coloca esses preços, que não há nenhuma equação complexa de preços que você está usando, então arredonde-os para cima ou você vai parecer um tolo Abaixo da tabela de preços, há uma linha dizendo que hospedagem Webflow não está incluída A transparência é fundamental nesses relacionamentos. Não se esqueça, entre aspas, de mencionar coisas importantes, especialmente custos. Em seguida, temos um cronograma. Isso é algo que os clientes realmente querem saber. Portanto, dividindo o máximo possível, os clientes estão assumindo um grande risco com seu dinheiro e tempo. Eles querem estar no controle de seu projeto. Então, eles querem saber exatamente como as coisas vão progredir, com que se sintam em paz e confiarão mais em você. Essas são estimativas aproximadas. Os projetos nunca seguem exatamente o cronograma previsto. Não depende apenas de você, rapidez com que os clientes fornecem feedback sobre cada fase, quantas iterações você realiza e a rapidez com que eles fornecem o conteúdo necessário afetarão significativamente o cronograma do projeto Freqüentemente, algumas outras tarefas surgem durante o projeto. Eles podem pedir pequenas coisas que se somarão no final. Se você trabalha com uma taxa horária , isso não é um problema. Mas em um projeto de taxa fixa, você logo acabará perdendo dinheiro se não esclarecer o que acontecerá se houver trabalho extra que esteja fora do escopo principal, mesmo que sejam apenas reuniões extras que estão tomando seu tempo. Eu mesmo tive que aprender isso da maneira mais difícil. Eu tinha um cliente que queria me encontrar quase todos os dias. Acho que ele estava apenas se divertindo falando e fazendo um brainstorming Mas para mim, estava demorando muito e eu não estava sendo paga por isso. Se você definir uma taxa horária para qualquer trabalho extra , todos ficarão livres. A última parte são os termos. Listei alguns pontos importantes para ter clareza sobre como as coisas funcionarão e evitar futuras divergências Esses termos provavelmente não são termos juridicamente vinculativos. O objetivo deles é a clareza, para que todos estejam na mesma página. Por exemplo, ele tem uma estrutura de pagamento. Ao trabalhar com estranhos fora da plataforma, você deve receber algum pagamento adiantado Em geral, 25% é uma boa ideia. Essa é minha estrutura, mas você pode se sentir à vontade para alterá-la como quiser. E, obviamente, você pode alterar qualquer um desses termos ou adicionar seus próprios. O formato final pode estar em PDF ou você pode até mesmo compartilhar um link para a visualização do protótipo, como estou mostrando agora, mas acho que o PDF é uma opção melhor Você já sabe como exportar. Basta acessar o painel Propriedades, Exportar, escolher PDF e pronto. Quero te dar uma regra quando se trata de enviar propostas fora das plataformas. Não os surpreenda. Então, quando você envia uma proposta e eles recebem o valor, e esse valor, se isso talvez seja demais para eles ou caro, isso os surpreenderá e os chocará um pouco e, você sabe, meio que os decepcionará E como você o coloca dentro do documento e meio que o enviou como algo escrito e definitivo , eles não têm como opor ou negociar e você mesmo não tem argumentar e os benefícios do preço, contar a eles e explicar por que é bom que eles venham com você e assim por diante, certo argumentar e os benefícios do preço, contar a eles e explicar por que é bom que eles venham com você e assim por diante, Você também não tem a capacidade negociar e talvez dar a eles um desconto, porque talvez às vezes você coloque isso no preço como um amortecedor, certo Então, você coloca um pouco como um amortecedor para garantir que você possa negociá-lo, se quiserem , se pedirem o desconto, ou às vezes você pode até mesmo reduzir o preço talvez removendo o número de revisões ou fazendo algo um pouco menos ou, você sabe, existem muitas maneiras diferentes de mudar as coisas para diminuir o preço se eles realmente não podem pagar o valor que você lhes deu. Portanto, a abordagem correta é discutir o preço durante a reunião. exemplo, você não precisa finalmente concordar com isso, mas o que você pode fazer é fornecer algum tipo de alcance aproximado Portanto, eles não ficam surpresos quando você lhes dá um valor final. E o que você pode fazer durante a reunião é isso, por exemplo, o que eu faço. Tenho uma reunião como se fosse uma reunião via Skype ou presencial E quando vamos à reunião, eu faço muitas perguntas sobre o projeto, e eu já tenho algum tipo de pré-valor na minha cabeça que eu estou disposto a aceitar. Eu meio que tenho essa faixa, que é o mínimo pelo qual estou disposto a trabalhar e o preço ideal que eu quero obter dela. Depois de fazer as perguntas, entendo que se o site tiver apenas uma ou duas páginas ou se o site talvez seja um grande site com, você sabe, 25 páginas diferentes ou um blog ou algo parecido. E eu meio que invento uma faixa que talvez seja algo como um mínimo de $4000-6 mil, e então eu dou E se eles tiverem algum tipo de objeção, discutiremos isso, e eu posso oferecer benefícios e dizer a eles, você sabe, por que essa é uma boa opção para eles e por que o preço realmente vale a pena E se não o fizerem, por exemplo, às vezes pode ser que eu lhes dê um valor e eles esperassem algo menos do que 1.000 Agora eu sei que éramos apenas uma combinação ruim e, você sabe, eu não vou fazer um site funcionar para um site grande, menos de 1.000. Então, não preciso me preocupar em criar a proposta e enviar e-mails, tudo Nós entendemos instantaneamente que estamos realmente em um jogo diferente aqui, e não somos uma boa combinação, então eu economizo muito tempo. Mas se ainda estamos na fase certa , podemos negociar, se necessário Mas se o preço também parecer bom , quando eu terminar a reunião, preparo a proposta e, provavelmente, colocaria algo $5.000 no site, e agora eles esperam esse preço e não estão surpresos, e temos um acordo 172. Modelo de proposta: taxa fixa: Quanto à proposta de tarifa horária, mesmos dez desempenharam a maior parte. A primeira diferença está na tabela de preços, claro, muito mais simples, apenas uma taxa Às vezes, talvez você queira ter taxas diferentes para tarefas diferentes. Em seguida, você pode adicionar um valor bruto extra e colocar uma taxa diferente para esse serviço. Certa vez, fiz isso com meu primeiro cliente Webflow. Na época, eu não tinha muita experiência em desenvolvimento e Webflow Eu tinha acabado de fazer dois projetos práticos, mas tinha uma sólida experiência em design e sabia que não seria muito rápido no Webflow Então, dei uma taxa de desconto para a fase de desenvolvimento para ser justa com meu cliente Eu adicionei um parágrafo aqui para explicar como as coisas funcionarão, por exemplo, dizendo que você cobrará cada duas semanas pelo tempo registrado durante esse período Depende de você e de seu cliente como organizar isso. Se quiser, você pode cobrar uma vez por semana ou uma vez por mês. Também fiz algumas alterações nos termos, como a estrutura de pagamento e a política de cancelamento. Não use esses termos como aconselhamento jurídico. Não sou advogado e também não criei esses termos com base em qualquer estrutura legal. É para você e seu cliente terem um entendimento claro sobre algumas coisas importantes. Falaremos sobre contratos no próximo vídeo. Ao trabalhar com tarifas horárias e fora das plataformas, você precisará usar uma ferramenta de rastreamento de tempo O que eu uso é o Top Tracker. Eu tentei muitos, e este parece ser o melhor, especialmente porque é totalmente gratuito. Pelo menos por enquanto é. Ele tem um aplicativo para desktop. Depois de abri-lo, todos os meus projetos em andamento estão lá, então eu seleciono o projeto e começo a acompanhar. Simples assim. Eu acompanho tudo sobre o projeto. Não precisa ser apenas design e desenvolvimento, reuniões, comunicações e assim por diante. Tudo isso faz parte do projeto. Coloquei o link para o Top tracker na recursos na seção de produtividade Mais ferramentas de freelancer podem ser encontradas lá Por exemplo, WAV, que é o que eu uso para faturamento, novamente, também são ferramentas de proposta on-line Por exemplo, o Bonsai aqui tem um recurso de proposta. Não uso essas ferramentas de proposta on-line porque, Figma, posso criar minha proposta como quiser, adequando-a à minha marca e, em geral, com mais flexibilidade Mas com essas ferramentas, tenho que seguir seus modelos. Caso você queira experimentá-los, aqui estão eles. E esse é o seu modelo de proposta. Use-o, adote-o como quiser. Coloquei aqui coisas que eu mesmo uso e o que aprendi ao longo dos anos cometendo alguns erros com clientes e me metendo em alguns mal-entendidos Você pode usar minha experiência como sua rodada inicial. 173. Contrato freelance: Seria surpreendente, mas na verdade eu não faço contratos com meus clientes. Eu não posso me incomodar com isso. Isso torna as coisas muito sérias. E mesmo que as coisas corram mal, provavelmente nunca vou buscar nenhuma ação legal. Então, realmente não adianta para mim. Por causa disso, garanto que as coisas não dêem errado. Aqui estão algumas precauções que eu tomo para garantir que o projeto corra bem e eu acabe sendo pago Isso se aplica principalmente ao trabalho fora da plataforma. Em plataformas como a Upwork, o contrato é feito lá É do interesse deles que você seja pago. E se algo der errado , eles mediarão e decidirão quem está certo ou errado Independentemente de você estar trabalhando com um contrato ou não , aqui estão algumas precauções a serem tomadas para garantir que as coisas não dêem errado Primeiro, você precisa ter certeza de que está claro com seu cliente e , em seguida, nenhuma surpresa surgirá em nenhum momento do projeto Para isso, uso meu documento de proposta e me certifico de que está declarado tudo o que poderia surgir no futuro. E se surgir alguma discordância , podemos sempre voltar à proposta e ver o que está dizendo lá Ao trabalhar com clientes em todo o continente, geralmente é mais fácil quebrar um contrato, mas não é tão fácil romper e estragar um relacionamento entre humanos. Então, quando trabalho com clientes e geralmente trabalho com clientes no exterior e em vários continentes, tento ficar cara a cara no Skype principalmente porque ter uma interação cara a cara com as pessoas e esse relacionamento cara a cara estabelecer esse relacionamento cara a cara cria um tipo diferente de vínculo entre os clientes e E romper esse relacionamento é muito mais difícil se eles já me viram e se tivemos alguma interação durante a ligação do que se eu fosse apenas um cara com uma foto de perfil e um nome de usuário ou apenas um endereço de e-mail. Além disso, posso obter muitas informações sobre meus clientes ao vê-los e conversar com eles. Eu uso meus sensores idiotas que a Mãe Natureza me deu, e posso sentir se há alguma coisa duvidosa e duvidosa neles. Com novos clientes, eu sempre os faturo passo a passo durante todo o projeto Não espero que todo o projeto seja concluído e, finalmente, envio o valor total e, em seguida, espero que eles paguem. Se eu estiver trabalhando com estranhos com quem não trabalhei e estão fora da plataforma , vou pedir um pagamento adiantado de 25% Dessa forma, posso equilibrar o risco entre mim e o cliente, porque se eu pedir um pagamento adiantado de 100% , ele assumirá o risco total E eu não quero colocar meus clientes nessa situação, nem eles estarão dispostos a fazer isso, ou se eu estiver cobrando 100% no final do projeto, estou assumindo todo o risco. Ao pedir apenas 25% antecipadamente, sim, eles mesmos estão assumindo um pequeno risco, mas pelo menos eu tenho 75% dos pagamentos restantes para me motivar a fazer o resto do trabalho Com clientes existentes com os quais eu já trabalhei e confio, e eles já me pagaram por projetos anteriores e eu sempre paguei em dia, então eu posso relaxar e facilmente faturá-los no final do projeto, 100% Mas isso é o que eu faço. Isso não significa que é isso que você também deve fazer, julgar por si mesmo e ver o relacionamento que você tem com seus clientes. Também gosto de confiar nos meus clientes e, quando vejo que temos um bom relacionamento, gosto de mostrar a eles que confio e, quando vejo que temos um bom relacionamento, gosto de mostrar a eles que neles e que não desconfio deles, porque desse tipo, se eu confio neles , eles sabem que podem confiar em Mais ou menos, é uma coisa mútua. Se você confia neles, então eles sentem a obrigação de confiar em você volta e apenas criam um relacionamento muito bom. Mas se eu sempre suspeitar deles, então, você sabe, o relacionamento vai ficar um pouco mais frio. Quando você tiver uma experiência ruim, ajuste sua estratégia. Quando alguém viola sua confiança e não paga em dia, mude sua estratégia , sem desculpas, sem segundas chances e peça pagamentos antecipados Eu só tive um problema de pagamento uma vez. Eu estava trabalhando com a startup. Eu fiz o site para eles, e eles estavam esperando um investimento chegasse e não podiam me pagar em dia, e eu tive que persegui-los, e não estava claro quando eles me pagariam Eu tive que ligar para eles e mandar um e-mail com todas essas coisas. Eles acabaram me pagando eventualmente e atraso não foi tão grande, mas depois desse momento, uma vez que violaram minha confiança, acabou para mim E depois do momento, tudo o que eu tinha que fazer com o site, eu estava apenas cobrando antecipadamente. Eles estavam dizendo, você sabe, Oh, você pode editar isso? Eu estava tipo, claro, aqui está o pagamento adiantado. Você me paga, eu faço o trabalho. Se você não me pagar, eu não toco em nada. Se alguém mostrar que não é confiável, acredite e tome as medidas adequadas . Se você se sentir mais seguro para assinar contratos ou talvez seu cliente esteja solicitando um diretamente , você pode gerar um contrato no Bonsai Bonsai é uma solução freelancer que tem propostas de faturamento e coisas assim, e eles também têm esse contrato que você pode gerar para trabalhos específicos de design ou web design É um contrato muito bom e personalizável. Todas as partes destacadas são aquelas em que você edita e coloca suas informações. O resto você pode manter intacto porque foi gerado por seus advogados edição das partes destacadas é muito fácil e elas oferecem a opção de fazer perguntas diretas Assim, você pode responder a essas perguntas e ele será facilmente preenchido automaticamente em um idioma adequado para contratos Eles fizeram um ótimo trabalho. Então, se você precisar, basta se inscrever na Bonsai e gerar um contrato lá 174. Como vender o Webflow para clientes: Seus clientes terão uma experiência com o Webflow e desejarão que o site seja construído diretamente dentro dele e procurarão especificamente designers do Webflow Mas para outros, eles podem nem estar familiarizados com o Webflow, então você terá que convencê-los a usar o Webflow como plataforma Esses clientes podem ser divididos em dois tipos. Aqueles que não têm nenhum requisito de onde você vai criar o site. E segundo, aqueles que têm algum tipo de preferência por uma plataforma específica, geralmente o WordPress. Vender o Webflow para aqueles que não têm um requisito ou preferência específica de onde você vai construí-lo realmente não precisa de muito convencimento A maioria dos meus clientes é assim e geralmente confiam minha experiência sobre onde vou criar o site. A única coisa que pode precisar de um pouco de convencimento são os custos de hospedagem do Webflow Mas uma coisa que é importante observar é que hospedagem também custa dinheiro em outras opções. Mesmo que seja o Board Press, o WordPress em si é gratuito, mas a hospedagem é paga. Portanto, o site tem que estar em algum lugar. Normalmente, será em torno de pelo menos $5 por mês. Agora, na verdade, o preço da hospedagem privada realmente cai e a torna muito barata por site é quando você hospeda vários sites, porque os provedores de hospedagem privada regulares , porque os provedores de hospedagem privada também oferecem o preço que eu dei agora era apenas para uma hospedagem de site, mas com um pequeno aumento de preço, eu acho, dois, $3 por mês aumento, agora eles oferecem um plano diferente que permite hospedar uma quantidade ilimitada de sites. E é aí que os preços realmente caem por site. Mas o problema é que os clientes regulares não podem realmente usar esse benefício porque os clientes regulares geralmente têm um negócio e precisam de um site, certo? Portanto, eles nunca se beneficiarão de hospedar 100 sites diferentes em um único plano, porque não precisam de 100 sites diferentes. Eles só têm um site, certo? E quero dizer site porque, é claro, podemos ter até mesmo no Webflow, podemos ter um site Pagaremos apenas um plano, mas temos, ele pode ter mil páginas. Essa é uma história diferente. Estou falando de sites diferentes em endereços da web diferentes e coisas assim, certo? Então, esse é o grande tipo de economia de dinheiro em hospedagem privada. Agora, por exemplo, se eu fosse um desenvolvedor do Wordpress, o que eu poderia fazer é ter minha própria conta, diretamente em um plano de hospedagem e, em seguida, cada site que eu construísse para todos os meus clientes, eu os hospedaria lá, certo? Então, por site agora, você sabe, o preço cairia muito, muito barato, certo, porque eu só tenho uma conta, um plano de hospedagem e, em seguida, todo site vai para lá. E então o que eu posso fazer é cobrar meus clientes os custos anuais de hospedagem ou taxas de gerenciamento de cada site, e então eu pagaria a diferença. E é isso que, obviamente, muitos desenvolvedores web fazem. Mas isso acaba sendo um preço semelhante ao do cliente no final do dia. Então, para o cliente, eles realmente não têm muitas opções, porque nenhum desenvolvedor web vai perder essa oportunidade muito boa ganhar dinheiro extra e oferecer hospedagem totalmente gratuita, certo, porque eles ainda teriam que pagar por isso e todas essas coisas. Então, por que eles o ofereceriam gratuitamente? Agora, para outros benefícios importantes do Webflow, você obtém o que é chamado de hospedagem gerenciada Hospedagem gerenciada significa que eles fazem muitas coisas em segundo plano por você, coisas com as quais você ou seu cliente nunca precisam se preocupar, como backups automatizados, segurança, verificação e remoção de malware, site do servidor, atualizações de software , melhorias de desempenho e muito mais, coisas que eu não entendo e com as quais não me importo , desde que sejam resolvidas. A manutenção da segurança é um grande problema com os servidores. Certa vez, tive um site Wordpress, que eu mesmo hospedei em um servidor de chip. Um dia, um malware entrou e virou meu site de cabeça para baixo. O site estava ligado e desligado constantemente. O malware estava usando toda a largura de banda do meu servidor. Não consegui descobrir como remover aquela maldita coisa. Era meu site pessoal, então decidi retirar tudo do ar e cancelar a hospedagem. E se isso não for suficiente para a diferença, então isso é. Um plano de hospedagem mais barato típico geralmente oferece um espaço de servidor em um único local, um computador chamado servidor onde seu site está localizado. Se eu estiver na Austrália e o servidor estiver nos EUA, o conteúdo de um site precisará viajar por cabos dos EUA até a Austrália. Isso causa uma carga lateral como um caracol, mas a hospedagem Webflow vem com o que é chamado de CDN Content Delivery Network Com o Webflow, seu site carrega do servidor mais próximo do usuário Portanto, se um usuário estiver no Japão, o site será carregado de um servidor próximo em Tóquio, não da Califórnia. Obviamente, o Webflow não é a única hospedagem a oferecer isso, mas quando você adiciona o recurso CDN em servidores regulares, os preços começam a subir e aproximam dos preços do Webflow E se isso não for suficiente, o Webflow tem mais um truque na manga Esse é um benefício que os servidores gerenciados regulares não têm. Veja bem, os servidores comuns precisam estar prontos para qualquer coisa. Os usuários podem instalar o WordPress, o Juma, o Drupal ou até mesmo todos esses três sistemas e executá-los todos de esses três sistemas e executá-los todos Isso não representa problemas para o servidor, mas significa que ele não pode ser totalmente otimizado para executar apenas um sistema específico muito bem. Os servidores Webflow precisam executar apenas um sistema, o Webflow. Portanto, ele está altamente ajustado para executar apenas o Webflow. Agora, é claro, existem provedores de hospedagem comparáveis que combinam com todos os benefícios do Webflow que se especializam em uma única plataforma, são gerenciados e incluem recursos do Cdian, mas acabam sendo mais caros Por exemplo, o WP Engine, um fornecedor popular de hospedagem especializada em WordPress que tem todos os mesmos recursos semelhantes que Webflow oferece, começa em $35 por mês Então aí está. Quando comparados a um site versus um site de hospedagem, os preços são muito semelhantes ou às vezes até mais caros do outro lado. Se você estiver usando os mesmos recursos que esse tipo de Webflow oferece E, no final das contas, se um site não pode agregar mais valor ao seu cliente do que $20 por mês , qual é o objetivo desse site, afinal O segundo tipo de cliente terá preferências por uma plataforma específica, geralmente o Wordpress. Agora, antes de apresentar o caso e tentar convencê-los a usar o Webflow, você precisa entender qual é o raciocínio por trás Como eles chegaram à conclusão de que precisam usar o WordPress como plataforma? Porque às vezes há um recurso específico ou um requisito que seus clientes podem ter que o Webflow não é capaz de atender Por exemplo, se a equipe estava usando algum plug-in do WordPress no site anterior, provavelmente porque eles tinham um site no Wordpress e estavam usando algum plug-in específico. Digamos que você esteja trabalhando com uma clínica odontológica e eles estejam usando um plugin específico do Wordpress para suas consultas, como, você sabe, marcar consultas, você sabe, curtir calendários e então, você sabe, os usuários acessam o site Há um calendário, e então eles marcam uma consulta, algo assim, certo? E eles estão usando esse plug-in em particular, e talvez eles realmente queiram esse plug-in porque talvez a equipe esteja acostumada com ele ou talvez esteja conectado de alguma forma em seu tipo de processo de negócios ou algum tipo de integração com outros aplicativos que eles mesmos estão usando, talvez algum outro CRM ou algo parecido Nesse caso, certo, eles realmente precisam, você sabe, dar 100% de gorjeta com esse plugin. Você não pode porque se esse plugin for Webflow, específico para wordpress, então não há nada que você possa fazer sobre isso Agora, obviamente, existem muitas alternativas e aplicativos de agendamento de consultas e aplicativos terceiros que não são específicos da plataforma. E a maioria dos aplicativos realmente bons e a maioria dos excelentes aplicativos de terceiros são assim. Eles não são específicos da plataforma. São tipos de códigos que você pode instalar em qualquer site. E você pode encontrar a alternativa, mas se eles realmente quiserem usar exatamente esse plugin, porque, por algum motivo , não há nada que você possa fazer a respeito. E a única opção é usar a plataforma WordPress, e pronto. Portanto, você precisa descobrir se há algum requisito que ele precisa ser atendido, que eles precisam atender e, se você não puder cumpri-lo com o Webflow, precisará repassar esse cliente E se você não encontrou nenhum requisito que o Webflow não possa atender, diga a eles que você tem uma solução melhor para eles do que WordPress e dê a eles três grandes benefícios do Webflow Primeiro, a hospedagem Webflow simples e de alto desempenho. Todos esses pontos que mencionei anteriormente, o CDN, melhor segurança, mais rapidez, menos complicações, Em segundo lugar, a rapidez com que você pode criar, iterar e entregar o site deles O designer do Webflow, codificar um site do zero leva muito mais E terceiro benefício, editor Webflow. Esse é um grande problema para os clientes. O Wordpress e outros CMS são confusos para a maioria das pessoas. Eles são feios, desajeitados e lentos, não são muito agradáveis Você precisa entrar no back office e editar o conteúdo a partir daí. Mas o editor do Webflow está no site ao vivo. Os clientes podem simplesmente acessar o site ao vivo e começar a editar o conteúdo imediatamente. E é assim que você realmente defende o Webflow com seus clientes Na verdade, não há muito para vender. É bem simples e direto. Na verdade, eu mesmo raramente preciso defender isso, porque a maioria dos meus clientes confia na minha experiência. Eles não estão muito preocupados com o local onde vou construir, porque são empresários e empreendedores E muitas vezes até eu trabalho com equipes que são meio técnicas, equipes de desenvolvimento, e até mesmo elas não estão muito preocupadas com a forma como eu o construo, desde que seja eficiente para mim, e eu o produzo e posso iterá-lo muito bem porque sou eu quem, na realidade, está construindo um site e sou eu quem vai editar esse site e todas essas Então, tem que ser rápido e eficiente para eles, que eu possa tornar isso muito fácil, e eles me perguntam, quanto vai custar, dizem o preço, e eles dizem: Ok, bom. Mas nesses casos, onde definitivamente o Webflow parece ser a melhor opção para eles e não há limitação , mas por algum motivo, talvez você ainda enfrente resistência de seus clientes, talvez sobre o preço ou qualquer outra coisa Então, todos esses benefícios que descrevi são suficientes para fechar o negócio. 175. Introdução ao avançado: Parabéns. Você passou pela parte principal deste curso. Todos os próximos vídeos são avançados e você não precisa começar imediatamente sua carreira freelance de web design Eu realmente espero que você tenha gostado do passeio. Percebi que esse curso era difícil e você aprendeu tudo, desde um bom design até o desenvolvimento do Webflow até o sucesso como freelancer Sinta-se à vontade para revisitar algumas das aulas de tempos em tempos Eles ficarão melhores e você praticará ainda mais. Minha recomendação para suas próximas etapas seria praticar alguma prática independente fora deste curso. Você pode escolher um tópico ou produto que o inspire e criar um site para ele Ou até mesmo uma opção melhor seria assumir projetos reais. Você pode procurar projetos em sua rede entre amigos, familiares, colegas de trabalho e assim por diante, e pode assumir projetos pagos ou gratuitos. Ou você pode começar imediatamente a procurar projetos reais e empregos reais no Upwork e em outras plataformas de freelancers Os tutoriais nesta seção são design e ao Webflow Por exemplo, aquele tutorial do Photoshop sobre como recortar um objeto do fundo, algo que discutimos na parte de design deste curso, mas nunca o consideramos uma prática porque era um tutorial do Photoshop e um pouco mais avançado É por isso que eu o coloquei nesta parte avançada da seção ou incorporação de código personalizado, que é para o Webflow, para incorporar alguns aplicativos de terceiros como o plug-in de comentários, que faremos. Esses e mais alguns tutoriais em vídeo na seção avançada se divirtam mais alguns tutoriais em vídeo 176. Webflow: modal personalizado (pop-up): Neste vídeo, vou mostrar como criar um modelo personalizado ou, em outras palavras, um pop-up, algo assim. Quando o usuário clica no botão, um modelo é aberto com um formulário Os modelos são amplamente utilizados e muito úteis. Colocar formulários dentro é um uso. Uma opção muito odiada é usá-la como um pop-up. Sabe do que estou falando? Quando você está navegando em uma página e uma mensagem de marketing irritante aparece do nada quando não clicamos Nesta, vamos escolher uma opção menos controversa, um formulário que se abre quando o usuário clica no botão Obter acesso em nosso site TeamApp Construir isso dentro do Webflow não é tão simples quanto você Não há nenhum componente modal pronto que possamos simplesmente adicionar à página Existe um que se chama Lightbox, mas é principalmente para imagens e vídeos Mas formulários ou algo parecido, não há nenhum. Isso foi algo que me surpreendeu no começo, e quando assisti ao tutorial de como construir esse modelo com um formulário dentro. Foi quando eu entendi que tipo de plataforma de web design o Webflow era uma ferramenta profissional em que você cria coisas do zero, como um desenvolvedor, não apenas descartando componentes prontos Portanto, pode ser surpreendente para você também, mas é isso que torna o Webflow incrível Então, vamos começar. O que acontece quando o modal é aberto Há uma cor de fundo que se sobrepõe à parte superior da página inteira, e há esse formulário dentro dela, certo Então, no final, tudo desaparece. Primeiro, vamos construir isso e depois cuidaremos das interações. Vou adicionar um bloco div e colocá-lo no topo da página E chame-o de invólucro modal. É para lá que tudo vai acontecer. Agora precisamos sobrepor isso em toda a tela. Podemos fazer isso fixando a posição e selecionando a opção completa. Vamos dar uma cor para que possamos ver o que está acontecendo. Portanto, está sobrepondo o herói , mas não a seção posterior. E também está atrás da barra de navegação, mas queremos que ela fique por cima de tudo Para sobrepor isso a tudo, precisamos usar um recurso que ainda não discutimos, o índice Z. Que podemos encontrar nas configurações de posição. Ele aparece em todas as posições, exceto automática ou estática. Z significa eixo Z, a profundidade. Basicamente, ele nos permite controlar empilhamento de elementos uns sobre os outros Por padrão, a maioria dos elementos é definida como valor zero. Se tivermos dois elementos sobrepostos, um que tenha um valor Z mais alto se acumulará Também vinculei o tutorial em vídeo do Webflow sobre índice Z, caso você queira aprender um pouco mais sobre ele Então, se eu mudar o índice Z para um, ele vai se acumular em cima de todos os valores zero Ótimo, mas ainda está atrás da barra de navegação. Por que? A barra de navegação não mostra que tem um valor Z interno, mas como a barra de navegação é um componente pronto, provavelmente ela tem algum índice Z padrão do Webflow, que faz sentido porque a barra de navegação nas visualizações móveis tem um menu suspenso, que precisa ficar acima de tudo se estivermos abrindo o menu em dispositivos móveis Se dermos ao nosso modelo um valor mais alto do índice Z , ele se acumulará no topo Podemos ver qual é o valor da barra de navegação, mas vou te dizer diretamente, é 1.000 Então, se definirmos o modelo em 1001, isso funcionará Se não for para você, talvez o valor seja diferente. Basta ir cada vez mais alto até que funcione. Não há limite de como você pode ir. Coloque 10.000 se quiser. Ok, finalmente, vamos deixar o invólucro modal um pouco transparente, algo Em seguida, precisamos de um modelo no centro. Antes de adicionarmos isso, vamos transformar o wrapper em flexbox para que possamos alinhar o conteúdo no centro O novo bloco div ficará bem no meio. Chame-o de modal e estilize-o. Pescoço, basta adicionar um conteúdo, um título, um parágrafo e um bloco de formulário Não temos projetos para isso. Só estou improvisando para uma demonstração. Já temos classes para o elemento do formulário, então vamos reutilizar aquelas como botão e preencher Vou dar a largura máxima do modal, que o conteúdo caiba perfeitamente Os campos têm largura máxima. É por isso que eles estão interrompendo assim. Excelente. Precisamos de mais uma coisa no modelo, um botão fechado. Caso contrário, como os usuários saberão onde clicar para fechar o modelo? Podemos colocar algo como Cancelar ou fechar embaixo um botão ou ícone X no canto do modelo Vamos usar um ícone fechado porque é um pouco mais difícil, então você aprenderá mais. Na realidade, você já sabe tudo o que precisa para construir isso. Só precisamos de um ícone fechado, que podemos obter do ícone plano. Em seguida, posicione-o no canto superior direito usando o posicionamento absoluto. Mas quando você fizer isso, ele vai pular para o canto superior da página, não para o modelo. Você se lembra do que precisamos fazer? Precisamos definir o modal para a posição relativa para que o ícone seja posicionado em relação ao Lá. Agora podemos posicionar bem o ícone dando algumas margens Só para você saber, as cores SVG são editáveis no Figma. Se quiséssemos, poderíamos abrir esse SPG no Figma e mudar a cor para combinar com nossa paleta do projeto, mas não precisamos fazer isso agora Em vez disso, podemos diminuir a opacidade para algo em torno de 30% para torná-la cinza Ok, vamos conferir a prévia. O cursor não muda para uma mão. Eu deveria ter usado um bloco de links em vez de um bloco div normal, mas tudo bem Podemos alterar manualmente o tipo de cursor no painel Estilos. I É tão fácil. E podemos aumentar o espaço clicável para que os usuários não precisem ser tão precisos ao apontá-lo para o ícone Você pode fazer isso apenas aumentando o preenchimento da imagem. Mas agora devemos diminuir as margens ou está muito longe da borda, talvez até mesmo remover as margens Um efeito de foco seria bom. Podemos simplesmente aumentar a opacidade ao passar o mouse e, é claro, dar um efeito de transição para que fique agradável E isso é tudo. O modelo está pronto. Agora o que? Precisamos de interações, interações próximas e abertas. Vamos começar fechando, pois ele já está aberto. Nosso elemento de gatilho, obviamente, é o ícone de fechar selecionado. Acesse o painel Interações. Certifique-se de que a versão de interações com GSAP esteja selecionada aqui e não as interações clássicas e selecione o gatilho, que é um clique E adicione uma nova ação. Animar. Então, o que animamos aqui? Queremos animar todo o formulário, o modelo inteiro, incluindo o plano de fundo, tudo, certo? No momento, o alvo é o elemento, que é o gatilho do clique. Nós não queremos isso. Queremos mudar o alvo. Selecione a classe, remova-a e selecione o invólucro do modelo. Esse é o nome, o nome da classe do nosso invólucro de modelo aqui É por isso que a embalagem do modelo aparece. Em filtrar imediatamente, por padrão, ele será filtrado dentro do elemento acionador, mas o invólucro do modelo não está dentro do ícone fechado, então não queremos isso Não queremos esse tipo de filtragem, então basta redefinir isso Portanto, está definido como nenhum. Então, agora o que queremos animar Queremos que ele vá para 0%, 100% visível para desaparecer até 0% de opacidade Toque e ele desaparecerá. Pode torná-lo mais rápido. A mudança se transformou em algo um pouco mais poderoso. Mãe, hmm. Isso é melhor. Agora, se você passar o mouse sobre a tela, verá que todos esses elementos são selecionáveis na E isso também vai acontecer na prévia. Ele desaparece, mas não consigo selecionar nenhum desses elementos aqui não consigo selecionar Não consigo clicar no preenchimento. Não consigo clicar no botão, nenhum aqui, e como você pode ver, meu cursor muda porque eles estão passando o mouse sobre os campos e o botão Portanto, o invólucro modal ainda está aberto. Só que a opacidade diminui. Então, é simplesmente transparente, mas ainda está lá. Para mudar isso, precisamos removê-lo completamente e alterar a visibilidade para nenhuma, a exibição para nenhuma. Não. Não temos propriedades de exibição aqui sob visibilidade porque não é algo que possa ser animado. Essas são propriedades que são animadas e essa é a ação porque selecionamos a ação animada Então, não obtemos essa propriedade. Nós temos outra opção. GSP tem essa opção, que é Alpha, e o Alpha controla a opacidade e a visibilidade ao mesmo tempo, mas não vamos usá-la desta vez porque também queremos ocultá-la completamente na tela no estado original Então, vamos pular essa versão desta vez. Agora, vamos voltar à nossa interação. E vamos adicionar uma nova ação. E desta vez, vamos selecionar set. O que esse tipo de ação faz é não ter propriedades que animem e elas não sejam animadas, mas você pode configurá-las, que as definirá imediatamente e mudará instantaneamente para um novo estilo dessa propriedade mudará instantaneamente para um novo estilo dessa Adicione uma nova visibilidade e selecione a exibição. tela, abra a lista suspensa e, como você pode ver, temos o conhecido bloco de configurações de exibição, em linha, grau de linho No Vamos selecionar N. Isso nós não precisamos. Não precisamos de aula. Essa é outra propriedade que pode ser definida. Uma classe específica pode ser aplicada ou removida de um elemento. E como você pode ver, essa ação foi adicionada logo após a animação, a primeira animação, que na verdade podemos nomear essa animação modal Eu reconheci facilmente. Então, como você pode ver, animação modal é reproduzida, o que, neste caso, é apenas uma mudança de opacidade Também podem ser outras coisas, como escala, por exemplo, é pequena ou diminui em tamanho ou movimento, fica um pouco abaixo quando a animação é concluída e, em seguida, a exibição é definida como nenhuma. E precisamos garantir que isso aconteça aqui e não em algum lugar no meio. Portanto, se você atualizar a duração da animação, observe que essa ação não ocorrerá. Depois de configurá-la e depois de já estar nesta, lembre-se de que essa ação definida precisa começar no final dela, que está aqui, e mostra que começa em 0,2, exatamente a duração que definimos para a animação original. Ele pode ser alterado para 0,5, por exemplo, e irá para algum lugar aqui caso você tenha uma animação mais longa. Agora. No momento, o alvo, novamente, está definido como gatilho, que é o ícone fechado. Não é isso que queremos. Queremos, novamente, que o invólucro modal seja o alvo Então, mude isso para remover esse invólucro do modelo. Mais uma vez. Não se esqueça, filtre N. Tudo bem, então verifique tudo. Defina a ação. Podemos nomear essa exibição como nenhuma. Não exibir nenhum, embalagem do modelo alvo. Isso está correto. Começa logo no final da primeira animação. Certifique-se de que não esteja em algum lugar no começo ou no meio. Vou interromper essa animação. E a propriedade é aquela exibição para ninguém. Isso é exatamente o que queremos. E deixe-me voltar. E quando você joga isso agora, na tela, como você pode ver os elementos não são mais selecionáveis. Também podemos testar isso aqui. Feche e o texto é selecionável, preencha o campo selecionável. Tudo isso agora está funcionando porque todo o invólucro do modelo desapareceu Ótimo. Além disso, seria bom se pudéssemos acionar o fechamento clicando na área fora do modelo. Então, basicamente, fecha quando o usuário clica no espaço de fundo Agora, seu primeiro instinto pode ser adicioná-lo à embalagem do modelo, mas isso não vai funcionar Porque, embora funcione, ele também é acionado quando você clica em qualquer lugar do modal dois, mesmo dentro dos campos, porque tudo isso está aninhado dentro do invólucro Portanto, clicar no formulário é considerado o mesmo que clicar no invólucro modal Então, precisamos de um novo elemento que esteja sobreposto ao modal e vamos definir o gatilho nesse Dê a ele um estilo semelhante ao do invólucro modal, posição fixa e cheia, sem necessidade da cor de fundo, mantenha-o transparente Agora, se você adicionar essa área fechada após o modelo , ela se acumulará em cima do modelo Mas se você movê-lo antes do modelo , o modal ficará no topo Normalmente, essa ordem muda o suficiente, mas se por algum motivo não for, você pode usar os valores do índice Z. Forneça o índice Z de aluguel de modelos, por exemplo, dois e um para a área fechada, e isso fará o trabalho. R Adicione a mesma interação próxima a essa área fechada e pronto. Agora, quando clicamos no modal em si, nada acontece, mas quando clicamos no plano de fundo, ele fecha Agora precisamos criar uma animação de modelo aberto. Começaremos escondendo todo o invólucro do modelo em nossa tela porque está no caminho e, se quisermos projetar, ficará no caminho, então podemos simplesmente selecionar o invólucro do modelo E na configuração de exibição, selecione nenhum. Agora está completamente desaparecido. Podemos selecionar todo o resto na tela. E se você quiser voltar a ele e editar e alterar o design, selecione o invólucro do modelo e selecione display flex porque era um layout flexível E as configurações flexíveis serão salvas para que você não precise editá-las todas as vezes Ok, agora, nosso gatilho neste caso é o botão. Selecione o botão Obter acesso, vá para o painel de interações, clique em Trigger e chame isso de modelo aberto. E certifique-se de clicar em Trigger, agora clique no botão e adicione uma nova ação Então, primeiro, ação aqui, não vamos fazer animação. Por quê? Porque a exibição da embalagem do modelo está definida como oculta Então, a primeira coisa que precisa acontecer é habilitar a exibição. Caso contrário, não está lá. E se animarmos a opacidade, ela apenas animará a opacidade enquanto ela ainda estiver invisível Então, não vai funcionar. Então, primeiro, vamos definir a exibição e alterar o alvo. Classe. E o que estamos colocando na tela na embalagem do modelo Certifique-se de remover esse filtro. Não precisamos de filtragem porque o invólucro do modelo não está dentro do botão Qual é a configuração de exibição que queremos alterar? Vamos adicionar uma nova propriedade, selecione exibir. E no menu suspenso, selecionaremos flex porque essa é a configuração de exibição que queremos na embalagem do modelo Essas coisas que não precisamos. Agora, como você pode ver, diz começar em 0,2 segundos. Nós não queremos isso. Então, isso é uma coisa que você precisa ter certeza. Aqui na linha do tempo, como você pode ver, direi que começa em 0,01 e 0,2 segundos. Não queremos isso, então você pode simplesmente arrastá-lo até o até o início na tela na linha do tempo ou simplesmente redefinir isso e tudo voltar para zero É isso que queremos. Então, verifique novamente. Vamos mudar isso para display flex. Então, temos um alvo. alvo é a embalagem do modelo, à direita, começa em zero segundo e a tela muda para linho. É isso que queremos aqui. Agora precisamos da animação. Precisamos aparecer em uma nova propriedade, nova ação e selecionar animar desta vez, e selecionar animar desta vez, alterar o gatilho para o invólucro do modelo novamente Sem filtragem. Vamos nomear esse modelo para aparecer. E das propriedades animadas, o que queremos? Queremos a opacidade É isso mesmo. E queremos que passe de 0% para 100%. E desta vez, vamos definir 0% no início porque, por padrão, na tela, não alteramos a configuração padrão para 0%. Então, quando a página carregada no invólucro do modelo estará em 100%, sim, é invisível porque definimos o oculto, mas a opacidade em si está em Portanto, neste caso, precisamos especificar aqui na animação ou na tela em estilos. Mas é melhor fazer isso aqui. Portanto, na tela, quando estamos trabalhando com ela, também não precisamos alterar a opacidade, e apenas mudar para flex fará com que ela apareça imediatamente Portanto, defina a opacidade aqui como zero, porque é aí que queremos que ela seja animada de 0% e queremos que ela seja animada até 100%, indo de 0 a 100 Como você pode ver, agora que aparece e está lento, vamos combinar a flexibilização e a duração com o que já tínhamos Potência três. E vamos ver. Verifique tudo novamente. Portanto, temos alvo, invólucro do modelo, duração, 0,2 segundos, atenuação, tipo de dois 0% a 100% de Está tudo bem. E agora vamos fazer um teste. Ele aparece e desaparece ao clicar. Parece que desaparece, bom. Aparece, desaparece no ícone fechado. Bom. Aparece. Vamos testá-lo. Ela não aparece quando clicamos dentro dos campos. Bom. Tudo bem. Está tudo funcionando bem. Perfeito. E é assim que você cria um modelo personalizado no Webflow Você não esperaria que uma coisa tão amplamente usada precisasse de tantas etapas, mas é assim que todas elas são construídas. Os desenvolvedores ainda precisam codificar tudo à mão. 177. Google Analytics: Depois de enviar seu site para o cliente, a primeira coisa que geralmente você vai querer configurar ou o cliente vai querer que você configure é algum tipo de ferramenta de análise. Agora, esse não é exatamente um domínio de web designers para analisar os dados do site. Geralmente, são os profissionais de marketing que fazem isso ou o próprio proprietário da empresa, se eles entenderem Mas a configuração geralmente requer a instalação de algum tipo de script de código personalizado ou uma tag instalada no lado do Webflow E essa parte geralmente cairá do seu lado como sua responsabilidade. Então, como web designer, é um conhecimento muito bom para você ter logo de cara. E neste vídeo, vou mostrar como instalar a ferramenta de análise mais popular, que é o Google Analytics. Acesse analytics.google.com. Se você nunca o configurou e está logado, provavelmente acessará esta página Se você não estiver logado, o Google solicitará que você faça login na sua conta do Google Nesta página, basta clicar em Começar a medir. Mas se você o configurou no passado, provavelmente chegará imediatamente ao painel, algo assim. A partir daqui, você pode simplesmente criar e clicar em Criar nova conta ou apenas conta. E então você chegará a esta página em ambos os casos. Nomeie algo como sua conta, digamos, Team App no nosso caso, e vamos configurá-la para TeamApp. Clique em Avançar. Para o nome da propriedade, nomeie-a como site TeamApp Então, sabemos, selecione seu fuso horário, moeda, selecione seu setor. Também não é muito relevante. Isso não mudará muito na análise. Aqui também, selecione os objetivos. Novamente, você pode selecionar alguns deles, entender o tráfego da web ou do aplicativo. E, novamente, isso realmente não muda muito na análise. Só que o Google vai recomendar coisas diferentes para você fazer. Clique em criar e aceite os termos e condições. E a partir daqui, agora vamos selecionar a plataforma. De onde estamos coletando os dados? Você sabe, ok, é uma web, então selecione web. E aqui, forneça o endereço, que é o URL principal do seu site. Para obter esse URL, você pode voltar ao seu projeto. Ah, e esse será o URL principal do site se for publicado no domínio de teste no subdomínio Webflow Mas para o cliente, ao publicar no domínio personalizado real do cliente, você fornecerá qualquer que seja o domínio personalizado. Mas, obviamente, vamos fazer isso com um subdomínio porque o domínio personalizado precisa de um plano de hospedagem Então, basta selecionar e copiar este domínio e a página aqui dentro, você não precisa adicionar o HTTPS que já está aqui, então não adicione HTPS e o nome do stream novamente, basta chamá-lo de site Portanto, as medidas já estarão selecionadas, a leitura pode continuar. Feito. Agora temos uma conta do Google Analytics, mas precisamos configurar mais algumas coisas no lado do Webflow Então, o que precisamos para o Webflow é esse ID de medição. Então, se você clicar acidentalmente, se estiver aqui, basta clicar novamente acessar o ID de medição A partir daqui, basta clicar aqui e você encontrará o ID de medição aqui. Copie esse ID de medição e, em seguida, volte para Webflow e Webflow, vá para as configurações do site E dentro das configurações, vá para a integração ausente. E aqui rastreamos diferentes ideias que o Google nos dá. Isso pode ser o Google Analytics ou também o Gerenciador de tags do Google. Nesse caso, isso é o Google Analytics. Vamos precisar desse Google Analytics. E como você pode ver, o Webflow diz que tem que começar com alguma coisa com G, certo? Cole sua tag aqui, certifique-se de que ela comece com G e certifique-se de que ela corresponda exatamente aqui e que você copiou corretamente esse ID. Depois de preenchê-lo, clique em salvar e certifique-se de publicar. Porque até você publicar, essa tag não será instalada em seu site ativo. No momento, nas configurações para que seja enviado ao site ao vivo, ele precisará ser publicado. Quando estiver lá, você poderá visitar seu site. E então podemos voltar para o Analytics e sair disso, ir para a próxima e depois continuar até casa. No momento, ele dirá que nenhum dado foi recebido do seu site. Às vezes, geralmente leva algum tempo para refletir os dados e fornecer todas as informações. Mas, muitas vezes, pelo menos há tipos de dados que são disponibilizados completamente imediatamente. E como você pode ver, há um usuário ativo porque eu já o abri neste navegador e já foi detectado que há um usuário ativo. E a partir dos relatórios, podemos selecionar uma visão geral em tempo real e veremos mais informações aqui sobre os usuários. E eu não vou entrar em detalhes. O Google Analytics é apenas outro grande tópico e exige um curso inteiro próprio. Mas é assim que você o configura se seu cliente precisar, e muitas vezes ele precisa, e eles solicitam que você o configure Depois de configurá-lo para eles, análise depende do cliente e de sua equipe de marketing. 178. Instalação de consentimento de cookies: Neste e em alguns vídeos futuros, vou te ensinar como expandir a funcionalidade do seu site usando código personalizado. Essa é uma habilidade muito importante qualquer web designer precisará em sua carreira, porque a maioria dos sites não termina no desenvolvimento do Webflow Geralmente, o proprietário de uma empresa precisará de ferramentas externas , por exemplo, widgets de bate-papo, agendamento de compromissos, ferramentas de marketing e muito mais Na maioria das vezes, isso acontece por meio da implementação de código personalizado. Mas não se preocupe. Não há nenhuma codificação real envolvida nisso. É só copiar e colar o código de um lugar para outro. E ele só precisa de um pouco de alfabetização para navegar nesse código Esse entendimento expandirá seu conjunto de habilidades de web design e permitirá que você se sinta confortável na implementação ferramentas e soluções adicionais em seus sites. Agora, os recursos de código personalizado no Webflow são pagos. Portanto, para poder seguir este tutorial, você precisará de um plano de espaço de trabalho do Webflow ou de um site hospedado Se você não tem isso e não quer investir nisso no momento , pode pular esses tutoriais de código personalizado por enquanto e voltar a eles quando tiver um plano pago ou estiver trabalhando em um ou estiver trabalhando em um Agora, logo após instalar ferramenta Analytics em um site, normalmente, você precisará instalar um banner de cookie como esse. Se você mora na União Europeia, provavelmente está muito familiarizado com isso em alguns estados, Estados Unidos, Canadá, Austrália, Reino Unido Você estará familiarizado com isso porque recebemos esses banners constantemente solicitando que aceitemos ou rejeitemos cookies desses sites Se você não mora em um desses países regulamentados, talvez não esteja familiarizado com esses banners No entanto, para qualquer site, se você for atender ao mercado, se estiver criando um site para um cliente e atenderá usuários nos Estados Unidos ou em lugares específicos nos Estados Unidos. Se você estiver atendendo usuários na União Europeia, no Canadá e em muitos desses lugares onde eles têm leis de privacidade rígidas, você precisará instalar um banner de consentimento de cookies e pedir permissão aos usuários para poder rastreá-los e instalar cookies em seus dispositivos. Foi quando, por exemplo, o que fizemos na última lição, que foi instalar uma ferramenta de análise, que era o Google Analytics. Isso é o que instalamos. E, por exemplo, este é meu site, site pessoal, e você verá que estou recebendo aqui algumas estatísticas de usuários em países de onde as pessoas o estão visitando, e isso acontece por meio de cookies. Agora, quando você faz isso e vem desses países, você precisa obter o consentimento. Caso contrário, você não poderá fazer isso instalando cookies. Portanto, se você faz rastreamento , ele deve estar em um modo de rastreamento muito diferente. Até que você realmente instale o rastreamento, você não precisa fazer isso. Você não precisa instalar um banner de cookie ou um consentimento se você acabou de iniciar o site. Então, até fazermos essa análise, você não precisava fazer isso porque às vezes meus alunos me perguntam: eu preciso instalar um banner de cookie no meu site? Como eu faço isso? Bem, você está realmente rastreando-os? Você está usando ferramentas como o Google Analytics Essas ferramentas usam cookies especificamente ou processam dados pessoais do usuário para rastrear usuários e entender o comportamento do usuário Nesse caso, então sim, temos que instalar isso. Se você não está fazendo isso, então não há absolutamente nenhuma necessidade de fazer isso. Seu site não usará nenhum tipo de cookie de marketing ou análise exigido por lei. Seu site usará, por exemplo, apenas um cookie de sessão, que é um cookie necessário para a página carregue e entenda a sessão, e isso é algo que realmente não faz parte dessa lei, e não é isso que esta União Europeia e essas legislações realmente regulam Agora, para este tutorial, precisaremos usar uma ferramenta de terceiros, que é um aplicativo de consentimento de cookies, um banner, uma plataforma de gerenciamento de consentimento , às vezes chamada. E isso tem que ser feito por meio de uma dessas plataformas. Você não pode fazer isso apenas por meio de um banner personalizado que aparece no weblo Você poderia potencialmente fazer isso, mas há muito mais lógica acontecendo. Aí, porque os banners de consentimento de cookies que recebemos e para que estejam em conformidade com os regulamentos, eles precisam bloquear todos os scripts que executam cookies e instalam cookies e só executam esses cookies e instalam esses cookies depois que o usuário clica E se o usuário clicar em Rejeitar tudo , esses cookies e scripts precisarão ser bloqueados É por isso que quase todo site usa algum tipo de solução de terceiros, como o Cookie Hub. Há outro, como o Cookie boot, e outro chamado Consent Pro, que pode ser instalado diretamente do mercado Webflow E a razão pela qual estou escolhendo o Cookie Hub neste caso é porque é o melhor negócio porque o Constant Pro é pago imediatamente. Se você quiser no domínio personalizado. É gratuito no subdomínio Webflow, mas é pago imediatamente. Você precisa pagar por isso imediatamente. E estou usando este Cookie Hub porque tentei muitos diferentes e descobri que este tem uma das implementações mais fáceis O preço é bom e seu nível gratuito é realmente utilizável E sim, tem uma limitação. Sobre o que você pode fazer, quantas sessões por mês você pode ter e quantos visitantes você pode ter, mas ainda é utilizável Então, o primeiro passo aqui é se inscrever no Cookie Hub, acessar cookie hub.com e se inscrever Diz um teste de 14 dias, mas o teste de 14 dias fornecerá esses recursos premium. Ele não exige cartão de crédito e, após o teste de 14 dias, ele simplesmente voltará para o nível gratuito, que é gratuito e também pode ser usado No domínio aqui, vou fornecer domínio do meu site pessoal porque é aí que eu tenho o plano pago. No seu caso, se você tiver um plano de trabalho do Webflow e puder usar um código personalizado, poderá fornecer, por exemplo, o aplicativo chat tap e seu domínio e qualquer domínio que você usou para ele, que estará aqui Esse é o domínio, e esse é o que você pode aplicar aqui. E você acessa essa página, algo assim que mostra o domínio que você acabou de adicionar, e mostra o básico como 30 mil visitantes por mês , mas depois esse é o teste e depois volta para menos, acho que são mil visitantes por mês permitidos no plano gratuito. Agora precisamos configurar as coisas clicar nos detalhes e entrar na instalação de configuração. E nessas páginas, na guia de visão geral, temos algumas maneiras de configurar escolher o código de inserção manual. E você vai receber esse código. Esse é um método muito comum e exatamente como quase todas as implementações de aplicativos ou ferramentas de terceiros acontecem. Eles te dão um código. Há um guia de implementação e instalação em algum lugar. Eles fornecem esse código e dizem que você deve colá-lo em algum lugar do seu site. E eles dirão que, neste caso, ele nos diz cole isso na seção principal acima de todos os outros scripts. Portanto, deve ser o primeiro script a ser executado e, em seguida, todo o resto deve ser executado depois disso. No Webflow, temos três locais diferentes onde podemos colar ou instalar código personalizado A primeira dentro do designer é a incorporação de código. Depois de adicioná-lo à tela, ele abrirá esse campo, é um campo HTML, e o código pode entrar. Tem que ser um código HTML. E essa coisa, isso será exibido em linha, e você pode colar isso entre o conteúdo Você pode ter um título aqui, um código personalizado aqui e outro conteúdo aqui e, em seguida, o código personalizado será executado. E se for algo exibido, ele será exibido aqui mesmo na página. E geralmente eles podem não ser exibidos com precisão na página, mas serão exibidos dentro do modo de visualização. E é por isso que existe esse código personalizado ativado . Alterne Em seguida, o código personalizado será executado na pré-visualização. Às vezes, se for apenas um HTML simples, HTML e CSS e não houver Javascript, ele também será exibido diretamente no designer. Então esse é um lugar. Outro local onde instalamos e podemos colar o código personalizado é nas configurações de uma página. E quando você rola até o final, você tem esses dois campos, obviamente, desculpe, não isso, esse campo. Agora, é óbvio que eu já estou no plano paralelo pago, e é por isso que eles estão habilitados. Se você estiver no plano gratuito, obviamente, eles serão bloqueados. E há dois campos aqui. Um diz dentro da etiqueta da cabeça, outro diz antes da etiqueta corporal. E isso é, eu não vou me aprofundar nisso. Qual é a diferença entre os dois. E todas as soluções de código personalizado geralmente dizem se você deve colocá-las dentro da etiqueta principal ou no final, antes da etiqueta corporal. E isso geralmente significa “antes da carroceria”, logo antes da última coisa na página. A etiqueta corporal é, essa é a etiqueta corporal. Então, colocar qualquer coisa antes da tag body significa que tudo o que temos na página fica na parte inferior. Então, neste caso, só uma coisa. Depois do cabeçalho, ele será colado aqui e será exibido na parte inferior Normalmente, isso significa que não está sendo renderizado. É só uma vez que não queremos que ele interrompa nada na página É por isso que o colocamos por último. Então, esses são dois lugares, e esta é a página. Portanto, somente nesta página, seja ela qual for, página de consentimento de cookies, é aqui que ela será instalada e não será executada em nenhuma outra página do nosso site. E o terceiro lugar é o site branco. Então, se acessarmos as configurações do site, temos essa guia de código personalizado aqui e, aqui, temos esses dois campos exatamente semelhantes: tag de cabeçalho na tag de corpo antes da tag de corpo, também chamada de código de rodapé E isso agora se aplicará em todo o site. Cada página do seu site executará esse código. No nosso caso, para o consentimento de cookies e muitos desses aplicativos, por exemplo, um widget de bate-papo ou qualquer ferramenta de marketing, geralmente queremos esse texto branco porque queremos que ele seja executado em todas as páginas do nosso site E é aqui que vamos colar nosso código de consentimento de cookies. E esse é o nosso código, e então você simplesmente o salva. Depois de colar seu código e salvá-lo, a próxima etapa é publicá-lo, pois até que você o publique, esse código não estará ativo. Ele é salvo aqui diretamente no painel de configurações e, depois de publicá-lo, ele será enviado para o site ativo. Depois que a publicação for finalizada, poderemos acessar nossa página e atualizar, e devemos receber o aviso de cookie agora aparecendo em nosso lado Este aviso de cookie agora pode ser personalizado, e faremos isso nas configurações do portal Cookie Hub. No entanto, há mais algumas etapas que precisam ser executadas para isso seja totalmente finalizado e funcione Agora, se você estiver aqui, se estiver aqui no painel, pode voltar aos detalhes ou simplesmente clicar aqui. Vá para personalizar. E agora podemos mudar algumas coisas sobre como ele está sendo exibido. Como uma das coisas no momento, como você pode ver, não consigo clicar para sair. Não consigo me movimentar. Esta é uma política de cookies e um banner de consentimento de cookies muito intrusivos e um banner de consentimento Não me deixa ir a lugar nenhum. Isso é o que, por padrão, está acontecendo aqui. Então, queremos desmarcar a opção Bloquear interface de usuário. Esse bloqueio acontece em sites como o Facebook ou o Google ou sites de notícias como New York Times, Tribune, qualquer que seja Que eles realmente querem que você defina primeiro você vai aceitar os cookies ou não e decidir? Às vezes, eles nem permitem que você acesse um site se você não aceitar nenhum cookie e usar o site deles. E às vezes eles permitem, mas querem a decisão imediata e não permitem, e querem realmente obter a confirmação. Porque normalmente, se você não forçar a confirmação, as pessoas simplesmente vão rolar e curtir o site sem nunca clicar no banner. Então, neste caso, eu vou removê-lo. E outra coisa que podemos fazer é mudar onde ela é exibida. Por exemplo, um estilo de comunicação muito parecido é uma barra que pode ficar, por exemplo, na parte inferior. E há uma maneira comum e não intrusiva você ainda permitir que as pessoas usem seu site, e você simplesmente não as está forçando a aceitar ou negar cookies porque talvez você não seja tão importante rastreá-las ou usar A partir daqui, também podemos alterar a paleta de cores. Por exemplo, no meu caso, talvez eu opte pelo preto e branco. E então os botões podem ser reorganizados, cookies, cookies de negação E isso geralmente é uma configuração muito boa do jeito que está. Mas, dependendo de onde você estiver, talvez seja necessário alterar a localização dos botões com base no que as pessoas estão acostumadas na sua região. Outro centro de preferências que temos aqui é quando eles clicam em Configurações de cookies. Isso se abre e você pode alterar o que está visível aqui, o que não está visível. Normalmente não precisa mexer com isso. Esse é o ícone que fica na página. Não é algo que eu geralmente goste. Existe um regulamento de que você precisa ter um local onde eles possam negar o consentimento para que os usuários possam remover o consentimento, e isso pode ser colocado como um link em algum lugar no rodapé para as configurações de cookies Em vez desse tipo de banner, eu sempre posso simplesmente flutuar no site. Então, eu vou salvar tudo isso. E para qualquer personalização personalizada dos telefones ou qualquer outra coisa, para qualquer site que precise uma aparência realmente personalizada para esses botões , o CSS personalizado pode ser usado. Depois de terminar, salve e feche e, em seguida, você deverá publicar as alterações pendentes. E então você pode voltar ao site e atualizar, espere um pouco E precisei de algumas tentativas e, finalmente, funcionou. E agora você pode ver que o banner é diferente. Agora, o banner está funcionando, parece que ainda não está em conformidade. Na verdade, não está fazendo o que deveria fazer. Para que ele faça o que deveria fazer e, na verdade, o Cookie Hop possa nos ajudar com isso, ele precisa verificar se há cookies e começar a bloqueá-los. Então, na página de escaneamento, ele já fez um escaneamento para mim, e se não o fez para você, você pode solicitar um escaneamento , e ele vai percorrer suas páginas, escanear todos os scripts e códigos personalizados que você tem que estar executando em seu site e descobrir o que precisa ser bloqueado e se é possível bloqueá-lo Agora, da forma como configuramos o código do Google Analytics, vamos ver se ele já fez essa Central de Ação. Dentro dos centros de ação, geralmente teremos problemas. E então podemos analisar esses diferentes problemas e abordá-los como estão. Então, um dos problemas que você terá é que, se você implementou o Google Analytics, a partir daqui, você terá um problema no Cookie Hub porque o Cookie Hub não consegue realmente bloquear o script porque o Webflow injeta esse código e o script do Google Analytics muito antes, então esse script carrega Então, o que precisamos fazer aqui é, na verdade, remover isso daqui excluindo não permite excluir imediatamente. Eu tinha uma nova tag e excluí o save, e vamos fazer uma instalação manual a partir de um código personalizado sem instalação do Webflow a partir desse campo Para isso, precisamos acessar o Analytics. Analytics.google.com, mais uma vez. A partir daqui, ele solicitará que você faça login na conta correta do Google depois de fazer login, então você poderá fazer isso a partir daqui. Se você tiver apenas uma conta e uma propriedade, ela será selecionada imediatamente, mas se você tiver várias, precisará selecionar aqui. Quando estiver aqui, pesquise fluxos de dados. Isso é o que configuramos da última vez. E se você se lembra, isso é o que fizemos para o meu site, para o site do TeamApp e eu tenho algo semelhante aqui, clique aqui E da última vez, pegamos esse ID de medição, mas desta vez vamos pegar o script inteiro, que podemos encontrar em View tag Instructions. E selecione instalar manualmente, e obteremos esse código e usaremos esse código. Esse é um código semelhante ao que o Webflow está injetando. Só que está injetando muito mais cedo. E podemos pegar esse código aqui. Ele já tem nossa identidade em um lugar aqui, outro lugar aqui. É quando precisa. Se você não conseguir encontrar esse código no painel do Google Analytics, pode perguntar ao Gemini ou a qualquer outro LLM e dizer: me dê o script mais recente do Google Analytics E fornecerá exatamente o mesmo script. Ele só terá esse Gxxxx e é aqui que você precisa substituir esse ID de medição e, em seguida, o script será exatamente o E o ID de medição já estava aqui quando o excluímos. Agora, depois de ter esse código e ter esses IDs de medição corretamente, você colará esse Google Analytics após o script Cookie b aqui. Problema, todo o problema é que todo esse script que o Webflow está injetando antes e depois executa o Cookie Hub, e agora o CookieHub não consegue realmente capturar esse script e bloqueá-lo antes que o usuário possa dar permissão a Portanto, para quaisquer outras ferramentas que sejam aplicativos de terceiros ou ferramentas que você instalará em seu site, rastreadores ou talvez um bot de bate-papo ou agendamento de agendamento, qualquer coisa que use cookies, você sempre as instalará abaixo do código do Cookie Hubs Portanto, o Cookie Hub é capaz de controlar esses scripts. Depois de tê-lo corretamente, clique em Salvar. E, novamente, publique para selecionar os domínios, espere um pouco E depois de publicado, agora podemos voltar ao Cookie Hub e solicitar que ele seja digitalizado novamente E desta vez, depois de digitalizado, ele deve ser capaz de capturar os cookies corretamente e não deve nos causar problemas aqui, e isso geralmente leva alguns minutos, então você pode ir embora, fazer uma pausa e voltar mais tarde Depois de terminar, você não encontrará problemas, que significa que está correto Tudo está configurado corretamente na visão geral. Você obterá tudo isso bem, sem problemas detectados. Então, ao lado, quando os usuários realmente clicarem em Permitir cookies, é quando os cookies e o Google Analytics serão carregados, e é aí que qualquer outro script que exija cookies será carregado e pronto. scripts de rastreamento específicos usados e do público que ele atende, então não vou falar sobre isso aqui Talvez seja necessário fazer outras configurações e personalizações, mas isso depende do site real, dos mas isso depende do site real, scripts de rastreamento específicos usados e do público que ele atende, então não vou falar sobre isso Mas se você tem um projeto real e precisa de ajuda, basta postar nas perguntas e respostas e eu poto 179. Incorporação de código + IA: Neste vídeo, o que vamos fazer é fazer outro tutorial de código personalizado na prática. Novamente, é um recurso pago no Webflow, portanto, isso exigirá você tenha uma conta paga do Webflow, uma conta espaço de trabalho ou um plano de hospedagem em um dos Na última vez, fizemos essa instalação de código personalizado por meio das configurações do site e, desta vez, usaremos esse elemento de incorporação de código Nesse cenário, examinaremos a instalação alguns componentes de código de fontes externas dentro do Webflow, e isso mostrará o quanto você pode expandir sua habilidade e sua capacidade de projetar o Webflow e não apenas confiar na funcionalidade nativa do Webflow, mas ser capaz de trazer funcionalidade e design de fontes E também vamos utilizar a IA. Vou mostrar o quão poderosa a IA pode ser nesse caso, para ajudá-lo a modificar o código e torná-lo útil para a implementação do Webflow Existem muitos sites e lugares que compartilham componentes de interface de usuário de código aberto. Um dos mais populares é o CodePen. É aqui que os desenvolvedores criam algo. Eles compartilham a implementação do código, e outros desenvolvedores podem pegar o código utilizá-lo e implementá-lo em seus designs e sites. Outra opção que é o UIRs também é semelhante ao CodePen, não exatamente a mesma, mas é um pouco mais simples, e vamos começar com o UIWors e explicarei como isso funciona explicarei Primeiro, deixe-me dar um pequeno guia de como o UI verse funciona. Então vá para ivers dot IO. Vou colocar o link nos recursos também. E o que temos aqui são alguns componentes que são criados, como botões que animam, coisas que são como componentes simples e autônomos que são construídos, como botões que animam, coisas que são como componentes simples e autônomos que são construídos, e geralmente têm animações e interações engraçadas, não engraçadas, mas divertidas designer ou desenvolvedor que foram criados achou que eram criativos E você pode acessar os elementos, clicar em todos e aqui veremos que há coisas animadas, gradientes, fluxos e interações com as quais você poderá interagir imediatamente. E quando você passa o mouse sobre ele, você será deslocado para obter o E então ele oferece HTML e CSS, que você pode pegar e implementar onde quiser. E a maneira de usar o verso da interface do usuário é vou te dar uma pequena dica aqui. Você verá isso como vento de cauda e CSS. O tailwind é uma estrutura e uma biblioteca baseadas em CSS, e usá-lo no Webflow é e usá-lo no Webflow um pouco complicado porque isso significa que precisamos extrair o banco de dados ou biblioteca web tailwind e importá-lo para o nosso site, o que complica as coisas, e pode entrar em complica as coisas, e conflito com qualquer classe CSS e a biblioteca que temos na web que não queremos tais dependências. Queremos um CSS mais limpo. Isso é exatamente o que eles chamam de CSS básico. E se você passar por isso sem selecionar esse filtro, verá que alguns deles terão esse ícone de vento traseiro. Se não tiver, isso significa que não é baseado no vento de cauda, e você pode usá-lo dessa forma usando a implementação básica de CSS Então, quando você estiver examinando isso, às vezes certifique-se de selecionar CSS, e isso fornecerá apenas uma implementação simples sem dependência de uma biblioteca externa, como healin Então eu encontrei esses cartões aqui. Essa coisa aqui, e eu gosto muito desse efeito, mas do efeito. E, obviamente, poderíamos potencialmente construir isso dentro do Webflow usando interações do Webflow Mas às vezes você não quer tentar descobrir tudo e vê um componente fácil e muito útil basta pegar e copiar e colar dentro do Webflow Quando encontrar algo de que goste, clique aqui, Obtenha o código. E aqui, vamos obter HTML e CSS. Então, nada complicado aqui. É exatamente assim que também estamos trabalhando dentro do Webflow. Temos elementos ou tags HTML, e é exatamente isso que estamos adicionando aqui. Por exemplo, DIV Block. Esse é o Bloco DO. É assim que o Bloco D é escrito. E quando diz que classe é igual a pilha de cartas, é exatamente isso que adicionamos Se apenas nomearmos essa pilha de cartas, essa seria exatamente a mesma implementação no Webflow, que você vê aqui, classe DV, É isso mesmo. E então, quaisquer estilos que mudemos, quaisquer estilos que mudem aqui, eles são adicionados linha por linha adicionados a essa classe de pilha de cartas Isso é o que está acontecendo aqui. Estamos bem familiarizados com isso. E esta é uma introdução muito boa para você e uma boa maneira sujar ou molhar as mãos em um pequeno código. É uma ideia muito boa que você não se esquive de implementar um pouco de código aqui e ali, porque isso expande sua habilidade sobre o que você pode fazer com o Webflow ou apenas com o web design geral, mesmo se você estiver usando qualquer outra ferramenta, mesmo que não seja Então, o que precisamos fazer aqui é apenas copiar esse primeiro HTML e, na verdade, criar seção simples, um contêiner, um parágrafo de título Vamos chamar isso de código personalizado. Tutorial. Vamos dar um pouco de acolchoamento a isso C centralizá-lo. Tudo bem. E por dentro, agora podemos adicionar incorporação de código No momento em que você clicar nele, esse campo aparecerá para que possamos colar o código nele. Então, aqui vamos colar tudo o que copiamos, e isso vai manter esse comentário ativo Você pode remover esse comentário ou não. É assim que você escreve comentários em HTML. E esse campo é um campo HTML. Somente HTML entra. Você não pode colocar seu CSS ou JavaScript puro dentro. Você precisa colocá-los dentro de tags HTML. Então, por exemplo, segunda coisa que precisamos copiar daqui é esse CSS. Mas isso é CSS puro. Então, se apenas colarmos assim, você obterá esse texto em branco. Isso significa que não está reconhecendo o idioma, a forma como está escrito É HTML e tudo isso escrito da mesma forma que o CSS é escrito, ele não reconhece que é por isso que está branco Então, não vamos fazer isso. E para colar CSS dentro do HTML, você precisa colocá-los dentro da tag de estilo E isso é o que parece quando você coloca algo em uma tag dentro do HTML Estilo com colchetes ao redor, estilo com colchetes ao redor, mas a etiqueta final precisa ter uma barra Por exemplo, algo que fazemos com frequência é H one tag, certo? E então você os coloca no H 1, e isso é uma manchete É assim que parece colocar um título dentro de um blog Sempre que colocamos um título, essa é a realidade em segundo plano, é isso que está acontecendo. Apenas uma tag H um, a tag de abertura se parece com isso, tag de fechamento tem esta aparência. Tudo dentro do HTML deve ser fechado com uma tag de fechamento. Se você não fizer isso, ocorrerá um erro com frequência e causará problemas para garantir que seja fechado. Então, a mesma coisa com CSS. Assim que tivermos esse compartimento, poderemos colocar CSS puro dentro dele e simplesmente colar seu CSS aqui e você poderá garantir que, uma vez que tudo esteja codificado por cores, significa que agora ele o está lendo Começou a entender que estamos dizendo aqui ao navegador daqui em diante, leia isso como CSS porque chamamos isso de estilo E então diz: Oh, entendemos. E depois comenta aqui novamente. Esses são comentários. Você pode removê-los se quiser, mas é um bom guia para você ou, se você não quiser mencionar quem os fez, não acho que precise referenciá-los com base na licença que eles fornecem Acho que é gratuito e você não precisa referenciar e creditar o autor desses componentes. Então aqui, é assim que você escreve comentários dentro do CSS. É assim que você escreve comentários dentro do HTO. Feito isso, clique em Salvar e fechar. E quando é puro CSS HTML, Webflow geralmente o executa imediatamente dentro do design Se também incluir JavaScript , não funcionará imediatamente e funcionará apenas na visualização prévia. Quando você estiver na visualização prévia, certifique-se de ativar o código personalizado. E, geralmente, se você tiver JavaScript dentro, você também se você tiver JavaScript dentro, executará o JavaScript aqui. E então, em casos raros, às vezes ele nem será executado na prévia e só será executado em uma página publicada, e só será executado em dependendo do código que você está implementando. Muitos deles, e a maioria deles, serão executados aqui, mas alguns precisam importar dependências diferentes, então não serão executados aqui porque provavelmente entrarão em conflito com a experiência de fluxos Como você pode ver, isso já está funcionando muito bem. Podemos fazer alguns ajustes , por exemplo, vamos dar um pouco de espaçamento aqui E agora, digamos que queremos que ele seja centralizado, certo? Então isso é código e Bd, e isso é apenas um bloco div genérico normal, e você o trata como um bloco div Então, como é um bloco div por padrão, display definido como bloco, o que significa que ele se estenderá de ponta a ponta Então, uma maneira de fazer com que não se estique de ponta a ponta é dar-lhe uma largura fixa e depois centralizá-la usando isso ou podemos simplesmente dar-lhe um bloco embutido E sua largura será definida por qualquer conteúdo que esteja dentro. E em um bloco largo, coloca isso bem no meio. Tudo bem, está tudo funcionando bem, mas o que é isso, certo? Não há conteúdo aqui. Como trabalhamos com isso? Como mudamos o texto? Como modificamos? Como podemos mudar o tamanho ou as cores disso? Agora, tudo aqui agora, porque isso é um código e é ruim, todos os estilos, todo conteúdo interno, isso acontece apenas por meio do código interno. Tudo o que precisa ser mudado tem que ser mudado a partir daqui. Só podemos controlar o exterior. Wrapper, que é esse código e está ruim, e podemos fazer alterações diferentes nele, como posicionamento ou tamanho, mas todo o resto precisa ser alterado por meio do código Então, por exemplo, digamos que queremos fazer essas imagens como um saco de fotos. Como fazemos isso? Bem, é daí que vem a personalização da IA Podemos pedir à IA que faça isso. Então, podemos pegar esse código. Podemos ir a uma das esmolas. Todos os três CloudGemni HachBT. Todos eles vão fazer isso muito bem. Estou usando o Cloud nesse caso porque geralmente a nuvem é melhor com código, mas esse é um código muito simples , e todos os três farão um ótimo trabalho nisso. Então, o que podemos fazer é atualizar esse código para que o cartão superior seja preenchido com a imagem. Shift Enter, para que você possa adicionar uma nova linha sem enviar o prompt. Então você cola o código aqui e agora vamos fixar JGiptClotImage Para obter uma imagem, carregue suas imagens no Webflow a partir do painel Assets a partir daqui, encontre uma imagem no splash ou paxels.com ou onde quer que normalmente encontremos nossa normalmente E uma vez que você as carrega, e eu já tenho algumas imagens aqui, e sobre isso, obtenha a cópia do Link. E esse link será um link pronto para produção em nosso site Webflow, e este é um bom lugar para carregar suas imagens e podemos controlar nossas imagens a partir daqui Somos capazes de comprimi-las, e essa é uma boa maneira, e sabemos que nossas imagens não vão desaparecer Portanto, não use uma URL que não faça parte do nosso site. Se for como o URL inicial pexels.com, URL ou algum outro URL, ele pode desaparecer em algum momento e não temos controle Mas se forem nossas imagens, temos controle sobre elas e sabemos que, se estiverem aqui, URL funcionará e estará sempre ativo. Então, uma vez que você tenha o URL , cole também está em algum lugar. Agora temos instruções, colocamos todo o código que já temos dentro dele e fornecemos uma imagem, e ele entenderá que essa é a imagem que queremos dizer, e esse é o código que precisa ser atualizado. E vamos ver como funciona. Você pode ignorar isso. Estou entendendo isso. Hoje, eu não sei. Talvez haja algum tipo de problema com a nuvem, mas ela ainda está funcionando. É uma chamada de ferramenta que está fazendo com que não consiga acessar. Tudo bem. Então, agora vou explicar para você o que está acontecendo aqui e o que Clot fez. Cada LLM exibe o código resultante de maneiras diferentes, e é assim que o Cloud faz Normalmente, ele abrirá uma prévia aqui. Se estiver fechado e tiver fornecido apenas um código como esse, ele pode ser baixado, mas não precisamos baixá-lo. Basta clicar aqui. Ainda vou abrir esse modo de visualização. E isso é uma prévia, mas geralmente pode não funcionar e, nesse caso, não funciona. Não mostra as coisas corretamente. Então você pode ignorar essa parte e mudar para o código, e esse é o código que podemos copiar. Nós temos isso. E eu vou te mostrar em Gêmeos Eu já fiz isso com o Gemini e o HachPT, então posso mostrar se você vai usar isso e se você potencialmente tem uma assinatura no Gemini ou no HACHPT e Também não tem problema. É assim que funciona em Gêmeos O Gemini, nesse caso, não dá uma prévia, mas atualiza o código e pega o código daqui e o copia Isso funciona. E dentro do HAGPT, um pouco semelhante ao que ocorre entre a mistura GPT de coágulo e o Gemini, você obtém o código, que pode ser E a partir desse alternador, você pode visualizar e ele fornecerá a prévia Nesse caso, está funcionando imediatamente no JaJupt. Mas a mesma implementação. Agora, depois de ter esse código, você volta para a incorporação, exclui tudo o que tinha, cola esse novo código e verá que a maioria das coisas é exatamente a mesma O estilo ainda está aqui. Você pode clicar em Pretty FIT, ajustar a formatação. E você verá que um dos cartões principais foi atualizado e a imagem de fundo agora tem um URL, que é o URL ou a fonte da nossa imagem. E essas coisas aqui, carta é uma classe e a principal ao lado dela é uma classe combinada Isso é o que costumamos fazer com, certo? Temos uma carta, que é a classe base. Portanto, esse é um estilo comum que é compartilhado por todos os outros. E então, com as classes de combinação, carta um, carta dois, carta principal, as modificações são feitas nas outras, salve de perto e pronto A imagem foi preenchida e esqueci de pré-visualizar, então tudo está funcionando bem E agora podemos potencialmente dar mais imagens a ele e substituir as outras por mais imagens. Digamos, copie o link, volte para a nuvem atualize outros dois cartões com essas imagens. Essa é uma delas. E isso também. E então fizemos o trabalho, clicamos nele para podermos copiar. Novamente, não está funcionando aqui. Mude para o código, copie, abra, exclua tudo novamente, cole o novo código. Você pode verificar aqui, como você pode ver, cartão um agora tem fundo de imagem, fundo de imagem, fundo de imagem em todos os três, salve e feche e tudo o que foi atualizado. E agora temos imagens em todos os três. E se quisermos mudar qualquer outra coisa, por exemplo, se você quiser alterar os tamanhos, agora temos que fazer a alteração dos tamanhos. Novamente, por meio do código, peça à IA que mude algo sobre isso. Mas, na verdade, os tamanhos são muito fáceis de alterar porque você verá aqui sendo aplicado em algum lugar. Você pode ver que a pilha de cartas tem um tamanho, e é isso que controla o tamanho de cada carta, porque o resto das cartas tem largura 100%, altura 100%, então elas são dimensionadas com base no elemento pai, que tem o tamanho aqui Então, se tornarmos isso maior, será maior. Feito. Se quisermos que eles apareçam um pouco mais para que possamos ver mais imagens, faça outra coisa, novamente, com a IA, explique e traga. Eu vou trabalhar muito bem. E é isso. Método muito poderoso para expandir sua habilidade e seu conhecimento sobre como trabalhar com o Webflow e como expandir suas habilidades de web design No próximo vídeo, faremos implementação um pouco mais complexa de algo semelhante do CodePen 180. CodePen + IA: Neste vídeo, faremos outra implementação de código personalizado. Essa é uma pergunta um pouco mais complicada e mais complexa. E também usaremos a IA e receberemos a ajuda da IA para modificar o código que obteremos. Então eu achei esse componente de acordeão muito legal. No CodePen, parece muito bom. Adoro a animação, e isso seria um componente muito bom em provavelmente qualquer tipo de site. Por exemplo, eles poderiam ser usados como depoimentos, certo? Pode ser o avatar de uma pessoa, seu nome, título e depoimento, que potencialmente adicionamos como citação aqui ou pode ser a citação E então você tem outras fotos de pessoas, e o fundo pode ser substituído por outra coisa . Essa é uma maneira de fazer isso. Isso também pode ser como recursos, você sabe, recurso um, recurso dois, descrição e assim por diante. De muitas maneiras diferentes, essas categorias podem ser usadas. É um componente muito bom e pode ser usado em qualquer site. Não, definitivamente também podemos reconstruir isso dentro do Webflow Mas, obviamente, levaremos um pouco mais de tempo para ver isso, examiná-lo, reconstruí-lo e encontrar uma maneira de fazer isso Já quando estamos fazendo uma espécie de prototipagem rápida, talvez estejamos testando ideias com um cliente Às vezes, pensamos: Ok, deixe-me ver. Deixe-me esquecer isso. Você está trabalhando com um cliente e dirá Que tal isso? Isso vai funcionar? Assim, você não precisa perder muito tempo criando tudo, e a construção de um site por Frankenstein também é uma maneira muito válida de fazer isso Você pega componentes diferentes de sites diferentes. Encontre componentes de código aberto em lugares como o CodePen e, em seguida, implemente-os pouco a pouco Essa também é uma maneira de fazer isso. Então, vou mostrar como descobri isso no CodePen, para que você entenda o processo de como isso funciona Então vá para codepen dot IO. E eu já estou logado no CodePen para fazer uma pesquisa, ele vai pedir que você faça login E depois de fazer login, você poderá pesquisar. Eu procurei cartas. E a diferença entre CodePen e UIers é que o verso da interface do usuário tem elementos um pouco mais simples, que são UIers é que o verso da interface do usuário tem elementos um pouco mais simples, que são apenas CSS e HTML. É isso mesmo. A melhor parte dos UIVs é que eles são fáceis de implementar porque são limpos Eles são puro Javascript, desculpe, HTML puro, CSS puro, e funcionarão imediatamente quando implementarmos isso e o colocarmos dentro do código incorporado no Webflow O CodePen funciona de forma um pouco diferente. CodePen tem HTML, CSS, JavaScript e também pode ter diferentes bibliotecas, estruturas e dependências Assim, eles podem ser mais poderosos. É por isso que você pode ver um pouco mais. Algumas pessoas até colocam inteiros de páginas de empréstimo aqui e designs de sites Como você pode ver, são páginas inteiras aqui que são compartilhadas. Obviamente, não é isso que queremos. Não queremos que a página inteira seja implementada. Às vezes, jogos e coisas estranhas têm, você sabe, animações e componentes interessantes Assim, você pode ter boas ideias de que obviamente não implementaríamos a página de destino inteira. Encontraríamos alguns componentes pequenos, coisas muito úteis como essa, as cartas, que também têm uma boa animação. Então, quando você encontra algo de que gosta, você entra e obtém essa visualização com HTML, CSS e JavaScript. E é assim que cada caneta de código se parecerá. Você pode redimensionar isso, e esse é o código, e esse é o playground, não o playground, mas na verdade a visualização do próprio componente E às vezes você terá talvez apenas HTML e CSS e nenhum Javascript e, às vezes, terá todas as três linguagens, dependendo da própria caneta. Outra coisa a ser considerada aqui é que o código dentro do CodePen pode não ser CSS ou JavaScript puro e não está neste exemplo Este está usando um pré-processador chamado SCSS, e este está usando a biblioteca jQuery, que não é Javascript puro, e é uma dependência que está Agora, a IA entenderá isso porque eles entenderão como está escrito e entenderão que está usando essas dependências, mas podemos dizer a ela que não as use Então, o que vamos fazer é, como sempre, pegar esse código e depois ir a um dos LLMs e pedir que você o adapte às nossas necessidades Então, desta vez, vou usar o Gemini porque me deparei com os limites da nuvem, e é uma boa demonstração para ver como isso funciona em um LLM diferente Então aqui está e o processo será o mesmo em todos os três LLMs. Agora, o que vamos fazer aqui é pedir que ele reutilize esse componente, e vou usar algumas palavras-chave que você precisaria usar nesses casos E a palavra-chave é, nesse caso, da caneta de código. Porque o CodePen terá algumas nuances e é um bom contexto para alimentar o Então eles entendem que, ok, estamos pegando esse código do CodePen e, se houver algumas nuances, ele meio que incluirá isso e saberá E então outra coisa que vamos dizer sobre o Webflow, código e mal E essa é outra nuance que precisamos contar porque se for um código do Webflow e for ruim, potencialmente, espero que ele entenda que queremos que seja uma saída HTML que possamos colar, e não estamos construindo realmente um ambiente independente quando temos arquivos diferentes se comunicando entre si e não estamos construindo realmente um ambiente independente quando temos arquivos diferentes se comunicando E então vamos contabilizá-lo para torná-lo uma implementação básica E essa é outra palavra comum. Este é basicamente um termo técnico para dizer implementação básica ou baunilha. que significa que sem consulta J, sem reação, sem CSS, queremos que seja puro e normal, o bom e velho JavaScript e CSS. Dessa forma, ele funcionará em qualquer navegador imediatamente e funcionará dentro do Webflow, e não precisamos extrair nenhuma dependência que possa entrar em conflito com o ambiente do Webflow Então, não queremos isso. Só queremos JavaScript e CSS puros. Então, funciona fora da caixa. Outra palavra-chave que queremos dizer a ela. Outro contexto que precisamos fornecer à IA é que estamos fazendo isso em um site existente. Então, precisamos ter certeza de que ele entende esse contexto, que esse é apenas um pequeno componente que vamos colar em nosso site existente. Então, vamos contar isso. Ele precisa funcionar em um site existente. E tem essas referências aqui. Há um link para o autor. Também há algo do autor aqui, então podemos nos livrar disso. Não precisamos creditar. Isso é de código aberto e podemos usá-lo. Não precisamos creditar os autores do código enviado, então podemos simplesmente nos livrar dele Portanto, remova qualquer referência aos autores. E agora começamos a colar o código, pegamos HTML, colamos, shift enter, pegamos CSS, Shift Enter, wrap, JavaScript Turno. Bem, já está lá. Enfrentei isso. E se você tem planos pagos, isso é um pouco mais complexo. É por isso que planos pagos e modelos pagos de nível superior funcionarão muito melhor aqui. E todos os três modelos geralmente permitem que você, mesmo no plano gratuito, jogue com modelos mais inteligentes, como Thinking e P. E, nesse caso, provavelmente tentarei pensar porque P atingirá o limite muito rapidamente e caso desejemos nos comunicar com ele Hum, pensar pode já fazer um trabalho decente. Então, vou usar o pensamento. Você não quer fazer rápido. Você provavelmente também fará um bom trabalho, mas eu quero pensar nisso, então ele começa a considerar coisas sobre as quais eu falei: é uma incorporação de código do Webflow, que queremos que seja simples, queremos que esteja no site existente, para que ele simplesmente não apareça imediatamente Então, considere essas coisas. Então, no Gemini on Cloud, você selecionaria modelos superiores do Opus, e a mesma coisa com o Chacha PT, modelos de pensamento superior E vamos ver que desta vez, vai levar um pouco mais de tempo, pois também pedimos pense um pouco mais sobre isso e espere um pouco, e vamos ver qual será a saída. Tudo bem. Então acabou. Então, vamos ver o que é. Este é o plug and play. Bom. Queremos que ele seja conectado e usado. Eu converti S CSS em Vena. Aí está. Eu entendi isso. Substituiu o jQuery javascript vanila Ótimo, ótimo, ótimo. É isso que queremos. E removeu todos os créditos do autor. Para usar o Webflow. No Webflow, basta colar o bloco inteiro abaixo em um elemento de incorporação de código Ótimo. OK. Então, ele nos deu um código completo de uma só vez. Não nos deu HTML separado, CSS separado, apenas nos deu tudo de uma só vez. Isso é exatamente o que queremos. E podemos simplesmente copiar tudo daqui e ver como isso vai funcionar. E no Webflow, novamente, vamos adicionar código e código ruim e colar tudo aqui E vamos dar uma olhada rápida. Vamos ver. Então o roteiro está aqui, ótimo. Isso é HTML, tudo isso. Isso é CSS bem embrulhado nas tags de estilo. E está puxando, que é uma fonte incrível Ok, então ele está usando uma dependência que esse código já incluiu, que são os ícones E agora não poderíamos usar essa dependência, livrar dela do topo e alimentar o LLM com nossos próprios ícones Assim, podemos fazer o upload, como fizemos com as imagens, carregaríamos os ícones do SPG e diríamos também que substituíssemos os ícones por isso, isso e esse ícones do SPG a partir desses links Mas está tudo bem agora. Definitivamente, podemos usar isso. É uma fonte gratuita. O Awesome é como um conjunto de ícones gratuito, que funciona como uma fonte, então você não precisa aplicar cada ícone usando uma imagem, que é uma ferramenta muito útil em que você puxa a fonte inteira aqui e pode referenciá-la dentro do código Salve e feche, e vamos ver como funciona. Tudo bem, acho que está muito bom. Vamos fazer um teste. Funcionando muito bem. Bom. Existem alguns problemas aqui, como você pode ver, o texto está um pouco instável e centralizado, mas fora isso, tudo está funcionando mas fora isso, tudo está Agora, se você fizer isso sozinho e tiver outros problemas, poderá se deparar com isso porque a IA não é previsível. Você tem que guiá-los corretamente. E dependendo do modelo que você usa, se for rápido, você pode cometer alguns erros. Se for um modelo de pensamento melhor, geralmente fará o melhor trabalho. Então, se você tiver problemas, faça uma captura de tela. Então você basicamente faria uma captura de tela como essa e diria a ele: Ok, isso está desalinhado ou algo assim, e como faço E então você geralmente lhe dará uma resposta, e então você poderá aplicá-la. Desde que o problema não esteja no Webflow ou em algo vindo do Webflow, que, neste caso, realmente está, e agora vou mostrar de onde vem isso Agora, como temos esse centro alinhado, ele é aplicado no contêiner, como você pode ver na linha central, que cairá em cascata e todos os elementos internos herdarão isso ele é aplicado no contêiner, como você pode ver na linha central, que cairá em cascata e todos os elementos internos herdarão Então, como você pode ver, o código e o elemento bed estão herdando isso do contêiner seis Tudo bem? Portanto, é alinhamento central, o que significa que, se a incorporação do código for herdada, isso significará que tudo dentro, os estilos de fonte internos, herdarão isso em troca do código e da base , a menos que estejam explicitamente alinhados à esquerda Então, o que vamos fazer aqui é selecionar o código e a cama e mudar isso para o alinhamento à esquerda, e pronto selecionar o código e a cama e mudar isso para o alinhamento à esquerda, , e isso deve funcionar E aí está, isso funcionou. E outra parte que podemos testar aqui é que, como você pode ver, essa é uma pequena lacuna aqui, enquanto onde está nosso original original não tinha essa lacuna. Está bem centrado. Então, o que podemos fazer aqui é fazer uma captura de tela, mas acho que vai entender se eu contar Normalmente seria bom se você soubesse como dizer isso. Caso contrário, você também pode folhear o código C e pode realmente entendê-lo com base no que você deseja, porque são classes com nomes humanos ou com nomes humanos dessas classes Então você entenderá a sombra, eles a chamaram de opção ativa. Você entende isso, certo? Opção: rótulo ativo, provavelmente um desses rótulos abaixo, informações, ok E se rotularmos o ícone. Ok, nós entendemos. Então esse é o ícone do rótulo. Sabemos onde está o ícone e as informações do rótulo na cor branca. Então, provavelmente é texto, informações principais em negrito, Ifosab e também é mais fácil de ver, porque você pode simplesmente procurar o texto, o texto real que estava sendo incluído aqui na Então, essa irmãzinha loira, eu não sei o que é isso, mas como você pode ver, podemos encontrar esse texto dentro do código E então podemos ver que, ok, a classe é a subclasse principal aqui, então é a informação principal e a sub então é a informação principal e a sub Assim, podemos referenciar isso e dizer as informações de texto do rótulo principal e sub têm uma pequena lacuna em branco Eles não estão tão confortáveis quanto estavam no componente Mginal E certo, vamos ver o que isso nos diz. A lacuna provavelmente é causada pelo espaço em branco pré-propriedade que preserva as quebras de linha, blá, blá, blá. Substitua as informações da etiqueta. Ok, então não atualizou a coisa toda. Podemos pedir que você atualize ou podemos ver se podemos substituir facilmente seção de informações da etiqueta em seu CSA por esta versão titânica, informações da etiqueta, tudo isso, Então, podemos encontrar exatamente essa coisa. Eu também poderia dizer que basta regenerá-lo novamente para mim. O Google o treinou para não regenerar todo o código do zero , pois isso lhes custará mais poder computacional. Então, é ser preguiçoso e nos dizer que devemos fazer isso sozinho, que podemos fazer e dizer: Ok, está nos dizendo para substituir a seção de informações do rótulo em seu CSS por esta versão titã Tudo bem, encontraremos informações sobre o rótulo, informações principais e mais informações. Informações do rótulo. Encontramos informações sobre o rótulo, significado das informações aqui e as informações abaixo aqui Isso significa que precisaremos que eles não estejam de uma só vez, então teremos que substituí-los aqui. E agora, na verdade, já temos isso. Então, vamos remover isso daqui. E info sub, é redundante. Essa é a versão antiga. Essa é a nova versão que colamos, então a removemos E vamos ver, dedos cruzados. Você nunca sabe com a IA. Nada mal. Funcionando muito bem. Espaçamento mais estreito Muito bom. Outra modificação e correção que talvez precisemos fazer é a responsiva Vamos ver como eles se parecem em tamanhos diferentes. Está tudo bem aqui, e aqui já está ficando um pouco apertado. Pode funcionar aqui. Vamos ver se vai funcionar no celular. E no celular, só temos um, e nem sabemos o que está acontecendo aqui. Tudo bem. Então, voltaremos ao Gemini e diremos para torná-lo responsivo E espero que você tenha uma ideia do que fazer com o responsivo Potencialmente, ele poderia fazer um empilhamento vertical em vez de horizontal Obviamente, no celular, você não pode torná-lo horizontal, certo? Portanto, não há espaço. Então, vamos ver se ele, quem quer que seja o geminiano, entenderá como tornar isso responsivo. Para dar essa resposta, mudaremos o layout da pilha horizontal para a vertical Bom. Também mantive o espaço do titã em bom estado, substituí o bloco em seu Webflow e o incorporei mas estou muito preguiçoso atualmente Não está me dando a coisa toda. Agora está me dizendo que basta substituir o estilo. Pode muito bem me dar o HTML inteiro, cara. O que há de errado com você? Tudo bem. Vamos voltar. Então agora está nos dizendo para substituir o estilo, certo? Ele nos disse para substituir o bloco de tags de estilo em sua incorporação do Webflow Então, essa é a nossa tecnologia de estilo. É aqui que começa, e é aí que vamos selecioná-lo, talvez destaquemos onde termina. Não destaca. Então é aqui que termina, como você pode ver, estilo de fechamento. Então, o que vamos fazer é selecionar tudo isso, excluir e colar. Se você não quiser fazer isso, basta pedir que ele regenere tudo e me dê o HTML inteiro mais uma vez E vamos ver. Salve e feche. Vamos ver se nada foi quebrado. Não é bom. E aí está. Está funcionando na vertical. Aqui, faz sentido. Isso se encaixa. Aqui não cabe mais e é bom. Eu entendi que aqui não precisamos mudar, mas no celular, precisamos mudar e podemos trocá-lo. E, obviamente, agora minha página não tem estilo. Eu preciso do forro aqui. É por isso que não podemos fazer isso, por exemplo, fornecer a seção sobre o título, para que ela não seja comprimida aqui E agora eles não estão agachados com a ponta, e isso está funcionando bem. É muito bom. Em qualquer outra modificação que você desejasse, você diria para ele fazer isso. Substituindo imagens, você pediria que ele substituísse imagens, ou você também pode fazer isso por meio do código. Você pode encontrar facilmente o URL da imagem. HTPS essa coisa e você copiaria isso daqui. uma das imagens, você copiaria isso, copiaria o link e depois substituiria isso dentro do código ou pediria à IA que fizesse isso. Isso é tudo e espero que tenha sido divertido e não muito complicado. E se você encontrar alguns problemas, me avise nas perguntas e respostas e eu o ajudarei Definitivamente, não é algo que 100% do tempo funcione. Cada caneta de código tem suas peculiaridades. Eles estão usando dependências diferentes. Eles estão usando propriedades diferentes que podem ser suportadas em qualquer lugar. E cada LLM e IA também o processarão de forma um pouco diferente E, às vezes, o mesmo LLM e AI na terça , ele fará isso e, na quarta-feira, decidirá oferecer a você uma solução completamente diferente, certo? Não é 100% garantido que todas as soluções sejam iguais. Mas ainda vale a pena tentar, vale a pena experimentar com isso, especialmente hoje IA torna muito mais fácil expandir suas habilidades e expandir suas habilidades de web design e Webflow Essa também é uma habilidade transferível. Não importa se você está fazendo isso no Webflow ou em qualquer outra ferramenta de web design, ou se está codificando manualmente, isso dizer que isso não tem a ver com código que estamos recebendo aqui é o código HTML e CSS que cada construtor, cada construtor de IA ou não construtor de IA, usa exatamente a mesma coisa no WordPress. Então, HTML e CSS em todos os lugares. Portanto, é bom aprender para você. E se você tiver tempo, eu recomendo fortemente que você faça um curso básico e muito básico de HTML, já que CSS e JavaScript, super, super básico, nada complicado para você simplesmente aprender como essas coisas estão conectadas umas às Não que você precise entender cada propriedade e tudo mais, como criar, mas entender o texto, entender como o HTML se comunica com o CSS e como o CSS se comunica com HTML e como o JavaScript é reproduzido em tudo isso e como é feito em um arquivo HTML versus três arquivos diferentes de HTML, arquivos separados, CSS, arquivo separado, JavaScript, arquivo separado, que geralmente é como os sites são compilados e construídos. Portanto, seria um conhecimento básico muito bom para você e definitivamente o ajudará a aumentar suas habilidades e o tornará usuário mais avançado do Webflow e de qualquer outra ferramenta de web design 181. Photoshop: como criar um corte de alongamento: Tudo bem, hora de um pouco de Photoshop. Tutorial para a maior parte do design, Figma é suficiente, mas em alguns cenários não podemos prescindir do Photoshop. Esse é um deles. Se você ainda não tem o Photoshop, pode fazer um teste gratuito de sete dias E se você quiser comprá-lo, custa cerca de $10 por mês, o que inclui Photoshop, Light Room e todos os telefones da Adobe e 20 gigabytes de espaço de Você pode baixar o teste Adobe.com slash downloads ou apenas no Google Photoshop , caso já tenha usado seu teste de sete dias do Photoshop no passado. Em vez disso, experimente o affinity photo É uma alternativa muito boa ao Photoshop e a maior parte da interface e do funcionamento de tudo é bastante semelhante ao Photoshop Eu incluí os recursos do link, ele tem um teste gratuito de dez dias, embora eu não demonstre isso como fazer em afinidade, mas como existem dois muito semelhantes, você provavelmente descobrirá como fazê-lo funcionar dentro do afinity Ok, de volta ao Photoshop. Depois de passar pelo processo de instalação, essa será sua tela inicial. Clique em abrir e selecione o arquivo de foto. Incluí essa imagem nos recursos desta lição, para que você possa trabalhar na mesma foto se quiser uma fita salva-vidas rápida no Quando comecei a usar o Photoshop, acabava perdendo algumas ferramentas e opções Freqüentemente, eu assistia ao tutorial do Youtube para aprender alguma coisa, mas não conseguia encontrar uma ferramenta que eles estivessem usando no vídeo. Photoshop tem muitos atalhos e pequenas opções nas quais você pode fechar facilmente alguma guia ou remover uma ferramenta e assim por diante Eu acabaria com uma pistola de caixa de ferramentas, sem painel de camadas e sem ideia de como colocá-las de volta. Então, eu não conseguiria mais seguir um tutorial porque a ferramenta não existe. Um pesadelo para qualquer iniciante, quando você está tentando entender esse novo software e aprender muitas coisas ao mesmo tempo, eu perderia muito tempo tentando descobrir como colocá-lo de volta esse novo software e aprender muitas coisas ao mesmo tempo, eu perderia muito tempo tentando descobrir como colocá-lo de tentando descobrir como colocá-lo Aqui está o truque de como fazer com que tudo volte ao normal. Caso você estrague alguma coisa, acesse este ícone aqui e selecione Essentials Se for isso que você já selecionou, clique em redefinir o Essentials. E isso retornará o espaço de trabalho ao padrão, exatamente como estava pronto para uso na primeira vez que você o instalou Isso incluirá duas guias extras. Aqui está o tutorial do guia do Photoshop sobre algumas coisas essenciais. Vou recomendar que você faça isso mais tarde se for sua primeira vez com o Photoshop Ok, eu não preciso dessas duas abas aqui, então vou fechá-las. Se esse método ainda não retornar tudo ao normal , isso significa que você alterou algo nas preferências. Nesse caso, vá para Preferências no Windows, menu Editar, e selecione Geral. E clique em Redefinir preferências ao sair, reiniciar o Photoshop e tudo voltará ao normal Lembre-se de todas as preferências que você alterou intencionalmente no passado e que serão usadas Tudo bem, de volta à nossa foto. Muitas vezes, você encontra a imagem certa do seu projeto, mas ela não tem o tamanho certo. Essa imagem, por exemplo, será uma ótima foto de fundo. É limpo, é simples. Tem um ótimo contraste de cores, mas tem um problema. A separação entre a praia e a água corta o meio da imagem. Nenhum dos lados é largo o suficiente para hospedar nosso conteúdo, mas se pudéssemos esticar um dos lados um pouco mais , teríamos um arranjo perfeito. Felizmente, podemos fazer isso no Photoshop. Dentro do painel de camadas, você verá esse bloqueio na camada. Isso significa que a camada está parcialmente bloqueada e de várias maneiras, não será editável como você esperava Basta clicar nesse cadeado para desbloquear a camada. Agora selecione essa ferramenta de corte. Você terá essas alças ao redor da imagem arraste o lado em que deseja criar o recorte elástico. Isso apenas amplia os limites da nossa prancheta. Clique na marca de seleção Uma vez feito isso, ele confirma a alteração. Agora selecione esta ferramenta de letreiro retangular caso veja algo mais aqui, clique com o botão direito nela Isso abrirá todas as outras ferramentas que fazem parte desse grupo. Agora arraste e selecione a parte que você deseja esticar. Certifique-se de selecionar peças que não tenham nenhum detalhe, algo que já esteja embaçado ou uniforme Você não pode fazer isso com pessoas ou objetos. Isso só pode ser feito em fundos e partes desfocadas e Eu seleciono Extra no lado esquerdo apenas para garantir que toda a borda esteja selecionada. Depois de selecionado, vá para Editar e transformar livremente. Você também pode pressionar controle ou comando, exatamente como mostrado aqui. Agora, basta arrastar a alça esquerda e esticar a imagem o quanto achar que está certa. Em seguida, clique na marca de seleção novamente, isso confirma a alteração que você está fazendo na seleção Se você tiver espaço extra aqui, selecione Kroptolgain e Agora temos uma imagem que tem uma boa quantidade de espaço, então podemos colocar nosso conteúdo para salvar essa imagem. Basta clicar em arquivo, Salvar como e selecionar J. Isso é tudo. 182. Photoshop: recorte: contar um objeto de seu plano de fundo é melhor para baixo no show de fotos ou foto de afinidade. Há algum outro software semelhante, que é para manipulação de fotos? Vamos começar. A parte mais importante de cortar com sucesso um assunto é escolher a foto certa para coisas que precisamos prestar atenção. O fundo e a posição estão fora do assunto? Idealmente, queremos um fundo que seja simples e contraste muito bem com o assunto. Cortar assuntos de origens difíceis pode ser um trabalho tedioso, e a última coisa que você quer é gastar metade de um Knauer para cortar uma situação modelo em seus desejos e perceber que o modelo não é um bom ajuste. bom design é geralmente um resultado fora de um monte de direções. Imagine iterar entre três recortados de assuntos, enviando a versão final para seu cliente para sua revisão e, em seguida, subir volta, dizendo que o modelo não é realmente seu público-alvo, e eles querem alguém um pouco mais velho e vestir-se um pouco mais chique. Isso vai te enlouquecer. Se cortar assunto não é um trabalho rápido e direto. O segundo importante, de fato, é a posição fora do assunto na foto, cortando um modelo que está sentado humor e faz muito sentido. Teríamos que recriar a mesma posição que você foi projetado, então teríamos que, você sabe, fazer o modelo sentar em algo que é muito semelhante tamanho e forma em nossos projetos também , e que É demais. Precisa de menos trabalho. As posições de frente para frente são as melhores para recortes e todos os ângulos de câmera como estes estão apenas pedindo muitos problemas durante o processo de design. Porque a câmera está voltada para ela de lado do topo fino. O espaço em que você vai colocá-la tem que refletir isso, também. É factível, mas você vai esbarrar em obstáculos e limitações para seus projetos. Estas fotos, mesmo que em um fundo simples ainda é uma má escolha, ignorando a parte quando ela está, você sabe, virada para longe da câmera porque ela está usando um top branco e na frente de um branco loja de fotos de fundo terá dificuldade em detectar as bordas entre o fundo eo suéter em Splash geralmente não é o ótimo lugar para encontrar essas fotos. A maioria das fotos aqui são tiradas em cenários da vida real fora do estúdio, que não é uma coisa ruim. Ele oferece uma boa seleção de fotos stock que não se parecem com estoque. Mas para imagens isoladas, o melhor lugar são pagos lados estoque, Por exemplo, grande estoque ponto com. Se você adicionar uma palavra-chave, reboque isolado o que você está procurando, ele lhe dará principalmente fotos de estúdio em fundos simples. Essas fotos funcionarão o melhor para cortar o processo de apresentação de fotos será super simples , e o ângulo da câmera e a posição do assunto serão excelentes para o seu trabalho. Este é outro lado estoque pago fotos ponto ícone ST ponto com. Eles oferecem uma seleção de fotos, principalmente em fundos simples. É grátis para uso pessoal, então vou escolher uma foto daqui. Este é um excelente trabalho de foto com para recortes de assunto completo. O fundo está sendo reproduzido em uma única cor, e há uma clara separação entre o assunto e o plano de fundo. É um trabalho fácil. Você pode escolher esta foto exata para acompanhar ou escolher outra coisa. Vou ligar a imagem e os recursos. Eu não vou demonstrar remoção de fundo em fotos difíceis. Nem quero que aprendas a trabalhar com antecedentes difíceis. Desta forma, vamos garantir que você tenha o hábito de procurar as fotos certas. Quando se trata de isolar o assunto para fotos difíceis, eu faço outra coisa. Eu só cortei uma pequena parte da imagem. Demonstrarei isso mais tarde. Certo, então vamos abrir nossa imagem. Desbloqueie a camada clicando neste ícone de cadeado na caixa de ferramentas nos sapatos à esquerda. dedo do pé de seleção rápida que paira sobre uma ferramenta irá dizer-lhe o que é um dia este. A turnê será usada para selecionar o modelo e isolá-la do fundo. Agora selecione as opções de pincel através do tamanho que não é muito grande ou não muito pequeno, que possamos facilmente selecionar tomate e definir a dureza para 100%. Agora comece a selecionar o modelo a partir do centro e cubra lentamente toda a sua forma. Certifique-se de que essas linhas animadas estão em torno de suas bordas e nada mais para selecionar mais precisão, ampliando muito de perto, apertando sua gordura de toque ou segure ou tecla de opção enquanto usa roda do mouse. Para obter um melhor controle sobre sua seleção, aumente ou diminua o tamanho do pincel. Há um atalho para isso para que você não precise ir ao painel de configurações do pincel o tempo todo . Basta clicar em colchetes. Chave esquerda. Um diminui o tamanho do pincel e o direito aumenta. Se você quiser algo extra, mantenha pressionada ou a tecla de opção e você verá que sua ferramenta de seleção agora tem um sinal de menos. Quando você liberar, ele volta para mais assim mais adiciona à seleção e menos subtrai. Mantenha para fora e começar a remover áreas que você mais selecioná-lo se você cometer um erro e você quer voltar em leilão e loja de fotos realmente funciona um pouco estranho. Lembro-me que foi muito irritante para mim no início. Ainda é porque não funciona como você esperaria. Assim, o controle regular Z ou comandos de um Mac jovem vai e volta em sua última ação. Então, se você quiser sob a última ação que ele funciona como você esperaria. Mas se você pressionar sobre ele novamente, ele irá refazer a última ação. Então pressionando muito tempo vai e voltando, não me levou a primeira vez que eu estava brincando na loja de fotos. O real em Do see aqui nas opções Editar é chamado Step Back Board e tem um atalho com uma opção out nele. Este é o seu habitual sob e se comporta como você esperaria que ele se comportasse em janelas, o que provavelmente deveria ser controle. Eu vou ver, mas só para o caso, verifique duas vezes e vá para a edição e então vá para trás e veja qual é o atalho ao lado dele. Verifique seu endereço e certifique-se de que você não perdeu nenhum ponto. Não se preocupe muito com o cabelo solto. Basta selecionar a linha principal e, em seguida, vamos corrigir o cabelo mais tarde, depois que você terminar selecionando clique, Selecione e máscara aqui mesmo. Isso está realmente disponível nas versões mais recentes do Photoshopped. Se a sua versão não tem isso, então procure refinar ach! Funciona quase da mesma maneira, mas este novo futuro de seleção e máscara é mais superior aqui. Vamos limpar nossa seleção para que possamos obter o resultado perfeito. Aqui está outra dica importante do Photoshopped. Certifique-se de que você tem uma camada correta selecionada. Este é o painel de camadas, assim como figo MMA. Se você tiver mais de uma camada. Certifique-se de citar aquele com a foto nele. Ok, então aqui, por padrão, essa transparência é diminuída. É uma transparência fora do nosso plano de fundo e tudo o que não selecionamos deslizando. Isso não afeta como nosso corte vai parecer um guia para nós. 0% mostra a imagem original e alturas completas e 100%. Tudo o que não selecionamos. É útil receber com o Sr. quaisquer detalhes. Vamos aumentar para 100%. Como você pode ver, há algumas imperfeições em seu cabelo. O fundo rosa está passando pelo cabelo dela. Vamos colocá-la em um fundo branco a partir daqui para melhor ver que a casa come mudar sua passagem para 100%. Aqui está bem, desta vez ele diz rapacity em vez de transparência porque o fundo branco está em cima do fundo original, Então 100% opacidade significa que é 100% visível. Não se preocupe muito com isso. O cabelo precisa de conserto. Além disso, se aproximarmos a pele dela, as bordas são irregulares e não naturais. Não há um bom padrão para usar em qualquer design. Bom design parece perfeito quando se trata de pequenos detalhes como este saber todas as descolorações , eo gato fora deve olhar suave e natural, como esse é exatamente o fundo que ela foi assumido. A feiúra fora a maioria dos recortes sai das bordas quando um apenas não são bem refinado. É perceptível, parece que alguém realmente pegou uma revista de papel e, em seguida, com uma tesoura cortada. O modelo de sua loja de fotos felizmente é absolutamente incrível. E corrigir isso para consertar as bordas são cortadas. Precisamos selecionar uma ferramenta de refinamento e pincel a partir daqui. É o 2º 1 Mantenha sua boca sobre ele por um segundo, e ele irá dizer-lhe qual é ISS porque estes três parece bastante semelhante, assim como fizemos com o outro tamanho do pincel, o pincel do painel de opções ou usando quadrado suportes e lentamente começar a escovar sobre as bordas de seu cabelo. E olha para isto. O que realmente está acontecendo aqui é que estamos dizendo ao Photoshopped para olhar além das bordas da nossa seleção original e ver se há alguma parte que pareça pertencer à nossa seleção e, ao mesmo tempo, remover pixels que parecem fazem parte do plano de fundo. É por isso que Ping desapareceu. Usando o controle deslizante de opacidade, verifique outras peças que foram perdidas no caso de você remover um pouco mais, assim como outro preço de ferramenta ativado ou opção. Verá que é um sinal de menos. Isso irá restaurar a borda original e, em seguida, escovado novamente enquanto você continua segurando a tecla de saída. Não se preocupe, não vai subtrair da seleção original. É basicamente desfazer o que acabamos de adicionar. O cabelo dela parece decente, mas ainda tem um colarinho rosa caindo nas bordas, vai remover isso mais tarde. Vamos verificar o resto de suas bordas agora. Podemos, é claro, andar por todo o corpo dela com esta ferramenta de refinação. Mas há uma maneira mais rápida de fazer isso na pele e partes que são bastante simples e uniformes. Ao contrário do cabelo que é feito por aqui. Detecção de borda. É o mesmo conceito do dedo refinanciado. Com isso, podemos dizer ao Photoshopped para olhar além da nossa seleção e ver se perdemos alguma parte. Ele está em pixel, então um pixel significa olhar um pixel após a seleção e adicionar quaisquer partes ausentes. Preste atenção em como as bordas se movem à medida que aumentamos dois pixels. Mesma dissidência neste caso, Rádios inteligentes significa em vez de usar um uniforme para rádios de pixel em todos os lugares, ele usará valor personalizado dependendo da borda. É útil se você estiver usando valores grandes, mas eu gosto de corrigir estranho. Ajuste manualmente com a ferramenta refinar aresta. Às vezes você vai notar que você tem alguns patches extras como este quando você estava fazendo a seleção, ou você realmente perdeu alguns pontos voltando e corrigindo a seleção depois de colocar tanto trabalho vai ser desolador . Felizmente, podemos adicionar ou remover as manchas aqui mesmo com um pincel. Como de costume sinal mais irá adicionar em qualquer pixel C clique em você vai sentir isso funciona um pouco diferente das ferramentas anteriores que usamos outras duas ferramentas. Eles fazem cálculos em lugares onde você pressiona este não se baseia no que você pressiona, e um último passo que precisamos fazer é remover o brilho rosa do cabelo dela que pode ser feito automaticamente a partir daqui. Selecione descontaminar coleiras. Dê-lhe um momento e Walla. Agora, a maior parte do pingente do cabelo dela desapareceu. Que trabalho incrível ele fez. Esta etapa é muito última, porque se você tiver o selecionado após cada clique que você fizer, isso irá recalcular uma e outra vez fará as coisas muito mais baixas. Embora algo engraçado aconteceu aqui, vamos ver se podemos corrigi-lo com ferramenta de borda refinar. Certo, Deus, na verdade ainda escolhi uma foto complicada. Idealmente, escolha uma foto que tenha um fundo plano branco ou cinza. Fundos frios acabam se misturando com as bordas. Tudo bem, agora, vamos saída são cortados. Temos algumas opções aqui, os bastardos para escolher uma nova camada com uma máscara de camada. Mas isso faz. Em vez de cortar a coisa toda, ele copiará a foto original e aplicará uma máscara a ela. Esta massa esconderá o fundo e tudo o que fizemos. Esta é a melhor opção porque se notarmos algo mais e quisermos fazer quaisquer alterações, poderemos fazê-lo. Com a nova opção de camada que queremos, o plano de fundo desaparecerá para sempre. Dentro das camadas você verá. Além disso, a foto original ainda está lá no seu abaixo, mas desativada, por isso não é visível. Incomoda nossa cópia com a máscara. Aplicar a ele que Sylar preto e branco É a máscara ou recebe O passo final é salvar o nosso arquivo. Primeiro, vamos salvar Este é um arquivo de loja de fotos para qualquer futuro viciado. O resto do projeto estará fazendo em figo MMA. O arquivo Photoshopped não pode ser importante em Sigma, então temos que usar o arquivo PNG. PNG é o único que vai manter a transparência do nosso gato fora. J pack não vai funcionar porque vai encher o fundo com colarinho branco. Quando exportamos isso para PNG, qualquer camada que não seja não será incluída na exportação. Então você não precisa excluir essas camadas. Apenas esconda. Além disso, eu gostaria de cortar o espaço extra, selecionar o corte para e arrastou o endereço, ir para exportação de arquivos e exportadores rápidos. PNG. Agora podemos colocar esta imagem em figo ma e escolher qualquer fundo que quisermos. E é assim que você faz recortes na loja de fotos 183. Photoshop: Stick o tutorial: Agora vou demonstrar como cortar o Lee. Uma pequena parte de uma imagem é sempre a parte importante é escolher a imagem certa. Você pode fazer isso com qualquer foto que você pode ficar para fora, termina o objeto como cantos de mesa. Mãos, pernas tinham ramos. E assim qualquer objeto que tenha uma ponta proeminente primeiro neste processo para definir o contêiner da imagem. A moldura em que ela fica porque você está tirando algo dessa moldura. Se você estiver indo para usar a foto como uma foto de fundo completo do que o endereço fora do seu quadro, não são realmente visíveis. Você não pode colocar nada fora. Vou trabalhar nesta imagem. Neste tutorial. Eu liguei a mesma imagem para que você possa acompanhar. Podemos ficar fora desse ano fora das docas. Isso significa que nosso quadro tem que ter uma borda superior se ele se estende de cima para baixo fora da tela, então esta imagem não vai funcionar em tudo. Mas se eu usar um quadro como um círculo, por exemplo, então eu posso ficar o ano fora sem nenhum problema. Então vamos emoldurar a foto primeiro, assim como estamos fazendo figo Agora vamos criar uma máscara. Vamos usar o mesmo pedido que fizemos anteriormente no método de recorte. Mas desta vez, em vez de selecionar o escuro do fundo, vamos selecionar uma parte do círculo do cão no mercado. Tudo bem, clique nele e selecione o salão elíptico do mercado. Esta é outra palavra. Selecione. Oh, eu nem sei o que Marquês quer dizer. Não arrastando. Selecione a face fora da doca. Mantenha a tecla Shift enquanto você faz isso para que você possa desenhar um círculo perfeito para obter uma alça melhor. Você pode pressionar na barra de espaços para mover a seleção. Você não precisa entender isso perfeitamente agora. Podemos sempre redimensionar e reposicionar a imagem do cão. Mais tarde, como fizemos da última vez. Clique, selecione e mascare aqui. Você já está familiarizado com este editor de máscaras, mas nós não vamos adicionar um ouvir nada. Na verdade, porque precisamos de uma máscara perfeita. Então, imediatamente vá para opções de saída e selecione nova camada com uma máscara de camada como fizemos na última vez lá. Agora temos o mesmo arranjo que no método de recorte. Se você precisa reposicionar ou redimensionar a imagem dentro. Podemos fazer isso da mesma forma, como fazemos na Fig. MMA. Selecione a ferramenta Mover primeiro. Por padrão, grupo em massa é bloqueado para que você possa mover a imagem separadamente. É mover um grupo inteiro para mover apenas a imagem ou apenas uma massa rápida neste link. Eu posso ouvi-lo vai, ao contrário da imagem da máscara, e agora você pode movê-los separadamente selecionando a imagem ou a máscara da lista de camadas. Você notará que a máscara no Photoshop é um espaço definido, como foi definido originalmente. É por isso que temos esses pedaços extras aparecendo aqui. Se você acabar com esses bits extras depois de mover sua imagem, você pode simplesmente cortar isso com um dedo do pé de corte. By the way, Photoshopped tem um dedo muito mão chamado Painel Histórico. Em vez de desfazer sobre e sobre, você pode ir diretamente para a equipe que você quer se submeter. Eu amo esta ferramenta de história, e Photoshopped faz desfazer muito mais fácil. Certo, reposicionar a imagem dentro é fácil. Basta rastrear danos ao redor, mas para re dimensionar a imagem de forma como a camada de imagem e, em seguida, ir para adit e transformar livre. Agora você pode pegar as alças e redimensioná-la como desejar. Segure, mude , bloqueie a proporção aqui na minha cabeça. Estou imaginando que parte eu vou ficar para fora para que eu possa posicionar a imagem corretamente. Agora que preparamos nosso mainframe no qual nossa imagem se encontra, agora podemos ficar esse ano fora dele. Para fazer isso, vamos basicamente cortar um pedaço dos cães aqui como uma camada separada e colocá-lo em cima desta camada existente. Então, clique com o botão direito neste grupo de massa e duplique a camada. Agora à direita, clique na máscara em si. Não a camada inteira, mas apenas uma máscara e clique em dilatar máscara camada. Agora temos a imagem completa em cima dela. Se cortarmos um pedaço fora do ano a partir desta imagem completa e remover o resto, vamos obter o efeito exato saque iria querer. Então, para fazer isso, fazemos o método usual de corte, assim como fizemos na lição anterior. Pegue uma ferramenta de seleção rápida. Defina o pincel certo das opções a partir daqui, certifique-se de que selecionou o pincel com o sinal de mais, não o menos. Defina a dureza para 100% e defina o lado direito para que você possa selecionar esse ano facilmente virar. Eles vão passar para baixo para ver a borda do quadro e selecionar de acordo. Você pode selecionar mais fora da imagem na parte inferior porque isso não vai nos fazer mal. Ele só vai estar sentado em cima da foto existente. De qualquer forma. Isso parece bom. Agora clique, selecione e mascare. Estamos vendo as duas camadas. Aqui estão camada de quadro, e apenas um ano depois, vamos mudar o fundo do dedo branco por agora para que possamos refinar a borda do ano. Lembre-se de como refinar emblemas, Selecione a borda refinar para e passar por cima do endereço. Ou acrescenta, em qualquer cabelo faltando ou qualquer outro pixels faltando. Como mencionei antes com esta história, estamos dizendo ao Photoshopped para olhar além da nossa seleção e detectar quaisquer pixels ausentes. Você não tem que refinar a base fora do ano. Ele vai mesclar perfeitamente com a imagem de fundo, Agora vá para configurações de saída e selecione nova camada com uma máscara de camada e pressione OK, lá. Esse é o nosso ano saindo. Vamos colocar um fundo branco sobre isso para que possamos ver os resultados melhor. Crie uma nova camada e clique na nova sensação. Eu posso ouvir selecionar cor sólida e escolher branco. Agora arraste essa camada abaixo de tudo. Se você vai usar um colar diferente em seus projetos reais, você pode dobrar rapidamente no campo e mudar o chamador para que você possa visualizar isso aqui em um show de fotos antes de exportar o resultado final. Por exemplo, quando eu coloco isso em uma cor escura, podemos notar que há algum brilho extra atrás da orelha. Pena que eu não verifiquei este refinando a seleção, mas nós ainda podemos fazer algum trabalho sobre isso. Mesmo após a máscara ter sido aplicada, a máscara ainda é editar ervas. Se ampliarmos o covil da Máscara, verá que temos partes em preto e branco. As partes brancas são parte visível da máscara, e partes pretas são parte oculta. É por isso que a parte branca tem uma forma fora do ar. Se pintarmos bem nesta massa, mostraremos mais a imagem. Deixe-me demonstrar se eu selecionar uma ferramenta de pincel regular e desenhar sobre ela com tinta branca. Ele vai mostrar mais da imagem, e se eu dirigi com uma tinta preta sobre ele, ele vai esconder o que já está visível para alternar entre pincel branco e preto. Clique neste ícone de seta no topo destas caixas pretas e brancas. O que estiver no topo é a cor atual do pincel. Há também um atalho. Você pode pressionar X no seu teclado, e então vamos alternar entre os dois. Ok, agora podemos remover o brilho extra por trás da orelha. Eu vou ajustar o pincel para torná-lo suave e emplumado, então eu não criar quaisquer bordas duras. Neste caso, vou diminuir completamente a dureza e até diminuir sua passagem para 50%. Desta forma eu vou escovar sobre as peças e de uma forma suave e controlada, e isso é um resultado melhor. Pode não ser ideal em um fundo preto, mas funciona muito bem rápido para refinar isso durante o rosto mascarado. E não se esqueça de verificar a vista sobre o fundo preto. Se você planeja usá-lo em fundos escuros, o último passo é exportar danos que vamos exportar em PNG com o fundo transparente que onde você tem mais liberdade para escolher fundos diretamente no figo mongering real processo de design. Ocultar o fundo, cortar qualquer espaço extra e, em exportação de arquivos, clique em exportadores rápidos PNG. E aí está. Isso agora pode ser importante dentro de Sigma e usar em diferentes planos de fundo.