Web Design completo do Figma ao Webflow (Nova interface do usuário)

1. Visão geral do curso: Dois tipos de web designers freelancers. Primeiro, estão cronicamente sobrecarregados e mal pagos, todos os dias enviando propostas em plataformas como a Upwork e não Mas você também tem web designers que têm um fluxo constante de clientes, geralmente clientes que os procuram em vez do contrário. Eles podem até mesmo demitir clientes com quem não é tão divertido trabalhar e trabalhar quantas horas por dia quiserem. E eles têm a liberdade de trabalhar em qualquer lugar do mundo. Eu sei, porque acabei de me descrever. web design freelance me deu a liberdade de escolher meu próprio horário de trabalho, que é cerca de 4 horas por dia Ainda é chocante para meus amigos sobrecarregados. Posso tirar dias de folga e férias sem precisar da permissão de ninguém, que é minha parte favorita E posso dedicar um ano inteiro a um projeto pessoal, que foi exatamente o que fiz para construir este curso E se você estiver disposto a trabalhar, vou te ensinar como tornar essa descrição verdadeira para você também, ou a chance de criar sua própria descrição pessoal. A maioria das pessoas que tentam a sorte 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, são três e um. Três percursos para enfrentar três grandes obstáculos. O grande obstáculo número um. Aprender a programar simplesmente 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 CSS, JavaScript e tudo Agora, como eu já trabalhei em projetos reais e sei o que meus clientes reais pedem em termos de funcionalidade do site, muitas vezes eles 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 isso era o quanto eu havia aprendido até agora. E eu pensei que ainda tinha muito o que fazer. Ser capaz de 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 a alguns tutoriais em vídeo. Em poucas horas, estou criando um site completo do zero, com interações personalizadas, sem modelos e nada. Fiquei encantada, amor à primeira vista. Comecei a oferecer aos meus clientes o design e o desenvolvimento completos do pacote. Eu estava ganhando instantaneamente três ou quatro vezes mais dinheiro do que antes. Os clientes adoraram o fato de eu estar fazendo tudo e começaram a fluir. Isso é algo que nunca aconteceu comigo antes. Em pouco tempo, eu estava cobrando $5.000 por um site sem saber programar Webflow elimina o maior obstáculo que você enfrentará : tempo e dedicação para aprender a codificar 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 E o Webflow não é um desses criadores idiotas de dragões, como Wix Webflow é uma ferramenta profissional feita para web designers profissionais e não para pessoas comuns Você ainda precisa aprender isso porque ainda precisa aprender como o CSS HDML funciona Você ainda acaba gerando código, mas o Webflow o grava para você Há um vídeo após este título, O que é o 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 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 projetar um protótipo, como um desenho não funcional da lateral, e depois desenvolvê-lo 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. Vou te ensinar dicas e truques secretos para um freelancer de sucesso Mostraremos os erros que muitos freelancers cometem. Você receberá um modelo de proposta poderoso que eu criei para você. Você aprende as dicas secretas da Apwork, a maior plataforma de freelancers, onde comecei minha carreira de web design Por fim, vou deixar você ir com um presente. Site de portfólio incrível que eu projetei e construí para você. No momento em que 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 acoshell e serei seu guia nessa jornada. Agora tudo o que você precisa fazer é se inscrever. 2. O que é o Webflow?: Quando a Apple decidiu não incluir a unidade de disquete usual em seu novo IMAP, stiff jobs citou o skate Maxim do astro do hóquei Wayne Gretzky para onde o disco está indo stiff jobs citou o skate Maxim do astro do hóquei Wayne Gretzky para onde o disco está indo, não para onde estava. Se você está aprendendo novas ferramentas, aposte em uma tecnologia que está avançando porque , quando terminar de aprender o padrão atual do setor, ela pode já estar morta. Neste curso, não aprenderemos padrões do setor, como o Photoshop e o WordPress Em vez disso, aprenderemos as ferramentas do futuro Figma e Webflow Demora um pouco para que o mundo se atualize , porque a maioria das pessoas reluta em mudar. Mas eles se atualizarão, sem dúvida. Assim como não há mais disquetes em seus computadores Neste vídeo, quero responder a várias perguntas que você possa ter sobre o Webflow Então, o que é o Webflow? O 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, menos como o WordPress O 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, algo que nenhuma outra plataforma E 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 está mudando o setor, um Tesla do web design E o Twitter está repleto de amor entre os usuários do Webflow, desde desenvolvedores de longa data até diretores de design do Dropbox Se você quer exemplos de sites, criados no Webflow, não precisa ir muito longe. O próprio site do Webflow é totalmente construído no Webflow. Está longe de ser um site comum com layouts não tradicionais, interações complexas e animações É um ótimo exemplo do poder do Webflow. Há também uma página de demonstração no site deles, onde você pode encontrar projetos publicados por outros designers do Webflow 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 Mas não é isento de limitações. Não podemos criar aplicativos web no Webflow, pelo menos ainda não. Aplicativos da Web são sites como Airbnb, Facebook, Dropbox, YouTube, basicamente, qualquer coisa que tenha conteúdo gerado pelo usuário, onde o usuário faz login e cria e adiciona algum conteúdo nele Eles são 100 vezes mais complexos do que os sites regulares das empresas. E eles são mais parte do desenvolvimento de software e web do que do campo do web design. Definitivamente, poderíamos projetar o front-end de todos esses sites no Webflow Por exemplo, poderíamos projetá-lo e desenvolvê-lo dentro do Webflow, depois exportar o código, que é HTML, CSS e Joscript, e fornecer esse código de front-end aos desenvolvedores que o conectarão ao aplicativo Não vou abordar isso neste curso. Aqui, aprenderemos como projetar e criar sites regulares que ocupam a maior parte da web. Há outro tipo de site que você pode criar no Webflow, sites de comércio eletrônico É uma adição mais recente à plataforma deles, mas não vamos abordá-la neste curso A demanda por sites de comércio eletrônico é muito menor do que a de sites comuns Portanto, minha recomendação seria mudar para o design e desenvolvimento web de sites de comércio eletrônico , uma vez que você ganhe uma experiência de trabalho real boa o 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 Uma coisa você pode se perguntar se há uma demanda pelo Webflow, e essa é uma pergunta válida, porque às vezes os clientes solicitam web designers especializados em plataformas específicas, como Wordpress, Drupa e muitas A resposta é sim. Assim como outras plataformas, também há uma demanda específica para designers do Webflow Embora essa demanda não seja tão grande quanto o Wordpress, isso não é um grande problema, porque a maioria e a maior parte da demanda por sites e web designers não é específica da plataforma, porque os clientes geralmente não se importam com onde você criará seus sites. E se eles confiarem em você como web designer, confiarão na sua preferência e no seu julgamento. Às vezes, talvez você precise explicar por que eles deveriam usar o weblow No entanto, é muito fácil de fazer porque apenas um único recurso do weblow é suficiente para convencê-los a seguir Clientes fáceis precisam manter seu site atualizado. Eles precisam criar conteúdo, atualizar o texto nas páginas, 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, desajeitado e pouco fácil de usar, que se parece com Para os clientes, isso não é algo interessante de usar. É assustador e eles temem quebrar alguma coisa. 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. Há mais benefícios para os clientes e outras maneiras de defender o Webflow Vou te ensinar tudo sobre isso influenciando parte deste curso 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. Principalmente porque é baseado na estrutura de código regular 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. Você não precisa ter nenhuma experiência anterior, eu vou te ensinar tudo à medida que avançamos. Durante este curso, você se tornará um usuário profissional do Webflow, pronto para assumir projetos de sites pagos reais logo após terminar o curso Webflow é gratuito até que você precise publicar o site e, em seguida, você paga pela hospedagem, que custa cerca de $15 por mês 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 emoldurando em branco 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. Já que começamos a trabalhar com o Webflow apenas 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 weblow.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. Ou, se você estiver em um painel, clique no botão Novo projeto e escolha um site em branco. É aqui que a mágica acontece. O site é construído aqui. À 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. Como usuário iniciante, você receberá esse pop-up de integração. Você não precisa passar por isso, mas pode, se quiser. 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 Exportação de código na parte superior da barra de ferramentas, verá o código real que o weblo escreveu HTML mostra os objetos que adicionamos, como o contêiner, título e um parágrafo. E dentro do CSS, você verá as mudanças de estilo que fizemos no preenchimento superior e no alinhamento central Poderíamos exportar esse código e hospedá-lo em qualquer outro lugar. A página também funcionaria perfeitamente fora do weblo. 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. R 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. 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: SEGREdo BOM DESIGN: Ainda não comecei na nossa escola. Acho que não tenho estado dentro de um. Meu assunto favorito na escola era matemática, e eu não gostava de desenhar. Nunca na minha vida eu consideraria me tornar um designer. Meu amigo e parceiro de negócios na época era um designer gráfico. Ei, fui para uma escola de arte e depois era uma lacuna regular para designer gráfico. E um dia descobri que ele não sabia desenhar. Você não poderia cair e dar-lhe um baixo estranho. O que quer dizer? Você controla o seu designer gráfico, certo? Foi como se fosse divertido, não é? Explica que eles são um designer, você não tem que saber desenhar. Você não precisa ter algum talento inato para a criatividade ou ser um artista extravagante. Design tem regras, técnicas e diretrizes, e você só precisa aprender a segui-las. Fiquei chocado. Pensei que esperasse um segundo. Como se eu tivesse descoberto um segredo incrível. Este mundo tem estado a esconder-se de mim. E nesta parte do curso, isso é exatamente o que eu quero levar para você. 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 vai apenas conteúdo aleatório e transformá-lo em uma bela competição de design. Vou te dar tarefas e exercícios práticos para sujar as mãos. Aprenderemos como usar uma ferramenta de design chamada Fig. MMA. É um dois simples, e vamos aprender passo a passo, então não vamos virar do avesso. Aprenderemos novos recursos à medida que avançamos e praticamos para diferentes designs e, na verdade, design não está realmente na ferramenta. Você não se torna um designer gráfico ou um Web designer apenas aprendendo loja de fotos, nosso esboço ou o que quer que ele esteja projetando alguma escala mental. Na realidade, não é essa criatividade que as pessoas realmente pensam. É, obviamente, há um monte de parte criativa dentro, mas muitas vezes é uma pele mental, e a maneira como você está olhando para as coisas como a maneira como o mecânico de carros olha para o carro e aqui está o motor fora do carro e então entende apenas olhando para algo, e apenas ouvindo o som. Para onde? Aperte os parafusos onde ouvir. Ouça-os indo ensinar-lhe esta escala exata de design para que você possa pegar uma tela em branco e criar algo muito atraente fora dela. 5. Começando com o Figma: Mergulhamos no design. Vamos primeiro configurar o FIMA 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 FIPMA Eu os ensinarei e mostrarei à medida que avançamos no material e conforme você precisar deles, imediatamente. Em primeiro lugar, vamos baixar o FIMA, temos duas opções, Mac e Windows Estou em um Mac, mas o aplicativo do Windows funciona e tem a mesma aparência. Assim, mesmo no Windows, você poderá acompanhar os 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. Você nomeia, que tipo de trabalho você projeta. 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 mostrarão uma guia como o seu navegador. Se 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, ele dirá rascunhos, mas se você estiver trabalhando sob um plano de equipe, talvez diga 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 de reenvios 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. Caso você receba uma mensagem de que atingiu o limite de arquivos, trata-se apenas dos arquivos da equipe. Dentro da pasta de rascunhos, você pode ter arquivos gratuitos ilimitados. 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. Como este é um curso de web design, vamos projetar para computadores desktop e laptop. Você pode desenhá-lo, mas melhor opção é escolher um dos tamanhos predefinidos Pode escolher a tela nesse menu suspenso. Existem iPhones, andróides, tablets e até capas do Facebook vamos escolher um dos Obviamente, vamos escolher um dos tamanhos de tela do desktop. 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 é pânico. 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 arrastar a tela conforme desejar. Também há um zoom que você precisará fazer de tempos em tempos. Em um touchpad, novamente, isso é fácil. Precisa apertar com dois dedos. Exatamente do jeito que você faria no seu telefone. Com um mouse, você precisará manter pressionado um controle ou comando no Mac enquanto rola. 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. Na moldura, você desenha um retângulo como esse. Clique e arraste. Mesma lógica para outras formas. Então temos uma ferramenta de caneta. Não se preocupe com isso por enquanto, não o usaremos muito. Além disso, é uma ferramenta de texto, bastante 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 de 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 comando K no MAC Na verdade, você pode ver todos os atalhos ao mouse sobre cada um desses itens da barra de ferramentas Dentro das ações, cara, 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. Plugins e widges criados pela comunidade. Eles 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. E por último, mas não, você pode encontrar o Figma AI aqui. Se você já jogou com o Chat ou qualquer outra ferramenta de EI , basicamente funciona da mesma maneira. Você avisa e ele gera conteúdo para você, imagens ou até mesmo designs. Bem, é uma IA. O que você espera? É um acerto e um erro. O fig MI é pago, então não vou usá-lo muito neste curso porque meu objetivo é ensinar habilidades usando ferramentas e recursos gratuitos, que você não precise fazer nenhum investimento extra enquanto aprende. Então temos um modo de desenvolvimento, 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. Isso é tudo que você precisa saber sobre a barra t por enquanto. Do outro lado, temos o painel de propriedades. Uma coisa engraçada sobre o painel de propriedades é que ele muda com base em um objeto que você selecionou Selecionamos um ângulo de atuação e obtemos todas as propriedades desse ângulo de atuação 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 esfaqueamento de ativos, esses são os mesmos ativos que você encontra no menu abaixo Páginas porque podemos ter várias páginas em nosso arquivo e na 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 faça isso agora mesmo e continue com a próxima lição Se em algum momento deste curso você ficar preso. Você sabe, são novas ferramentas. Às vezes, eles se atualizam 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 eles se movem muito rápido, mantêm essas ferramentas e atualizam as telas e a interface do usuário muito rapidamente. Então, eu posso te mostrar uma coisa e, de repente, desaparecer. 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. 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 . 8. Assignment: 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 Não vamos criar 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óis de uma página da web. Às vezes também chamado de cabeçalho ou acima da dobra. Não vamos fazer nada sofisticado, sem imagens, sem texto, apenas um monte de técnicas arrojadas, como um Qual é a primeira coisa que inserimos quando iniciamos qualquer design? Moldura direita. Como mostrei isso no tutorial do Figma, podemos adicionar um quadro selecionando uma ferramenta de moldura e, em seguida, selecionando uma das predefinições no painel de Vamos selecionar a moldura da área de trabalho. Em seguida, vamos definir nossa grade para esse quadro. Por quê? Porque queremos estruturar nossos sites forma que pareçam arrumados e organizados 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 Mas essa não é a rede 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, y, 12 colunas porque ela 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. As notas do layout oferecerão menos opções. Por exemplo, a grade de dez ou oito colunas pode ser dividida em três tamanhos iguais. É muito limitante. Para aplicar a nota de 12 pontos no menu suspenso, selecione as colunas e, no condado, pino 12. 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 gostaria 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. Eu gostaria de criar um pouco mais de separação 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í 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 adicionar, primeiro selecione esse objeto. O painel de propriedades é atualizado instantaneamente conforme você o seleciona. E agora temos uma opção aqui para alterar a cor 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 a cor do plano de fundo e a grade não tiverem 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 que será nossa barra. Você vai me ouvir às vezes usar barra de enfermaria como uma barra de navegação curta. Gosto de ser preciso, então vou mudar a altura desse retângulo para sete 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 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 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ó precisávamos decidir entre dois tamanhos em vez de decidir entre centenas de tamanhos de pixels diferentes Ao precisar os objetos, você verá as guias inteligentes que aparecem quando o objeto se alinha à borda da coluna da grade Isso ajudará você a dimensioná-los com precisão. 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 maneiras mais óbvias de usar o controle C, controle V ou o comando C, comando 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 diminuir esses dez pixels e encaixá-los 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 Os guias rápidos vermelhos ajudam você com o alinhamento. No entanto, o Figma também pode fazer esse alinhamento para você. Primeiro, precisamos selecionar os objetos para alinhamento. 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 objetos horizontalmente. Esse é o nosso bar. Agora, o resto do conteúdo. 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 que nos inscrevamos, aprendamos mais e assim por diante. E essa é a ação dos nossos heróis. Vamos ver como fica sem a grade. Esse é 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 Pazos, CEO da Amazon, adora esse Passo a passo ferozmente. É assim que vamos abordar esse curso. Vamos dar um passo de cada vez, levando-nos ferozmente ao objetivo final 9. 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. 10. Assignment: hierarquia visual: 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 ao lado do nome do arquivo estiver escrito 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. Lembre-se de 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 12 variam de 30 pixels, mas desta vez com margem de 60 pixels, porque estamos usando uma moldura menor do Mac Book em vez da área de trabalho A barra n se encaixa perfeitamente nas bordas dessa grade porque é exatamente isso que eu estava usando ao projetar a barra n. Por esse motivo, podemos deixar a barra de navegação nessa posição. Você verá que os links na barra de navegação não se alinham com as colunas da grade, mas tudo bem Como eu disse antes, a grade é uma diretriz e uma regra vigorosa 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. Como fazemos isso? Da ú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, torne-o grande, bebê. 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. Esta foto está cobrindo a barra de navegação. Lembre-se do painel de 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 de camadas, mas maneiras mais fáceis de usar uma opção que faz isso por nós Clique com o botão direito do mouse na foto e selecione Enviar para B. Isso enviará a foto até o final. Agora, a barra de navegação está no topo. Mas como o imposto de Na Bar é escuro, não podemos ver nada. Vamos consertar 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 do Nabbar brancos. Bom. Vamos fazer algo parecido com o botão. Não é muito visível. É claro que eu poderia inverter as cores, deixar o botão branco e o texto escuro, mas uma opção mais bonita nesse caso é usar um botão ou um botão Mude o plano de fundo para whe e diminua a opacidade do top em cerca de dez a 20 a 20% Gosto muito dos 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 de decomposição. Agora vamos organizar melhor nosso conteúdo e criar uma hierarquia visual entre eles. Primeiro, vamos alinhá-las à esquerda e encaixá-las em uma. 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 as coisas parecerem 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. Nesse caso, 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, não consegui aumentar muito porque a foto era menor. Para quem gosta de títulos, escolhi uma fonte plástica para 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ê aprenderá 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 do telefone pode ser selecionado aqui. Quantas opções você tem aqui dependem da família de telefones e de quantos pesos ela vem com? Eu 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 qualquer telefone que fosse , escolher um estilo leve e torná-lo ainda menor. A legenda definitivamente não compete pela atenção O nome recebe todos os holofotes, 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 e pronto. O botão Eu vou viver como está, vou apenas torná-lo menor, e isso será suficiente para diminuir sua importância. Isso é tudo, está muito bonito. E a hierarquia? Temos um ponto focal? Aposto que temos? 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 É isso mesmo. Se você não está acompanhando, agora é sua vez. Sinta-se à vontade para se desviar da nossa versão, se preferir. O importante é atingir duas metas, que são a ter um ponto focal e B ter níveis diferentes de importância visual entre outros elementos. Configure para você se quiser usar cores diferentes, sem problemas, telefones diferentes, arranjos diferentes, ou você pode recriar minha virgem 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 11. 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. 12. 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. 13. 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? 14. 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. Assignment: personalidade de tipo: 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 os telefones instalados no seu computador ou os telefones do Google que vêm com o Figma O Google Fonts é um ótimo repositório de muitos telefones gratuitos, mas com um design bonito Quando você clica no seletor de telefone no Figma, ele oferece opções os telefones instalados no seu computador e também os telefones do Google Escolher fundos diretamente nessa lista suspensa não é muito útil Em vez disso, o que podemos fazer é acessar o site do Google Funds 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 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 os teclados importantes daqui, que seriam fitness ou fitness coach e imagens do Google para encontrar exemplos de quais telefones estão sendo usados como tema de 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 as categorias do Typace e pronto Para o preparador físico, procuro uma fase tipo que seja simétrica e volumosa, 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 pelo telefone certo. 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. Sensorial, moderno, minimalista, neutro funciona com condicionamento físico porque funciona com qualquer coisa tela pode ter qualquer personalidade, dependendo da fonte, ela pode ou não funcionar com fitness. A categoria de caligrafia é igual à categoria de roteiro que expliquei na lição anterior É apenas uma maneira diferente de chamar a mesma coisa. As fontes manuscritas são divertidas, bobas, infantis e casuais A menos que seja um script de estilo antigo , seria clássico e tradicional. Temos essa categoria extra chamada monoespaço. Fontes com espaçamento monocromático são aquelas em que cada letra ocupa a mesma quantidade de Isso torna cada letra mais fácil de ler. É por isso que fontes monoespaçadas geralmente são usadas para digitar código Como você pode imaginar na programação, um caractere errado pode quebrar o código. Não há muita utilidade para isso no design; existem alguns usos potenciais, como se você criasse uma página relacionada à programação, computadores antigos ou máquina de escrever, já que fontes monoespaçadas eram originalmente usadas Dentre essas categorias para o tema fitness, Sans Serif ou display são o melhor lugar para escolher Infelizmente, não consigo ver as versões ousadas desses fundos diretamente daqui Isso teria sido uma ideia. Em vez disso, vou ter que verificar a versão em negrito individualmente na página da fonte. Monsat é 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 nos certificar de que o designer não pretendia esse tipo de letra fosse algo que não fosse adequado para Diz que foi inspirado na tipografia urbana. Isso é adequado para nós. Ele até menciona palavras-chave como trabalho e dedicação. Bem, isso não é ótimo? Trabalho e 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 Uma coisa a observar: os arquivos de tarefas que compartilho 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, como neste caso, provavelmente não foi duplicado Um dos motivos seria porque você não está logado no Figma no seu navegador Você precisará fazer login e tentar clicar no link mais uma vez. Se ainda não conseguir criar uma cópia, acesse meu arquivo e duplique-o a partir desta pequena lista. Agora esse é seu próprio arquivo Figma e você pode editar como quiser Todas essas duplicatas são salvas automaticamente em sua conta Figma em 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 aparecerão em maiúsculas e você poderá remover a letra clicando nessa opção É também aqui que você tem uma opção subjacente, se precisar. Nesta caixa, quero que você explique seu processo de pensamento sobre por que escolheu a fonte. 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 de design que você toma. Na verdade, clientes, seus clientes definitivamente apreciarão isso. Eu lembro que eles sempre faziam isso. Eu enviaria este e-mail com o passo a passo das principais decisões de design que eu tomaria. Sobre tipos de letra ou telefones e coisas assim. E no começo, eu gostava de fazer isso. Mas então eu meio que fiquei com preguiça. 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 tinha feito e queriam revisar e trocar telefones ou mudar cores ou coisas assim porque achavam que eu os escolhi do nada Então, definitivamente, pratique isso e, ao trabalhar com seus clientes, mostre a eles quanto processo de pensamento foi colocado nos bastidores. 17. 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. 18. 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 19. 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. 20. 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 defondt 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 oferecer a seu projeto campo mais exclusivo, 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 texto do título e, como corpo do texto principal, onde você precisa de muitos pesos diferentes, como barcos e barcos extras e todas essas coisas, então 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 telefones geralmente é que os telefones 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. A arte da cor: Este é um dos projetos do meu site. É um site para uma scooter que compartilha rap. Quando eu estava projetando este site de Escolheu uma cor verde muito vibrante. O nome do aplicativo é ficar verde. As scooters são elétricas e eco-friendly, então este verde particular se encaixa no conceito muito bem. É o tom certo de verde. Mas os meus clientes tinham um plano diferente e fizeram-me mudar para este verde. Este é verde floresta, não é uma boa combinação para este produto. Forest Green vai funcionar bem com empresas relacionadas ao ar livre acampando, caminhadas, roupas ao ar livre, pesca e assim por diante, mas não algo que é tecnologia verde elétrica e moderna. Essa cólera fez o site olhar para os grandes anos 90, mas, você sabe, você sabe, às vezes você tem que fazer o que seu cliente diz. As roupas podem fazer ou invadir o design, foram atraídos para as cores que gostamos e bastante repelido. Bio aqueles que não vencemos Web design ou outros produtos como carros, fechando garrafas de ketchup, o que for. Podemos ver o melhor produto de design. Mas se não gostarmos da cor, não a compraremos nas próximas lições. Vou te ensinar a escolher e trabalhar com cores como um profissional para fazer seus designs ficarem ótimos. Fique por perto 23. : 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 24. Assignment: 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 de web muito comum com uma 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 Na foto vazia, eu 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 uma grande variedade de fotos diferentes. Eles não são muito parecidos com estoque, então são bastante naturais e bonitos, embora, por terem designs gratuitos, sejam muito usados. Mas falaremos mais sobre a fotografia mais tarde. Ok, então eu adoro montanhas. Vou escolher uma bela 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. Agora vou fazer com que o retângulo tenha a metade desse tamanho. Aqui está um truque de figma. Vou digitar 1152/2, e então ele entraria. Figma fará as contas por mim. É exatamente a metade do quadro. Agora vou colocar minha imagem. Você pode arrastar sua imagem diretamente no Figma ou escolher a opção colocar imagem na ferramenta de forma Aqui estão algumas coisas que você deve observar ao trabalhar com imagens no Figma As fotos que você obtém do Splash ou outros sites de estoque serão muito grandes Espere um pouco para o Figma pensar, pois está carregando a imagem para seus servidores antes que você possa colocá-la A imagem será colocada em sua dimensão original. 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 camada de foto, a opção óbvia é selecioná-la no painel de camadas, mas a melhor maneira é clicar na imagem enquanto segura uma tecla de controle ou comando. 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 uma 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 observar. Ao colocar uma imagem ou qualquer outra coisa, certifique-se de que a camada esteja no quadro em que você está trabalhando. Porque, além dessa moldura, ela pode ser colocada acidentalmente em outras molduras próximas 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ê esperava, pode deixá-lo louco até que você descubra 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 Se estiver atuando, daremos uma olhada no painel de jogadores e verificaremos se está em sua moldura. Para arrastá-lo na moldura, o cursor, o mouse precisa estar sobre a moldura, sobrepondo-a à moldura, depois arrastará para dentro e, se sair da moldura, arrastará para fora da moldura e a 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 ângulo ect, clique nas configurações de preenchimento de cores e, a partir dessas opções, selecione a imagem. Você obterá essa imagem de espaço reservado quadriculado. Em seguida, clique, escolha a imagem e basta selecionar 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 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 é fazer o upload da imagem diretamente em nosso preenchimento de retângulos , porque é a forma mais controlada no caso específico Sabemos que queremos que essa imagem seja metade desse quadro e já criamos um retângulo de espaço reservado para É 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 a opção de corte a partir daqui e seguida, movendo nossa imagem para posicioná-la exatamente da maneira 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 criptografia, o redimensionamento não bloqueia a proporção logo de cara Você pode obter uma imagem distorcida se não tomar cuidado. 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 Lorem Já tenho os telefones em mente. Não os estou escolhendo com base em imagens, mas você pode, se quiser. A tela é uma bela face tipográfica em estilo de serviço moderno. Dá muita classe à página. E a Latto é 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, abaixo da grade de layout, 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 uma margem de conteúdo nas laterais. Quais são as melhores margens dependendo da largura da moldura Se estivermos projetando em uma grande tela de desktop , nossas margens serão comparadas se estivermos projetando para o telefone Para esse tamanho de quadro, 60 pixels é muito bom. Uma coisa que você pode notar é que meu pedido de colocação de imagens não está alinhado com a grade Alguém pode pensar, espere um segundo. Essa grade não é importante e não alinhamos nossos elementos com base em nossa grade Sim, é verdade, mas nesse caso, nossa imagem faz parte da cannabis. Nosso Cavas é 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 se submetem às regras de 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 enfermarias para órfãos Você vê aquela única palavra na última linha, que se chama enfermaria de órfãos 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 uma 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 consertar uma enfermaria para órfãos Só precisa reduzir a caixa de texto até que pelo menos uma ou mais palavras saltem na última linha para dar aquela palavra “casca” Este parágrafo agora parece mais equilibrado. É isso que você deseja, via de regra, um mais agrupado e 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 Perto do que nossos olhos estão percebendo, porque na verdade não vemos esses pixels independentes 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 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 no menu suspenso 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 isso 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, batom vermelho, e precisará de um valor de desfoque menor Caso contrário, a cor se misturará demais. Observe como a paleta de cores é muito perceptível. Temos o azul, o marrom claro e o marrom escuro. A Figma pode escolher essas cores para nós com um conta-gotas Desenhe um retângulo e clique nesse campo para alterar a cor do ângulo de corte Em seguida, selecione a ferramenta conta-gotas. Ao passar o mouse sobre a imagem, ela escolherá a cor desse pixel exato e pintará o ângulo reto com essa Repita o processo para todas as outras cores. quantidade de cores que você escolherá dependerá da imagem e de você. Você deve 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 plano de fundo f. Lembre-se por que isso cobre nossos elementos, porque a camada está mais alta na lista Basta movê-lo para baixo para que fique organizado como plano de fundo. Você também pode escrever, clicar e selecionar Enviar para trás, que será enviado até o final. Agora vamos experimentar algumas cores de fundo. Vamos escrever essas cores neutras. E vamos ver a cor que combina melhor com esse marrom escuro. Opa, esqueci de remover o preenchimento da imagem do texto quando estava brincando com O azul contrasta muito bem e pode ser útil para um design interessante. Essa cor brilhante de envio também não é ruim. Aí, acho que esse é o melhor. Muito ruim em nomes de cores, então eu geralmente procuro nas laterais das cores. Esse se chama Tumblid. Quanto ao parágrafo, posso escolher a cor branca. Embora esteja aparecendo demais e competindo pela atenção com a manchete Nesses casos, o que eu faço é diminuir a opacidade do texto branco para cerca 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 testar o mesmo peso no 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 opte por 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 garantir a segurança, basta usar branco ou preto e revestir com a opacidade Nem precisa experimentar nenhuma dessas opções com as cores que você amostrou É um pouco arriscado para um iniciante. É fácil errar. Essa opção de sagacidade funciona , mas é um pouco sortuda porque é 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 usei 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. Este parece o mais orgânico para mim e faz com que a beleza da paisagem realmente se destaque. Além disso, a cor é bastante adequada para temas ao ar livre. Tudo bem. 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á um link para um arquivo que tem uma solução para isso Não se preocupe se a solução não for exatamente a mesma. Não há apenas uma solução para esse exercício. 25. : 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 26. 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 27. 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 28. : 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. 29. 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 . 30. Fotos: Overlays de imagem: uma grande foto pode fazer maravilhas para um design. Adoro esta foto. É lindo. As cores são incríveis. É simples, mas parece o nosso conto de fadas. Mas temos um problema nesta composição. Não há contraste suficiente entre o fundo e todos esses objetos em cima deles. O contraste é tão baixo que a maioria dos impostos é completamente ilegível. Produzir um design como este é o resultado final é um trabalho terrível, mesmo que tudo o resto esteja no local e imagens tão lindas. Como podemos corrigir isso usando sobreposições? Basicamente, cor de Putin falha no topo da imagem. O mais comum é colocar uma sobreposição escura sobre ele na figo ma. Isso significa que adicionar uma cólera preta caiu em cima da imagem e adicionar transparência a essa sensação até obter um bom contraste. Mas antes de ficar muito escuro, outro método é chamado de tingimento. É tirar a foto e dar uma tenda de cor diferente. Para fazer isso, você pega a imagem e se afasta para transformá-la em uma foto em preto e branco e, novamente, adicionamos um campo de cores. Mas desta vez, em vez de preto, você escolhe uma cor diferente. Isso dará a imagem atender fora dessa cor, mas isso é especialmente útil se você quiser usar cores da marca no design. É um truque muito fácil. Você também pode aplicar a correção a locais específicos em vez de toda a página. Por exemplo, aqui eu coloquei a caixa escura e transparente atrás de seu conteúdo, e eu também adicionei o Grady escuro e transparente atrás da barra de navegação. Você percebe ligar e desligar e ligar novamente lá, embora apenas como uma nota lateral, eu não sou um grande fã desses retângulos pretos apenas aleatoriamente atrás do conteúdo, então eu evito usá-los se eu realmente sei como usar fundo grande, e é apenas um design muito fácil. Não há um monte de design realmente envolvido, como Airbnb é home page. Você encontra uma foto impressionante e coloca seu conteúdo sobre ela em branco Cor cria um design muito atraente sem muito esforço, e na minha experiência, os clientes adoram 31. 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 32. 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. 33. 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. 34. 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. 35. 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. 36. 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. 37. Fotos: escolha fotos como um Pro: todas essas técnicas fotográficas vão ser inúteis se você não sabe como escolher as fotos certas para seus projetos. Nesta lição, vou ensiná-los a escolher fotos como um profissional. As fotos que você estará usando para seus projetos são chamadas fotos stock, que você baixar de sites gratuitos como unspool, cinzas e pagos como eu estoque. Agora o grande pedaço fora de fotos stock. Avião terrível. Tenho certeza que você visitou sites que usam fotos como esta. Qual é exatamente o problema com esta foto? As modelos estão com bom aspecto. Eles estão bem vestidos. Eles estão sorrindo. As fotos, boa qualidade e tiradas em ambiente profissional. Tudo no papel parece correto, mas as fotos ainda são chatas. Por que é isso? Porque é claramente falso. É claro que estes não são pessoas de negócios reais. São modelos fazendo uma pose boba com sorrisos falsos. Agora, todas as fotos profissionais são feitas assim, e modelo que está atuando um papel específico na foto vestindo roupas é que não é deles , retratando uma emoção específica e sendo pago por isso. Tudo bem, mas se a foto for bem feita, não devemos ser capazes de dizer o que está acontecendo. Na realidade, penso nisso como filmes. Sabemos que são atores. Sabemos que eles não estão de pé em um navio em 1912, eles estão vestindo fantasias e atuando em uma cena. Mas quando os filmes saíram bem, não podemos dizer. Esquecemos que é realmente falso e que essas pessoas estão apenas fingindo que o mesmo está acontecendo aqui. Estão vestindo fantasias e fingindo. Mas ao contrário de bons atores, esse cara chupa. Sabe o que acontece quando usa uma foto que parece falsa? Você está enviando uma mensagem muito ruim para seu público. Se a foto é falsa e fingindo, então o site vai se sentir falso e fingindo Não há pessoas reais por trás deste site. Se eu ligar para eles ou enviar um e-mail, eu não vou receber uma resposta de pessoas reais ou pior. Pode até ser um site de fraude. É preciso um pouco de prática para contar fotos boas de fotos ruins, mas aqui estão três perguntas para se perguntar quando você está olhando para fotos. Ele é a cena. Rio. Algo assim aconteceria em um cenário de vida real? Assim como as pessoas que trabalham no escritório ficam na frente de uma câmera e dão as mãos assim . Se você já trabalhou no escritório corporativo, você sabe que a última coisa que você quer fazer é as mãos inteiras com seus colegas de trabalho e ficar na frente de uma câmera. Então a resposta é claramente nenhuma falsa para essas fotos. Por exemplo, o que você acha? Isto é real? Obviamente não. Para começar, o rabisco no copo é um absurdo completo. É carga aleatória e flechas. Não faz sentido. E o que há com esse relatório? - Isso? É uma forma tão clichê de descrever um escritório visto este pé, por outro lado, é uma história diferente. Parece uma reunião realista, e as pessoas estão vestindo roupas que você realmente viu escritórios modernos. Hoje. Eles estão conversando um com o outro, que é o que acontece nas reuniões, não de mãos dadas e olhando para uma placa de vidro com rabiscos absurdos neles. Falso segunda maneira de dizer um estoque de fotos ruins por emoções falsas brega. Isto não parece uma verdadeira emoção humana de excitação. Nem a cena está perto do mundo real. Nesta foto, você já teve dinheiro falso em uma mão e uma lupa em outra? Este tipo estava tão entusiasmado com uma falsa notícia sobre o falso salto. Boa tentativa, amigão, agindo emoções humanas genuínas na frente de uma câmera em um estúdio fotográfico. É uma coisa difícil. É por isso que tantos desses modelos estão fazendo um péssimo trabalho nisso. Não recompense sua ala pobre usando suas fotos em seu projeto. E também não estrague seus projetos. Mas essas fotos Não é difícil dizer se a atuação parece genuína. É assim que uma excitação genuína se parece. Nem essas emoções sutis, como um sorriso regular, podem parecer muito antinaturais. E destino como esta foto, e quando é feito certo, parece genuíno e convidativo. Pergunte a si mesmo se as emoções preenchidas, realmente, você provavelmente será capaz de dizer com bastante facilidade. Além do que os modelos estão fazendo dentro da foto, você também pode facilmente dizer uma foto de estoque ruim de uma boa, prestando atenção ao design do conjunto por conjunto, quero dizer tudo. Além do modelo onde a foto foi tirada, objetos na foto, mesmo fechando o modelo está vestindo muito estoque. As fotos são muitas vezes bastante 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 década para um site de inicialização de tecnologia moderna. Ao prestar atenção à roupa, você pode facilmente identificar fotos datadas. 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. Isso não significa que a foto foi tirada há muito tempo. Às vezes, as fotos são novas, mas os fotógrafos reutilizaram o mesmo estúdio de fotos do guarda-roupa, salvam sua cautela dos pára-quedas, e eles os reutilizam com outros modelos. E novos cenários anos mais tarde, Fecha que Don't Fit são um indicador claro de que a cena é fé, mesmo que fosse moderna, como essas pobres meninas aqui, estúdios de fotografia também vai tentar usar fechamento neutro que pode ser reutilizados dois anos na estrada para que eles não tenham que comprar novas encomendas de cada ano. Então você verá esta mistura se fechando, desprovido de qualquer personalidade, e isso é outro indicador para. Mas eu acho que esta foto tem outro claro dizer que tela de computador em conjuntos bem projetados como aqui, você vai ver as pessoas vestindo roupas modernas e um monte de vezes bastante adequado para a sua personalidade. Parecem pessoas reais. É como uma simulação de computador. Preste atenção aos objetos no conjunto. Pergunte a si mesmo se eles parecem realistas, como esta lupa e dinheiro falso. Nada diz falso melhor do que dinheiro falso e fique longe de tudo. Abstrato, por exemplo, lâmpadas. Deus, odeio lâmpadas. As pessoas adoram usar uma lâmpada para representar coisas como Dion. Criatividade ou pensar que é mais de anos me deixa enjoado quando eu vejo. Uma vez, eu estava trabalhando em um site muito premium, e como sugestão, meu cliente me enviou uma lâmpada para usar como fundo para um site e quase vomitou na tela do computador. Objetos abstratos geralmente são uma má idéia. A maioria deles parece exatamente que abstrato, confuso e muitas vezes clichê é que eles estão em excesso. Seu design deve dar ao público senso de compreensão da inautenticidade. Qualquer coisa abstrata fará o contrário. Fora deste clichê. Peças de quebra-cabeça e nuvens sobre chapéus das pessoas 38. Fotos: Onde encontrar fotos: Tudo bem, então onde encontrar boas fotos? Existem fontes gratuitas e pagas. Meu lado favorito estoque livre é em splash dot com. Você já usou isso nas atribuições. Há muitos tamanhos que oferecem fotos gratuitas, mas eles não são totalmente gratuitos. Eles vêm com algumas regras de direitos autorais, como você deve creditar o autor ou apenas para uso pessoal, mas para uso comercial em salpicos verdadeiramente livre. Você pode fazer o que quiser com as fotos, e você não tem que creditar o autor. Fotos no Splash que vêm são muito realistas olhando. Muitas vezes eles são enviados por fotógrafos individuais em todo o mundo e não comprar estúdios fotográficos stock. Por esta razão, você obtém cenários muito realistas e pessoas que parecem genuínas e muito bem, pelo menos a maior parte do tempo. Outro site gratuito decente que usa células pack dot com pack de células é totalmente gratuito também. Novas limitações, seu conceito e estilos de foto são muito semelhantes ao no Splash, mas você tem um pouco mais de diversidade aqui. Cada lado da foto tem uma desvantagem, embora todos os usem, e uma foto particularmente boa será usada por muitas pessoas ao redor do mundo. Assim, as fotos que usam seus projetos da Web podem ser facilmente usadas por muitos outros Web designers para seus sites. Em algum momento, quando você passa por muitas dessas fotos congeladas de no splash ou empacotar células e outros lugares, você começa a reconhecê-las em muitos sites diferentes. Se o público vê esta foto sendo usada em outros sites para, ele meio que barateia o site. Não é tão único mais, embora o mesmo se aplica aos sites de ações pagos, mas porque eles são pagos significativamente menos quantidade de designers estará usando para usar essas fotos para o site. Além disso, os sites de estoque têm muito maior seleção de fotos do que os sites gratuitos. Então, por esta razão, em projetos bem pagos fora definitivamente recomendo que você use fontes pagas em vez de fotos gratuitas . Meu favorito de tamanhos de estoque pagos, Eu estoque que eles têm uma das melhores fotos de qualidade com modelos e cenas realistas olhando. Mas, é claro, você tem fotos falsas aqui, também. É inevitável. Enquanto as pessoas estão comprando esse gráfico, eu posso realmente colocar um número exato em quanto uma costa foto em um lado de estoque porque tudo depende de quantos você por planos de assinatura e às vezes outro na própria imagem. Eu ainda dá um pouco sobre o preço, seu lado e na costa muito ano entre 9 para $24. Mas então, com pacotes e assinatura mensal, você pode obter descontos muito bons. Outra boas fontes pagas estoque obturador, e é muito mais barato do que eu estoque. Com seus planos pré-pagos, você obtém uma imagem por US $10 no máximo. Pré-pago significa comprar um pacote de $50 por cinco imagens. Para usuários pesados, você pode obter uma assinatura mensal. Você vai obter uma certa quantidade de imagens gratuitas por mês que pode descer para US $3 por imagem e menos um dos soldados, mas opções decentes. Ele é um grande stock dot com aqui. O máximo deve ser de cerca de US $3 por imagem com pacotes de pacotes. Ao contrário de outros, big stock tem uma avaliação gratuita de sete dias que lhe dá 35 imagens gratuitamente durante esse período de avaliação . Lembre-se, no entanto, que eles pedem detalhes de um cartão de crédito, e você tem que cancelá-lo antes do último dia ou você será cobrado. Tome todas essas informações de preços com um grão de sal, porque estes são sites independentes e seus preços podem mudar com muita frequência. E também vai depender do país de onde você é ou onde você está verificando os preços devido aos impostos e ser 80. Mas no estádio, é assim que o preço funciona para esses três sites e muitos outros sites de ações pagos. Eu coloquei os links para esses sites gratuitos e pagos e um pouco mais na página de recursos, para que você possa sentir medo de verificá-los. 39. Assignment: encontrando fotos: Agora, vamos fazer um exercício divertido em que você procura 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, Paxil, Stock ou qualquer outro lado Encontrar a foto certa para seu projeto realmente leva tempo e às vezes, você precisa procurar em vários sites para realmente descobrir. Às vezes, pode passar algumas horas procurando a foto certa apenas para uma seção de heróis. Você também pode usar sites de anúncios 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 uma visualização prévia do download e você pode usar essa imagem de amostra Não se preocupe com o formato de qualidade ou com o tamanho dos danos. 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 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 pensar 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. Esse negócio ajuda outras empresas medir a felicidade de seus funcionários. Isso me dá uma ideia de que mostrar funcionários felizes funcionaria bem nesse quadro. Vamos para o nosso lado e começar procurando, literalmente , funcionários satisfeitos. Todos os três retornaram resultados bastante diversos e, como você pode ver, o BigStok, sendo o lado pago, retornou significativamente mais resultados do que unsplash Além disso, os resultados são bem diferentes. Bigsto, apesar de ter muitos resultados, tem muitas fotos inúteis, como essas pessoas de negócios aqui Na verdade, o Unsplash não tem um bom mapeamento de s e palavras-chave Como você pode ver, ele retornou muitas coisas irrelevantes. O Pixel parece ter feito um trabalho decente. Ao fazer a pesquisa, experimente com palavras-chave diferentes. À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 eu posso usar apenas o escritório e depois algumas palavras-chave secundárias como sorriso, e assim por diante. Aqui está um protap. 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 Por exemplo, eu gosto bastante da qualidade dessa foto. 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 e agora veja isso Resultados muito melhores do que uma pesquisa genérica. 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 deles tem. Suas próprias maneiras de pesquisar as imagens de um colaborador No Big stock, basta inserir sua palavra-chave na frente desse código curto que ele inseriu automaticamente. Isso refinará os resultados nas fotos dos colaboradores. Sem esse truque, eu teria que passar por milhares de fotos terríveis. Essa é uma opção muito boa para funcionários satisfeitos. Clique em baixar a pré-visualização e, em seguida basta colocá-la dentro do arquivo Figma Isso é tudo. Não há necessidade de projetar nada, deixe como está. Mostra funcionários satisfeitos, que é o objetivo desse negócio. A foto é moderna, o ambiente parece descontraído. Os sorrisos parecem genuínos e geral, os filmes fotográficos são calorosos e convidativos E pronto. Essa é a sua tarefa. Nenhum design envolvido. Divirta-se 40. 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. 41. 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. 42. Design Tricks: Este é um cartaz da campanha da BMW Spare Parts Advertisement. Diz B W am em vez de BMW na parte inferior, diz, use peças originais. Você entende o crime da piada. É muito inteligente, mas não é por isso que estou mostrando para você. Eu quero demonstrar um conceito de design enorme chamado Espaço Branco Espaços, Espaço vazio em torno de elementos neste caso em torno de Emma não ser W am título Whitespace chama a atenção para o objeto. Não é apenas mais fácil ver o objeto, mas torna-se muito mais interessante e importante. É a página inicial do Yahoo. Não há muito espaço em branco aqui. É difícil dizer o que é importante nesta página. Este, por outro lado, é uma história completamente diferente. A importância do espaço em branco não está apenas na atenção e na simplicidade. É também o seu design alcançar o seu objetivo principal. Se o objetivo principal de seus sites é que as pessoas pesquisem, então é melhor você se certificar de que toda a atenção é direcionada para isso. Quando chegamos ao Google, sabemos instantaneamente para onde Clegg e para onde direcionar nossa atenção. É muito menos exigente pesquisar no Google do que no Yahoo, e muito mais provável que as relações estejam indo no Google do que se distrair no Yahoo e esquecer o que viemos buscar em primeiro lugar. Por que o espaço não tem que ser branco. Pode ser de qualquer cor. É qualquer espaço não utilizado que esteja entre os elementos. O mundo inteiro é uma esquerda ou da época em que o design gráfico costumava ocorrer em Lee em impressão e em um pedaço de papel branco. Vamos dar uma olhada neste exemplo dizer que você está trabalhando no site da APP táxi. Você poderia colocar uma foto é um fundo, e não há nada de errado com ela em tudo. Ou você pode usar o espaço em branco para chamar mais atenção para a mensagem e o botão. By the way, lembre-se de matizar com sobreposições de imagem. Às vezes você não precisa fazer a foto em preto e branco. Você pode manter a imagem colorida e ainda adicionar cor alcançada sobre ela. Como neste caso, antes de eu saber há muito tempo, algo sobre um design gráfico, eu trabalhei como gerente de marketing e como mercado aqui, você precisa criar muitos materiais gráficos materiais de design como folhetos livro. As últimas revistas eram cartazes, anúncios no Facebook ou Google Edwards ou capas do Facebook ou outras coisas. E eu costumava trabalhar com um designer gráfico da Exxon que mais tarde se tornou meu mentor de design , basicamente, e quando nos sentávamos e eu olhava para suas iterações de design, eu sempre tinha esse comentário que eu olhava em sua, uh, qualquer composição estava fazendo. Às vezes, seria como um livreto para a nossa empresa, e eu dizia: “ Oh, Oh, você sabe, por que você não sente o espaço que é como muito, muito espaço vazio? E eu sempre e eu nunca gostei do espaço vazio quando ele estava fazendo os desenhos, e eu sempre o empurrava para tentar sentir aquele espaço vazio com algo porque eu sentia que estava vazio. Oh, cara, eu não tinha idéia naquela época. Esta é uma reação bastante comum com designers iniciantes ou clientes que não têm qualquer treinamento de design, mas estão olhando para o trabalho de uma espécie de vestimenta que os designers tinham, ou da perspectiva de um designer, eles têm essa insegurança sobre o espaço vazio, e eles sempre tentam preenchê-lo com algo para eles. Parece que se é espaço vazio e não é projetado o suficiente, isso em mente, nenhum usuário nunca vai reclamar de muito espaço vazio. No entanto, eles ficarão irritados com muita desordem na página. Meu 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 May. EP sempre faz isso magistralmente, usando um monte de espaços em branco de muito touros, um design que Mac livro parece super importante e muito mais valioso quando ele é exibido. Assim, o espaço amplo melhora quase tudo, mesmo em parágrafos. Lembra-se do 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 é realmente mais fácil do que projetar sem ele. Deter Rams é este designer industrial mais conhecido por seu trabalho para Brown? Ele cunhou estes popular 10 pessoa pose para um bom design. O décimo princípio de encerramento é este. Um bom design é o mais pequeno design possível, então não tenha medo do espaço em branco e faça menos. Isso é apenas um bom design. Há uma exceção com espaço em branco para itens que estão relacionados e fazem parte do mesmo contexto devem estar mais próximos uns dos outros, colocando espaço em branco entre eles. Vamos desconectá-los e nos sentiremos como objetos separados não relacionados, assim como aprendemos a lição sobre proximidade. Por exemplo, o título no parágrafo desta página espaço em branco irá desconectá-los um do outro . Isso faz e mais foco no parágrafo. Mas agora é um objeto independente, adicionando à quantidade de elementos que o espectador tem que processar. A versão original que tinha linha no parágrafo parece conectada devido à proximidade e será percebida como um único grupo, como aqueles links na barra de navegação. Devido à sua proximidade e agrupamento , será identificado como um único grupo. Instantaneamente. Eles tipo de agrupamento torna mais fácil para um visualizador processar os elementos na página, e é mais organizado e significativo. 43. 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. 44. 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 45. 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. 46. 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. 47. 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. 48. 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. 49. 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. 50. 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. 51. 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. 52. 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. 53. Assignment: design de página inicial da 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ê recriará totalmente a página inicial do Figma. O objetivo é combinar seu design o próximo possível, pixel por pixel. Ao fazer isso, você ganhará uma valiosa experiência prática. Você praticará a criação de elementos muito comuns do site , como barras de navegação e diferentes componentes, rodapés e tudo E faça tudo isso sem precisar se preocupar com cores, tipos de letra, fontes, layouts e fontes, layouts e todo esse material de design, porque você está apenas copiando o que já está Um pequeno passo de cada vez, assim como aprender a cozinhar ou tocar violão. Ok, então abra o link do arquivo Figma para este vídeo. Aqui você encontrará a captura de tela da página inicial do Figmas. Não é uma página inicial completa. Eu removi algumas das seções para simplificar as coisas. E pode não ser a versão atual de sua página inicial real, 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ê recriará exatamente essa página inicial Ao trabalhar nessa tarefa, quero que observe todos os princípios de design que você aprendeu até agora Observe como eles estão usando hierarquia e contraste, como os alinhamentos são feitos, observe coisas que você acha que eles funcionaram bem e aquelas que você acha que poderiam ser Com o que você já praticou no Figma, você sabe o suficiente para concluir esta tarefa, embora eu comece e demonstre algumas das partes Primeiro, vamos preparar alguns guias para sabermos onde alinhar nossos objetos Parece que eles não estão usando uma grade rígida aqui no site ou, pelo menos, eu não consegui descobrir, mas acho que não estão. Teremos que desenhar guias manualmente. Isso é bem simples no Figma. No menu, você procura a régua para poder ativá-la Depois de clicar nela, você obterá essa régua vertical e horizontal na página Para desenhar uma guia horizontal, clique e arraste a partir da régua horizontal e você obterá essa guia horizontal, que pode ser posicionada em qualquer lugar na página ou na moldura O mesmo vale para a guia vertical. Agora, onde desenhamos esses guias? Neste quadro, incluí a captura de tela da página inicial Está escondido agora. Se você habilitá-lo, poderá usá-lo como auxiliar ao comparar seu design com o original Enquanto isso estiver ativado, desenhe as guias nas bordas de alguns de seus elementos para poder definir o contêiner onde eles têm todo o conteúdo reunido. Por enquanto, isso deve ser suficiente para excluir um cara, basta selecioná-lo e clicar em excluir. Você pode ocultar a captura de tela agora. Em seguida, vamos pintar o plano de fundo. Vamos inserir a imagem do herói. Na verdade, salvei todos os ativos de imagem neste arquivo, para que você possa inseri-los facilmente em seu design. Eles estão dentro dessa guia de componentes. Componentes do Figma: elementos que podemos criar e reutilizar posteriormente Esse é um recurso interessante, e falaremos sobre ele com mais detalhes em uma lição posterior. 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. Na verdade, é daí que a Figma está pegando os componentes Se você excluir algo aqui, ele também desaparecerá do painel de componentes. Então encontre o herói fotografado e arraste-o para a página. A mesma coisa que você pode fazer com todas as outras imagens, incluindo o logotipo. Agora, vamos inserir o texto. O tipo de letra que eles estão usando é um telefone pago. Em vez disso, encontrei uma alternativa gratuita no Google Phones que parece semelhante. Se chama Carla Não é uma combinação exata, mas um substituto bastante decente. Eles estão usando um estilo ousado para o título. Vamos adicionar o parágrafo abaixo. Parece que tem 18 pixels de tamanho. Eu incluí esses textos na página aqui para que você não precise digitá-los manualmente. S. Agora, vamos adicionar o botão. Os botões são apenas ângulos retos com texto, então desenhamos um ângulo e apenas extraímos uma amostra dessa cor do botão Seus botões têm cantos arredondados. Para fazer o mesmo, podemos alterar raio do canto do nosso retângulo no painel de propriedades Não tenho certeza de quantas grandes vendas eles estão usando, então teremos que fazer isso a olho nu Quatro parece uma boa combinação. Por fim, precisamos adicionar o botão. Parece que o tamanho do texto é igual ao do parágrafo. Só precisamos centralizar as etiquetas com o retângulo desse painel de alinhamento Há apenas mais uma coisa que vou te mostrar como fazer, e o resto depende de você. Ainda não tivemos a chance de criar um campo como esse com uma borda. Como de costume, é apenas um retângulo sem uma cor de preenchimento, mas com uma borda No Figma, isso é chamado de traçado, que você pode adicionar a qualquer retângulo nas configurações do traçado no painel de propriedades Remova o preenchimento do retângulo clicando em menos no preenchimento ou simplesmente altere-o para branco A alteração da cor do traçado acontece como qualquer outra coisa. E você pode alterar a espessura a partir daqui, se necessário. Isso é tudo, agora você sabe tudo o que precisa. Uma última coisa, esta seção aqui tem um texto mais longo. Eu incluí esses textos na página aqui para que você não precise digitá-los manualmente. É isso mesmo. 54. Design da página inicial do aplicativo de chat: parte 1: Praticaremos a remixagem desses e dos próximos vídeos, e esse será seu primeiro projeto completo do design ao desenvolvimento Primeiro, criaremos uma página inicial e, em seguida, pegaremos essa página inicial e construiremos e desenvolveremos dentro do Webflow Vamos nos inspirar. E em vez de copiar o git como fizemos com a página inicial do Figma, vamos remixá-lo e usar nosso próprio conteúdo, nossas próprias fotos e nossas próprias cores e mudar algumas coisas se quisermos e Achei esse design muito bom Philip Oustich e Balcomb Vamos usar a Phillips Designs como nossa inspiração, remixá-la um pouco e criar uma nova página inicial com base 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 nossa moldura. Você verá que a largura da captura de é de 1.440 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 superior agora, mas a do conteúdo. Para medir qualquer coisa em ma, basta desenhar um retângulo e verificar as dimensões desse retângulo Tem 140 pixels, então usaremos isso como nossa margem para a grade. Pronto, agora é quase compatível com o layout deles. Existem algumas diferenças em seu layout como a barra 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 uma obra Vamos encontrar alguma inspiração de cores nas baboseiras. 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 salve S. Nós as colocaremos no Figma Eu gosto muito disso. combinações de azul, amarelo ou azul laranja são pares de cores empolgantes. 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. Ambos são muito bons, mas eu vou escolher a opção de golpe. 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. Fontes como Colors 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, 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 Sansari. Vou usar o mesmo imposto como amostra porque isso facilitará a localização de fontes semelhantes. Observe o quão simétricas são as letras. A letra O é um círculo perfeito em vez de um oval normal, e isso é uma boa dica. A maior tele é a letra A. Não é aquele A comum que você encontra na maioria dos telefones, é um estilo escrito à mão Essas são dicas suficientes para encontrar telefones semelhantes. Olha, Monsat é bem parecido. O O também é circular, mas os As são diferentes. Posso usar isso se não encontrar algo mais próximo. Mas aí, Poppins é uma partida muito acirrada. 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 próprio ou adquirir o telefone de outra inspiração que você escolher. Vamos combinar o estilo. Parece que o peso é meio calvo. 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 sua fase restrita específica, mas é muito provável que eles diminuam o espaçamento. 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 face 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, como se o Roboto pudesse até ser o mesmo, então podemos usá-lo 55. Design da página inicial do aplicativo de chat: 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 o raio dos cantos até que estejam completamente redondos Para o telefone, parece que eles estão usando texto de parágrafo menor, mas com um estilo mais espesso Isso parece certo. O segundo botão é chamado de botão fantasma. Essa 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 do site. Para criar esse botão fantasma, 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, portanto, não precisamos compactá-los em uma grade Às vezes é melhor. Mas, neste caso, são botões bem próximos e encolhidos. Vou colocar esses bad boys em uma grade. Vamos para nossa foto de herói. É uma colagem muito interessante. Você notou 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. Isso deve servir. Algumas dessas imagens funcionam, mas outras não. Ao combinar imagens, lembre-se sempre da lição sobre consistência. Imagens combinadas com estilo muito semelhante. Como se esses dois fossem semelhantes. 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á 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. Portanto, tenha isso em mente. Agora vamos criar essa forma de fundo pontilhada. Basta desenhar um círculo, escolher elipse entre as formas ou apenas aquecer Ao desenhar na abside, segure a tecla Shift para desenhar um círculo perfeito Em seguida, comece a duplicar os círculos na horizontal e na vertical para criar aquele pontilhado Selecione todos eles. Clique com o botão direito do mouse e selecione o grupo ou use um controle ou comando de atalho Ao posicionar seus pontos atrás da imagem, certifique-se de não ter uma sobreposição estranha com 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 simuladas para nosso produto imaginário, exatamente como estão aqui, e também algo que possamos usar mais tarde abaixo O que vamos fazer é encontrar uma maquete gratuita. Uma boa maneira é encontrar esses recursos para esboços, que podem ser importados para o Figma Obviamente, poderíamos pesquisar recursos do Figma diretamente, mas como essa é uma ferramenta relativamente nova, os recursos não são tão abundantes Sketch p sources.com é um desses lugares, e também o sketch é um bom lugar e também o sketch é Estou pensando em usar algum tipo de aplicativo de bate-papo ou colaboração em equipe como nosso produto. Realmente não importa, nada que se encaixe em nossos designs serve. Eu encontrei este anteriormente, o que é muito bom. Baixe e compacte. Agora, vá para o painel do Vikmas. E clique nesse arquivo de importação e quando não for importante, basta abrir o arquivo. Antes de importar seu arquivo, verifique se você não está tentando importar um arquivo Zip, porque geralmente é assim que a maioria dos recursos que você baixa da Internet chegam como um arquivo Zip. Se você tentar importar isso, isso acontecerá porque únicos arquivos que você pode importar no Figma são arquivos de esboço e arquivos Figma Então, se não for nenhum desses, então não vai funcionar. Então, o que você precisa fazer é primeiro extrair o arquivo do arquivo Z no MAC. Isso é bem fácil. Basta clicar duas vezes nele, extrair imediatamente e obter esse arquivo aqui. No Windows, acredito que é você clicar com o botão direito do mouse e, em seguida, há uma opção de extrair aqui ou extrair tudo, algo parecido. Em seguida, você clica duas vezes nele e ele será importado e transformado em um arquivo Figma, aqui mesmo, e então basta clicar duas vezes nele e você abrirá E é assim que você pode importar qualquer um dos recursos de esboço dentro do FICMA E para ser honesto, neste momento, estou atualizando este vídeo e, na verdade, muitos recursos do Figma estão aumentando ultimamente, então talvez você nem precise mais obter arquivos de esboço e explore os recursos do Figma, que você pode encontrar no meu site em que compartilhei uma página, que é vacas filly.com slash resources, e eu compartilho que estou atualizando este vídeo e, na verdade, muitos recursos do Figma estão aumentando ultimamente, então talvez você nem precise mais obter arquivos de esboço e explore os recursos do Figma, que você pode encontrar no meu site em que compartilhei uma página, que é vacas filly.com slash resources, e eu compartilho que existem muitos sites diferentes que têm recursos do Figma diretamente, para que você possa encontrar diferentes sites que fornecem recursos gratuitos, totalmente gratuitos, para fazer o que quiser do totalmente gratuitos, para fazer o que quiser do Figma, que você pode importar imediatamente com um link. Então, quando você abre esse arquivo, há uma coisa que também pode acontecer. Você vai conseguir algo assim. Você receberá este banner, que dirá telefones perdidos, e então você ficará em branco aqui. Se você não está recebendo esse pop-up, você pode estar aqui embaixo, talvez tenha clicado, faltando fundos O que você precisa fazer aqui é substituir esses telefones perdidos por algo. Basta selecionar o que está faltando, selecionar algum telefone de F M imediatamente, por exemplo, roboto, fazer isso e continuar fazendo isso para todos eles e clicar em Substituir fontes E todos os pontos fiscais serão substituídos por roboto neste caso É isso mesmo. É assim que você importa um arquivo de esboço para o Figma Vou salvar essa tela no arquivo Figma em uma das páginas Se você quiser reutilizar a mesma tela de bate-papo, basta acessá-la de lá, para não precisar passar pelo processo 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 funcionará. E também mude as fotos do perfil para as meninas. M. M. M. M. M. M. Mamãe hm. Eu saí muito bem, na verdade. Não 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. 56. 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. 57. Design da página inicial do aplicativo de chat: 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. Uma espécie de resumo da 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 nossa tecla de 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. É mais fácil para os usuários. Precisamos de um ícone de estrela. Vamos para flat icons.com e procurar um ícone de 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, credite o autor ou compre sua assinatura. Precisamos do formato SVG, que é editável no Poderemos mudar de cor se quisermos. Em sites como o flat icon, normalmente temos dois formatos de arquivo nos quais podemos baixar um ícone, PNG e SPG Sempre que possível, você deve usar o formato de arquivo SPG para itens como ícones e ilustrações Por quê? Por dois motivos. Primeiro, o SPG é 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 da P&G aqui oferece tamanhos diferentes, enquanto o SPG não precisa A segunda razão pela qual o SPG é mais pesado é devido às suas capacidades de edição Um SPG C 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 download do SP G é 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 na P&G 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 ícone plano, 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 o botão para preenchê-la. Mude o estilo para arredondado e faça o download no SPG. Podemos alterar o tamanho e a cor no Figma. Não precisa fazer isso aqui. Você também pode simplesmente copiá-lo daqui e colá-lo no Figma usando o Control V no PC e o comando V no Mac Agora, aqui está a beleza de usar o formato de arquivo SPG. Quero usar nosso próprio amarelo para poder simplesmente mudar a cor como qualquer outra forma no Figma Lembre-se desse truque organizado. Eu posso ajustar esse espaçamento a partir daqui. M. H. M. A. Tudo bem, parece elegante. Em vez de uma mesa com computadores, na verdade vou usar uma foto aqui. Talvez a foto de um escritório de equipe ou um pequeno empresário para representar o que diz o título 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 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 adicionar esses pontos atrás da imagem Mãe, ele. Sr., Sr. mãe dele. Isso parece muito bom, na verdade. O rodapé e pronto estavam perto da linha de chegada. Vamos copiar o logotipo e dar a ele uma cor 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, dividindo-o em seis Encaixaremos 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, com essa lacuna entre os links do rodapé e o logotipo e parecem muito boas 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 texto de exemplo realista em vez de texto fictício de Lorem Ipsum Porque, dependendo do painel de texto, você pode acabar precisando reorganizar um pouco o layout Além disso, repetir o mesmo texto parece feio. Vamos manter os ícones sociais e outros links no rodapé Nós já terminamos em. Vamos apenas adicionar o imposto sobre direitos autorais e isso é tudo. H Aí , agora, vamos consertar essas lacunas vazias. Mamãe. Mamãe. Estou usando 180 pixels como margem. Não existe uma regra para isso, verdade, é baseada na aparência. Mas o importante é ser consistente sempre que possível. Por exemplo, eu uso a 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, caso contrário, isso pode distorcer o conteúdo interno Quando terminar, selecione o quadro e pressione o botão play. Agora podemos ver a apresentação do nosso design. Olhando para a direita. Uma nota rápida sobre o modo de pré-visualização. Às vezes, você pode ter sua prévia parecida com esta , 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 a moldura, e nosso tamanho de quadro é de 1.400 por 50 pixels 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 existe 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 agora é 100%, altere-a para caber na largura Depois de fazer isso, ele se encaixará na moldura e na tela independentemente do tamanho da tela. Agora, isso, em raras ocasiões, pode acontecer outro problema, o que pode não ajudar, seja, se você tiver selecionado algo diferente das configurações do protótipo Para acessar as configurações do protótipo , sem nenhuma moldura ou camada selecionada, clique na tela Tudo é selecionado e, em seguida, vá para o protótipo e, a partir do protótipo, certifique-se de que nenhum esteja selecionado na lista suspensa do dispositivo Se houver um iPhone ou um ajuste personalizado ou algo parecido. Vou ter uma tela estranha do iPhone ou algo estranho aparecerá aqui no modo de visualização 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. Ele pode tentar visualizar algum outro quadro, certifique-se de selecionar o quadro da área de trabalho e, em seguida, clicar na visualização e, em seguida, visualizará o quadro correto. E pronto, escolhendo 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. 58. 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. 59. Noções básicas da Web: designer de fluxo: 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. Nossa página, à medida que projetamos , ficará 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 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 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 diferentes lados, ele mostra quais dispositivos populares estão usando essa largura ele mostra quais dispositivos populares 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 estilo spanel. É aqui que manipulamos e estilizamos cada elemento da página Você pode reconhecer isso. É meio semelhante ao painel de propriedades do Figma no mesmo lado Assim como o Figma, ele edita o que está atualmente selecionado. Há muitas propriedades semelhantes, como tamanho, topografia, nome da fonte, tamanhos e assim por diante, além efeitos como desfoque e Há mais abas na lateral, mas não precisamos nos preocupar com elas por enquanto Vamos revisar isso quando realmente precisarmos. E é isso. Essa é uma breve introdução do designer do Webflow 60. 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 escreveu no artigo quando ele estava revisando dizendo 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. HTMO 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 site eles devem ser, 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. 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. Esse é o incrível poder do Webflow. Estamos construindo nosso site completamente do zero, sem modelos estúpidos e temas feios Temos controle total sobre a criação de um site totalmente exclusivo e não precisamos codificar nada disso. O Webflow escreve o código para nós. 61. 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. 62. 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 63. 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 64. Webflow: configurações de tamanho: E estamos de volta. Agora, vamos dar a esse diblock 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. Portanto, esse é um código hexadecimal, que podemos copiar e usar no Webflow, e ele também trará exatamente a mesma cor idêntica Ao lado do Webflow, vá para o painel Styles e role para baixo para encontrar uma propriedade chamada backgrounds Há o mesmo campo para o HC, então basta colar seu código lá. Sempre começa com um sinal de hash, mas você não precisa copiá-lo Se você fizer isso, certifique-se de substituir também o sinal de hash existente. Agora precisamos dar ao nosso bloco d um tamanho semelhante ao nosso retângulo na figma, e é aqui que as coisas funcionam um pouco diferente em comparação com a O motivo é que os sites são responsivos. Eles podem crescer e diminuir com base no tamanho da tela. Na 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 nas quais 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 responde 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 inferior, 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 que o corpo encolhe e não há rolagem A próxima unidade é EM. Vamos pular esta porque é uma unidade baseada no tamanho do telefone e eu nunca a usei nunca a usei no contexto de larguras e alturas, então ficarei bem sem ela então ficarei bem sem VH e VW, por outro lado, 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. 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. Aqui está outra demonstração interessante de comparação de porcentagens com unidades de janela de visualização Temos caixas idênticas. No exemplo acima, vamos dar 50% de largura a uma caixa amarela. E na caixa amarela abaixo, vamos dar 50 VW No momento, eles são idênticos. Por quê? Porque as caixas azuis originais se estendem de ponta a ponta. Mas vamos dar a uma caixa azul superior uma largura de 900 pixels. Como esperado, a caixa amarela encolheu com ela para fazer 50% da largura das caixas azuis Mas veja o que acontece na versão inferior quando damos à caixa azul 900 pixels de largura. A caixa amarela inferior não mudou formato porque é relativa ao tamanho do navegador. E à medida que você muda de tela e reduz o navegador, a caixa amarela inferior diminui com ela porque precisa manter 50% da janela de visualização, não importa o que aconteça 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 dele. 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 caia para fora da tela geral. Se quiser, você também pode arrastar elementos diretamente na tela a partir do painel de camadas, não do painel de camadas, mas do painel de elementos. Mas geralmente não é isso 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 de imersão 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 teimosamente se manterá teimosamente se manterá 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 automóvel 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. Em outra dica, se a propriedade estiver em azul, significa que você a alterou. Você está enfrentando algum tipo de bug, tentando descobrir por que algo não está agindo da maneira que deveria Você pode escanear isso facilmente 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 infigma, porque quando a tela se expande ou diminui no celular, ela 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 o Bluebx cresça com o conteúdo. E o valor de 100 VH podemos colocar 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 65. 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. Lembre-se de por que os colocamos lá dentro, 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 FCMa, 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, ela destaca o espaço na parte inferior para que você possa vê-la visualmente 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. Assim, podemos 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 cabeçalho. Assim como na parte inferior, o Webflow adiciona as 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. Dentro do FIG, você 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 o ViCMA 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 afundando na parte inferior, mas nos navegadores mais altos, pode ser muito pequeno e o conteúdo pode parecer demais 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. Vamos remover a margem extra de 20 pixels que está no topo do cabeçalho porque ela está aumentando o preenchimento já existente 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, certo? Ele tem um layout central e eles colocam tudo dentro desse layout, 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 nas telas maiores. Isso não faz 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. E o contêiner padrão do weblos é, na verdade, um bom e velho bloco d, assim como uma seção, mas tem dois estilos predefinidos que o fazem funcionar como 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 Weblo 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 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. Se essa largura do contêiner for editável. Dependendo do 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, vamos fazer isso Isso nos dá um layout centralizado que é responsivo e bem ajustado a Exceto que talvez na menor tela do celular, o valor de preenchimento que definimos seja muito alto Nós 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, trabalhe 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ê editar, não conseguirá se livrar dele depois. 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 66. Webflow: tipografia da 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 iGMA aqui, temos uma seleção limitada de fontes. Nossos tipos de letra, pop-ins e Roboto 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, os telefones do Google, 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, os telefones ou o kit de digitação da Adobe são semelhantes. 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 fontes personalizadas apenas fazendo o upload delas. No nosso caso, precisamos de telefones do Google, então vamos encontrar pop-ins e, quando você os encontrar, selecione-os e será questionado sobre 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 fonte 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á as novas fontes imediatamente, então atualize o designer E agora temos Poppins e Robado 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 da fonte e abaixo está a cor do plano de fundo. Queremos alterar a cor na seção de tipografia, mas a cor de fundo do botão Weblo não usa uma unidade percentual para espaçamento entre letras, mas adivinhe para espaçamento entre letras, mas 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 até 100% 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. 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 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. 67. Webflow: buttons 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 bloco de links é um bloco diário normal , exceto que 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 no toque 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. tinta de e-mail abrirá um cliente de e-mail padrão que o usuário configurou em seu computador, por exemplo, Outlook ou 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 lá um cliente de e-mail padrão que o usuário configurou em seu computador, por exemplo, Outlook ou 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 fará com que nosso botão fique infixo e ele 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 aninhar muitos outros elementos, até mesmo outros DVblocks, mas podem agir como um link normal Quanto aos links de texto, eles não conseguem aninhar nada e funcionam exatamente como um texto normal. 68. Webflow: CSS Classes: Agora vamos adicionar nosso segundo botão para economizar tempo no estilo. Podemos duplicar nosso botão branco existente. Você pode escrever, clicar e, em seguida duplicar ou usar um controle C, controle V, um atalho comum 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 em uma próxima lição. Nesta lição, abordaremos o segundo comportamento de descoberta. 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 de um local 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. O quadrado azul dizendo 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 retornarã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ê a 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, fazemos minha linda aula de botões e nos inscrevemos na original. Botão. 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 fantasma tem muitas das mesmas propriedades do nosso botão principal. Podemos duplicar essas propriedades e criar uma nova classe a partir Agora podemos dar o nome que quisermos. Temos dois botões com as mesmas propriedades, mas com classes diferentes. Quando adicionamos um, as alterações não afetarão o outro. Dentro do CSS, podemos ver como essas classes são apresentadas. Começa com um ponto seguido por um nome que escrevemos. O Webflow gerará código em letras minúsculas, independentemente da maneira como você o escreve Dentro do designer, você pode usar letras maiúsculas, se quiser. Espaços não são aceitos em uma nomenclatura de classe CSS real, mas dentro do Webflow você pode usá-los O Webflow então transformará esse espaço em traços. Para qualquer alteração que precisemos fazer no elemento, precisamos 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 alguma classe aplicada a ele. Se você soltar um novo elemento, eles não o fazem. 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 de acordo com suas classes Vamos mudar o nome do nosso bloco que contém todo o nosso conteúdo. Nossa caixa azul, na realidade, é uma seção de heróis que contém tudo dentro dessa seção. Vamos dar um pouco de respeito e dar um nome mais apropriado, como seção Hero. De volta ao nosso botão fantasma. Agora que temos uma classe diferente, podemos estilizá-la como quisermos. O botão Ghost é feito do mesmo material, mas a sensação do fundo é transparente e, em vez disso, tem bordas. Você também pode fazer isso diminuindo o controle deslizante de opacidade. mesmo resultado 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. Agora vamos adicionar bordas. Isso podemos fazer diretamente na seção de borda , diz zero pixels. Se aumentarmos para uma célula de seleção, a borda será exibida e, em seguida, poderemos mudar a cor para branco. Parece complicado no começo, mas é bem simples. estilo mostra em qual borda queremos usar traços ou pontos de linha sólida 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 adicionar 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: não podemos usar preenchimento. O preenchimento só adiciona espaço dentro de uma caixa. Meça o espaço. Na Figma, usamos espaço de 30 pixels. Portanto, precisamos adicionar a margem esquerda de 30 pixels no botão fantasma ou a margem direita de 30 pixels no primeiro botão. Tudo bem, as coisas estão bem. Para recapitular Nesta lição, aprendemos como usar classes CSS, que no Webflow são gerenciadas por meio do painel de estilos Aprendemos como criar novas classes, como o Webflow cria classes automaticamente para nós e como duplicar Podemos reutilizar elementos existentes em nossa página. 69. 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. É exatamente assim que vamos construir nosso site. O Weflow facilita porque possui tecnologia de design responsivo incorporada Mas o design que criamos no Figma não é nem um pouco responsivo Antes de criarmos nossa página 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 infigma 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 correspondente de dois K, 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 Um pequeno netbook cobre basicamente 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 e o 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 isso superaria o propósito de ter uma tela muito grande onde você pudesse colocar muitas coisas na tela. Como 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 FICMAS de 1.400 pixels é um bom candidato para esse propósito porque está bem no meio Seu conforto como designer também é importante. Talvez você queira escolher um tamanho de quadro que corresponda à resolução da tela. Dessa forma, ao trabalhar no Figma, você poderá visualizar seu site como ele apareceria na tela 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 a resolução da tela apenas pesquisando no Google. Qual é a minha resolução de tela e como verificar 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. Isso é apenas uma coincidência em blocos. Mas não há grande necessidade de combinar o tamanho da moldura no Figma com o tamanho da tela do weblos 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 está trabalhando no ponto de interrupção básico do desktop, aquele com um ícone de estrela É 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 weblos 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 tamanhos de tela entre Figma e Webflow Se você ainda tiver dúvidas, me avise nas perguntas e respostas. 71. Webflow: flutuação e 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 DVblocks. Podemos colocar dois DVblocks 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 blog do Dip, ele selecionou esse novo, e o segundo Dibblog 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 blog div E vamos nomear esses blocos de dados adequadamente, à esquerda e à direita. Aí. 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. E uma melhor maneira. Vamos examinar cada um. Primeiro, a maneira mais rápida fazer isso é usando a propriedade float Podemos encontrar isso na seção de posição. Está escondido dentro do menu suspenso. Float é uma propriedade CSS que diz ao elemento que se posicione à esquerda ou à direita de outros elementos ao redor No nosso caso, queremos que a imagem se posicione à direita, então colocamos float diretamente no nosso bloco direito E observe aqui que eu coloquei o flutuador no bloco direito, não apenas na imagem Se você definir float somente na imagem , isso acontecerá Essa é uma imagem flutuante dentro do bloco direito, não afetando o conteúdo do bloco esquerdo porque o bloco direito ainda está em cima do bloco esquerdo. Embora essa seja uma maneira rápida colocar esses elementos lado a lado , não é a melhor maneira. Há uma coisa que o float faz da melhor maneira de agrupar o conteúdo do texto em torno do elemento Se tivermos uma seção como essa e quisermos que o texto contorne a imagem da mesma forma que aconteceria em um documento de texto, podemos dar à imagem um estilo flutuante e até mesmo adicionar margens nas laterais, para que o texto se contorne perfeitamente. Essas e algumas outras coisas são o que o float faz de melhor A segunda opção é usar colunas. O fluxo GOA tem esse elemento de layout predefinido para colunas. Dentro das configurações das colunas, podemos escolher muitos arranjos diferentes e quantas colunas queremos usar. Ele está usando o mesmo layout de grade de 12 pontos que usamos no Figma e pode ser dividido layout diferente, assim como nossa grade, em dois, três, quatro e assim por diante Dentro do navegador, você pode ver como essas colunas estão organizadas Podemos colocar o bloco esquerdo na coluna um e o bloco direito na coluna dois. Isso já é uma melhoria no flutuador, porque o conteúdo bebe bem Mas aqui está a verdade. Eu odeio colunas. Eles não são tão flexíveis quanto se pensa e, às vezes, coisas estranhas acontecem com eles. Parece poderoso e flexível, mas muitas vezes eu encontro limitações com colunas que paro de usá-las e começo a criar minhas próprias. Essa abordagem realmente me ajudou a entender melhor o desenvolvimento web e melhorar minhas habilidades. Eu aconselho fazer o mesmo. No final das contas, essas colunas são feitas de DVBlocks mais uma vez e têm propriedades CSS específicas aplicadas a elas. Então, vamos escolher a melhor opção. 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 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 Em seguida, 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. Em seguida, 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, onde você pode 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 Então, para recapitular esta lição, temos várias opções diferentes para fazer com que os elementos fiquem próximos uns dos outros Temos o float, um dos métodos mais antigos e simples. Float pode fazer com que um elemento fique à esquerda ou à direita do conteúdo, e os elementos ao redor meio que o envolverão Então temos colunas, que você sabe, eu odeio o final da aula. E eu aconselho usá-lo moderadamente e principalmente se você quiser economizar algum tempo E, finalmente, examinamos todas as configurações de exibição, do bloco à grade CSS, e abordaremos essas configurações de exibição individuais quando precisarmos delas. 72. Webflow: Flexbox: Continuando de onde paramos. Neste vídeo, discutiremos o Flexbox e como aplicá-lo ao layout da nossa 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 de e não o bloco D em si. 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 da caixa flexível. Deixe-me demonstrar como o Flexbox pode distribuir seu elemento filho Podemos alinhar os itens dentro da caixa de linho usando esta caixa de alinhamento Os controles são bastante intuitivos. É uma grade de três por três representando a caixa de linho. 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 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 de linho para preencher todo o espaço vertical da caixa de linho Se você aumentar ou diminuir a altura da caixa de linho, as caixas encolherão e crescerão com ela Na verdade, essa é a configuração de alinhamento padrão da caixa flexível Você pode ver isso quando eu redefino as configurações de alinhamento a partir daqui Está configurado para a esquerda e para esticar, e clicar em qualquer lugar nessa caixa de alinhamento removerá a configuração de alongamento e permitirá 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 Ok. Abaixo do menu suspenso x x, temos mais duas opções, espaço entre e espaço São como 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 da caixa de linho 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, os menus suspensos x e y são os controles reais da caixa de linho 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. mesmo vale para o eixo y, que é o eixo vertical. A caixa de alinhamento é bloqueada em um modo diferente se você selecionar esticar ou espaçar entre as opções No momento, como tenho um espaço ao redor selecionado, a caixa de alinhamento só permite que eu altere o alinhamento no eixo y. Para voltar ao normal, basta retornar o alinhamento x para um dos alinhamentos padrão O mesmo vale para o alongamento, só deixa você com as opções de alinhamento horizontal neste caso 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. E, como era de se esperar, eles funcionam da mesma forma, mas 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 viá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, a caixa flexível acaba se esticando com as crianças Mas se eu aumentar a altura da flexbox para algo que deixe 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 problema, que é bastante satisfatório quando resolve o quebra-cabeça, mas é difícil quando está olhando para a tela, tentando descobrir o que diabos está acontecendo 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 alinhamento x. E o espaço entre está sob 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 Webflos O que eu geralmente faço é pesquisar no Google Webflow University e o nome de uma configuração Normalmente, o principal resultado após o anúncio 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 pesquisando dentro da página pelo Controle F. Por padrão, crianças de linho tentarão caber em uma única linha, sobrecarregando a página mãe flexível, Felizmente, o Flexbox tem outra configuração que nos ajuda a gerenciar É chamado de rap e você pode encontrá-lo nesta lista suspensa. rap 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 do canto superior esquerdo 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. 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 rap só funciona se houver a necessidade de empurrar elementos para a próxima coluna ou para a próxima linha Como nossa caixa flexível não tem uma altura fixa, ela 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 embrulhar, isso aconteceria. Eles simplesmente transbordariam para fora da caixa de linho. 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 de 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 infantis do Flex por enquanto. O Flex Box 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 se não estiver acompanhando cada uma delas. Opção de layout que eu abordei agora. Depois de começar a construir e brincar com ele, você vai pegar o jeito. Em uma das tarefas posteriores, 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 construído dentro do Webflow pela equipe do Webflow, ótimo exercício de flexbox e uma ótima maneira de praticar o flexbox e as diferentes opções alinhamento Então, 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 à esquerda e à direita. Podemos aplicar o layout flexível ao contêiner, mas lembre-se de que criamos esse contêiner para ser um contêiner padrão em toda a página, mesmo para itens não flexíveis, por isso não queremos mexer Podemos simplesmente adicionar, 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 nossas opções flexíveis 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 perfeitos. No Figma, temos um conteúdo um pouco mais alto. Podemos conseguir isso adicionando uma margem de botão 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 fornecendo uma 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 Parece do jeito que queremos que seja. Sim, a imagem tem dimensões um pouco diferentes em comparação com o design fi Mac, mas isso é esperado. Estamos tornando as coisas responsivas para que elas diminuam e se ajustem aos Então, para recapitular, caixa flexível é 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: dependo Checklist: Então, o que você faz quando você experimenta agora uma espécie de barganha Web Flow? Usar algo não parece o jeito que você espera. Na maioria dos casos, esses problemas não são realmente bugs dentro dos designers de fluxo da web às vezes o pode parecer um bug porque você tenta usar coisas como tudo está funcionando corretamente e há como tudo, você sabe, há alguma coisa com lei web ou há um problema com um fluxo web ou talvez algo com um navegador. Mas, na maioria das vezes, esses são apenas estilos que você está aplicando dentro do fluxo da web. E eles não estão se comportando como você espera que eles se comportem. E eu meio que tenho minha própria lista de verificação que eu iria passar quando eu estou tentando, vamos chamar isso de adicionar depuração, como descobrir o que está causando o problema e ter maior essa lista de verificação. Vou vincular esta lista de verificação para que você possa ter, e é como algumas etapas que você segue quando você está tendo algum problema lá, nós vamos ajudá-lo. Eu diria que cerca de 80% do tempo. E eles colocarão você na direção direta para descobrir o que está causando um problema e como corrigi-lo. Mas há, obviamente, alguns dos casos que não se encaixam neste modelo e você precisará cavar um pouco mais fundo. Mas a maioria dos casos estes los pista vai cobrir. Então eu tenho alguns problemas aqui nesta página que eu criei e vamos com um MIT sem controle como isso funciona na verdade e isso, maioria dos problemas que a probabilidade, todos os problemas que atualizaram aqui, eles são algo que muitas vezes vejo de meus alunos quando eles estão fazendo perguntas como o que está acontecendo. E de alguma forma eu estou tentando consertar algo e não está funcionando e eles são problemas muito comuns que estão vindo dos alunos. Então eu só peguei lojas, problemas comuns, areia apliquei esta lista, faço isso para mostrar como vai funcionar. Agora e a coisa número um, passo ganhando a lista de verificação que eu tenho se é um problema de espaçamento, isso é sobre a questão do espaçamento de fronteira. O primeiro passo habilita o modo de raio-x e passe o mouse sobre diferentes elementos para encontrá-lo. O espaço vem de alguns elementos, margem ou preenchimento. Então, neste caso, temos um problema de espaçamento aqui, bem ali é esse espaço em branco extra. Nós não sabemos o que está vindo e o que estamos tentando descobrir e aqui como y. Então, há esse modo extremo bem aqui nas configurações do Canvas. Você pode ativar o modo de raio-x. E no modo de raio-x, você, quando você paira sobre os elementos, ele mostrará preenchimento e margem desse elemento em particular quando estiver verde. Isso é estofamento, ou quando é azul. Vamos ver aquela ali, aquelas linhas em ângulo tracejado no lado na parte inferior, isso significa que tem um estofamento. Então, neste caso, um título tem o preenchimento inferior bem aqui. E neste caso, uma seção de heróis tem preenchimento. Desculpe. Então eles estão indo. Cabeçalho tem a margem e a ação dos heróis tem o preenchimento. E o que eu gostaria de fazer é passar o mouse sobre dentro do navegador. Porque no navegador você será capaz de cobrir todos os elementos. Considerando que na tela às vezes você vai perder como um pai, porque eles são muito bem enrolado em torno de algum elemento analógico. Então, o que você pode fazer dentro do navegador é clicar neste ícone para expandir tudo. Se você pressionar o laboratório seis em grande escala, se você está pressionando e ele vai expandir todos os seus elementos. E onde quer que estejas, não tens de ir até ao Barnum, certo? Então, onde quer que você esteja, encontre esse elemento, em seguida, comece a pairar e veja onde ele pega e onde esse espaço fica destacado. Então, neste caso, cabeçalho dois tem uma margem no topo, e isso está causando esse problema de espaço em branco. Então agora você pode ir para aquela coisa e você pode ver que está correto. Há uma margem de dois pixels no topo. E mesmo que a seção em si não tem essa margem, tem margem 0 de alguma forma, a forma como HTML funciona neste caso, o cabeçalho está causando essas margem extra. Em vez de adicionar o espaço dentro. Então é por isso que este modo de raio-x é realmente bom e limpo e vamos mostrar-lhe de onde esse espaço está vindo. Se vem da margem, o nosso painel. Então, obviamente, se você mudar isso para 0, eles vão embora. A mesma coisa agora com a parte inferior direita, esta pequena lacuna aqui. Então vamos continuar. E lá vai você. Nós temos um parágrafo que tem este preenchimento inferior, que ela sente muito, novamente, margem inferior. E é um valor padrão que todos os parágrafos têm no meu caso aqui, provavelmente em todos os casos porque foi atacado. Mude para 0, e lá vai. Agora todo esse espaço se foi. Então agora isso foi um problema em que o primeiro passo funciona porque é problema de espaçamento. Agora. Às vezes é uma questão de espaçamento, mas não vai funcionar. Então, por exemplo aqui, novamente, é uma questão de espaçamento. Temos este parágrafo. Isso é algo realmente acontece com os meus alunos. Eles me enviam sua versão do site que eles estão trabalhando e eles terão espaçamento estranho fora parágrafos e tags e eles não entendem de onde diabos isso está vindo. Então, se fizer o raio-x aqui, não vai conseguir nada. Então, nem vou me incomodar em passar pelo corredor. Você não vai encher este espaço como uma margem ou um estofamento. Então o primeiro passo não funciona. Temos que ir para o segundo passo. Agora, na etapa dois, removemos a classe desta especificação para ver se o problema desaparece. Se isso acontecer, pule para a etapa seis. Então, no nosso caso, eu acho que é muito fácil identificar o que é o suspeito apontar esta questão que seria o parágrafo às vezes. Parece que sim, mas não são. temos passos para isso. Então parágrafo é este aspecto. Então o que vamos fazer é não tentar descobrir o que está aqui, que é a nuvem? O que é essa estrela que pode estar causando isso? Então não vamos fazer isso. Vamos remover essa classe, temporariamente, remover a classe, e suportar que foi consertado. Então agora sabemos um 100% que esta classe está causando esse problema. Então eu estou indo apenas para desfazer com o Control Z ou Command Z ou fazendo isso aqui e fazer. E então sabemos que é essa classe, que significa que é um dos estilos dentro deste painel, ou estilos azuis ou azulejos laranja geralmente vai para aqueles que são destacados azul porque eles são os que estão sendo diretamente dentro, afetando diretamente este elemento. Então, no meu passo, ele diz, se isso acontecer, então pule para o passo seis, e vamos para o passo seis. O que o diz? Depois de identificar a classe que está causando o problema, coloque a classe novamente no elemento. Fizemos isso e começamos a redefinir cada estilo que é na cor azul. Você não deve ser capaz de encontrar um estilo específico que está causando o problema. E ele tem então o que vamos fazer agora é não saber o que é. Eu nem entendo como, digamos, lei web ou HTML e CSS, mais absorvidos. Eu vou apenas para ir cegamente e remover tudo isso que eu nem sequer tenho que entender. Sem sequer entender, isso me dirá qual estilo está causando o problema. Então eu vou redefinir. Vou redefinir. Nada. Não está consertando. E eu vou apenas usar esse atalho aqui, que é a opção clique no meu caso, provavelmente em computadores Windows. E vou continuar a fazer isto. Tudo bem, ainda nada. Há outro azul aqui. Bam. Tudo bem. Então agora sabemos que vamos fazer. Agora sabemos que é exatamente ter o estilo que está causando o problema. E vamos ver altura 160 pixels. Então, mesmo que você não entenda por que isso está causando, e parece que é uma coisa correta. Você pode jogar com um valor r na maioria das vezes você vai chegar em por que isso está causando isso. Mas se não, basta alterá-lo, quando você fizer o reset, ele também irá dizer-lhe a pista de qual é o valor correto que não causa esse problema. Então, se eu redefinir isso, agora vemos, ok, ele diz 161%. Ok? Então, no meu caso, neste caso é 160 pixels. Então parece que este pixel, sendo pixel causando esse problema, que é verdade neste caso porque a porcentagem de uma altura de linha é calculada, um 160% significa que um 160 do tamanho da fonte de altura é relativo ao tamanho da fonte, mas 160 pixels não é um valor relativo e absoluto, o que significa. Esse espaço aqui, esse espaço tem que ser 160 pixels. É por isso que é assim, para que você possa mudar para 160%, certo? E isso está consertado. Sabe, às vezes vamos para outra questão. Então nós temos esse problema em que isso foi realmente enviado por um de meus alunos. Lembro-me que a questão aqui é que esses botões não estão alinhados à esquerda. E passamos por todos esses métodos e vemos como o modo de raio-x, nada vai aparecer. E se formos com, ok, então, por exemplo, este é o botão que estamos suspeitando que é um botão que está causando isso. Então, fazemos esse método a partir do passo dois, que é removido nossa classe. Então removemos essas duas cláusulas aqui, uma classe de combinação, certo? Então removemos um deles. Ok? Nada removerá outro. Aço nada. Ok. Então, quando faço isso, costumo devolvê-los. Então sabemos que não é o botão em si. Então, o que diz o terceiro passo? Parece que remover uma aula sobre o elemento suspeito não ajudou. Isso significa que a questão vem de outros elementos. Comece removendo classes do pai direto, em seguida, pais, pai todo o caminho, incluindo o elemento corpo até remover a classe que faz com que estes devem desaparecer. Se você encontrar um grupo de buggy, então pule sexo em dois passos. Então, novamente, estamos fazendo a mesma coisa, que é que precisamos encontrar a classe de um dos pais ou qualquer que seja o elemento que está causando isso, e removê-lo. E uma vez que removê-lo, veremos que ele vai corrigi-lo. E então, mesmo dentro dessa classe, vamos encontrar o estilo que está causando o problema. Então sabemos que não é esse elemento em si. Então temos que ir para o pai. maneira mais fácil de passar por esse pai de algo é olhar para a barra de navegação lateral aqui. Você tem um botão? Botão está selecionado e agora informa ou mostra a hierarquia de onde o botão está sentado nessa hierarquia de diminuída. Então é como uma árvore genealógica. Assim, o primeiro pai é o blog do que um avô é flexbox, recipiente bisavô e assim por diante até que o corpo. Então começamos com o primeiro pai que é diblock. Tudo bem, e vamos tentar remover a aula. Ok, nada. Não é definitivamente essa aula de diblock. Então eu desfaço para que possamos devolvê-lo. Então agora vamos para este próximo pai que é flexbox. Então tentamos e a caixa de fluxo, temos duas aulas aqui. Remova um nada, remova outro. Vejamos, ainda nada. Então vamos desfazer isso na direção de volta. Agora, próximo contêiner pai. Vamos ver. Remover. Lá vai você. Portanto, é a classe contêiner que está causando o problema. Então, qualquer que seja o passo foi aqui, direito, pulou um passo seis e vá para os passos, leva Passo seis, que é para redefinir todas as classes que estão em azul, começar a ganhar opção. E tremores. Nada, nada. Oh, lá vai você. Então vou devolver todas as outras aulas. E agora vamos ver. Então, uma linha quando estamos tristes, vai para a Irlanda à esquerda e precisamos no centro. Então, por alguma razão, e você não tem que entender isso neste momento. Vocês todos, em algum momento entendem a maioria dos problemas por que eles estão causando e, mas muitas vezes vocês verão, ok, então eu só preciso definir isso para o alinhamento esquerdo e problema é corrigido. E a razão pela qual isso está acontecendo, apenas para dar uma idéia, se você está curioso, é porque o contêiner tem centro de alinhamento de texto, que significa que qualquer elemento tributado está dentro do contêiner e não precisa ser Diretamente, certo? Não precisa ser diretamente. Pode ser qualquer um dos netos dentro, e herdará esse valor. E isso significa que todos os textos de início de imposto, elementos que são textos como serão centrados. Sim, Robbie, no centro. Porque é que isso se aplica ao botão? Porque os botões são bloco inline. bloco inline-se comporta como um texto, que significa que não é um nível de bloco que se espalha de uma borda para outra. Atende bloco inline que tem a borda, é borda off. Ele é definido pela largura ou pelo conteúdo dentro. No dual se comporta como tributado. E é por isso que você é capaz de colocar bloco de talentos de elementos como botão e compartilhar um botão aqui ao lado do outro porque eles se comportam como testes e eles são autorizados a ir na mesma linha em Enlighten significa na mesma luz. E assim, os problemas são corrigir aqui à direita, as laranjas sozinhas. E estávamos estudando isso no cilindro diblock e reiniciá-lo. Você deve consertar. Então isso é e eu acredito que eu só tenho uma última edição que vai cobrir outras instâncias. Então nós recuperamos passos três e problema não é o problema não está vindo de nenhum dos pais do que ele pode se tornar em crianças apertadas ou irmãos. E este é o caso, por exemplo, com esse elemento. Então nós temos isso, imagine que não está crescendo, é muito pequeno. Queríamos encher a maior parte deste espaço, mas não está a acontecer. Agora começamos com uma imagem com eles, ok, imagens, uma probabilidade muito pequena problemas da imagem e começamos com o mesmo processo e removendo a classe. Esta imagem nem sequer tem uma classe, então você pode ser essa imagem. Neste caso, às vezes há uma instância e isso pode ser a partir das configurações. Então, ao contrário da maioria das coisas outros elementos, ele elementos de imagem para eles têm um lugar extra onde você pode mexer com a forma como eles são exibidos. Em seguida, você tem essas configurações de largura e altura dentro das configurações de imagem. Então isso é uma coisa que pode ser editada sem você editar qualquer uma de suas estatísticas. Então, no nosso caso, não é que não seja a turma. Depois vamos ter com os nossos pais. E eu não vou passar por tudo isso porque não é muito bom, nós vamos fazer, é vamos verificar como esses shows crianças ou irmãos. Então imagem isso não vai nos mostrar eu, nem crianças ou irmãos. Então, temos que usar seu navegador para ver o que as crianças ou irmãos após elemento. No nosso caso, a imagem não tem muitos filhos. A não tem irmãos. A única criança solteira solitária de um quarteirão direito. Então a imagem das imagens não tem, ela, não tem filhos ou irmãos. O que você vai fazer é ir até os pais e, em seguida, verificar os irmãos fora de seus pais. Então paródias bloqueio direito eo irmão é bloco esquerda. E então o que você faz aqui é que todas as classes são removidas do bloco negro porque esse é o irmão fora do pai. Então vamos ver se isso corrige o problema, o que ele faz. Então sabemos agora que é uma classe que está causando um problema. Quando você passar por esta classe vírgula, você verá que não há nenhum dos estilos estão em azul. Então, o que a nossa lista diz sobre isso? Uma vez que você identificar a classe que está causando o problema, colocar o vidro de volta no elemento e começar com, ok. Então fizemos isso sem vantagens azuis. Então, o que precisamos fazer se redefinir estilos de blues, vamos para os passos acontecer. Se a redefinição dos estilos de impulso não ajudou ou se não houver estilos azuis, comece a redefinir os estilos na cor laranja. Porque a cor laranja, os estilos que estão no dia laranja também estão mudando algo sobre o elemento. Embora eles não sejam diretamente reconfiguráveis, porque eles estão sendo herdados em algum lugar da classe de combinação, em algum lugar do pai e assim por diante. Muitas vezes, este é o caso quando você está trabalhando com versões responsivas aqui, maioria das coisas estão em laranja porque elas estão sendo herdadas da área de trabalho. Então este é o método que você normalmente vai querer fazer um ano no responsivo onde você não vê nada do azul, então você tem que começar a redefinir. A laranja começa agora a redefinir aqui, há uma opção para redefinir. Então, o que você tem que fazer, descobrir qual seria o valor padrão e apenas alterá-lo manualmente para esse valor padrão. Então, com as margens e os paddocks, é mais fácil. Você sabe, é sempre 0, você só muda para 0. E você vê que isso não vai fazer nada. Em seguida, você vai para essa configuração de largura, configurações laterais. Aqui é um pouco diferente. Cada um tem um tipo diferente de valor padrão. Você verá essa semana. E altura eles têm auto como seus padrões. Mas no mínimo. Tem, e você pode verificar uma vez que este é preenchido e você não sabe o que é o padrão para um mínimo. Você pode verificar isso com base na altura mínima. Tem 0 pixel. Portanto, 0 pixel é o padrão de altura e largura mínimas, ou você pode mudar para 0. E agora esse é o problema. Agora sabemos que esse problema vinha da largura mínima y. Ok, agora vamos entender, então ele tem uma largura mínima de 800 pixels, que significa que ele está sendo esticado persistentemente. Além disso, ele precisa, e ele está empurrando a imagem Imagine não tem nenhum espaço para que ela cresça. Embora seja por isso que para corrigir esse problema, então você começa a encolher isso de um tamanho melhor. Então a imagem tem espaço para Roma e é isso. Então esta é a questão do molde que estou demonstrando aqui e mostra a maioria das questões. Há mais um passo que eu não cobriu e isso é geralmente quando você está lidando com algo como uma barra de navegação ou alguns componentes que estão vindo do painel de elementos de cláusula where. E se você passar por todos os passos e você fez isso e ele fez o reset laranja, você fez tudo, ainda não está funcionando. Em seguida, há um último passo que você vai querer fazer e em que ele é, você adicionar esse elemento ou um componente do zero. Por exemplo, se você está enfrentando um problema onde o agora enterrado você fez tudo, todos os passos que fizemos e ainda nada. Então o que você vai fazer é adicionar um completamente novo. Considerando que a barra de navegação navbar. E você meio que posiciona no mesmo lugar onde esse número deveria estar, e você começa a verificar. Este substantivo é completamente novo. Navbar tem os mesmos problemas não são. Então você vai ver se o novo número completamente estéril tem os mesmos problemas, então ele problema não pode ser largura do que r bar. Isso significa que é algum outro elemento pai de poder ou algo sobre os corpos às vezes, sim. Os estilos podem ser alterados no elemento do corpo aqui ou a partir daí. Identificação de elementos de amigo. E isso vai causar alguns problemas abaixo da linha ou algum pai e você sabe, ou se você ver que o problema não está acontecendo com a barra de navegação e, em seguida, você começar a recriar essa barra de navegação passo a passo em, você marcar toda vez para ter certeza de que você identificou o momento em que você faz alguma mudança aqui para combinar com o seu novo, embora mais velho, não incomodar estilo agora bar. E você identifica qual das classes cometeu o erro e causando o problema. E muitas vezes você vai ver que ele não vai ser dos estilos e pode ser de coisas como configuração ou coisas como o navegador onde algo está faltando, talvez um ícone está faltando e talvez um desses elementos está faltando lá. Mas pelo menos seremos capazes de, mesmo que você não identifique o que está causando exatamente o problema, você será capaz de se soltar. Então você não está desperdiçando seu tempo. Você será capaz de ficar bem. Sabe, e eu vou começar do zero. Eu tenho este antigo aqui e eu vou começar a aplicar o mesmo conteúdo do que o mesmo estilo e nosso recriado e apenas verificar passo a passo para ter certeza de que eu não ir muito longe antes de cometer um erro. É isso. Isso é tudo o que está dizendo estes, vamos ajudá-lo com um monte de seus problemas e vai economizar muito tempo e dor de cabeça. Então vou ver a lista de verificação. Esperemos que a maioria dos seus problemas sejam identificados usando a lista de verificação. 74. Webflow: Navbar (aplicativo de chat): Neste vídeo, adicionaremos barra de navegação à nossa página. O Webflow tem um elemento de barra de navegação padrão chamado Navbar Esse é um dos elementos pré-fabricados do Webflow que eu gosto de usar, 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 é feita essa Navbar. Então, dentro do elemento Navbar pai, 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. O menu de navegação é onde estão esses três vazamentos de navegação Como a maioria das outras coisas, é apenas um diblock normal, mas com alguns estilos padrão já aplicados a ele Podemos alterar essas vendas, se quisermos. Em terceiro lugar, 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 de flexibilização. 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 discar a barra de navegação para combinar com nosso 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 Navbar 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 weblo que não é tão largo quanto 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 botão, todos esses estilos e propriedades serão transportados para esse contêiner da barra de botã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 em SVG, 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 no Figma e inserir os espaços exatos aqui O espaço na parte superior da figura é de 42 pixels e na lateral é de 30 No Webflow, usaremos preenchimento para isso. Poderíamos usar margens, 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, o link inteiro 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 é o mesmo que os 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 seletor de cores weblos, você pode aplicar 20% de opacidade nesta caixa chamada 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 NAV Teremos que alinhá-lo a olho nu. Finalmente, vamos verificar a fluidez e a capacidade de resposta do nosso 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. Há 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, então, recapitulando, aprendemos como adicionar uma barra de navegação, a anatomia de uma barra e do que ela é feita, as configurações de uma barra e como ela funciona em dispositivos menores, aprendemos como adicionar um logotipo dentro de uma barra e como estilizar links dentro do 75. 70 Hover State NOVA UI: 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 no design da web Lembra dessa lei chamada Lei da Experiência do Usuário de Jacob? 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 seu site funcione da mesma forma 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. As pessoas esperam que links e botões reajam quando passam o mouse sobre eles. Adicionar efeitos de foco e fluxo da web é bastante simples e muito divertido Isso é gerenciado na lista suspensa chamada 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 Simples assim, o botão muda. A opacidade nos estados de foco agora mostra 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 criação do fluxo da web 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 mais sobre isso para botões Alterar a sensação de fundo é uma maneira boa e simples de adicionar um efeito simples de passar o mouse Alterar a opacidade da sensação de fundo é uma maneira fácil de fazer isso 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, como aquele botão na barra de navegação, adicionando fundo branco com 20% de opacidade para o botão na Ou podemos jogar com opacidade novamente ou preenchê-la com 100% Quando você o preenche com branco, precisamos alterar a cor do imposto para porque o texto é branco e não aparece. Felizmente, podemos mudar qualquer estilo mouse sem problemas Podemos transformar texto em azul. 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 sublinhado, isso é ridículo, quero dizer uma borda embaixo Podemos fazer isso em configurações de borda, selecione uma caixa que indica a borda do botão que esta mostra. Automaticamente. Selecione uma linha sólida como estilo. Caso contrário, verifique se você selecionou e não está definido em X e altere a cor para branco. Esse é um bom efeito de passar o mouse e é adequado para nós porque estamos usando um link como uma caixa inteira, não apenas como um texto 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 de dois pixels aumenta o espaço disponível dedicado aos links de navegação Isso empurra todo o conteúdo para baixo. Como podemos corrigir esse comportamento? Precisamos, de alguma forma, garantir que a altura do link de navegação não mude mouse por causa da borda Uma maneira de fazer isso é adicionar o tópico el border também no estado normal. Podemos torná-lo transparente para que não apareça dessa forma. A caixa de colocação de navegação tem um tópico El border de qualquer maneira. Portanto, ele não muda de tamanho ao passar o mouse. A única coisa que muda é a cor. Essa é uma boa solução. Os efeitos do foco, no momento, mudam abruptamente de um estado para outro É um salto brusco muito instantâneo. Esse salto instantâneo pode não ser muito, mas é muito rápido para registrarmos a alteração. Não parece muito natural e suave. Nesses casos, os web designers adicionam um pequeno efeito de transição. Há um pequeno atraso na transição. Podemos adicionar o estilo de transição aqui em uma lista suspensa Você verá que existem 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 Todo estilo pode fazer a transição. Por exemplo, você vê que o nome do telefone não está listado porque a alteração do telefone não pode ser animada. Mas muitas outras configurações de tipografia podem. No nosso caso, queremos fazer a transição de uma cor de borda, que é uma opção disponível. Existem mais dois valores duração e duração da flexibilização é o que diz exatamente Quanto tempo leva a transição em milissegundos? O valor padrão de 200 milissegundos é muito bom para a maioria dos efeitos de foco Você pode deixar como. 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 eles vão ou aceleram e o quão rápido ou lento eles desaceleram quando a Vamos deixar isso como padrão, na maioria das vezes funciona perfeitamente bem. Agora, se você passar o mouse sobre os novos links, notará que a borda aparece e desaparece sem problemas E isso é muito melhor do que aquela transição brusca que foi Uma pequena coisa a ser observada. O efeito de transição deve ser aplicado no estado normal, não no estado flutuante É assim que ela avalia os trabalhos. Ok. A mesma coisa 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 maneira mais simples de fazer isso, em vez de procurar um tipo de transição toda vez que quisermos aplicar alguma mudança de foco diferente Se um elemento tiver várias propriedades que mudam na fonte, na cor, no plano de fundo e nas sombras coloridas do mouse cor, no plano de fundo e nas sombras coloridas Em vez de adicionar três tipos de transição diferentes, podemos simplesmente adicionar um que se aplique a todos. A menos que queiramos fazer a transição efeitos diferentes em velocidades diferentes, mas essas serão ocasiões muito raras, o mesmo efeito de transição nos outros botões. E que temos uma transição de todos os botões e links de forma agradável e suave. Tudo bem, 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 de estilos Podemos alterar praticamente qualquer estilo dentro do estado de foco para que as mudanças de estado de regular para foco tenham uma aparência agradável e suave Podemos adicionar transições a partir das configurações de efeitos. 76. Webflow: seção média (aplicativo de chat): 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 análise. E eles voltam com 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. Nós 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 DO, 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 esse contêiner 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 todo o site Em 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 figura com espaçamento de 90 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. 77. Webflow: tags HTML: Vamos começar estilizando nosso título. Qualquer novo texto que adicionamos à nossa página por padrão é definido na fonte Arial. Não seria bom se você pudesse alguma forma, dar a eles um estilo padrão, como fazer com que todos os títulos se destacassem e todo o texto do parágrafo fosse 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 do seletor, você verá que 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. DV Block é 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. K. Além do H one, temos mais tags de cabeçalho Basta clicar nas configurações do título e você verá. Temos 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 no Figma, definitivamente poderíamos definir diferentes níveis de cabeçalhos 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, esse estilo será aplicado 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 adição à 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 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 na vida. 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 do Corpo A. 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 Obviamente, não estamos presos a esses valores. As tags H one e de parágrafo são seletores mais específicos, portanto, substituirão as 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 tags 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 ou todos os Estilizar texto é um hábito profissional. Isso economiza muito tempo no futuro. E é 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 a página, herdarão essa fonte da tag body até que a substituamos outras tags ou classes mais específicas 78. Webflow: cursos de combinação: Portanto, a seção do meio tem apenas três elementos, título, parágrafo e uma imagem. Então, precisamos dos elementos de codificação no weblo. 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 otimização de rotina. Obviamente, execute a imagem otimizada para compactar o arquivo PNGs e JPEGs que você deve sempre compactar. Os SVGs também podem ser compactados, mas na maioria das vezes isso não é necessário mas na maioria das vezes isso não é necessário. Eles são pequenos o suficiente. R 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 D 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 seção de heróis É 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 seletor, button, que é a classe base, e blue, que é a classe combo 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 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á nenhum estilo da tag H one ou da tag de título, somente da tag de parágrafo E todas essas tags herdam alguns estilos da tag body E quando sobrescrevemos estilos, estamos substituindo de baixo 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 combate 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 assim por diante Isso é exatamente o 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 editar exatamente esse 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 todos os links. Por quê? Porque os botões são links regulares. Nós apenas os arquivamos para que pareçam botões. Portanto, se definirmos alguns estilos em todas as tags 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 la, temos um contêiner centralizado. Algumas coisas que precisamos estilizar em nossa seção : a largura do parágrafo e o espaçamento. Podemos obter o espaçamento do nosso design. 30 pixels na parte superior e 16 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 Então, 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, Tereca, 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: rodapé (aplicativo de chat): I. Na última seção desta página, o rodapé. O layout é 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. Claro, há uma opção de usar o elemento de colunas do Webflow Eu me encaixaria perfeitamente em nosso layout porque ele é baseado na grade dois de 12 pontos. Mas você sabe o quanto eu amo essas colunas, então não vamos usá-las. Em vez disso, criaremos nossas próprias colunas usando o flexbox. Como de costume, vamos adicionar a seção e um contêiner dentro. Adicione outro bloco e aplique nossa classe de caixa flexível usual a ele Agora, vamos adicionar outro bloco d dentro do qual nomearemos como coluna de rodapé Vou dar um plano de fundo temporário e me esconder só para ver o que estamos fazendo. Assim como em nossos designs, usaremos seis colunas. Essas serão colunas de largura igual. A caixa flexível inteira será dividida 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, na verdade, fazer com que a web flua para nós, assim como o Figma Dentro do tipo de preenchimento de largura 100% dividido por seis. Se duplicarmos essas seis vezes, você pode ver como elas preenchem 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 coboclasse primeiro e remover a margem esquerda e a mesma coisa na última coluna Tudo bem Agora, vamos colocar o conteúdo nas colunas correspondentes. Em vez de usar parágrafo para texto normal, temos outra opção para um texto chamado bloco de texto, que é o que vamos usar para esse slogan abaixo do logotipo. O bloco de texto é basicamente uma imersão regular com texto dentro dele Funciona da mesma forma que um elemento de parágrafo, mas eles têm finalidades diferentes. Você deve usar parágrafo para texto longo de várias linhas e conteúdo principal da página, e blocos de texto para tudo o mais que não seja um parágrafo de título ou um 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 d 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. Dessa forma, as duplicatas levarão a classe. 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 fluxo da web É 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 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. Para corrigir isso, basta selecionar outra cor e selecionar o cinza novamente. Não precisamos sublinhá-lo, que podemos remover selecionando decoração não abaixo do texto Precisamos de algum efeito de foco para este link. Caso contrário, eles não parecerão links. Podemos simplesmente transformá-lo em azul no estado de foco. Essa é uma opção simples e eficaz. Poderíamos adicionar um efeito de transição de foco 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. Isso os coloca lado a lado. Por que isso, você consegue adivinhar? Porque a exibição de links está definida como em linha. Isso significa que flui como texto, o que é. 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. Na verdade, não é um problema, é mais uma experiência de usuário ideal. 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 , seria estranho na barra NAB Então, como podemos fazê-los se empilhar uns sobre os outros sem que se estendam de ponta a ponta Usando a caixa flexível. Podemos dar ao pai um layout flexível e dar a ele a direção vertical em vez de horizontal Em seguida, deixe uma linha, certifique-se de dar uma 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 aos títulos desse rodapé, vamos estilizar uma das tags de cabeçalho, talvez S H três Pode ser o nível H dois certo que poderíamos usar para algo maior, um título 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, todo o t será recheado assim 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 em nossas configurações de caixa flexível. 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 comp a essa caixa flexível antes de fazermos qualquer alteração Não estrague outras instâncias. O alongamento é melhor porque as colunas vazias se estenderão por duas 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 contato como link. Por exemplo, para vincular o endereço de e-mail, para que ele abra uma nova janela de e-mail quando o usuário clicar 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, URL do Google Maps de Rico Linka Verifique a abertura de novas janelas 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 da caixa flexível 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 ao final da página. 30 pixels de distância da parte inferior. Mas no fluxo da web, é muito maior porque nosso bloco de seção tem um preenchimento de 90 pixels Precisamos mudar esse preenchimento de 90 para esses 30 pixels. Mas antes de fazermos isso, precisamos adicionar uma classe de combinação. E aí está. Acabamos com a versão desktop da nossa página. Vamos para o modo de pré-visualização e ver como está tudo. Para recapitular, construímos o rodapé usando um layout de caixa flexível 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 81. 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 tinha 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. É onde 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 Combo 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. Diga um estilo específico 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 Você pode ver isso na régua abaixo. 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 Na parte inferior, 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, como fundo rosa, no iPhone seis. 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 feita 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. seguir, vamos começar otimizar nossa página para esses dispositivos, começando pela seção de heróis. 82. 77 Tablet NOVA IU: Tudo bem, então vamos começar com uma seção de heróis. Vamos usar um por um para cada dispositivo e otimizar o estilo. Primeiro, a visualização do tablet. Quais problemas podemos identificar? Aqui temos a imagem que está encolhendo demais por causa da falta de espaço O conteúdo à esquerda tem um peso mínimo. Se você se lembra, isso significa que a imagem está sendo atingida. Então, temos uma barra Nab que precisa ser consertada. 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 essa seção. E segundo, por causa desse preenchimento similar de 20 VH. Vamos ver se podemos ajustar os links de navegaçã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 Configurações. 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 de encontrar e navegar. mercado imobiliário em tablets e dispositivos móveis é muito importante. O espaçamento nesses dispositivos precisa ser muito menor do que o que faríamos em uma mesa Vamos remover o grande preenchimento aplicado a essa 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. O que fazer com a imagem de um herói? Ainda é bem pequeno. Em comparação, o conteúdo à esquerda é muito grande e está empurrando a imagem para o desktop Tínhamos espaço suficiente para poder usar título tão grande, mas aqui não temos Assim, podemos começar a reduzir os tamanhos no bloco esquerdo. Então, reduzimos o conteúdo, mas a imagem não está crescendo Por que isso? Porque temos configurações de largura mínima aplicadas ao bloco esquerdo. Mesmo que o conteúdo esteja diminuindo, a caixa em si não está Vamos alterar 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. O layout do tablet para a seção de heróis está pronto. Todas as alterações que fizemos não foram refletidas de volta em nosso desktop. Ainda está do jeito que deixamos. Agora, vamos passar para as visualizações móveis. 83. Responsivo: seção do herói - móvel 1: Como mencionei em um vídeo anterior, o estilo muda em cascata para telas menores Todas as alterações que fizemos nesse 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á, ele ainda está definido na horizontal. Isso mostra o quão incrível é a caixa flexível. Podemos alterar o layout sem alterar a estrutura HTML e definir esses estilos em dispositivos específicos Mas antes de fazermos essas alterações, vamos dar à nossa caixa flexível uma classe cobo porque estamos usando essa caixa flexível 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 em um modo de 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 a seção. Já reduzimos isso na visualização do tablet, mas reduzimos ainda mais O mesmo aqui para a margem do parágrafo. Quatro pixels parecem distantes. A foto é um pouco alta demais. E a maior parte 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 alta porque se você ocultar o valor , isso acontecerá. alteração da altura não preserva a proporção, mas o valor da largura sim, então é melhor usar imagens para reproduzi-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 ocorrer 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 uma largura máxima de 500 pixels a uma imagem , permitimos que ela cresça até 500 pixels, isso acontece, ignorando as dimensões do elemento pai Esse 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. Ou tem uma largura especificada nas configurações. 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 escadas 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 queremos. 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. 84. Responsivo: seção do herói - móvel 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 O mesmo na barra de navegação. Em uma barra, o bloco de marca tem um preenchimento padrão aplicado a ele 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. Por isso, 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 menor e mais estreita, temos que torná-la muito Caso contrário, obtemos uma palavra por linha, o que não é ideia. Mas se você verificar, a tela super estreita é para telefones Android 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 os 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 células p, podemos usar unidades responsivas para a fonte Nesse caso, VW para a largura da janela de visualização. Se dermos ao telefone cerca de 14 VW, ele deve encolher e crescer bem com 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. Lembra qual configuração de exibição faz isso? Bloco de exibição, que vai esticá-los 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á pronta. Vamos estilizar a barra de navegação no próximo vídeo. 85. 80 Nav Menu NOVA IU: Até agora, estamos usando nossas versões responsivas. Neste vídeo, vamos estilizar o botão do menu da barra Nab, ou como as crianças em idade escolar o chamam de menu de hambúrguer, porque o ícone parece um No momento, parece muito horrível. Não se preocupe, estilo, 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 simplesmente excluir o ícone e adicionar um elemento de imagem dentro do botão de menu, que é um simples mergulho e fazer o upload seu próprio ícone no formato SPg ou PNG Embora haja uma vantagem manter esse ícone padrão, porque a cor é editável nas configurações do telefone e isso facilita a alteração das cores Também poderíamos criar nosso próprio ícone de menu a partir de blocos de mergulho. Às vezes, faço isso quando estou criando uma animação super elegante para meu cliente Quase tudo é possível no Webflow. Por enquanto, vamos primeiro usar o ícone padrão. A cor, vamos precisar disso em branco. Podemos mudar a cor do telefone para branco. E isso funcionará ao estilizar esse elemento. Limite-se a estilizar o 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. Vamos reduzir o acolchoamento. Um pequeno preenchimento é o que controla o quanto disso é clicável e visível no 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 alterando a tela da barra Nab para caixa flexível e fazer tudo isso, mas uma opção mais simples é simplesmente adicionar uma margem superior no botão e puxá-la Temos um tamanho, desta forma, você pode vê-lo melhor em retrato. E 27 ou algo parecido parece uma boa escolha. Não precisamos adicionar uma animação de foco aqui, porque ela é exibida apenas em celulares onde não precisamos usar o mouse, 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. Basta selecionar qualquer elemento da barra de botões, acessar Configurações e clicar em Mostrar ao lado da opção de 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 plano de fundo e é organizado horizontalmente Mas se fizermos alguma alteração no desktop, essas alterações serão transferidas para a visualização móvel, assim como qualquer alteração de layout. Se um dia você ver links para celular, organize o Play, verifique se você fez alguma alteração na versão para desktop. Dentro desse bloco de menu de navegação, temos todos os links, incluindo o botão para iniciar o menu inteiro Primeiro, iniciaremos 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, será consistente com nossa rede no momento. Os links são anotados um pouco por dentro porque têm seu próprio preenchimento , que removeremos assim que estilizarmos os links Vamos também adicionar preenchimento superior e inferior, mas torná-lo de 30 pixels em vez de 60 No momento, temos estilos que estão sendo herdados da área de trabalho, como o sublinhado ao passar o mouse e os preenchimentos Vamos consertar esse preenchimento primeiro. Não precisamos de acolchoamentos laterais. 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 de foco, que podemos encontrar aqui em Estados, clique no X abaixo do botão de borda para desativar a borda do botão Ao testar isso, você verá que a borda ainda aparece. Isso porque temos essa fronteira habilitada, não apenas no porto, mas também em um estado normal Também precisamos removê-lo de um estado normal para evitar esse comportamento engraçado. Agora não temos porto. Agora, primeiro o botão, 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 alguma propriedade no elemento pai está fazendo isso. Há duas propriedades que podem alinhá-lo ao centro Primeiro, o layout da caixa flexível, mas nosso menu N não é uma caixa flexível . Não é isso. O segundo é um alinhamento de texto normal que faria sentido porque os elementos do bloco embutido podem ser alinhados usando o alinhamento Mas se verificarmos o alinhamento do texto do menu de navegação, ele será definido para a esquerda 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 O Webflow, por algum motivo não reflete isso nos estilos Sempre que você se deparar com algo assim, basta seguir sua lógica. E se o que você vê não faz sentido , brinque com os estilos. E às vezes você notará que eles estão apenas fingindo. Uma coisa a observar é que você precisa aplicar o alinhamento ao menu de navegação principal, não ao botão Nada acontecerá se você aplicá-lo ao botão. 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 Vamos totalizar esses 240 aqui. 20 do último link e 20 para a margem superior. O mesmo vale para a margem inferior. O espaço real na parte superior está a 30 pixels do preenchimento do menu e a 20 pixels do preenchimento Para corresponder a esse total de 50 pixels. Vamos adicionar os 20 piores no botão aqui. Está parecendo 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 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 alterar 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. Lembre-se de que o comutador show height não atualiza instantaneamente o lote de estado aberto Você precisa clicar no botão do menu novamente e, em seguida, o estado será atualizado. 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 quer que você o adicione, ele não o adicionará no estado aberto. 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 alterar a cor do fundo e também menos 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 se conectarão ao menu. Para fazer isso, precisaremos selecionar a opção de cantos individuais dentro das bordas. Em seguida, selecione os dois primeiros. E então coloque algo como seis pixels. Vamos testar nossos resultados na prévia. Está tudo ó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. Basta selecionar o menu de navegação no Navigator e alterar o preenchimento 60-30. Feito isso, criamos com sucesso o menu de hambúrguer para dispositivos 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, nas configurações, abrimos o menu e estilizamos o item do menu, definimos 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. No próximo vídeo, continuaremos com o restante da página. 86. 81 Overflow NOVA IU: Agora vamos avançar 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 é a parte superior e inferior da seção Como mencionei antes, precisamos de um espaçamento um pouco mais apertado em dispositivos menores Portanto, 60 pixels devem ser uma boa paisagem, temos um estouro Ao ver o excesso na página, encontre o elemento que está indo além das margens principais Essa será a causa do problema. 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 nem na área de trabalho, vamos apenas estilizá-la na versão para desktop em cascata 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 essa inclinação, largura e altura exatas , são 900 pixels por 300 pixels Se colocarmos mais conteúdo nesse bloco de imersão, o conteúdo transbordará Por quê? Por ter uma altura definida, 300, 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. Queremos manter a caixa nas dimensões exatas. Se você verificar as configurações de estouro desse bloco, 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 dentro dele Mas, nesses casos, temos outra opção para rolar o conteúdo interno. 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, a última barra de rolagem automática desta tela, 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 em nível de rolagem apenas para observar em 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 Nesse caso, nós o colocamos nesse bloco branco. Se o colocarmos no parágrafo, isso não fará nada além de rolar o conteúdo Outro uso comum da configuração de estouro é quando queremos recortar conteúdo que geralmente é feito com imagens Nunca queremos recortar texto. Provavelmente, 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 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. Nós cuidaremos disso quando chegarmos lá. Agora vamos fazer algo sobre essa visão muito restrita da seção Iro. Alteramos o preenchimento para 30 pixels, mas nunca fizemos isso nesta seção Vamos fazer isso. Vamos diminuir também o preenchimento vertical para ser mais econômico e espaçamento Na verdade, vou diminuir isso na paisagem também porque o espaço vertical é ainda mais importante na paisagem. Redefina o valor no retrato. Se você os alterou em algum momento, é melhor herdar valores do que repetir os estilos, pois isso apenas adiciona código extra que não precisamos Por fim, vamos fazer algo com as manchetes grandes demais para dispositivos móveis Agora lembre-se de que o título não é uma classe. Nós estilizamos o T. É assim que vamos estilizar isso. Selecione todos os títulos H um no menu suspenso do seletor e, em seguida, altere os estilos que alterarão todos os títulos H um para retratos móveis, mas não Todos os 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 tirar a imagem do site e recortar o estouro usando o que acabamos de aprender Primeiro, precisamos aumentar o tamanho da imagem quando se trata de alterar o tamanho das imagens em visualizações responsivas Nunca use essas configurações. Isso altera as configurações de HTML da imagem e isso mudará o tamanho em todos os dispositivos. Além disso, arraste 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 o estilo CSS nos dá flexibilidade para ter tamanhos diferentes em dispositivos diferentes. Para fazer isso, selecione a imagem, você verá essa largura máxima de 100% que 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, adicionaremos essa configuração exata e a definiremos em algo como 170%. Agora, ela sai da página e fica Agora podemos ver um pouco mais de detalhes da imagem, mas temos uma imagem transbordando assim O que nós 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. Como o contêiner não vai até a borda, a seção sim, precisamos colocar aquela estrela de transbordamento na seção Mas vamos adicionar a classe combo a ela para que ela não afete todas as seções Lá vamos nós. Agora, a imagem está sendo recortada diretamente na borda da seção Aprendemos um conceito importante de transbordamento e como usá-lo em nosso benefício Overflow Visible é uma configuração padrão. Ele mostrará qualquer conteúdo que ultrapasse as bordas do elemento pai. Overflow hidden vai recortar o conteúdo exatamente como fizemos aqui Uma rolagem automática e uma rolagem automática permitirão que o conteúdo role para dentro do contêiner Mas a opção de rolagem exibirá uma barra de rolagem persistente mesmo quando não houver nada para rolar. 87. Responsivo: seção CTA (aplicativo de chat): A seção de ação de culto não parece ruim logo de cara. Podemos fazer alguns ajustes 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 do telefone pode ser muito grande. Se estivéssemos fazendo um site completo, encontraríamos mais limitações desse tamanho de título Eu prefiro beliscar 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. 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 ao bloco esquerdo uma largura mínima. Três 40 parecem bons. 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 da caixa flexível para vertical e alinhe para a esquerda Não se esqueça de criar uma nova classe de combinação primeiro, ou ela alterará todas as caixas de linho na página Lamento o uso da classe compartilhada para todos esses flexbox. Deveria tê-los estilizado individualmente Bem, é assim que você aprende. 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. Digamos que 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 imagem em si, exceto no caso do vídeo anterior em vídeo anterior 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 De qualquer forma, voltando à nossa seção, largura máxima de 580 pixels está boa aqui Não gosto do quadro de órfãos na manchete, então vamos escolher o bloco certo, para que a palavra pequeno passe para a próxima linha. Além disso, vamos analisar esse espaçamento entre os botões e as estrelas É parte dessa linha cinza. Vamos aumentar um pouco o espaçamento ao redor do conteúdo. Está muito perto da imagem e do rodapé. Finalmente, a versão em retrato. OK. Aqui, precisamos remover a largura mínima definida no bloco direito. Bom. O imposto principal é muito alto para o retrato Então, vamos reduzir isso também. 27 pixels parecem corretos. Nas estrelas, vamos organizar o layout para que fique vertical em vez de horizontal. Esse é um layout de flexbox, então podemos alterná-lo com um clique Verifique se você tem uma classe de cobo aplicada. Tudo isso parece elegante. Acabamos de deixar o rodapé e pronto. 88. Responsivo: rodapé (aplicativo de chat): Então, o que temos aqui? Esta é uma caixa flexível 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 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 do 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 justificadas para a esquerda. Há uma 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, selecionar A não propriedade display 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 elas pularem para a próxima linha, isso criará esse espaço extra Vamos remover a margem esquerda e usar apenas a direita. Mas não se esqueça de editar uma coluna que tenha 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 porcentagem aplicada a eles, que é bom no desktop, mas se torna desnecessário nesse tipo de layout. Então, vamos nos livrar disso. Agora, essa coluna com é 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 ajustamos é 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. 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, coisas 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. Então você tem essa experiência prática de como começar tudo com o cliente com coisas como resumo do projeto, wireframes e designs e , em seguida, migrar para o Webflow e desenvolver CMS e blog dentro do Webflow, e depois interações e , e depois interações e finalmente, entregar tudo, publicar com um domínio personalizado 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 trabalha como freelancer enquanto procura emprego, você também pode continuar com peças avançadas aprimorar suas habilidades e melhorar 90. 85 Publicando NOVA IU: Vamos finalmente publicar nossa página. Esse é um teste bem simples. Vá para Publicar e clique em Publicar nos domínios selecionados. Espere um momento. Lá. Nossa página da web perfeita em pixels está ativa e operacional como um personagem. 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 trabalharemos 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 então poderemos publicar nosso site em nosso próprio domínio. Os planos de hospedagem 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 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 Vá para a publicação e edite esse campo como quiser. Desde que não tenha sido usado, clique em Salvar. 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 favicon. No momento, ele está mostrando um Favicu padrão do Web Flows. Mas podemos alterar isso nas configurações do projeto Existem dois ícones aqui. O primeiro é esse favicon que aparece em uma guia do navegador e o segundo é um clipe da web 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, 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, com a aparência de você pode adicioná-lo à tela inicial e ele será salvo ao lado de todos os seus aplicativos, com a aparência de qualquer outro Eu nunca usei esse recurso, mas como temos uma opção, devemos mudar esse ícone aqui. Precisaremos criar um ícone no Figma, que é apenas um arquivo de imagem normal E precisamos criar algum ícone a partir do nosso logotipo. Basta adicionar uma nova moldura com o tamanho de 256 por 256 pintada de azul e talvez dar cantos arredondados. Em seguida, copie o logotipo. Exclua tudo menos a letra C, amplie-a exportada em PNG e esse será o nosso clipe da web Quanto ao Favican, só precisamos reduzir isso para 32 por 32 O redimensionamento regular não funcionará. Não vai escalar proporcionalmente o retângulo e o imposto Em vez disso, precisamos usar a ferramenta de escala, que podemos encontrar na ferramenta de movimentação. A ferramenta Scale redimensiona os objetos agrupados proporcionalmente. Se houver um retângulo de imagens fiscais, ele bloqueará as proporções de todas as camadas internas e as redimensionará É uma pequena ferramenta muito útil e exporte novamente em PNG. Em seguida, faça o upload de cada um para seu local dedicado. As dimensões desses ícones devem ser exatamente essas. 32 por 32,2 56 por 256. O Webflow não permite que você faça upload de nenhum outro tamanho. Agora publique novamente para ver as alterações entrarem em vigor. Apenas um pequeno nó lateral para usuários do Safari. O Safari não atualiza o Favicon imediatamente. Mesmo quando você o atualiza várias vezes, ele mantém o tecido antigo Ele faz isso porque salva o Favicon no cache e o puxa de lá, em vez de recarregá-lo e pegá-lo da Se você precisar atualizar o Favicon e ver no Safari a versão mais recente, o que você precisa fazer é limpar o histórico de navegação ou esvaziar o E você pode fazer isso a partir daqui. Do histórico, limpe o histórico, ou eu gostaria de usar, se você o desenvolveu, é mais fácil porque ele apenas limpará o cache em vez do histórico de navegação que contém outras coisas, o cache vazio. E agora, quando você recarrega , ele deve ser atualizado. Aí está o último Vaticano. Isso é tudo que nossa página da web está ativa. Tem uma aparência ótima, é nítida e funciona bem. É rápido, responsivo e simplesmente incrível. Observe como a página é carregada com rapidez e facilidade. Esse fluxo na web é 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 otimizados para as páginas 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. A seguir, aprenderemos sobre fluxos da web. Outro recurso chamado editor, fique por aqui. 91. 86 Webflow Editor NOVA IU: 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 do lado da vida, literalmente No lado da vida, sem gerenciamento de conteúdo e editores de texto feios , basta clicar no conteúdo e começar a Isso é tão incrivelmente útil para clientes que eu nem consigo colocar em palavras. Seus clientes geralmente não são tecnologia e a última coisa que eles querem fazer é descobrir como os sistemas de gerenciamento de conteúdo funcionam A última coisa que você quer é que seu cliente envie um e-mail para você toda vez que precisar de uma pequena alteração no título para remover o coma ou adicionar uma nova ala As solicitações chegarão até você 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, 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 do link ou o texto. As alterações não serão refletidas no lado da vida até você clicar no botão publicado. Depois disso, todas as alterações serão publicadas instantaneamente. E é simples assim. Obviamente, essas mudanças serão refletidas no designer para o qual podemos mudar daqui daqui caso desejemos restringir o acesso a algumas partes do conteúdo do editor. Dentro do designer, podemos ir ao painel de configuração dos elementos e desmarcar Os colaboradores podem editar esse elemento. 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 Esse é o editor, bastante simples, mas poderoso. Não há nada que realmente precisemos fazer sobre isso. Eu só queria te mostrar lugar porque geralmente não trabalho com um editor, porque trabalho por meio do designer. Mas isso geralmente é algo que você ensina aos seus clientes e diz a eles, ok, então essa é a opção, é assim que você faz, é assim 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 para você Isso conclui a terceira e grande parte deste curso, que era sobre Webflow e desenvolvimento Na próxima parte, faremos um projeto completo para o cliente. Fique por aqui. 92. 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. 93. 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 94. 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. 95. 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. 96. 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. 97. 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. 98. 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 99. 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. 100. 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 101. 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. 102. 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. 103. 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. 104. Design da página inicial do TeamApp: parte 1: O moodboard, temos a estrutura de arame, estamos prontos para criar nossa página inicial Vamos criar uma nova página, chamá-la design e copiar a estrutura de arame aqui , porque será mais fácil seguir a estrutura de arame em vez de ir e voltar entre as páginas. Ao lado, vamos adicionar um novo quadro em 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 e não se sobreponha ao rosto dela Se a foto for de boa qualidade, poderemos movê-la e posicioná-la no lado direito. Eu 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 em vez disso. 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 Isso não é realmente suficiente. Eu vou escolher oito estilos. Na verdade, esse é chamado de Work 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. Evitaremos escolhas embaraçosas. Ex e tudo seguro nessa descrição, e agora vamos aplicar esse telefone em nossa página. Em vez de criá-lo do zero, vou copiá-lo da estrutura de arame aqui. Não é necessário reinventar a roda todas as vezes. Estou apenas 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 Menos massa significa menos gravitação e atração. 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 nessa imagem, caso contrário, o conteúdo não ficará muito visível Agora, para o formulário de call to action. Mãe, ele. 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 copiá-lo também. Talvez encontremos um uso para isso. Você pode escolher cores diferentes se quiser saber até que ponto deseja acompanhar , pixel por pixel ou talvez um pouco. De qualquer forma, está tudo bem. um valor de aprendizado em ambas as abordagens. Ah. Estou apenas observando as margens e distâncias aqui, sem realmente avaliar a inclinação, 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 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. 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, fique à vontade para remixar Vamos adicionar um logotipo ao. 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 você tem um logotipo totalmente novo. Muito bonito. 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. Vá até o preenchimento que criamos e mude para um gradiente radial Desta vez, não linear. Porque com o rádio, podemos criar um 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ê pode jogar com outras alças para obter o resultado exato desejado. Agora, de volta à opacidade de 40%. 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. Você pode criar holofotes em seus pontos focais e depois ocultar o resto da imagem Tudo bem. Vamos passar por aqui e continuar o resto no próximo vídeo. 105. Design da página inicial do TeamApp: parte 2: E estamos de volta. Vamos criar esta seção agora. Precisaremos encontrar algumas maquetes para o produto, para que possamos mostrá-lo Assim como da última vez, vou pesquisar recursos de esboço 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á. Além disso, se você quiser encontrar algo próprio, pode fazer isso e acessar a página de recursos, e acessar a página de recursos como uma para esboço ou outra para Figma, que incluí na página de recursos, onde você pode encontrar diferentes modelos e modelos gratuitos ou qualquer coisa parecida que você possa incluir como vitrine do Na importação, ele me diz que não temos telefones que façam parte deste documento. O que vamos fazer é substituir por outra coisa. Em vez disso, vamos usar o roboto. No lado esquerdo, ele informa o telefone e, no lado direito , indica o peso que foi usado. Ele selecionará automaticamente o peso correto para você, mas se o telefone substituto não tiver o mesmo peso exato, selecione algo manualmente. Essa tela de reunião parece muito boa. Podemos trazer isso e vamos usar nosso próprio azul. M. Para selecionar o conteúdo de um grupo, mantenha pressionado o controle ou comando e selecione com o mouse, ele fará uma seleção profunda semelhante à que você faz clicando e segurando a mesma tecla. Em pressione shift, caso você queira desmarcar algum dos elementos M. M. M. Como essa tela é bem larga, podemos movê-la para fora da borda. Esse também é um truque muito bom. E vou adicionar uma sombra para torná-la mais visível. Aqui está uma dica das sombras. Torne-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 Tipo de voo que eles estão usando aqui. Podemos pegar essa cor esbranquiçada exata 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. R. Vamos virar as esquinas agora. É sempre uma ideia melhor contornar elementos de interface como esses. Parece mais acabado. Aponte os cantos, parece que alguém desistiu na metade Você sabe, seria bom fazer algo assim para tirar alguns elementos da maquete Isso adicionará mais dimensão e tornará tudo muito mais interessante. Aqui está uma matriz de figos. Você pode copiar mais propriedades de um objeto para outro. Assim como a sombra que acabamos de criar, selecione a 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 Mamãe, mamãe, hm. Olhando até agora, vamos adicionar o conteúdo. M M. M. E tudo está bem. Agora, vamos criar uma seção como essa. Normalmente, do jeito que fizemos em outros exercícios, tínhamos a foto na borda, mas pessoal, eles 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 estão em estoque e não foram feitas como parte de uma sessão de fotos para esse site Mas as fotos do mesmo colaborador geralmente têm uma aparência muito semelhante Ele terá o mesmo estilo, mesma filtragem e, em geral, um filtro semelhante O uso dessas fotos cria uma consistência incrível na página. Nosso caso, somos Lock, 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, então essa consistência é ainda maior Vai parecer que fizemos nossa própria sessão de fotos para este site M. M. M. M. M. M. E agora 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 Bloqueamos essas fotos. Eles não são apenas a mesma estada e cena, mas também os dois modelos estão sorrindo e olhando na direção um do outro 106. 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. 107. 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 e colar e na barra 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 da fonte , você verá o verdadeiro benefício de usar estilos. Agora temos o estilo de legenda e vamos aplicá-lo aos dados também Mas Mmm. 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 filme 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, estava 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 altere os estilos e cores da fonte. Olá hmm. 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 plug-in e a insiro Se é importante que meu cliente já saiba como está. E o rodapé é Easy Ps. 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. Mamãe. É 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. 108. Design de grade 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, eu apenas organizo 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 Tamanho 22 e semi bota, acho que fica bem. 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 texto 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. 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 que você não tenha as camadas agrupadas ou 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 essa extensão do Chrome chamada Gallery Fi ink nos recursos Ele digitaliza a página em busca imagens e permite que você as baixe facilmente. H Com seus nomes, vou usar o conteúdo do plugin. 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 os autores. Vamos apenas garantir que o gênero dos nomes corresponda corretamente às fotos. Não queremos uma garota chamada Arthur. Ah, a coisa toda está muito melhor agora, parece real e muito mais impressionante do que apenas conteúdo repetido. Mas precisamos fixar o espaçamento nos blocos de ar. Agora, os nomes criaram lacunas diferentes. Última etapa, o próximo botão, que podemos simplesmente duplicar dos wireframes e alterar Uh assim como fazemos com os botões secundários, podemos pegar 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. Uh hein. Lá. 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. Explique a eles 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, depois para o mood board e depois para o wire framing 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 isso custará mais tempo e dinheiro porque as revisões no site ao vivo demoram muito mais tempo do que você faria as revisões nos designs ou mesmo as revisões em comparação com wireframes, o que é muito fácil de fazer, certo dinheiro porque as revisões no site ao vivo demoram muito mais tempo do que você faria com as revisões nos designs ou mesmo as 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 um novo E o mesmo se aplica à fase de design em si, porque quando você está projetando, obviamente, você não 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. 109. 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. 105 Navbar NOVA IU: Neste vídeo, vamos construir a barra Nab. Se você se lembra, a barra de navegação é um componente pré-fabricado no Webflow, que podemos arrastar para a direita na tela a partir daqui E podemos estilizá-lo como quisermos. Aqui está um truque oculto de fluxo da web, pressione comando ou controle, você verá esta barra de busca rápida aqui, podemos pesquisar todos os elementos e encontrar ativos e muito mais Você pode pesquisar agora na barra e arrastá-la diretamente para a página. Ou simplesmente pressione Enter e inseriremos automaticamente. Ok, o que precisamos fazer com o bar Nab? A primeira coisa que notei é que o napbar do tamanho do contêiner 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 no 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 dar a ele um tamanho 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 a largura normal a manterá em 1.160 pixels, independentemente do tamanho da tela A barra de soneca é colada nas bordas quando encolhemos Então, precisamos adicionar um pouco de preenchimento a ele. Aí está. Em seguida, precisamos mudar o plano de fundo. Nossa barra Nab no design é transparente. Isso é fácil de mudar. Selecione a barra Nab 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 Fig, porque para imagens baseadas em vetores, é o melhor formato de arquivo. É um arquivo pequeno e nunca perde qualidade, não importa o quanto você o estique. Insira o logotipo dentro da caixa da marca. Precisamos primeiro descartar o elemento da imagem. Você viu o que eu fiz aqui? Encontre rapidamente 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 cabine. Não está na lista de fontes. Aqui, temos que adicionar o telefone nas configurações do projeto. Podemos acessar essa página a partir deste link aqui. Isso o levará exatamente ao lugar certo. Acho que estamos usando a maioria dos telefones. Então, vamos adicionar tudo isso feito, agora podemos voltar ao designer e começar a construir ou projetar. Se você manteve a guia do designer aberta, certifique-se de atualizá-la Depois de adicionar telefones, o telefone aparece no menu suspenso. Você também pode precisar solicitar o controle de design se tiver o webflow aberto em duas janelas separadas 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 corpo 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 de parágrafo, será incluído por padrão até que sejam substituídos. Por que essa abordagem é superior à troca de fundos 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 links de navegação estão herdando o telefone 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 mudar a cor da primeira. O Webflow criou um novo estilo automaticamente e o chamou de link de navegação Agora podemos pegar essa aula e aplicá-la em outras duas. Todas as mudanças se aplicam a todas elas. Temos cinco links de navegação 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 os 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, basta 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 vai adicioná-la. Todos os links, o que fazemos nessa classe de combinação, é claro, vão para o campo seletor e digitam um novo nome ao lado do link Nabb Isso lhe dará uma classe de combinação. Css diferencia maiúsculas de 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 Isso, um alfa de quatro, é como você pode definir a transparência de uma cor para 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 da 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 sem O resultado é o mesmo, mas o segundo é melhor. Por quê? Porque container é uma classe que vamos reutilizar em outro lugar. É melhor mantê-lo intacto. A classe Navbar, por outro lado, será usada apenas 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. 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 é isso. 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 soneca morta 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 Basta alterar 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% Esse efeito simples funciona no botão. Vamos adicionar um efeito de transição. Portanto, a mudança de foco é 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á lógica por trás disso. Vamos testar a capacidade de resposta do desktop, não os celulares. Nós faremos isso no final. É isso mesmo. O Napper está bonito. Terminaremos a seção de heróis no próximo vídeo. Fique por aqui. 112. Webflow 2: conteúdo herói: E estamos de volta para criar o conteúdo da seção de heróis. Para estrelas, precisamos de um contêiner e atribuímos a ele uma classe de contêiner que já criamos da última vez dentro da barra de soneca 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 Nap. Podemos adicionar o preenchimento à caixa do herói. Mas espere um segundo. Isso não parece certo. A barra de apoio agora está ainda mais apertada para dentro. Isso porque temos um preenchimento na barra de navegação 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 Vamos remover esse preenchimento da barra de navegação porque não precisamos mais dele. A do herói cuidará disso. Você pode recitar facilmente qualquer um dos estilos clicando aqui. Eu costumo usar um atalho que é opção mais clique. Acho que deveria ser eu clicar para ver as janelas. Vamos estilizar o título. O tamanho é 55 e o peso é normal. O mesmo acontece com outros exemplos 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 Lembre-se de 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 de negócios Se estilizarmos uma tag H one diretamente, poderemos controlar todas as tags H one em nosso site sem aplicar nenhuma classe a elas. Para estilizar uma tag, certifique-se de que nenhuma classe esteja selecionada, então o campo seletor precisa estar vazio Às vezes, você esquece e nós estilizamos diretamente um título, que criará automaticamente uma nova turma Qualquer alteração se aplicará somente a essa turma Para corrigir isso, basta remover essa classe e começar de novo. Em seguida, selecione todos os títulos H one no menu suspenso. Agora você está estilizando a tag H one, é exatamente isso que queremos Precisamos do valor da altura da linha. Como nunca alteramos a altura padrão da linha desse título, o campo agora diz automático A WFO não considera isso um valor, então não vai funcionar para nós Mas se você clicar no campo, a taxa de espaço reservado mostrará altura e os pixels padrão da linha, que são 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 de 100 pixels, basicamente, o dobro do tamanho do telefone No nosso caso, podemos pegar 67 e dividir por 55, tamanho do nosso telefone, multiplicar por 100, para que possamos obter o valor percentual, que é 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 é um 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 altura percentual, a caixa delimitadora aumenta e diminui de forma consistente com Tudo bem. Eu não vou definir isso para a cor branca, você sabe por que, porque a maioria das nossas manchetes não serão brancas Eles serão da cor azul escura. Então, em vez disso, vamos definir essa cor azul escura aqui e, em seguida, encontraremos outra maneira 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 principal 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 Essa coisa 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 no Figma, você está certo É 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 GMA 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ó lugar. Edite-os, exclua-os, adicione novos. Isso mostra todos os diferentes tipos de variáveis que você pode adicionar. Eu pessoalmente só uso a cor. Ao excluir a 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 futuro simples, mas útil. Tudo bem, seguindo em frente. A etiqueta H one está pronta. Se adicionarmos uma nova linha de título, agora, continuaremos com esses 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 gostaria de adicionar um nome de classe branco nesse 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 campo, 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 outro parágrafo ou em qualquer outro lugar da página. M. M. 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 barra de soneca. 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 compo ao contêiner e depois adicionar a margem Dessa forma, nosso contêiner base será tinta. Mas uma opção um pouco melhor é adicionar uma caixa extra e colocar o conteúdo dentro dela. Então, podemos estilizar essa caixa como quisermos. Eu prefiro essa opção porque é limpa e oferece mais flexibilidade no futuro. Adicione um novo bloco de e apenas arraste os elementos para dentro. Talvez você ache mais fácil fazer isso no navegador. Vamos chamar esse bloco de algo como conteúdo de herói e adicionar uma margem semelhante à que temos nos designs. E vamos dar a ele uma largura máxima para que fique bem contido em nossos designs C, usar o bloco de imersão separado já nos deu mais flexibilidade do que podemos fazer com ele Excelente. Vamos verificar a capacidade de resposta. Perfeito. Agora, tudo parece nítido. Só temos um formulário restante, o que faremos a seguir. 113. Webflow 2: formulários: E estamos de volta neste vídeo, vamos aprender o básico dos formulários dentro do weblow 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. Curta o campo e o botão de envio. Então, 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 o usuário estava tentando enviar o formulário. Se quisermos adicionar novos elementos ao formulário, podemos arrastar itens como menus suspensos e caixas de seleção dentro do 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 Ok. 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 foco automático 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 menu suspenso. Você pode editar as opções, excluí-las, adicionar mais, reordená-las, basicamente tudo o que você espera Não precisamos acessar 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 de estilos. A caixa flexível é 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 erro e sucesso do formulário. Então, ele vai alinhar esses três elementos. Isso é o que vai acontecer. 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 uma barra interna de 16 pixels com uma cor cinza. Agora, para tornar o texto do espaço reservado dentro do preenchimento de 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. Você pode verificar isso dentro do 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. Em nossos designs, estamos usando a cor cinza, mas a configuramos para 70% de opacidade, então não se esqueça disso H. Excelente agora para o botão. Vamos dar a ele um botão de nome de classe. O texto dentro do botão do 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. Ok. 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 é assim? Isso se às configurações fornecidas ao flexbox principal Veja aqui, 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 a margem padrão aplicada ao campo. Essa margem extra de dez pixels está esticando a caixa flexível. 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 dando 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 toda essa configuração 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 acontecia comigo no começo, eu sempre pensava: Oh, isso é um bug? Por que não está funcionando assim? Sempre achei que fosse algo com fluxo na web. 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, eu tenho que chegar à 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 pântano ou algo não esteja funcionando corretamente, mas há algum tipo de quebra-cabeça que precisa ser resolvido porque eu me lembro que, muitas vezes, é frustrante se você está lidando com uma ferramenta e tentando construir algo, ela simplesmente não está indo do seu jeito e não está funcionando e você pode sentir , seja um pântano ou algo não esteja funcionando corretamente, mas há algum tipo de quebra-cabeça que precisa ser resolvido porque eu me lembro que, muitas vezes, é frustrante se você está lidando com uma ferramenta e tentando construir algo, ela simplesmente não está indo do seu jeito e não está funcionando e você pode sentir frustração e você pode ficar desanimado e pode não gostar mais do processo Então, eu quero que você respire fundo e olhe para isso de uma forma que seja um acidente completo. Veja isso de uma forma que é um quebra-cabeça e há uma pista e você só precisa chegar à resposta, verificar cada elemento e ver qual estilo pode ser interagido com outra coisa. Você chegará à resposta e se sentirá muito bem com isso Ok. Tudo bem, vamos dar uma olhada no formulário no modo de pré-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, reaplique essa cor cinza aqui e eu resolverei o problema Ok. Um simples estado dela fará apenas uma pequena mudança na cor. E é isso. Ok. 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 Mamãe, hmm. 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ê-lo 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 114. Webflow 2: seção 1 do mockup: 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. Vamos lançar uma nova seção. Dê uma aula. Dê um pouco de preenchimento, tanto vertical quanto horizontalmente. Precisamos de 60 pixels nas laterais da barra, então vamos repetir isso. Para o preenchimento vertical, vamos usar 80 porque em nossos designs, geralmente usamos 160 pixels voltados entre as seções, e 80 pixels na parte superior e inferior somam 160 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 descartar outro lado do contêiner e aplicar o contêiner de classe existente. Nos desenhos, temos uma cor de fundo de lata azul 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 Para fazer isso, primeiro selecione o parágrafo, depois vá para o campo seletor e selecione todos os parágrafos Tudo bem. Agora, vamos estilizá-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 uma seta para ser um objeto separado Portanto, temos um elemento de texto e imagem. Digamos que seja um link de texto. Assim como com o título e o parágrafo, também podemos estilizar a antiga tag de link. Então, em vez do 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 usarmos uma tag de hiperlink em qualquer outro lugar, ela herdará a cor dessa tag de link Mas não podemos mudar muito a tag do link, 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 em 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 ir até a declaração de texto e pressionar de 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 este SPG que é 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. Mamãe. Não é exatamente uma linha com um imposto, então vamos adicionar uma margem negativa no topo. Menos dois pixels sims são suficientes. O espaçamento entre letras em fo não pode ser definido em unidades percentuais. Precisamos usar um valor de pixel. Temos duas opções. Primeiro, podemos obtê-lo em um modo de morte no Figma, mas esse é um recurso pago A segunda opção é gratuita. Podemos simplesmente fazer as contas. Todas as porcentagens nas configurações de fonte, sejam altura da linha, espaçamento entre escadas Eles são todos relativos ao tamanho da fonte. 2% de espaçamento entre letras significa 2% do tamanho real da fonte, que no nosso caso é de 16 pixels 2% disso são 0,32 pixels. Ok, está tudo bem, mas há um problema. Se você conferir a prévia, verá que o texto é um link. Você pode ver isso mudando o cursor de uma seta 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 de mergulho, mas é um link. Qualquer coisa que colocarmos dentro fará parte desse único link. 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 tag de link 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, 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 : Oh, como eu faço isso agora? Esse ícone não é clicável. E você pode ficar preso porque precisa descobrir isso. É por isso que eu queria seguir tipo de caminho equivocado, para que possamos entender exatamente como voltar e refazer tudo da maneira que realmente queremos porque você se depara o tipo de cenário quando quer construir algo, com o tipo de cenário quando quer construir algo, segue a maneira natural de presumir que vai funcionar, e então não funciona e você obtém preso e você 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 Agora, sempre que você estiver fazendo isso sozinho e criando sites por conta própria, há um lugar onde você sempre pode ir e encontrar respostas, que é o fórum Webflow em sua comunidade Eles são uma comunidade excelente, as pessoas respondem lá. Até o Webflow 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, eles estão contribuindo e respondendo perguntas Então, se você está preso em algum lugar, pesquise no Google e procure nos fóruns 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 terá alguém ajudando orientando e dando respostas E você encontrará o link para o fórum de fluxo da web na página de recursos. Então vá dar uma olhada. Tudo bem. Por fim, precisamos colocar os dois elementos lado a lado. Temos duas opções. Uma é usar a caixa flexível, 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 a seta é forçada 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 acima deste link para saber mais. OK. Tudo bem, agora, se verificarmos o modo privado, a seta fará parte do link para 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. Vamos soltar outro bloco d 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. Vamos adicionar a imagem no próximo vídeo, fique por aqui. 117. 111 Componente deslizante NOVA IU: Tudo bem, agora precisamos construir a seção de depoimentos Decidimos usar o controle deslizante, às vezes chamado de carrossel ou apenas controle deslizante ou controle deslizante de carrossel apenas controle deslizante ou controle deslizante 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 no vídeo posterior Vamos começar com a seção usual, contêiner, etc. Em seguida, em um cabeçalho. Agora vamos adicionar um controle deslizante que podemos encontrar apenas pesquisando dentro um localizador rápido ou no painel de elementos na seção Avançado É um controle deslizante, um componente pré-fabricado, que tem muita liberdade para ser personalizado Mas às vezes tem suas limitações, pois quase tudo no fluxo úmido, componentes pré-fabricados não são a única maneira de criar esses layouts ou 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. Se o movermos diretamente sobre o 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 no interior. É claro que não estamos limitados a dois. Em seguida, temos as setas esquerda e direita, que são blocos vinculados por uma seta Ícones dentro do, 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 diblock. Não há nada de especial neles. Eles podem ser estilizados como qualquer outro bloco div 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 se, 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 P posicionados um ao lado do outro horizontalmente E os controles se moviam entre esses blocos de mergulho com alguma animação. Isso é tudo. Existem 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 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 a partir do painel de configurações pressionando Adicionar 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 adicionou um novo bloco de slides dentro do Navegador para. A segunda opção é duplicar elemento do slide clicando com o botão direito do mouse e duplicando ou, no controle C usual , a exclusão de slides ocorre de maneira semelhante Selecione um slide na tela ou no Navegador e pressione a tecla delete Como o slide é apenas um bloco normal, podemos adicionar outros elementos , como tags, 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. Esse é o controle deslizante. No próximo vídeo, vamos transformar esse controle deslizante feio em lindo carrossel feito 118. Webflow 2: controle deslizante de testemunho: Então esse é o componente deslizante, mas esse controle deslizante weblow parece muito diferente dos 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 O que, novamente, é um bom e velho bloco d com vários outros elementos dentro. Selecione o elemento deslizante, atribua a ele uma classe e uma margem superior de 120 pixels E vamos nos livrar desse fundo cinza. É parte do elemento deslizante dois. Vá para as configurações de fundo e altere-as para transparente. E vamos mudar a cor das setas 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. Não precisamos desses pontos de navegação, então vamos nos livrar deles Mas a exclusão não funciona. Weblos, não precisamos do controle deslizante e excluímos tudo com Existe outra maneira de remover alguma coisa. Selecione não exibir nenhum e ele saiu desse continuum 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 de imersão 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 dos 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. No meu caso, a sombra está em todo o grupo, não no cartão branco em si. Se você estiver usando um estilo de sombra como o que estou aqui, você pode diferenciá-lo do estilo para poder ver exatamente o que está acontecendo lá dentro Esses são todos os valores de que precisamos para recriar a sombra dentro do Webflow I Há um valor extra dentro do Webflow, 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 deveria se expandir com base em seu conteúdo, mas não o faz. Esse é outro caso em que o valor padrão não está sendo verdadeiro. Então, digite manualmente, mais uma vez, e ele entraria. Lá. Ok, agora para o conteúdo dentro do cartão, temos estrelas no 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. Explore os avatares como dois PNG. Vamos definir um novo bloco D e organizar os detalhes do autor nele. Primeiro, a imagem, depois os dois blocos de texto. Dê a ele um pouco de classe e estilo ao bloco de texto, da mesma forma que no Figma Agora precisamos mover o texto na lateral do avatar. Como podemos fazer isso? Obviamente, poderíamos seguir o caminho usual de usar uma caixa flexível, mas precisaríamos de uma caixa extra para isso e precisaríamos de mais cliques Uma opção mais simples é usar float. Lembre-se de flutuar, sob a posição, descemos para flutuar e sair. Abra isso. Existem três opções, sem flutuação esquerda e direita A consorte mostra o que faz. Selecione flutuador esquerdo. Isso posicionará a imagem à esquerda do texto. E isso é tudo. Precisamos ajustar um pouco espaçamento agora primeiro ao lado da imagem Em seguida, entre a imagem e o parágrafo, que tem 70 pixels. E, finalmente, precisamos adicionar uma pequena margem sobre o 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 à medida 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 estenderá 100% do contêiner principal. Se dermos uma largura fixa , ela encolherá adequadamente 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á-la 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. Temos 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 são recortados 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 de aquecimento por transbordamento à seção, assim como fizemos com a imagem do painel Temos até uma aula para isso. Não precisamos mudar nada. Basta aplicar a mesma classe que já aplicamos em uma das seções. Excelente, vamos preencher os cartões com nosso conteúdo, e depois teremos que cuidar das setas e pronto Não criamos conteúdo para mais de quatro depoimentos, então vamos relaxar um pouco dessa vez e apenas duplicar Só há 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 pedreiro. 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, tudo está indo bem. 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. 119. 113 Posicionamento NOVA IU: Bem vindo de volta. Neste vídeo, vamos cuidar das setas em nosso controle deslizante para colocá-las no canto inferior direito do controle deslizante, como temos nos designs, precisamos aprender um 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 a elas diferentes configurações de posição para ver o que acontece com a 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. Nada acontece sem intercorrências, mas uma coisa aconteceu As configurações de posição agora têm mais alguns controles. Temos os 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. Você verá essa exceção quando eu mostrar o que acontece quando você adiciona 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 qualquer lugar que quiser, mas no fluxo do documento, ele ocupará apenas esse espaço, seu slot 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 de uma caixa flexível ainda não se moveram Eles agem como se seu cartão ainda estivesse lá. Agora, quanto à posição absoluta, objeto absolutamente posicionado é removido do fluxo do documento e fica em uma nova camada Classifique como objetos dentro do Figma. Na Figma, todos os elementos estão absolutamente 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 configuração importante para o posicionamento absoluto está aqui. Nos diz a que esse objeto está posicionado em relação? Temos o mesmo campo para o elemento relativo, mas esse sempre se diz sozinho, porque é isso que o relativo faz. Está sempre posicionado em relação a si mesmo. E isso pode ser alterado. Mas o elemento absoluto pode , 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, ele será posicionado a 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. Se dermos a ela uma margem superior de zero pixel , ela se moverá até o topo da página. 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 obsoleto 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 carro seja posicionado em relação ao contêiner rosa , temos que mudar a posição do contêiner para algo, mas estático geralmente 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 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 À 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. No momento, nada aconteceu quando mudamos a posição do contêiner dos avós Como o contêiner principal rosa ainda tem uma posição não estática, a caixa continuará em relação a essa coisa. Se mudarmos a posição dos contêineres principais para estática, isso acontecerá. Agora, como mostrado aqui, é relativo ao contêiner do avô Tem algumas predefinições de posição úteis aqui para um elemento absoluto Essa é uma maneira rápida e prática de alterar as Canto superior esquerdo, canto superior direito, topo cheio, quatro inferiores e assim por diante. Você pode ver que, à medida que altera , 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 momento, escolha uma das predefinições Ele será corrigido adequadamente. Como você pode ver, o elemento fixo é exatamente esse fixo. É como se um objeto absoluto puxado para fora do fluxo de documentos, sem afetar outros elementos colocados em uma camada inteira E, ao contrário do objeto obsoleto, ele é 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 mostrar do que explicar, neste momento, 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. 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. 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 gruda. O elemento momentâneo fixo está a zero pixels da janela de visualização Se colocarmos algo como 30 pixels , ele ficará no momento em que estiver a 30 pixels da borda superior da tela. Para as coisas que rolam 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 que muito, muito raramente essas posições fossem estáticas, o que é o padrão para quase todos os elementos. E ele flui naturalmente com o documento relativo, que é como 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 sua posição em relação ao primeiro pai que não tem uma posição estática fixa, que é igual à absoluta, mas é relativa à janela de visualização sendo fixada na tela visível Usado principalmente para barras de navegação e adesivo, que é como fixo, mas no esteróide ele é fixado apenas dentro dos limites de seu contêiner principal 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. 120. 114 Setas deslizantes NOVA IU: 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 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. Isso explica por que as setas estão em cima do controle deslizante É isso que o posicionamento obsoleto faz. Ele retira o elemento da página. Eles vivem em uma dimensão diferente, como camadas na Figma. Isso é exatamente o que precisamos. Posição obsoleta, com um posicionamento inferior direito, você pressiona 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. Se você perceber que não funciona da maneira que você esperava. Verifique o pai e verifique se ele 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? Vamos experimentar todos eles e ver o que acontece. Nada disso 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 próximo a 60 por padrão. Como você pode ver, diz porcentagem. O campo está definido como valor percentual. 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 esquerda para a 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 colocando valor na direita porque estamos dizendo que ela afaste esse valor da borda direita. Excelente, vamos conferir a prévia e ver como funciona. Só há um problema. Se você observar mais de perto os blocos de setas, verá que eles estão sobrepostos As caixas são um pouco largas demais. E na pré-visualização, a caixa inteira é clicável. O usuário pode interagir com o espaço vazio. Segundo, um pouco de interação com o espaço vazio é bom. O usuário não precisa ser tão preciso ao mirar a flecha, mas o excesso a torna estranha, além disso sobreposição pode causar alguns problemas, pois Para corrigir isso, precisamos alterar a largura dos blocos de setas. Vamos dar um pouco de tamanho. 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 Só nos resta uma última seção. O rodapé, faremos isso a seguir. Fique por aqui. 121. NOVA IU do 115 Footer: Bem vindo de volta. 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 Web Flows, Amazing copy paste future. Basicamente, vamos copiar o rodapé inteiro do nosso projeto anterior de aplicativo de bate-papo e colá-lo no projeto atual Esse é um futuro útil. Ele permite que você reutilize componentes em seus projetos e também permite copiar diferentes elementos ou componentes dos projetos de fluxo da web de outras pessoas Por exemplo, o Webflow tem uma biblioteca de projetos de demonstração em que outros designers de fluxo da web podem mostrar os projetos que 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 interface de usuário ou kits de wireframe como esses 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, a seção de rodapé com tudo o que está dentro do controle de calor C ou do comando C. Em seguida, vá para o projeto atual e selecione onde você deseja colá-lo No nosso caso, temos que selecionar o corpo que passa ali mesmo e não dentro alguma outra seção e, em seguida, controlar o calor. E aí está. Agora, todo o rodapé foi duplicado. Em nosso projeto atual, podemos editar tudo sobre esse rodapé sem afetar o outro projeto original anterior Todos os estilos foram carregados e novas classes foram criadas. Quando você copia classes com o mesmo nome , o Webflow renomeará essa classe conflitante exatamente como diz nesta mensagem Por exemplo, a seção do nome da classe que já temos no fluxo da web do nosso projeto atual deu um nome diferente à nossa seção duplicada Outra coisa que 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 é Cabin. A fonte não foi carregada porque é herdada 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 a seção e o contêiner de classes duplicadas e transferi-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 basta remover todos eles. E se não estamos 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 de fundo Além disso, vamos alterar o espaçamento da seção de fotos porque é um pouco diferente da seção normal Agora vamos adicionar os links das fotos. A cor é branca com 60% de opacidade. E também temos que mudar a cor do foco para um azul diferente 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 links de rodapé. Isso porque, no projeto anterior não tínhamos uma classe para os títulos de rodapé que estilizamos na tag H three Em vez disso, quando copiamos o fluxo da web do rodapé, apenas aplicamos a tag H three do projeto atual Vamos fazer o mesmo e estilizar o H three. É claro que podemos criar uma nova classe ou alterar a tag para algo como H2h4 Mas estilizar H three parece muito bom. Há um espaço extra no topo da manchete. 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 ignora a margem da célula AT pic que está na seção e fica em cima dela Não se esqueça de criar uma nova classe de combinação ou você mudará todas as outras seções para Ela já tem uma classe de combinação, mas está tudo bem Podemos ter várias classes de combinação. Normalmente, não é recomendado porque pode ficar um pouco confuso, mas, nesse caso, não é grande coisa Vamos compensar esse preenchimento extra. Por fim, vamos apenas atualizar o conteúdo. Está tudo pronto e ainda temos uma coisa, o formulário de e-mail. Nós vamos fazer isso no próximo vídeo. 122. Webflow 2: forma de rodapé: Neste vídeo, uma última coisa a fazer para finalizar o rodapé é o formulário de e-mail Este título aqui que diz que está inscrito em nosso boletim informativo não é um link, é apenas um título, mas mesmo estilo de outros links de rodapé Precisamos transformar isso em um texto normal e remover esse efeito de terror. É assim que faremos isso. Adicione um bloco de texto normal e atribua a ele a mesma classe de link de rodapé Agora não é mais um link, mas o efeito Hover ainda está lá Para nos livrar disso, duplicaremos uma classe e a nomearemos como texto inscrito 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 partir daí. 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é, ou seja, tornando-as com 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. Vamos verificar qual é a largura do design e aplicá-la. Excelente, isso pode ser suficiente. Agora vamos preencher o formulário. Agora, este formulário está usando classes do formulário da seção de heróis acima, 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 de estados Agora, 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 posições 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. Nos botões normais, poderíamos inserir diretamente a seta no interior. Mas quando se trata de botões externos, eles funcionam de forma um pouco diferente. Aqui está o que precisamos fazer: eliminar o texto e a mensagem de ponderação que está dentro das configurações do botão, mas colocar 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 bem 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 altere a altura do botão manualmente, ou simplesmente altere a altura do botão exatamente como o campo que deve fazer o trabalho Em seguida, vamos colocar o botão na posição obsoleta. 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. E isso. Também precisamos alterar a mensagem de sucesso para ativar o estado de sucesso, selecionar o bloco de formulário 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é, o que 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 do rodapé, devemos corresponder ao tamanho da fonte E talvez menos acolchoamento. 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 de fluxos, que possamos criar algumas animações para nossa página e dar vida a ela. Fique por aqui. 123. 117 Interactions intro NOVA IU: No lado direito, onde estão todos os painéis, há um dedicado às interações. 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 anime outro objeto, mesmo que ele não tenha nenhuma relação 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. Quando construímos nossa interação, precisamos especificar ambas. O que acontece ao passar o mouse e o que acontece ao passar o mouse Finalmente, você tem ações ou, em outras palavras, animação. No menu suspenso, você verá que há várias predefinições, como fades, slide e assim A primeira opção é a animação personalizada, e é aqui que a mágica acontece aqui. Podemos especificar qual elemento será animado e podemos criar um conjunto completo de ações cronometradas. Obtemos essa linha do tempo de animação com um controle granular sobre cada açã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. No próximo vídeo, começaremos com algumas interações simples, fique por aqui. 125. 119 Interação Arrow 1 NOVA IU: A ferramenta de interação não é a única maneira de criar interações em uma página. Por exemplo, um botão que altera a cor de fundo ao passar o mouse é uma ferramenta de interação Ao fazer algo simples assim, não precisamos usar nenhuma ferramenta de interação. Isso pode ser feito no painel de estilos porque o CSS sozinho pode lidar com essas coisas. Tudo o que pudermos mudar no estado de foco do elemento se tornará uma interação de foco. Isso pode ser cor de fundo, tamanho, posição das sombras e outros enfeites Transição de um estado para outro. Como mencionei antes, uma das interações que vamos criar é a animação da seta. Eu quero que essa seta se mova um pouco para a direita. Quando movemos o mouse sobre esse link, podemos mover elementos do painel de estilo. E eu vou te mostrar como fazer isso. Você não precisa continuar com isso porque verá que vamos bater em uma parede com essa opção. Mas eu ainda quero mostrar essa opção para que você possa entender quando é melhor usar estilos e quando é melhor usar a ferramenta de interação. O painel de estilos tem a propriedade chamada transformações Na seção de efeitos, temos várias opções: mover, dimensionar, girar e inclinar Todos eles fazem o que dizem. Desta vez, tocaremos apenas no movimento, pois não precisamos que o movimento restante mova um elemento no eixo x, y ou z. X e Y são eixos horizontal e vertical, mas o eixo z é, para ser honesto, eu realmente não sei como explicar o eixo. Acho que nunca precisei disso. É basicamente para mover um objeto em um espaço de três D. Se x e y são largura e altura, então z deve ser algo como profundidade. Na maioria das vezes, usaremos x e y. De qualquer forma, como você pode ver, ele está simplesmente movendo o objeto horizontal ou verticalmente de É o que já fizemos com os objetos relativos e absolutos. O que eu tinha em mente com essa seta é movê-la horizontalmente por cerca de oito pixels Mas mudar para um estado normal não vai funcionar, porque aparecerá assim permanentemente. Precisamos movê-lo com o mouse, o que é bem simples. Fazemos exatamente o mesmo no estado flutuante, mas deixamos o estado normal intocado Lá temos uma pequena interação. A transição de um estado para outro está muito instável no momento Para torná-la suave como uma animação real, precisamos adicionar algo na propriedade transitions É por isso que não podemos usar essa interação básica de passar o mouse. Como as interações de passar o mouse no painel de estilos animam apenas o objeto em si, no nosso caso, a seta Mas se passarmos o mouse sobre o imposto, nada acontece. O estado de foco afeta somente o elemento alvo e nada mais. Mas, no nosso caso, queremos que a seta se mova quando o mouse se move sobre todo o bloco de links. É aqui que entra a ferramenta de interações. O estado de foco é apenas uma propriedade CSS, mas a ferramenta de interação adiciona um pouco de Jovscript à mistura, o que nos dá uma quantidade incrível Isso é o que vamos fazer no próximo vídeo. 126. 120 Interação Arrow 2 NOVA IU: Neste vídeo, vamos criar a interação da seta. É assim. Quando o mouse passa sobre todo o bloco de links, a seta se move cerca de oito pixels para a direita Quando o mouse está fora, a seta retorna à sua posição original. Primeiro, precisamos escolher o gatilho. Selecione o bloco de links, a coisa toda, não apenas o texto ou a seta. Em seguida, vá para o painel Interação e clique em mais, escolha passar o mouse Chegaremos à tela e o bloco de links terá esse ícone na parte superior para representar que há algum gatilho aplicado a esse bloco ou elemento. O mesmo ícone também será exibido dentro do Navigator. É uma boa maneira de acompanhar os elementos que têm interação aplicada a eles. Observe uma coisa: esse ícone aparece no gatilho, não o que está realmente sendo animado. Tudo bem, em Howard, vamos selecionar a ação, que é iniciar a animação para criar uma animação personalizada Clique neste ícone de adição e vamos nomear essa animação como algo como movimento de seta. Certo? Essa animação vai fazer exatamente isso. Para que ele retorne à sua posição original, vamos criar uma animação diferente. Este lugar aqui é uma linha do tempo. Aqui podemos criar uma sequência de coisas diferentes acontecendo. Tudo isso cria uma animação completa. Dessa vez. Como essa é uma animação simples, teremos apenas dois itens aqui. Você vê essa mensagem na parte inferior. Quando estamos no modo de animação, podemos selecionar diferentes elementos na tela que queremos animar. Vamos selecionar a seta e criar uma nova ação para essa seta. Sob isso, temos várias opções diferentes sobre o que podemos fazer com esse objeto e como podemos animá-lo No nosso caso, já fizemos isso. E precisamos nos mover, obter esse novo cronograma um pouco mais intimidador Mas não se preocupe, é bem simples. Primeiro, precisamos aplicar algum valor no campo de movimento sob o eixo x. Podemos movê-lo horizontalmente. Valores positivos o moverão para a direita e valores negativos o moverão para a esquerda. Coloque oito pixels. Caso você não tenha selecionado a seta correta, não há problema. Por exemplo, se o bloco de links aparecer aqui, você poderá alterá-lo. Basta clicar com o botão direito do mouse no elemento e escolher Alterar destino. Depois de receber essa nova mensagem rosa na parte inferior, você pode selecionar o novo elemento. O elemento alvo dessa animação mudará. Se ainda não estiver funcionando para você, basta excluir este item e selecionar a seta no início, pressionar o ícone play para ver sua animação em ação. As interações dentro do designer funcionam apenas pressionando esse botão de reprodução para vê-las em ação. Ou você precisa verificar o modo de visualização ou o site publicado ao vivo. O tempo e a transição podem ser editados aqui. No momento, temos uma animação de 500 milissegundos, o que é muito lento. E flexibilização linear, que não é flexibilização alguma. A linha se moverá do ponto inicial para o ponto final com velocidade constante, isso não cria uma transição agradável e suave Vamos escolher os valores que já jogamos com facilidade, e 200 milissegundos, 0,2 é o mesmo que 200 milissegundos Há 1.000 milissegundos em 1 segundo. Reproduza a animação novamente lá. Agora é mais rápido e mais suave. Tudo bem, podemos sair do modo de animação e verificar isso no modo de visualização. Excelente, essa flecha se move bem ao passar o mouse, mas permanece lá, não se move para trás Isso porque, com as interações, precisamos especificar o que acontece ao passar o mouse para fora. Ok, agora, como vamos voltar à nossa interação? Precisamos selecionar o elemento acionador porque é a ele que a interação está vinculada, não à seta. Se você selecionar a seta, não verá nada. Você seleciona o bloco de links, agora você verá todas as interações que estão definidas nele. Isso mostra que você pode ter várias interações definidas em cada elemento. Clique na interação para entrar e editar. Agora, ao passar o mouse, ele mostra a animação selecionada que criamos Mas ao passar o mouse para fora, está vazio. Então, precisamos criar uma animação para isso também. Da mesma forma que da última vez. Selecione iniciar uma animação. A lista agora mostrará a animação que já criamos. Precisamos criar outra animação e nomeá-la como arrow return, como da última vez. Selecione a seta e clique no ícone de adição para adicionar uma nova ação. A última animação foi uma seta em movimento, oito pixels no eixo X. O que você acha que deveria ser desta vez para retornar à sua posição original? Zero pixels. Porque zero pixels no eixo X é a posição original. Se você reproduzir essa animação, nada acontecerá agora porque ela já está em sua posição original. Não vamos esquecer de alterar as configurações de temporização. Vamos usar os mesmos 200 milissegundos e facilitar a transição Agora você pode ver que temos duas animações, uma para passar o mouse e outra para sair do mouse Vamos verificar o modo de pré-visualização. Se estiver funcionando conforme o esperado , está funcionando perfeitamente. Agora, que tal o resto das flechas? Temos que fazer isso de novo para cada flecha? Felizmente, não temos Você vê essas configurações de gatilho, aquela que diz elemento e classe é uma opção para acionar essa interação somente no elemento selecionado ou em todos os elementos que têm a mesma classe aplicada a eles. Vamos escolher a classe e vamos ver o que acontece no modo de pré-visualização, o quão incrível ela se aplica a todos os links. Não precisamos criá-lo para cada um. E se, no futuro, quisermos fazer edições, basta alterá-las em um só lugar Tudo bem, 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, 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 lhe daremos alguma inspiração para projetos futuros 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 o Webflow, há mais vídeos sobre interações na parte avançada deste curso Algo para você aprofundar seus conhecimentos e meio que ganhar um pouco mais de prática 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 CMS e blog e como adicionar blog ao nosso site, Stick around 127. 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. 128. 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. 129. 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. 130. 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. 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. 133. 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 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 isso é. E cada linha faz parte de um grupo que cria 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, há 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 em nossa postagem de bloco e ver de que tipo de campos 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 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. O Weblo também incluiu um campo para isso. Esse campo tem duas opções extras, caracteres mínimo e máximo. Isso se precisarmos adicionar algum tipo de limitação ao conteúdo do nosso blog. Eu vou dizer que não precisa. 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 em bloco, com menos itens para enviar. 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 Block Post 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, bloquear postagem, que é uma coleção e todas as postagens do blog vão para uma planilha Cada postagem em bloco é composta por 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 blog ao nosso CMS Tick around 134. Blog e CMS: itens do 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 texto rico preenchido 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. 135. Blog e CMS: página de coleção: Então, criamos um banco de dados para o nosso blog, e tudo bem, mas em que lugar do 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, o modelo BlogPost. 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 se transformará em nossa página de postagem no 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 e pronto 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 bloco div 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, a 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 log 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 do blog e ver como elas se parecem Lembre-se deste, é o que eu criei manualmente. 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 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 136. 130 Navbar e headline NOVA IU: Neste vídeo, começaremos a criar nossa página de postagem em blocos. Para acessar esta página, você acessa o painel de páginas e, na parte inferior, tem essa página com um ícone roxo. Essa é a que eu já adicionei todo esse conteúdo aqui. Mas vou me livrar completamente disso e começar do zero com base em nossos designs. A 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í. Volte para a página inicial. Selecione todo o elemento da barra de navegação. Certifique-se de selecionar tudo e não apenas o contêiner. Fico feliz em controlar C. Em seguida, volte para a página de bloqueio e cole lá. Ao colar 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 Vamos apenas estilizar os elementos dentro da nossa barra de navegação, assim como em nossos designs, começando com links No momento, eles são brancos, então precisamos tê-los escuros para fazer isso. Precisamos aplicar uma classe de combinação primeiro 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. O mesmo vale para o botão Nap. Precisamos de uma classe extra de Compa. Eu sei que geralmente recomendo não ter mais do que um, mas está tudo bem de vez em quando. Do ponto de vista tecnológico, não há nada de errado com isso. É só para nós, para que as coisas não fiquem confusas e confusas O fundo dos botões é nosso azul primário com 15% de opacidade Por fim, o logotipo que precisamos exportar da Figma está colado nas bordas da nossa página inicial barra Nab fica dentro da seção de heróis, que tem acolchoamento É por isso que não está colado nas bordas, mas aqui está fora dessa seção Poderíamos colocá-lo dentro da seção aqui também. Mas uma opção melhor é simplesmente criar uma classe de combinação para a barra Nab e adicionar preenchimento diretamente nela Isso é tudo. A barra de navegação está pronta. Passando para o resto da página do bloco, temos uma imagem principal, 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 suficiente ou houver alguma diminuição na legibilidade por algum outro motivo, isso realmente nos prejudicará Criar uma seção branca é simples, apenas uma nova classe de combinação, e isso é tudo Certifique-se de usar outro nome. De preferência, algo específico para a classe base, como uma seção branca que diz muito mais do que apenas branco. E garantimos que não entre em conflito com nenhuma outra classe. Tudo bem, agora vamos adicionar um título. Já sabemos o que fazer com essa manchete, 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 a largura máxima de 700 pixels. 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. Vamos dar a ela uma classe de composição, ou talvez até mesmo duplicar a classe e dar ela uma largura máxima de 700 pixels Tudo bem, está parecendo bom. Em seguida, temos o segmento do autor e da data, mas vamos fazer isso no próximo vídeo. 137. Blog e CMS: bloco 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 uma caixa flexível para isso Vamos adicionar um novo bloco D vazio e atribuir a ele o autor e a data da classe. Em seguida, vamos adicionar uma imagem. Em seguida, precisamos do nome do autor. Adicione um bloco de texto normal. Dê uma nova aula. Estilize como Figma. Precisamos mudar a propriedade justificada para algo como centro Em seguida, temos esse divisor. Poderíamos usar um colchete para isso ou apenas um bloco com largura e cor de fundo Mas acho que o suporte de linha é mais fácil. Acho que é isso que estamos fazendo de certa forma. Só precisamos de uma cor diferente para isso. E depois a data, vamos reutilizar o mesmo bloco de texto do autor e até mesmo manter a mesma classe A data é a data de publicação desta postagem de bloco específica. 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 bloco, então o campo de data está vazio. Vamos usar um campo de data diferente, pode ser criado ou atualizado e, posteriormente, podemos 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. Tudo bem. A distância entre divisor e o bloco de texto é de 30 pixels Podemos ajustar isso na própria divisória. Na verdade, no lado direito, precisamos apenas de 15 pixels porque já existe uma margem de 15 pixels à esquerda da data. E, por fim, vamos adicionar uma margem em cima de tudo para separá-la do título Tudo bem. Tudo isso está ótimo agora. O problema é o seguinte. Esse autor que acabamos de criar, é um conteúdo estático. Quando publicarmos nossa postagem no blog, todas elas 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. 138. 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 em bloco, 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 informações aéreas, fazer upload de uma imagem e colocar o nome deles 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 autores. Assim como fizemos com a postagem do blog, podemos criar um banco de dados CMS para aors, onde salvaríamos todos os aors com suas fotos de perfil, 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 pré-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 o autor slash 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 weblo 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 bloco, clicar 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 é de autores. Faça com que seja necessário e economize. 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 arquivos 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 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. 139. Blog e CMS: estilos dinâmicos: Paramos daqui, onde o avatar não está com a melhor aparência. Isso porque não estilizamos a imagem de uma forma que pareça a mesma, não importa o tipo de foto que enviamos no momento, ela 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 Então teríamos que fazer upload imagens já recortadas e ovais, e deixar isso para criadores de conteúdo e clientes é uma má ideia. Primeiro, acrescenta 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 forma que fique ótimo, independentemente da imagem inserida nele Primeiro, vamos torná-lo oval. Fazemos isso arredondando os cantos da borda e, em seguida, precisamos que ela tenha a mesma largura e altura Podemos aplicar esse valor nas configurações da imagem ou no painel de estilos. Tudo bem, o formato é bom, mas se você notar que a imagem interna está esticada E é 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 do mesmo tamanho. Como podemos corrigir isso? Css e wefflow têm uma propriedade útil para isso chamada ajuste de objeto em fluxos de web abreviados Tudo o que precisamos fazer aqui é aplicar a cobertura sob essa propriedade de ajuste. As 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 está simplesmente corrompida. Isso ainda tem as mesmas configurações de posição, assim como os 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. Tudo isso é feito com o cabeçalho do nosso poste do bloco, fique por aqui até o fim. 140. Blog e CMS: imagem principal: Neste vídeo, vamos adicionar a imagem principal e depois vinculá-la novamente ao 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 Dê a ele uma nova classe de composição E mova a imagem para dentro. Pronto, agora está quase certo. Em nossos designs, há uma certa altura na imagem, o que a torna mais agradável e, no momento ela está crescendo e diminuindo com base na 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 autor Avatar. 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 desejadas para a altura de 450 pixels. 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 neste 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. 141. 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, y 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 Isso é 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 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 definimos logo no início de nossa página inicial Como cada texto é apenas um elemento pai, um parágrafo, que é um elemento secundário, pode sobrescrever qualquer um dos estilos de cada texto Isso significa que precisamos estilizar o parágrafo diretamente. Mas, no momento, não temos acesso a ele. Depois de conectado ao CMS, não 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 o 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 rich text. Para estilizarmos todos os parágrafos dentro do bloco de rich text, 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 a tag de todos os parágrafos. Abaixo do seletor, você receberá essa pequena mensagem com o ícone de adição, seletor interno 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 classe no bloco de rich text principal, você receberá essa mensagem em vez disso. Portanto, certifique-se primeiro de dar alguma classe ao texto rico. Uma classe única não importa como você a chama. 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 todos os tipos de elementos dentro do rich text, sejam títulos, itens de 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 o 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 Um parágrafo bastará. Em terceiro lugar, no seletor, selecione a tag rosa de todos os parágrafos Sem selecionar isso, você estará apenas digitando 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 ser. Com uma seta dizendo quando aninhada dentro do nome da sua classe Sem agrupamento, em vez de todos os parágrafos dentro da taxa de alcance, você estilizará todos os parágrafos 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 outro tipo de imposto herdará o estilo do parágrafo a menos que você tenha algum estilo mais específico aplicado a eles. Eu sei que os textos de alcance são um pouco confusos, mas você vai pegar o jeito depois de algumas vezes Se você remover a classe do imposto ach, verá que todos os novos estilos desapareceram. 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 do outro texto vem da classe principal do texto de alcance, 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 nosso rich text dinâmico porque ele tem a mesma classe. Se você não tivesse a mesma classe , não seria afetado 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 ela. 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 blocos quando você quer citar alguém, então podemos estilizá-los de forma diferente, como colocá-los em itálico, que é mais adequado para citações Linha maior, um pouco mais de espaço ao redor. Não podemos nem mesmo 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. Inclui legenda dentro de duas. Também podemos estilizar marcadores. Eles são muito pequenos agora. Vou manter o mesmo tamanho do texto do parágrafo. I Temos que estilizar os três títulos H 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 os dois títulos H. Você viu o que eu fiz aqui. Eu cometi um erro e esqueci etiqueta da NSA dentro da classe tributária rica 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. uma tag clicando neste ícone de adição e, em seguida, estilize 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, títulos ou blocos de texto normais, cada texto pode conter vários tipos de conteúdo, como, obviamente, todos os títulos diferentes que temos, podemos colocá-los dentro, podemos colocar imagens, temos colocar imagens, Podemos colocar marcadores, números e todas essas coisas. E dentro do Webflow, os elementos de estilo de texto rico têm suas próprias instruções específicas que acabamos de ler. instruções específicas que acabamos Basicamente , a primeira etapa é dar uma classe ao rich text. Então, tem uma aula muito específica, certo? Você tem que estilizar aquele 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 rich text 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, certo? Isso é o que você está fazendo na realidade. E na segunda etapa, você seleciona a tag apropriada. Então, quando você, por exemplo, quer 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 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 texto rico, 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, essas instruções sobre como estilizar texto rico não têm nada a ver com um CMS. É assim que o rich text funciona. 142. Blog e CMS: parte inferior do bloco do autor: E continuando de onde paramos, agora precisamos adicionar o bloco inferior do autor. Isso é bem simples. Vamos começar com um novo diblock, que vamos transformar em flexbox E adicione um pouco de espaçamento na parte superior. Agora, para a imagem do perfil do autor, vamos copiar a acima para que tenhamos menos alterações a fazer. I Agora precisamos de alguns blocos de texto, mas vamos colocá-los dentro de outro bloco diurno para que fiquem bem agrupados 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. A a 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. 143. 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, não há nada para 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, teremos a mesma barra de navegação 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 quisermos editar isso, certo, queremos editar o rodapé, teríamos que editar um dos rodapés, à direita, 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 ir a um lugar e alterar uma instância e, em todo o site, 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 precise ser corrigido e alterado. 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 anulada, 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 tipo de alteração no componente mestre, 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 Então, 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 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 ao poste do bloco. Se você for ao painel Componentes, verá que agora há um componente de rodapé lá Você pode arrastar 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, selecione-o e 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 para outras instâncias. Não importa em qual página você está editando o componente. Se você clicou 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 como este título. E no espaço de configuração 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. Edite o componente na propriedade. 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 Classificar. 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. Para se livrar dessas propriedades, no modo de edição, vá para a guia Adereços É aí que você terá todas as propriedades listadas em um só lugar. Você pode simplesmente excluí-los daqui, um por um. 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 clicando com o botão direito do mouse na instância e depois desvinculando a instância Agora, isso é completamente independente do componente. Para recapitular, os componentes são reutilizáveis e conectados, é muito útil para seções e blocos repetidos, 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 certos elementos da 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. 144. Blog e CMS: Publicação responsiva: Estamos de volta para um design responsivo. Há muito pouco que precisa ser feito possamos resolver isso em um único vídeo. A barra Nab precisa de alguma edição para o modo paisagem. Primeiro, vamos corrigir as margens ou a seção padrão tem um preenchimento lateral de 30 pixels, mas a barra Nab, neste caso, tem um de 60 Isso porque isso é um pouco diferente, sem nenhuma barra da nossa página inicial. 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 isso afetará a página inicial que está com boa aparência. Vamos verificar o modo de pré-visualizaçã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. Uma vez que eles precisam se manter escuros. Nesse caso, só podemos alterar o plano de fundo do menu suspenso. Então, mudá-la para uma graça muito leve vai ficar bem. Tudo bem, agora a barra está boa 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. Isso vai ser estreito. 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 ficam bem Eu também reduziria 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 em que 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 há uma maneira de contornar Se atribuirmos à imagem principal uma margem negativa, isso cancelará o preenchimento da seção A seção do tablet tem um preenchimento de 60 pixels. 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 cairá em cascata até os celulares, mas precisamos ajustar para que a seção móvel pendente seja de 30 pixels Portanto, também precisamos ajustá-lo para 30 pixels negativos. E isso será exatamente de ponta a ponta. Modo retrato. O autor e segmento de data precisam de alguns ajustes. O espaço intermediário é demais, por isso que está sendo espremido desse jeito. Vamos apenas reduzir isso Estamos controlando o espaçamento no divisor, é aí que precisamos adicioná-lo 15 pixels a menos serão bons nos 15 à esquerda, mas à direita zero porque há margem a partir da data. Além disso, poderíamos usar um formato de data mais curto a partir daqui. Agora vamos verificar o resto da página. O rich text não precisa de ajustes. Já é responsável e fica bem em todas as telas do retrato. Podemos até mesmo cortar um pouco de espaço à direita e aproximar o conteúdo dele. Isso é tudo que o rodapé precisa. 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 bloco. Fique por aqui. 145. Blog e CMS: página inicial do blog: Agora, uma última página que nosso blog precisa é essa página inicial de blocos, aquela grade que criamos. 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 normal e , em seguida, inserir itens do CMS nela 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 agora, barra. É exatamente igual ao da nossa página de bloqueio de postagem, então podemos copiá-lo. Mas, em vez de copiar, é melhor criar um componente a partir dele. Clique com o botão direito na barra agora e selecione Criar componente. Agora dê o nome de bar. E nós, bom. Agora podemos rastrear isso diretamente em nossa página de bloqueio. Em seguida, precisamos da seção e do contêiner usuais. Temos um pequeno problema com a cor de fundo da barra de navegação aqui Porque precisamos que seja cinza. Poderíamos ficar 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 diblock e dar a esse diblock uma 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. Muito simples. Nada precisa ser ajustado neste caso. Agora, para a parte divertida, primeiro vamos projetar um carro estático. Em seguida, descobriremos como transformá-lo em um item dinâmico que extrai conteúdo do CMS Vamos adicionar um novo bloco de negócios 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 bloco chamado cartão de bloco. Vamos fazer esse fundo branco, dar os cantos arredondados e a largura. Agora vamos dar a este 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. Ela desaparece Quando damos uma largura, ela está vazia. É por isso. Não se preocupe. Em seguida, precisamos de uma miniatura. Isso precisa de uma altura igual à altura exata dos desenhos. Podemos adicionar uma imagem aleatória por enquanto para que possamos ver o que está acontecendo. Vamos alterar a configuração de ajuste para que a imagem não pareça distorcida. Só tem 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, o estouro é visível em qualquer bloco de negócios Mas se alterarmos o transbordamento para oculto no cartão de bloqueio , isso cortará tudo que estiver fora dos limites Mãos arredondando os cantos da miniatura. Em seguida, precisamos de conteúdo que vamos agrupar em um bloco deb Dê a ele um preenchimento de 20 pixels. Vamos discar o título e o parágrafo. Para o título, podemos criar uma das tags, talvez duas ou H três. Lembre-se de como estilizar as tags de cabeçalho. Altere a tag nas configurações e vá 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 e semi bola e assim por diante E uma última coisa, remova a margem superior, você pode desvincular o estilo do texto para que as configurações sejam reveladas Agora, para o autor e o bloco de data, precisaremos de um novo bloco para isso. Já temos exatamente o mesmo bloco na página de postagem. Vou tentar reusar a mesma classe aqui. No entanto, ele 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 esse estilo usando classes de combinação. O avatar tem 30 pixels em vez de 40. O texto tem 12 pixels e tem espaçamentos diferentes no site 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 nela. Ao passar o mouse, será uma boa interação. Já sabemos como criar a sombra diretamente nas cartas. 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 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, adicione um efeito de transformação 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 que também cuida da transição para a mudança. É por isso que gosto de usar todas as transições de propriedades em vez de uma individual para cada atributo. Excelente, o carro está pronto, mas ainda não vamos conectá-lo 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 página. Feito. Ótimo. Agora vamos criar um link para essa página de bloqueio. Assim, as pessoas podem 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 Spanel conectada à página de bloqueio, que agora aparece em uma lista suspensa E a mesma coisa no rodapé. Não vamos esquecer a barra de soneca da página inicial porque a barra de navegação não está conectada ao componente que agora é a página de bloqueio e pode ser acessada de qualquer lugar do site Tudo bem, a seguir, conectaremos a rede ao CMS Stick 146. Listas de coleção: Há duas maneiras de extrair itens do CMS. Uma delas é usar páginas de coleção. Isso é o que fizemos com o poste do bloco. 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 extrair o conteúdo do CMS para outro lugar, por exemplo, em páginas estáticas como a página inicial ou na página de bloqueio, onde todos esses cartões de bloqueio entram em uma lista de coleção 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. Não há nada para ver aqui ainda. Primeiro, precisamos conectá-lo a uma coleção específica, no nosso caso, bloquear postagens. Agora entendemos isso. As caixas ainda estão vazias, mas desta vez você pode ver títulos familiares. 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 o cartão de bloco inteiro em uma das caixas. Não importa qual. Não há como selecionar o cartão de bloco inteiro diretamente da tela. Portanto, 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 de 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 mente colmeia Depois de vincularmos os elementos aos campos do CMS, conteúdo apropriado será extraído Vamos conectar os elementos aos campos apropriados. Veja o momento em que você o conecta ao campo CMS e, em seguida, o título de cada cartão é atualizado instantaneamente com base na postagem de bloco específica à qual eles estão conectados Até fazermos essas conexões , todos os elementos são elementos estáticos normais 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 carro 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 um preenchimento de dez pixels nos sites Em nossos designs, o espaço entre cada cartão é de 30 pixels, ou seja, 15 pixels nos sites. Além disso, a margem inferior ou o preenchimento realmente não importam Qualquer um funciona. Agora vamos cuidar dessa distribuição ímpar das cartas Isso acontece quando as alturas de cada item são diferentes, então elas são dispostas de forma confusa Quebrando nossa grade organizada, podemos consertar isso facilmente com uma caixa flexível Precisamos aplicar a caixa flexível ao primeiro pai que guarda esses itens de coleção Esta é uma lista de coleções, certifique-se de não selecionar invólucro de lista de coleções que seja um avô com todas essas coisas dentro. Primeiro, você terá todos os itens compactados em uma única linha. Tudo o que precisamos fazer aqui é habilitar o empacotamento e obteremos exatamente o layout que pretendemos. Só há 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. Nenhuma das configurações tem a opção de vincular o URL ao link do CMS. Precisamos transformar um deles em um elemento de link. Isso pode ser um título, por exemplo, isso pode ser um link ou uma imagem em miniatura, Ou podemos transformar o cartão inteiro em um link. Como fazemos isso? Usando o elemento de bloco de link, teríamos que colocar o cartão inteiro dentro de um bloco de link. Todas essas são opções muito válidas, sites diferentes lidam com isso de forma diferente. Nesse layout atual que temos, eu gostaria que todo o cartão pudesse ser clicado se tivéssemos links diferentes para levar a lugares diferentes Por exemplo, o nome do autor que leva à página do autor. Ou se houvesse um link para uma categoria , não poderíamos colocar tudo dentro de um bloco de links. Porque você não pode aninhar links dentro de outros links. Mas , nesse caso, podemos. Vamos em frente. Basta adicionar um elemento de bloco de links dentro do item da coleção. Quando você obtiver as configurações, você terá essa página roxa ativada. Isso permite vincular a uma página de coleção. Escolha isso e selecione a postagem de bloqueio atual. Agora, esse link irá para a página de postagem do bloco. Por fim, vamos mover o cartão inteiro dentro desse bloco de links. Na verdade, não precisamos desse bloco extra. Podemos aplicar a classe de cartão de bloqueio ao próprio bloco de links e mover a miniatura e o conteúdo dentro dele e nos livrar do bloco A extra Como agora é um bloco de links, todo o texto dentro do cartão está sublinhado Esse é apenas um comportamento normal dos links. Podemos nos livrar do sublinhado nas configurações de decoração de texto, selecionar nenhum Tudo bem, 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. E isso torna a grade um pouco mais organizada para fazer o mesmo Só precisamos esticar as cartas para preencher o espaço vazio, o item da coleção, já que é uma pimenta flexível, já está se esticando, mas a carta de bloco não Se dermos 100% de altura a um cartão de bloco, isso preencherá o espaço vazio. Lembre-se de que você só precisa estilizar uma das cartas de bloco e todas elas 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. Agora, 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 primeiro até o final Definitivamente, precisamos fazer esse alongamento desta vez, 100% de altura não vai funcionar porque isso significa que 100% do cartão do bloco de altura dos pais é o pai, que é mais alto porque há a imagem dentro Se dermos 100% , não apenas preencherá o espaço vazio, mas também ultrapassará as fronteiras. De que outra forma podemos fazer com que ele preencha o espaço? Aqui está uma maneira pela qual podemos 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 uma caixa flexível com alinhamento vertical e justificar as configurações de espaço entre elas para espaço entre elas 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, basta colocar o título e o resumo da postagem em um bloco div. E isso é tudo. Quando digo embrulhar algo, significa adicionar um novo bloco Be e colocar os elementos dentro da embalagem como uma caixa de presente. Isso é tudo. Vamos conferir a prévia. Tudo está funcionando 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 2030 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. 147. Blog e CMS: Paginação: Neste vídeo, adicionaremos a paginação sem dividir cartões de bloco Cada cartão de bloco seria carregado. Quando temos muitos posts de bloqueio que fariam a página carregar muito lentamente e não seriam melhores 20 cartões, tudo bem. Mas para 50, 60 e mais, isso vai 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 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 é divisível por três, como 912, etc. Dez não é bom porque então você terá vagas vazias. O número ideal é algo que pode ser dividido em layouts de 3,2 colunas Por quê? Porque em telas menores, provavelmente ainda precisaremos mudar isso para um layout de duas colunas. Novamente, 12 é a melhor opção 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 publicações por autor ou publicações criadas 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 nisso. Por exemplo, uma maneira de fazer isso é filtrar categorias. Toda vez que criamos uma postagem de bloco, escolhemos uma categoria do bloco, certo? Então, diríamos que talvez isso seja sobre culinária, talvez seja espanhol, culinária italiana, culinária francesa, qualquer coisa. Então teríamos páginas dedicadas para cada categoria, certo? Todos os posts do bloco sobre culinária francesa, todos os posts do bloco sobre comida chinesa. Em cada uma dessas páginas. Em seguida, criaríamos esse filtro. 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. 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á. 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 em bloco e, em seguida, limitaríamos os itens a dois ou três Ele mostra apenas algumas sugestões de postagem. É assim que as configurações da lista de coleções podem ser simples e poderosas . As possibilidades são imensas. Depois de ativar a paginação, você faz com que os botões seguinte e anterior se movam entre as O estilo é bem fácil. Basta selecionar o botão, dar a ele uma cor de fundo, alterar a cor do imposto, adicionar um pouco mais de espaçamento, adicionar um pouco de fatos 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 é. O efeito de foco é a melhor maneira de fazer isso. Recentemente, eu estava lendo uma biografia de Steve Jobs e li essa frase quando ele estava dizendo que a tecnologia tem fazer você sentir que pode dominá-los. Isso é muito verdadeiro. É por isso que produtos e tecnologias simples e minimalistas são sempre melhores do que produtos complicados com vários botões e mostradores. Sempre que você criar e projetar seus sites, nunca se esqueça da usabilidade e nunca esqueça como o usuário vai interagir com ela Verifique se há um botão, certifique-se de que o botão tenha um efeito de foco ou algum tipo de interação com ele Então, podemos entender que essa coisa é clicável, certo? Ou se houver um link, o link muda de cor? Existe algum indicador de que isso é um link? E você pode clicar aqui e isso 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 tivéssemos tantos sites ruins, isso às vezes nos deixa loucos. De qualquer forma, voltando à paginação, voltando ao estilo do nosso botão, podemos aplicar a mesma classe ao O nome da classe não faz sentido, mas não consegui pensar em nada que fosse melhor. Talvez eu deva usar o botão de paginação, isso é um pouco 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. Esse é o nosso problema : precisamos apenas torná-lo responsivo E faremos isso no próximo vídeo. Fique por aqui. 148. Blog e CMS: página de blog responsiva: Agora vamos tornar nossa página de bloqueio responsiva. O desktop está indo bem. A corda do carro tem um tamanho razoável para que ainda possamos manter três colunas nos tablets. É uma história diferente. É demais para três, 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 uma caixa flexível com 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 também 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ê reduz para um tamanho menor , duas colunas são demais. Uma opção é criar um layout de coluna única. Portanto, precisaríamos definir a largura para 100%. Uma coluna única não é ruim nesse caso, mas você sabe qual seria o layout perfeito se pudéssemos ter um layout duas colunas e 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 encolherão até 300 pixels. Em seguida, eles passarão para a segunda linha, criando um layout de coluna. Mas essa é 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 infantis do Flex. Abaixo das opções Mais, remova as configurações de largura mínima antes de começar a editar essa Há três campos com crescimento, redução e valor base A combinação desses três valores gera resultados diferentes. É muito poderoso. Não vou me aprofundar na lógica de como eles funcionarão. Eu não me entendo totalmente, 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 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. 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, apenas mantenha-o 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. 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 tenha um problema, já que 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 Voltamos o flex child ao valor padrão, que é o encolhimento, se necessário, e então poderemos alterar a largura de 100%. Há uma última coisa que podemos corrigir Ter preenchimento nas laterais cria esse pequeno desalinhamento nas bordas da nossa página, você sabe, onde todo o nosso conteúdo Isso é ser um pouco exigente. Mas eu gosto das coisas da forma mais exata possível. Você deve fazer o possível para desenvolver esse hábito. Ficar obcecado com detalhes é uma boa qualidade para um web designer Então, como podemos corrigir esse pequeno desalinhamento? Podemos ter uma classe de combinação especial para os carros que estão nas bordas Lembra-se da mente colmeia. Mas é bem simples. Podemos adicionar uma margem negativa ao pai que contém todos esses itens de -15 pixels em ambos os lados E pronto, você tem os carros alinhados agora exatamente nas bordas. É isso, na verdade. É isso mesmo. Nosso site está totalmente pronto. É responsivo, bonito, rápido e poderoso As pessoas pagam um bom dinheiro por isso. Na próxima seção, daremos retoques finais e publicaremos o site Primeiro, vamos publicá-lo no subdomínio Webflow, mas depois vamos publicá-lo em um domínio personalizado, porque essa é uma parte importante Você precisa aprender isso também. Assim, você pode pegar o site que está criando para o cliente e, em seguida , colocá-lo no domínio dele, , colocá-lo no domínio dele, mas falaremos mais sobre isso mais tarde. 150. Indo ao vivo: envios de formulários: Agora vamos testar nossos formulários. Criamos um formulário bem simples, desta vez, apenas um endereço de e-mail. Podemos enlouquecer com formulários no Webflow, mas seja um formulário de campo único ou dez campos com várias etapas, todos funcionam da mesma forma 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 essa 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 e o fluxo da web e adicionar o URL Nas configurações do formulário, você pode adicionar uma URL completa sem domínio e HTTPS e todas essas coisas, ou pode simplesmente usar a barra e o slug final Slug é basicamente esse final que obtemos dentro da URL. Como, por exemplo, nos blogs, no blog que tínhamos , isso é uma lesma Você pode criar uma página e depois criar aquele trabalho árduo, o que é obrigado, algo assim E então adicione isso dentro do URL, dentro do URL de redirecionamento E o navegador entende que isso significa em nosso próprio site e não em algum outro site. Ok, agora vamos ver o que aconteceu com o envio do nosso formulário. Vá para Configurações do projeto e clique na guia Formulário. Se você rolar até o final, é aí que você verá o envio. Há muita coisa que podemos fazer com esses envios. Podemos excluir, podemos exportá-lo para CSV. Podemos enviar envios automaticamente por e-mail. Podemos fornecer o endereço de e-mail de uma pessoa que receberá envios, geralmente o endereço de e-mail do seu cliente E eles receberão um e-mail como esse. Eu adoro isso. O Webflow também cuida disso, e eu não preciso instalar 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. Outra coisa que podemos fazer é integrar os envios de formulários a outros aplicativos, por exemplo, a ferramentas de marketing por e-mail, como o Mail Chimp Novos envios podem ser enviados para plataformas de marketing por e-mail, onde seus clientes podem fazer suas coisas com boletins informativos por e-mail material promocional e tudo E isso é tudo o que há para enviar formulários. 151. Como entrar ativo: domínio personalizado: Certo, nesse vídeo, vou mostrar a vocês como conectar seu site a um domínio personalizado. Para isso, vamos precisar adicionar um plano de hospedagem ao nosso projeto de armas. Então isso requer pagamentos. Então você não precisa passar por este tutorial para tipo de publicar seu site em um domínio personalizado . Você já publicou no nosso domínio de roupas de trabalho, e isso é o suficiente. Mas com clientes reais e projetos reais, obviamente você tem que fazer isso quando você teria que publicar seu projeto e seu site em um domínio real, e eu vou demonstrar como fazê-lo aqui. Estou pagando pelo plano de hospedagem e pela compra do domínio, certo, mas você não precisa fazer isso. E uma vez que você já está fazendo os projetos de rial e você quer publicá-los, então você sabe onde vir e onde ver o tutorial sobre como ele é feito. É bem simples e direto, e vou mostrar a vocês como não está bem aqui. Então, a primeira coisa que precisamos fazer é ir para as configurações do projeto dentro das configurações, dispostos a passar pelo toque de hospedagem, e aqui estamos indo para e plano de hospedagem. Os domínios personalizados estão aqui, como você pode ver, mas eles não são ativados até que nós na hospedagem. E nós temos que adicionar a hospedagem CMS porque você pode ver já O plano básico está desativado porque o projeto que esta equipe no projeto do site tem um CMS direito o bloco nele. Então é por isso que temos que escolher a hospedagem do CMS que, uh, ele tem $16 por mês e você vai sair pago anualmente e é, ah, $20 por mês Você pagou por mês, o que eu vou fazer em Neste caso, vou escolher a fiança de Monterey. Há também esta notificação sobre o faturamento do cliente, que o futuro muito legal no fluxo da Web. Isso significa que você pode enviar uma fatura diretamente para o seu cliente. Seu cliente irá fornecer seus próprios detalhes de cartão de crédito que irá orar para pagar por esta hospedagem, Não você, e você está tem uma opção de realmente fazer um pouco de dinheiro com ele, e você pode cobrar extra e colocar como extra por mês. Por exemplo, se você oferecer aos seus clientes de serviço para gostar de uma taxa de manutenção ou algo assim, digamos que você quer Teoh cobrar talvez US $50 por mês e você pode manter os US $30 em. Então cobram o preço todo aos seus clientes. $50, em seguida, foi fluxo vai levar seu berço em sua planta de hospedagem. Mais sobre isso mais tarde na parte. E o freelancing? Falo sobre o futuro e explico os benefícios dele e todas essas coisas. Por enquanto, vamos pular esse passo. Apenas pague. Pelo menos eu vou me pagar aqui. Uma vez que o pagamento é feito, chegamos a esta página. Agora ele diz que CMS hospedagem é o plano atual, e então você pode ver sob domínio personalizado, e nós temos uma opção para realmente em novos dominados, que precisamos comprar. Ainda não temos um domínio, por isso vai, papá Dot com. Vai, papá, é onde compro o meu domínio. Normalmente é simples. É simples. Provavelmente é um dos maiores lá fora. Segure os manequins que são ponto com Eles estão disponíveis lá, mas domínios específicos do país como digamos ponto de para a Alemanha. Ou que ele pediu a Espanha. Não está no Go Daddy. Normalmente eu não acho que há guardados, mas eu posso estar errado, mas geralmente eles estão em sites específicos de um país. Ah, que vendem domínios específicos de cada país, então você teria que comprá-los lá. Mas o tutorial que eu vou mostrar a você e como conectá-los eles funcionam exatamente a mais ou menos da mesma maneira em qualquer fora desses sites de domínio. Parece que estou a receber um desconto muito bom. 85 centavos para o primeiro ano. Não é melhor. Todos vão. Isso é muito bom com descontos fora. Essa é uma razão pela qual é um bom lugar para comprá-los porque eles têm esses descontos loucos quando eles te dão, tipo, primeiro ano para, tipo, 30 fichas sujas cabeça a cartão. Continue para o carrinho aqui. Oh, vá. Ele vai tentar fazer algumas coisas diferentes, como proteção de privacidade, que nós não precisamos. Não, obrigado. Um designer de sites. Também não precisamos disso. Obrigado, e e-mails continuam a cartão. E aqui vai. Isso vai tentar Teoh instantaneamente Upsell e vender seu contrato de cinco anos imediatamente. Eu geralmente muda para um ano agora o preço voltou ao normal e eu vou escolher uma opção papal para o pagamento e eles são o domínio está feito. Agora precisamos voltar. Teoh Web fluxo novamente sob hospedagem toque e teve o nosso novo domínio personalizado onde Flo está indo, vai detectar que estamos usando Go Daddy para o nosso domínio no que eles oferecem aqui é que eles têm essa capacidade de conectar domínio automaticamente, que é um futuro legal. Torna as coisas muito mais fáceis. Por isso, se o teu domínio está ligado, vai, papá. Essa é uma razão pela qual eu costumo usar Go Daddy, porque Whipple tem essa conexão automática, e eles também acho que a única outra conexão automática que eles usam com talvez domínios do Google . Mas os domínios do Google não estão disponíveis em todos os países, então você pode se conectar automaticamente quando tiver acesso ao domínio e acessar a conta do papai porque ele vai pedir que você faça login em sua conta. E se você estiver assinando que fará a conexão e todas as alterações de configuração que precisam ser alteradas automaticamente para o domínio, você não precisa se preocupar com isso. Mas neste caso, eu vou fazer isso manualmente. Eso Aiken demonstrar como ele realmente funciona porque ele vai ser semelhante, Teoh todos os outros sites onde você está indo. Teoh alterou as configurações para conectar o domínio personalizado. Então vamos usar a conexão manualmente. Sim, esta é uma mensagem dizendo isso porque estamos adicionando um novo domínio. A indexação de subdomínio foi desabilitada. Isso significa que é basicamente algo a ver com o CEO. Então não temos um site conectado a dois domínios muito diferentes e porque isso é algo não é permitido pelo Google, e é por isso que ele automaticamente d estável. Permaneça indexando para esse domínio temporário que usamos do Wetklo. Então basta clicar, OK, tudo bem, Agora nós temos este tipo de instruções sobre o que precisamos fazer uma vez que atinge o nosso domínio, nós temos este fluxo ponto com que é o domínio nu e, em seguida, um que perseguimos com o www curso Lifelock que calma e Web lento nos dá esses valores que temos que adicionar dentro DNS configuração até agora provedor de domínio. Então o que precisamos fazer é voltar para ir, papai dentro Go, papai, papai, está sob produtos, meus produtos e aqui ele vai nos mostrar todos os sites que temos todos os domínios que não temos sites, certo? Então, se o curso não vir aqui e, em seguida, temos que escolher DNS. E geralmente é a mesma coisa em todos os outros sites. Fornecedores de domínio. Ele é sempre chamado de DNS apenas em seu gerenciamento ou algo baseado em editor DNS. Seja o que for, basicamente o teclado é DNs. É para onde você quer ir. E você começa a esses tipos fora folha estranha fora de diferentes registros em nosso registro DNS que parecem complicados. Mas eles são bem simples. E o que precisamos fazer aqui é adicionar isto um registro e um registro de nome C. Como você pode ver, temos que escolher esse tipo, certo? O nome é em e, em seguida, o valor é este I p endereço que é fornecido pelo go Daddy. Então nós temos que copiar o endereço I p e, em seguida, vamos editar um que tem uma rede. Se você é do tipo policial, ela não tem um anúncio. Você tem que criar qualquer um, e é isso. Mas se ele já tem esse registro X com um símbolo at, que é um registro A direito e ambos têm que coincidir, então se ele está em um registro e tem um anúncio porque, como você pode ver, há alguns outros registros com uma rede como Um s ou S O A. Então não se preocupe com isso. Mas se há um registro e ele diz ao lado dele em então você tem que editar aquele. Se você não vê nada assim, você só precisa adicionar um novo. Neste caso, vá que ele estava nos mostrando que nós temos um. Então eu só vou editá-lo. Então anfitriã em e aponta para o endereço I p por fluxo úmido Tudo o resto você pode simplesmente deixar o mesmo. Então esse é um registro que precisamos do segundo um registro porque nós não temos uma opção que você no 2º 1 lá. Então adicione a partir daqui e sob o tipo que vamos escolher um host tipo novamente em e aponta para este momento um segundo i p endereço do fluxo da Web e aponta aqui TL Você pode acreditar que é este seguro que é feito que um registros são feitos Agora precisamos adicioná-lo. O registro de nome do mar para um www, então copie o valor da Web lento e adicionado, se você não o tiver. Você só precisa adicionar o novo. É isso. Assim como fizemos da última vez que tive algum registro e ver o nome em vez de um disco. Tudo bem, é isso. Agora as configurações de DNS para o domínio foram editadas. Agora podemos verificar o status direito no chão molhado e onde florais verificar se tudo está conectado. Bem, como você pode ver, é para o primeiro domínio. Vamos verificar o status para o 2º 1 Lá vai você. 2º 1 também está conectado. Este foi realmente super rápido. Não costuma acontecer tão rápido, eu acho, porque era um novo domínio. Também ouro. É bastante rápido atualizar isso. O DNS registra alguns outros sites. Eles são muito lentos, e geralmente eles podem levar até 48 horas para atualizar os registros. Então não surte. E não se preocupe se não funcionar imediatamente, apenas espere 48 horas, 24 horas ou 48 horas realmente depende do provedor da Deanna que está fornecendo isso porque , você sabe, alguns dos meus clientes usam provedores de DNS obscuros muito locais, e eles se atualizam como todas as vezes por dia. Ela não trabalha em 15. Ou se um dia passar dois dias passam, ainda não funciona. Em seguida, você teria que entrar em contato com o próprio provedor DNS. Porque às vezes o que acontece é que o site pode estar em ir papai s o. A pessoa pode comprar o domínio em um só lugar, mas, em seguida, mover o gerenciamento DNS. Então esses registros que acabamos de adicionar, eles podem movê-lo para outro lugar com alguma empresa diferente ou um serviço diferente ou algo assim. Então sabíamos que conversamos com o cliente. Apenas certifique-se de perguntar a eles, você sabe, eu geralmente não faço isso. Às vezes eu dou esses detalhes aos meus clientes porque se eles têm um domínio e se eles têm o editor DNS ou qualquer outra coisa, isso significa que eles já sabem como fazer isso ou eles têm feito onde eles estão de alguma forma. Seja qual for. Mas se eles não têm, então eu poderia fazer a coisa toda por eles. Agora temos que escolher um padrão. Podemos usar uma dessas versões. Ou um com o www ou um sem. É uma versão padrão do nosso site. Então, se alguém apenas digitar em curso de fluxo molhado ponto com eles serão redirecionados para www Web flow. Claro, isso vem. Esta é geralmente a versão que eu gosto de fazer, que é manter o www s a versão padrão e principal. Então tudo não pode vir e redireciona para estes principais você pode fazê-lo inverte. Bem, eu não sei se alguma vez há alguma preferência específica. Eu acho que Www sempre é a melhor opção para apenas mantê-lo como o domínio padrão. E um último passo. Temos que publicá-lo. Sim, agora não é editora. Se você verificar. Não se esqueça que esta última metade uso sempre tem que publicar a partir daqui, e então ele vai estar disponível. Então vamos fazer selecionar este subdomínio de fluxo de trabalho e selecionar nosso novo domínio e publicado para selecionar os domínios. E não vamos Chuck. Ah site é agora publicado em um domínio personalizado onde flo curso dot com Dentro das configurações gerais , às vezes há piso molhado mantém a marca direita. O distintivo foi agora removido automaticamente, mas às vezes pode estar lá. E também há este outro Brendan com insight HTML Então você pode alterar este tipo de desativado esta marca de fluxo de trabalho a partir daqui tanto em HTML ou no site e novamente publicado mais uma vez. E também podemos realmente despublicar esta segunda arma ou que septo ela. Não precisamos mais disso, já que já o temos em nosso domínio principal e é isso. É assim que você publica um site no chão molhado em um costume. Não torne isso fácil. 152. Site de portfólio: Eu costumava ter uma empresa com dois dos meus amigos e fazíamos muitas contratações nos dias. E o que muitos candidatos fariam é que eles se subvendiam. Eles viriam e diriam, você sabe, em tudo, eu sou apenas um iniciante. Não tenho muita experiência. Yada, amigão. Não, sou um aprendiz rápido. Mas minha conclusão como seu potencial empregador é que você é uma droga. Como eu sei que você acabou de me contar? Portanto, começar em qualquer nova profissão é difícil porque as pessoas querem contratar profissionais. Eles não querem iniciantes, eles não produzem. Essa é a verdade. Por aqui está um grande erro. Muitas pessoas fazem. Eles acham que ser profissional é alguém com anos de experiência. Nem um pouco. Um profissional, alguém que leva seu trabalho a sério, alguém que parece que pode fazer nada e alguém que quer prestar um ótimo serviço aos seus clientes ou empregadores. Então, como você se faz parecer um profissional? Para começar, você precisa mostrar o que pode fazer em seu web design. Isso é feito com o 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, desde o design até um prédio fora deste curso. Isso vai lhe dar três peças de portfólio. E isso é suficiente para você ir lá e começar a se candidatar a empregos. E o mais importante, fazer outro projeto independente lhe dará prática e experiência fora deste curso guiado. Mas peças de portfólio não são suficientes para parecer um verdadeiro problema. Precisamos de um site de portfólio porque o que você acha que estamos em alvoroço? web designer tem seu próprio site pessoal, mas você ficaria surpreso que um grande pedaço de web designers, eles realmente não têm. Eles têm seu portfólio em plataformas como Behance ou drible, e é isso que eles compartilham com seus clientes em potencial, enviando esse link para seu perfil com todo esse portfólio ou carregado lá. Mas eu nunca faço isso primeiro. Isso não me faz parecer um profissional. Como web designer freelancer, você é essencialmente uma empresa que presta um serviço aos seus clientes, certo? Em 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 e eu apenas o perfil do Instagram. E segundo, estou enviando-os para um lugar com outros bons designers. É só uma má ideia. Estou ajudando-os a encontrar outra pessoa. Estou mostrando meu trabalho ao lado do melhor trabalho de design do mundo. E mesmo que eu fosse o melhor candidato disponível para eles, não pareço mais tão bem. Meu trabalho não parece tão impressionante ao lado do melhor Bork do mundo. Em terceiro lugar, estou perdendo a oportunidade fazer um discurso persuasivo para eles com meu site. Tudo bem, eu posso mostrá-los, talvez o processo de design. Posso escrever um conteúdo muito persuasivo e convincente e uma cópia para convencê-los de que eles deveriam me contratar. Eu poderia impressioná-los com meu site em si. Posso solicitá-los a agir para que eles possam entrar em contato ou enviar um formulário ou o que quer que seja. Agora não estou dizendo que você não deve ter perfis nessas plataformas. Às vezes, você pode até encontrar trabalho para a linha lá, mas não é um lugar para direcionar seus clientes em potencial. Além disso, você é um web designer. Você nunca pensou em criar um site para si mesmo. Isso simplesmente não parece sério. É como ser mecânico de automóveis nunca possuir um site de portfólio de carros, pode fazer muitas vendas e lançamentos para você. E eu tinha clientes me contratando só porque eles gostaram do meu site. Agora mesmo pensando ou olhando para o site do portfólio, minhas peças de portfólio, eles realmente gostam do próprio site. Então, sabendo pela experiência pessoal o quanto um bom portfólio de sites pode ajudar. Eu projetei e construí um portfólio incrível de vantagem para você. Pensei muito nesse design. Meu objetivo era dar a você algo que parecesse uma série muito elegante, mas com um toque de diversão. Eu polvilhei algumas interações sutis para mostrar que você é capaz de fazer essas coisas. E eu já adicionei duas peças de portfólio que você fez neste curso. Então você nem precisa se preocupar em colocá-los. E eu escrevi uma cópia persuasiva que fará muitos lançamentos para você. Tudo isso para mostrar que você é um profissional forte e sólido que pode fazer as coisas. No próximo vídeo, mostrarei como instalar este site para você mesmo, como adicionar conteúdo, seu próprio conteúdo e como fazer algumas personalizações. Então, para que você possa torná-lo um pouco mais pessoal. 153. Tour para site Portfolio: antes de mostrar como instalar um site e um filme na sua conta de fluxo de trabalho. Deixe-me fazer uma visita guiada pelo site e mostrar-lhe o que é o que e mostrar-lhe. Qual é o design pensando por trás de tudo isso? Parte do conteúdo que você verá em uma página é um imposto de espaço reservado como este título. E no próximo vídeo, onde eu mostrarei como instalar, decida no ícone do Weppler que você substituirá o conteúdo genérico genérico por suas informações pessoais. O site é bastante simples. O caminho colocado para seus sites é suposto ser. Temos apenas duas páginas na página inicial e páginas CMS para cada projeto. O conteúdo fora do site está na narrativa em primeira pessoa. Este é um estilo que eu amo para sites de portfólio. Se estou olhando para o portfólio de alguém, estou interessado na pessoa por trás disso. Então eu quero ver uma interação amigável para que eu possa sentir a personalidade da pessoa. Eu também quero ver uma informação clara do que você faz. Qual é a sua especialidade do que é este site sobre linguagem direta clara, sabe? Posso trabalhar com você? Você está disponível para o trabalho. Como posso trabalhar com você? Quais são as facadas e assim por diante? Também caso muito direcional fora do portfólio. Alguns intérpretes têm isso em uma página separada, e isso é demais para ele. Tenho que achar uma pista. Clique nesse idioma para que a página seja carregada novamente para finalmente ver seu trabalho. Então eu gosto de mostrar para suas peças na página inicial instantaneamente após a seção de heróis. Sem olhar direto na sua cara. Como você exibe ou imprime para o seu negócio é importante para um monte de trabalho para os seus lados que eu vi. Eles têm muito confuso, criativo, mas muitas vezes confuso maneira de mostrar passaporte. Muitas vezes, eles usam apenas miniaturas. Sem títulos, sem descrição. Você tem que chegar a uma conclusão por conta própria, não é legal me fazer trabalhar aqui. Como você pode ver, tudo é super claro. Temos um título. Se não tivermos certeza do que é isso, há um título menor dizendo Latest War. Não há como se confundir com isso. Uma descrição do projeto, que é super importante porque muitos designers não fazem isso na página inicial. Os clientes podem nem mesmo visitar a página do projeto eles vão querer obter informações a partir daqui, e é importante dizer-lhes que tipo de projeto é este. Foi você que desenhou? Wasit. Um trabalho individual? Trabalho em equipe? Qual era o seu papel? Para que serve o site? E assim por diante? Eles querem conhecer esta informação essencial para entender. O que diabos eles estão olhando? Eu adicionei alguns impostos, bem como para nos dar informações digitalizáveis sobre tipos de projetos como Wet Floor Development Concept Project. Dizer que é um conceito em uma tag é uma maneira sutil de ser honesto sobre o fato de que era um projeto conceito de projeto significa que não foi realmente pago projeto que você fez para algum negócio existente ou um produto, mas você fez isso seja para a prática ou para este curso ou por algum outro motivo. Você quer evitar decepções estranhas mais tarde, quando seu cliente perguntar algo sobre a empresa de aplicativos de bate-papo para quem você trabalhou e, claro , mais policiais fora do projeto. Como você mostra as telas do projeto é importante para nota muito importante ao criar suas contas em plataformas de freelancing como até trabalhador e freelancer, tirar essas peças do portfólio e gerar outra coisa. Por quê? Porque os sites têm processo de revisão para novos freelancers. Muitos alunos estão fazendo este curso, e se vocês todos se inscreverem com o mesmo trabalho de portfólio, isso vai levantar bandeiras vermelhas ao lidar com clientes, isso não é um problema. Você pode usar esse trabalho, mas para o processo de aplicação de plataformas, ocultá-los temporariamente uma vez aprovado, então você deve ser seguro para colocá-lo de volta. O que eu faço é exatamente o que diz. Tese um lugar para dar uma descrição mais detalhada dos serviços que você fornece e lançar um pouco mais. Aqui está uma dica profissional de direitos autorais. Se você quiser escrever uma cópia persuasiva, faça isso sobre eles. Fale sobre como você vai resolver seus problemas e melhorar suas vidas, não o quanto você ama Web design e a caixa de frango do DSR. Sua paixão. Por último, seção muito óbvia. Se eles querem trabalhar com você, qual é o próximo passo deles? Agora vamos conferir a página Projeto. As páginas do projeto são bastante simples. Alguma descrição do projeto e uma captura de tela grande. Existem muitas maneiras diferentes de demonstrar o seu trabalho de portfólio, mas este é um estilo que eu uso no meu próprio site e eu mais gosto. Alguns designers gostam de fazer um estudo de caso para que eles tenham uma grande apresentação fora do projeto e um pouco de explicação fora do processo. Objetivos desafios Basicamente um conto sobre como o projeto veio a refrescar. Esta é uma excelente abordagem e mostra todo o trabalho que você colocou nele e mostra aos seus potenciais clientes que por trás dos santos fora de seu processo a razão pela qual eu não faço este estudo de caso é simples. É muito trabalho e muita vantagem. Não é grande? Principalmente porque a guerra alvo públicos-alvo como web designers freelance, Nossos clientes 90% do tempo são não-designer e empreendedores. Um bom para o seu lado com capturas de tela simples fora do seu passaporte é informação suficiente para eles. Eles não vão mergulhar fundo no estudo de caso de qualquer maneira. Lá vai apreciar que ele está lá e eles vão pensar ainda mais alto de você. Mas a quantidade de trabalho que temos que fazer para criar o estudo de caso para cada portfólio é demais . Talvez no início tenha entusiasmo suficiente. Mas mais tarde queremos, e nós simplesmente não vamos manter nosso site atualizado por causa disso, e é aí que nós vamos nos ferrar no futuro porque atualizar o quatro anos perfeito vai ser muito trabalho que Só não faça isso. E nós vamos acabar com um velho portfólio peças e esse é o pior resultado que seus projetos vão melhorar e geralmente Web design Trans mudar para que você é projetos mais antigos vai olhar datado e não moderno. Mas se é muito simples de atualizar, você vai transportar ou encorajar a mantê-lo fresco. Então o projeto reza só precisa de um parágrafo fora de uma descrição e uma captura de tela, que você pode exportar diretamente de Sigma. E assim é a ligação para o lado positivo da vida é opcional. É muito útil para os clientes que olham para o projeto. Eles podem ver o site em ação e brincar com ele e ver todo o trabalho que você fez, não apenas tiro verde, mas interações e todas essas coisas. Embora eu tenha uma regra sobre este Onley ligado a sites ao vivo que você está orgulhoso, realmente, sites de clientes estão vivendo organizar, e quando você é feito com um projeto, que o cliente pode mudar as coisas no site. Eles podem adicionar uma nova seção e alterar as coisas por conta própria, contratar outra pessoa para quaisquer novas atualizações e assim por diante. Então, em algum momento, você é pressões. Designs podem acabar procurando ela e nós, e você não quer mostrar um site que foi colocado seu ao longo do tempo. Mesmo que seja você quem está matando bem, é isso. Minimalista, bonito e forte site pessoal para demonstrar o seu trabalho e mostrar potenciais clientes ou profissionalismo e habilidades de Web design. 154. Instalando o site do portfólio: Neste vídeo, mostrarei como instalar o site do portfólio em sua própria conta do webflow para que você possa fazer suas próprias alterações, editar conteúdo, personalizar o estilo e publicar como seu site pessoal Eu criei uma vitrine desse projeto aqui. Este é um lugar onde os designers de 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 Como você já criou dois projetos, o aplicativo de bate-papo e os sites de mapas de equipe , 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 adicionar. Primeiro nome, o logotipo é apenas o imposto. Basta colocar seu nome lá como quiser. Se você 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, há nomes nos campos de SEO, dois lugares, página inicial e o modelo do projeto Depois, há links de e-mail em dois lugares. Há um no bar Nab e outro no. Tanto a barra de navegação quanto o rodapé são componentes que você esperaria. Então, está sincronizado na página dois do projeto. Esses são links de e-mail, então você precisa colocar seu endereço de e-mail dentro do link para que, quando as pessoas clicarem nele, um novo e-mail seja preenchido com seu endereço. 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 como quiser ou não se sentir à vontade para mantê-lo como quiser, mas dar a ele 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 a cor global. Eu preparei o arquivo Figma para essas miniaturas para que você possa facilmente atualizá-las e exportá-las posteriormente. Deixe-me mostrar como fiz esses efeitos de destaque para que você saiba como reutilizá-los Se você decidir, o texto destacado estará dentro de um bloco que tem um elemento de título dentro. E um bloco regular como 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 destaques. Esse título não é um texto fluido É um monte de elementos independentes em linha sentados um ao lado do outro. Para mover a ordem, você precisa arrastar os elementos ou alterar a ordem no Navegador Lembre-se de que os textos destacados podem ser escritos em duas linhas. Tente destacar no máximo duas palavras consecutivas, como web designer, ou tenha várias caixas de destaque próximas uma da 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 títulos é apenas uma sombra de caixa Se você precisar aplicar esse estilo em qualquer outro lugar, basta selecionar uma classe chamada link amarelo. O texto destacado será adicionado com seu efeito de foco. Como você provavelmente notará, a página tem interações muito legais como os destaques no carregamento da página. E essa é uma linha crescida se movendo como uma cobra para cima e para baixo. Deixe-me mostrar onde estão essas coisas. Se você acessar o painel de interações, verá que há três interações no carregamento da página, interações bastante simples. O primeiro controla esses destaques. segundo é para o deslizamento do conteúdo e o terceiro é para a linha de rolagem no loop Você provavelmente não precisará adicionar nada disso exceto um destaque Porque se você adicionar algum elemento de destaque, precisará adicioná-lo à interação dois. Por exemplo, essa nova caixa destacada não é animada. A melhor coisa é simplesmente adicionar um texto dentro das caixas de destaque existentes. Mas se você realmente precisa adicionar novos , aqui está o que você precisa fazer. O novo texto também anima. A animação de destaque é muito simples. A caixa varia de 0% a 100%. Só isso. O estado inicial é definido como escala vertical zero. Em seguida, ele muda para um, o que significa 100%. Ele só cresce 0 a 100% em seu tamanho original O mesmo é feito para cada destaque de forma independente. É por isso que o primeiro corre. E depois o segundo para animar o terceiro, selecione-o na tela e, em estados iniciais, quando esse ícone de adição aparecer, clique nele e selecione 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 horizontalmente. Só 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 Ao mesmo tempo, novamente, desative o bloqueio e coloque um abaixo do valor x. Reproduza a animação para ver como ela está funcionando. Trabalhando. Bom, só precisamos combinar a flexibilização com a de outras. Estou usando nosso quádruplo e 0,6 segundos. Confira a prévia. Perfeito. Quanto às outras interações, provavelmente você não precisará mudar nada Mas se você 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 o elemento correto. A interação aparece no painel. As interações que são acionadas pelo carregamento da página aparecem o tempo todo, independentemente do elemento selecionado. Mas aqueles que têm um elemento acionador, você precisa selecionar o elemento de gatilho exato para encontrar essas interações. Você pode vê-los no Navegador. Todos os elementos acionadores têm esse ícone de relâmpago próximo a ele, que significa que há uma interação nesse elemento Por exemplo, o wrapper de botões, é onde 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 qual é a descrição do nome. Muito simples. duas imagens que você precisará gerar para novos projetos. Uma miniatura para a página inicial e a tela inteira do projeto A tela cheia é simples no Figma. Acesse o design da sua página e explore todo o quadro. Em seguida, basta enviá-lo para o campo correspondente. Mas certifique-se de compactar a imagem primeiro, ou será um arquivo muito grande para a miniatura Vá para este arquivo figma que eu compartilhei com você. No link dos recursos, há uma página chamada Ativos, e é aí que você pode criar suas miniaturas A propósito, você verá aqui há um fabricante 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 da mesma coisa para o grupo traseiro e posicione-a como quiser. Em seguida, exporte a miniatura, comprima-a e carregue-a Então você tem um URL de site vitalício. Se você deixar isso vazio, o link 1 será exibido. Assim, 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. Eu criei esse botão na página inicial. Em seguida, criei o filtro para a lista de coleções, dizendo que exibirá aquelas com a opção ativada com bastante facilidade Então você tem os três textos que aparecem abaixo do título. É isso mesmo. Depois de dizer vá para a página inicial, você pode ver que o novo projeto vai aparecer. Além dos outros, ele se vincula à página do projeto , que também está pronta. Isso é tudo que você precisa fazer para adicionar mais projetos. A propósito, esses projetos na página inicial são uma lista de coleções. Lembre-se de que esse conteúdo está vinculado aos campos do CMS. Você não poderá editar itens individuais diretamente na tela. Você só pode editá-los dentro do CMS. Além disso, a lista de coleções tem uma ordem de classificação aplicada a ela. Vou configurá-lo 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. 155. 150 Encontrando trabalho online NOVO: Vamos falar sobre trabalho 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, upwork.com, ou localmente na cidade em que você mora e faz networking com pessoas do setor ou fazendo networking com startups que participam de conferências de tecnologia, fazendo amizade com outros web designers de sucesso que Porque o que geralmente acontece com os web designers é que eles ficam lotados porque um designer só pode criar um site por vez, certo? Você não pode criar 1020 sites simultaneamente. Então, bons designers compram livros com muita facilidade. E o que acontece é que eles enviam o trabalho para seus amigos ou outras pessoas que você recomendaria a seus clientes e assim por diante. Além do LinkedIn e de fóruns de empregos regulares, como o ZipRecruiter, 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ê ver coisas como sua escala atual, sua personalidade ou sua experiência, onde você mora, a cidade em que mora. Todas essas coisas determinarão qual dessas opções será a perfeita para você. Neste estágio, posso dizer qual delas funcionará melhor para você. Ninguém pode, mas a melhor abordagem é escolher um de cada vez e ler a lista. Neste vídeo, vou falar sobre as plataformas on-line e encontrar trabalho em plataformas on-line. Eu vou te dar uma visão geral dos maiores. Há muitos desses. Há para cima, há fibra, há freelancer.com, pessoas por hora, toalha superior e assim por , toalha superior 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 à medida que a concorrência muda, medida que algumas delas caem do primeiro lugar e outras substituem ou surgem novas. Primeiro para cima. Foi aqui que encontrei meu sucesso. Encontrei trabalho suficiente na Upward para estar ocupado em tempo integral. O Upwork é enorme É uma empresa pública, o que significa que está negociando na bolsa de valores. Acho que é a primeira plataforma de freelancers a se tornar pública. Foi criado a partir da fusão da Elance e da Odesk. 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, abordaremos em detalhes que eu vou te ensinar algumas estratégias sobre como ter sucesso em alguns erros comuns a serem evitados. Em outro grande lugar onde empregos autônomos é freelancer.com Eu não trabalhei como freelancer, mas o usei para contratar freelancers Tenho a sensação de que clientes ascendentes pagam um pouco mais do que clientes freelancers E isso pode ser devido à forma como essas duas plataformas segmentam seus clientes. Como você pode ver na página inicial, eles têm esses exemplos de design de aplicativos móveis e design de sites e seus preços Esses são preços muito baixos. Então, parece que eles querem empolgar os clientes com o quão barato eles podem comprar algo, que é uma má notícia para os freelancers Mas não se preocupe com isso, como diz o ditado, se você pagar amendoins, você ganha macacos em breve, os clientes aprenderão isso e escolherão intencionalmente preços mais altos porque preço baixo resultará em resultados de baixa qualidade. As listas Mostra vagas abertas. Esses são trabalhos que você ainda pode realizar. Isso já é muito bom, mas você verá que é um número menor do que o Upwork, que neste momento tem mais de 70.000 vagas abertas Para pesquisar empregos de web design, você pode pesquisar com palavras-chave que, acho pesquisam no título e na descrição do trabalho. Mas a melhor maneira de pesquisar é selecionar uma escala nos filtros. Isso é muito melhor. É claro que nem tudo isso será adequado para você. Essas palavras-chave e escalas são todas selecionadas pelos clientes. O que eles consideram o design de um site nem sempre será correto. Então, essa é uma breve visão geral do freelancer. Depois, temos a fibra, que é um pouco diferente das duas primeiras no Upwork, clientes freelancers publicam empregos e freelancers fazem ofertas de compra em freelancers de fibra publicam serviços e os clientes os compram fibra publicam serviços e Por exemplo, este freelancer aqui diz que criará um site de fluxo web responsivo por $200 E ele oferece três pacotes diferentes, básico, padrão e premium. Gosto bastante dessa abordagem baseada em serviços no Fiverr. Na verdade, fiz meu primeiro trabalho como freelancer em fibra. Isso foi há um tempo atrás. Eu retomei projetos por cinco dólares. Naquela época, no Fiverr, esse era o preço. Você só poderia 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 Fiverr Eles mudaram sua abordagem desde então e agora você pode precificar seus serviços como quiser. Muitas vezes, contratei freelancers no Fiverr para fazer trabalhos rápidos e pequenos de tradução, edição de vídeo e Como cliente, é ótimo comprar um serviço que seja como um produto acabado completo. Sem negociações e tudo mais. Ao enviar detalhes, aguarde alguns dias pelos resultados e pronto. Para ter sucesso no Fiverr, você precisa ganhar dinheiro com volume. A coisa toda está preparada para isso. Não há muitas reuniões com clientes ou negociações. Você obtém os detalhes, entrega um resultado feito no próximo trabalho Eventos que têm datas de entrega específicas que você deve cumprir depois 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. Eu criaria muitos É assim que se chama aqui, o show. Em seguida, criarei alguns modelos ou apenas usarei modelos do mercado de fluxos de trabalho Há muitos modelos bonitos vendidos no Webflow e eles já são ótimos Eu contaria o custo do modelo e o preço total, poderia usar modelos gratuitos para obter preços básicos e, em seguida, pagar modelos com preços premium. E então, quando as pessoas compravam meu show, eu pedia que elas escolhessem qual modelo elas queriam, um tipo de cor de oferta ou outras personalizações com base em Dessa forma, os clientes sabem de antemão o que estão recebendo. Sem discussão sobre designs e eu 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 muito 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 cinco modelos de currículo para escolher. Eu escolheria , depois preencheria seus detalhes e pronto. Ninguém nunca se queixou do design porque sabia o que estava recebendo de antemão Pessoas por hora é uma espécie de mistura entre Fiverr e Os clientes podem encontrar freelancers diretamente, pesquisando habilidades específicas e, em seguida, revisando perfis ou freelancers e Além disso, eles podem publicar projetos como Upwork Freelancer e receber propostas de freelancers E assim como o Fiverr, você pode publicar serviços aqui. Eles chamam isso de ofertas no Fiverr, é chamado de show. Eu usei pessoas por hora tanto como freelancer quanto como cliente. Eu fiz alguns desenhos de currículo aqui. Naquela época, eu contratei web designers e desenvolvedores web várias vezes aqui. Top towel é um lado freelancer que tem uma abordagem bem diferente das outras. Esse lado vai ser um pouco cedo para você em sua carreira, mas eu ainda vou jogar aqui. Então você sabe o que está lá fora. Top-down tem um processo de seleção muito rigoroso para Eles fazem entrevistas, desafios, análises de portfólio antes de aceitarem você na plataforma, querem que os melhores talentos estejam lá, portanto, o nome top tau é que afirmam que apenas 3% dos candidatos são selecionados Portanto, considere de cima para baixo, uma vez que você tenha se destacado em suas habilidades. Obviamente, isso significa que os clientes procurarão freelancers desse lado, procurarão um serviço premium e não terão medo de pagar Então, como você pode ver, mesmo em plataformas on-line, há lugares para encontrar trabalho bem remunerado. Se você quiser mais lados, Forbes listou 79 sites para conseguir empregos autônomos Vá girar a cabeça, conecte os recursos No geral, as possibilidades online são infinitas. Mas a concorrência também é acirrada porque existem muitos web designers por aí. É um mundo inteiro competindo pelos serviços, mas não desanime Na realidade, a maioria dos web designers e a maioria dos talentos que se candidatando a empregos e que estão nessas plataformas. Eles são terríveis. Eles nem são medíocres, menos medíocres; na verdade, os clientes também tiveram dificuldade em encontrar bons talentos Freqüentemente, meus clientes, quando vêm até mim e eu estou ocupado, talvez eu não esteja lotado e não tenha capacidade para aceitar novos projetos. Eles me perguntaram tudo bem. Então você conhece mais alguém que você poderia recomendar? Porque fomos para este lado e não conseguimos encontrar ninguém, porque há tanta competição e tanto barulho acontecendo por aí que encontrar o talento para eles é um pouco difícil. E o problema com essa plataforma é que, porque qualquer um pode participar, ela está aberta ao mundo e o mundo é muito grande Você tem tantas pessoas participando sem nem mesmo ter nenhuma habilidade. exemplo, as pessoas alegam que seus web designers e eles farão qualquer coisa antes mesmo de fazerem um curso de web design. Mas se você pode imaginar qualquer criança ou alguém vem aqui e pensa, eu vou ganhar muito dinheiro online. E eles começaram a pensar: “ Bem, faça web design”. Acabei de instalar um site do Squarespace para alguém ou acabei de aprender a instalar nosso E agora sou web designer ou desenvolvedor web. E para alguém como você, que trabalhou tanto nisso. E sejamos honestos, esse curso foi muito grande. Se você trabalhar e estiver trabalhando nisso, se estiver levando isso a sério, você será imparável E se você fornecer pesquisas de mercadorias e entregar pesquisas de mercadorias e com o polonês e o processo que você já disse. Ter um site excelente mostrando portfólios em algumas outras dicas e truques que vou ensinar a você mais tarde nesta parte do Você estará milhas à frente da concorrência que está apenas brincando lá, sem saber o que estão fazendo na realidade, e eles são apenas pessoas aleatórias ao redor do mundo 156. 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 157. 152 Encontrando trabalho em rede NOVO: E 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 esforçando e tentando transformar a amino em seu negócio E todos eles precisam de um site. 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 e organizadores de Murray, todos precisam de um site precisam Então, onde você se conecta? Comece com o Meetup. Meetup, se você nunca usou, é um lugar onde as pessoas organizam eventos diferentes em torno um tema ou tópico específico, por exemplo, esse grupo realmente gasta seu AKS, organiza diferentes encontros e eventos relacionados ao design em minha cidade, intraempreendedores, startups e intraempreendedores, startups O Meetup, se você nunca usou, é um lugar onde as pessoas organizam eventos diferentes em torno de um tema ou tópico específico, por exemplo, esse grupo realmente gasta seu AKS, organiza diferentes encontros e eventos relacionados ao design em minha cidade, intraempreendedores, startups e 0 outros designers E eles costumam frequentar 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 Isso pode ser útil para você como conexão. Todo mundo tem um show em um evento como esse. Certa vez, participei de um workshop sobre o que, como wireframe, meu site Na verdade, 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 tenho que sair disso. Mesmo se você encontrar a multidão certa no meio, 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 não há problema sacrificar parte do pagamento pela experiência e pela rede, mas, em sacrificar parte do pagamento pela experiência e pela rede, mas, posteriormente, não é a 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 esses para expor seus produtos, encontrar investidores ou encontrar clientes para sua empresa A maioria dessas conferências é paga, então é mais adequada em um estágio 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 você é uma cidade tem essas incubadoras porque esses lugares meio que juntam muitas startups e estão sempre organizando diferentes eventos, juntam muitas startups demonstrações e coisas assim organizando diferentes eventos e você pode verificar se você é uma cidade tem essas incubadoras porque esses lugares meio que juntam muitas startups e estão sempre organizando diferentes eventos, demonstrações e coisas assim. E muitos empregos e conselhos de freelancers podem ser encontrados nesse ecossistema e ambiente. Muitas pessoas têm web designers, designers ou desenvolvedores web. Essas são multidões 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 , portanto, a 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 linha para você. Não faça nada que faça você odiar o web design. Gostar e gostar web design é crucial para o seu sucesso. É um fator melhor para tornar sua empresa lucrativa e bem-sucedida do que qualquer talento ou educação universitária sofisticada E sua diversão com o web design depende de muitas coisas ao seu redor Porque, como em qualquer outro trabalho, há muito mais envolvido do que apenas sentar e projetar ali mesmo, procurar clientes e negociar, enviar propostas e todas as reuniões e todas essas coisas Então, torne o maior número dessas coisas agradáveis também? 158. 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, 159. 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. 160. Dicas 1-3: obter aprovação do seu perfil: Antes de começar a 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 freelancers que estão trabalhando no upwork e nem para os clientes, porque eles simplesmente precisam passar por muitos freelancers diferentes e muita concorrência. Quando você abre uma conta como freelancer no Upwork, envia sua inscrição e eles precisam analisá-la em alguns dias, e eles um grande benefício para freelancers que estão trabalhando no upwork e nem para os clientes, porque eles simplesmente precisam passar por muitos freelancers diferentes e muita concorrência. Quando você abre uma conta como freelancer no Upwork, envia sua inscrição e eles precisam analisá-la em alguns dias, e eles também 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. Você apenas melhorará seu perfil e se inscreverá apenas melhorará seu perfil e E se isso não funcionar repetidamente, minha experiência com esse processo de inscrição não é muito sobre o que falar. Eu consegui. Foi aceito, fim da história. Mas tem esse cara, e em seu blog, ele escreveu 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 as portas novos candidatos que estão se candidatando para novos candidatos que estão se candidatando a essa Por exemplo, se, digamos, designers de logotipo, certo, e Work tem muitos designers de logotipo, mas não há vagas suficientes publicadas nessa categoria , 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. 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, em família de desenvolvimento, você tem design web e móvel, além de desenvolvimento web. E na família de design e criatividade, você tem a categoria de gráficos e design, e talvez até outras para coisas como experiência do usuário e design da interface do usuário já que elas não estão listadas lá. Caso você tenha outras habilidades e planeje realizar outros trabalhos, 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 Upwork tem um enorme banco de dados de habilidades onde você pesquisa e, em seguida, preenche 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 Mas escolha 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 dicas deste artigo em si. Há mais, então confira. Ok, voltando ao meu próprio conteúdo e não roubando conselhos de outras pessoas Portanto, quando você envia sua inscrição pela primeira vez, não tem a opção de enviar um portfólio. Mas se você for rejeitado e se inscrever novamente, essa opção de portfólio será aberta e você poderá enviar um portfólio e mostrar sua senha para apoiar sua inscrição Caso você esteja passando por esse processo de inscrição segunda vez e esteja fazendo o upload do seu portfólio, não faça o upload do trabalho do portfólio deste curso Aqui está o porquê. Como há muitos alunos neste curso, e muitos de vocês provavelmente se esforçarão 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 161. Dicas 4-9: Crie um perfil que atraia clientes: Qual é a primeira coisa que seu cliente diz em seu perfil ou em sua proposta? Sua foto de perfil. Não tome uma grande decisão apenas olhando sua foto de 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. Eu não verifiquei mais nada no perfil dele, mas o sangue já parece que ele quer me roubar 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 Então tire uma foto muito boa na cabeça. E não tente economizar tempo e acessar o perfil do Facebook e pegar algo de lá, porque provavelmente no seu perfil do Facebook você tem fotos que mostram que você está, você sabe , bonita ou bonita E esse não é o critério a ser usado para tirar uma boa foto de chapéu e uma boa foto de perfil no upwork, e 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 algo em que esteja olhando diretamente para a câmera, sorrindo e, sorrindo e preferência, em um Agora, não precisa ser um hatchop 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, encontra um lugar muito legal, se veste bem, corta o cabelo, talvez corte barba e tire 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 nada que você faça. Adicionar um pouco mais de força vai ajudar muito. Por exemplo, 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, 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 baixar a página de empréstimos, eu definitivamente gostaria de procurar alguém que seja especialista em páginas de empréstimos ou especializado em páginas de empréstimos on-line Ou se eu quiser marketing no Facebook, certo? Talvez anúncios no Facebook, eu quero alguém que seja um profissional de marketing de anúncios no Facebook e não um profissional de marketing digital geral Isso é banana. Em que eles estão pensando? É muito fácil competir com maioria dos freelancers em ascensão 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 Apenas quatro freelancers têm esse selo de todas as propostas, e um tem 88%, o que não é Então, instantaneamente, essas três pessoas se levantam sobre a multidão. Embora existam 15 propostas, consegui facilmente filtrar a maioria delas apenas verificando este selo 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, basta 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 de um site. E faça um projeto para eles. 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 de 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 é um segredo direto, então não é garantido quando você a obterá. Mas eles fornecem uma boa orientação sobre como isso funciona, para que você possa entender quando esperar receber esse selo 162. Dicas 10-12: Obtenha o distintivo de "melhor partida": 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 candidatasse a esse emprego, não obteria 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 Work pode conhecer, então o algoritmo pode ignorar as alterações de então o algoritmo pode ignorar as 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. Descubra 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. 163. 158 Preço certo: Aqui estão algumas dicas sobre preços. Muitos freelancers acham que clientes escolhem preços mais baixos E se eles licitarem pouco, acham que parecerão mais atraentes para os clientes, ou menos como uma pechincha Freelancers que têm esse tipo de mentalidade. Eles têm esse tipo de gosto e atitude negativos em relação ao Upwork e merecem plataformas de freelancer Pensando porque agora todo mundo está competindo pelo preço e há muitos preços, muitas pessoas competindo com o Então, todo mundo está meio que baixando os preços, mas eles não poderiam estar mais errados. Se isso fosse verdade, você não teria alguns freelancers recebendo $500 por hora Os sites são produtos de alto valor. Eles não são como papel higiênico que o mais barato obtém 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 em sua marca. Então, eles não querem o barato, não vão se destacar, não querem qualidade. E muitas vezes eles ficam mais do que felizes em pagar por isso. Assim como muitos de nós que ficam felizes em pagar 1.000 dólares iPhone em vez de pagar 100 dólares pela Alcatel com lances baixos, não só você ganha menos dinheiro, mas também quando tem menos mas também quando tem 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 contratar um advogado, sussurrando discretamente para seus clientes que Veja esta lista de propostas. Mais abaixo, você rola de forma mais deprimente. A situação parece menos qualificada. As pessoas sabem que não avaliaram nenhum trabalho anterior para esta apresentação. E você também obtém preços mais baixos na parte inferior. Portanto, estar na parte inferior não parece nada atraente. Os talentos menos experientes são classificados na parte inferior. Portanto, preços mais baixos estão associados à menor qualidade. Só de olhar para esta lista, é um indicador claro para o cliente que ele deve ter cuidado com os 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 essa pergunta Qual é o seu orçamento? Porque na maioria das vezes, eu não sei qual é o meu orçamento. Sei que quero que algo seja feito, mas muitas vezes não sei quanto isso vai custar. Não sei qual é o bom valor para pagar. Então, fazer essa pergunta, vai me colocar em um estado confuso em que não sei como responder. Mas quando você anuncia uma vaga na Upwork é um cliente, e se você escolher uma tarifa fixa, a Upwork vai te perguntar qual é o seu orçamento para alguém como eu, qual é o seu orçamento para alguém que não sabe exatamente o que está lá, qual é o 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 sei quanto custa algo, vou reduzir muito minhas estimativas do que realmente custará porque eu realmente não quero pagar demais, então eu não quero dizer N1 Vou pagar 2000 anos por esse trabalho. E se custar apenas 300 dólares? Então, vou presumir que os freelancers vão abusar de mim por eu colocar esse orçamento Então, agora todo mundo vai tentar tirar proveito disso. E eles dirão: Oh, faremos isso por 2000 e faremos isso talvez 1.500 e assim por diante Onde, na realidade, o trabalho custa apenas $300. Portanto, para evitar pagar demais, você verá que os clientes geralmente pagam um orçamento muito menor que o que estão realmente dispostos a pagar E no final do dia, haverá uma multa pagando duas ou três vezes mais do que eles propõem ser o orçamento. Então, 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 que algumas 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 da cabeça. E quando você vê esse orçamento, simplesmente ignore isso e proponha, quanto vale o projeto para você? A menos que você veja na descrição do trabalho que eles querem dizer explicitamente que esse é o maior orçamento deles e é isso que pagarão 164. 159 Freelance não pode resistir NOVO: Ser um centro autônomo de sucesso geralmente não tem a ver com a balança, mas sim com o serviço que você oferece 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 entregando duas pesquisas de alta qualidade, eles não voltarão para pedir mais. Porque o que acontece com clientes satisfeitos é que eles não só 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, empresários e intraempreendedores Seus amigos geralmente são outros empresários e outros intérpretes Então, eles têm um acesso muito bom para trazer mais trabalho para sua grande parte dos meus clientes Na verdade, são referências, como se eu tivesse trabalhado com um cliente. Eles estão super satisfeitos porque eu lido com pesquisas de alta qualidade. E então eles ficarão 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 talvez eu tenha sido negligente ou talvez não. Basicamente, penso em um atendimento ao cliente. Talvez eu simplesmente não fosse, eu não era muito legal. Talvez tenha sido rude ou talvez eu não tenha respondido aos e-mails ou ligações deles ou algo parecido, então eles não ficarão confiantes me recomendar aos Porque sempre que você está recomendando algo para seu amigo, você quer ter certeza de que não vai estragá-lo por aí, o que quer que você recomende a ele, vai ser bom e benéfico para ele. Portanto, eles precisam estar cem por cento confiantes de que tudo o que estão recebendo, o que quer que estejam recomendando é bom para seus amigos Então, aqui estão algumas dicas sobre como ser aquele freelancer a quem os clientes sempre retornam para saber mais. Você sabe, qual é o único critério os clientes nunca ignorarão Eles podem ignorar coisas como seu portfólio, sua experiência anterior e talvez até mesmo avaliações de emprego Mas há uma coisa que nunca, nunca ignorará : 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 seja o resto em seu perfil. Se eu não tentar, então tudo pode estar vivo. Tudo o que você diz pode estar vivo. Tudo o que vejo no perfil pode ser aliado. Tudo o que você promete pode ser muito, e eu nunca confiarei em você com meu dinheiro e meus negócios. A melhor maneira de perder minha confiança como cliente é tentar me vender alguma coisa. Se você está tentando me vender algo, então você tem uma agenda. Você tem essa agenda secreta que você quer fazer da célula. Se eu reconhecer que você tem essa agenda, então como eu sei que tudo o que você diz é verdade, que como eu sei que tudo o que você está tentando fazer é para me ajudar, mas não apenas para se beneficiar. 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”. 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, 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 passa despercebido Seus clientes confiarão em você instantaneamente. E isso geralmente importa mais do que seu portfólio. Uma coisa útil incrível 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 de um site e foi a estúdios de design e descobriu que não pode pagar os preços astronômicos de projetos de web design. Então, o que você faz, você usa plataformas de freelancer como a Upwork para contratar, contratar um freelancer individual que vai cobrar um pouco menos Agora pensando em quanta confusão e incerteza você tem que lidar se você não é o intérprete que é desse campo, 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 é web thaw, HTML ou CMS Você não sabe bem como julgar quem é um bom artigo freelance, um bom web designer e quem é um mau web designer? Você está lidando com muita incerteza. E à medida que você 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 podemos ajudá-los? Há várias maneiras de ajudá-los de uma forma, ele definitivamente deve dizer a eles que mostrar a eles que entendemos o processo, todas as coisas que vamos cuidar deles 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 Ride Eles não precisam se preocupar com isso. Nós cuidamos disso. Também podemos explicar o processo para eles, assim como nosso processo de design que temos, que vamos do resumo do projeto e depois para o wireframing e depois para o design e, finalmente, construindo tudo no Webflow e no Assim, podemos explicar que eles estarão envolvidos e terão controle sobre cada etapa do processo, para que saibam o que está acontecendo e não precisem apenas comprometer uma grande quantia de dinheiro e esperar que tudo funcione bem. Porque eles estarão envolvidos em todo o processo e eles terão a capacidade ajustar o caminho e o curso para garantir que estamos indo na direção certa Agora, eles podem relaxar em nossa parceria porque veem que tudo está resolvido e conhecemos o processo. E podemos orientar esse processo e, dessa forma, eles podem relaxar e não precisam se 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 Eles não os estão levando para esse processo guiado. Mas você está, outros freelancers estão lá para pegar seu dinheiro, mas você não está, você os apoia 165. Dicas 17-22: Escreva cartas de apresentação 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 jurídicas e de 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. Em seguida, 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 na mesma hora 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 em uppwor e isso 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 pw 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 na Atwor 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á bem organizado e você tem um pouco mais de conteúdo É sua oportunidade de usá-la, você sabe, para mostrar que na verdade você não está apenas trabalhando, mas é muito profissional, tem seu próprio site e meio os impressiona 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 a sério nenhum freelancer que me envie seu portfólio, que está em dot weblo ou algo assim ou dot wibly 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 a sério nenhum freelancer que me envie seu portfólio, que está em dot weblo ou algo assim ou dot wibly ou wix.com, porque isso não parece você está levando sua profissão a sério. Então, pague 15 dólares por mês pelo primeiro mês de assinatura do weblos 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á. Quase metade das propostas que você enviar terão um campo extra chamado perguntas adicionais. O primeiro campo é a carta de apresentação. É aí que você escreve sua mensagem principal para o cliente. Então, se o cliente adicionar mais perguntas ao trabalho, você verá os campos abaixo. Quando publiquei o trabalho no aphorg e recebi propostas, notei algo muito estranho No lado do cliente, a ordem desses campos foi invertida. Eu estava vendo as respostas para a pergunta primeiro e depois as respostas para a carta de apresentação. A maioria dos freelancers não tinha ideia disso, então eles estavam escrevendo coisas como, como mencionei acima na minha carta de apresentação O que está acima? Embaraçoso. Eu estava tipo, Oh, meu Deus, isso é o que eu venho fazendo também, escrevendo primeiro a carta de apresentação e depois as perguntas. Então, aqui está uma dica oculta que a maioria dos freelancers não conhece quando há um campo para perguntas adicionais e, às vezes, não existe, certo? Às vezes é só uma carta de apresentação, mas às vezes há. Portanto, sempre que houver campos de perguntas adicionais, escreva-os de cabeça para baixo, pois é essa a pessoa que o cliente verá primeiro As perguntas adicionais, responda primeiro e depois a carta de apresentação. 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 Slash 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 o gerente de contratação da Deer, 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 “Dear ser Madame” ou você 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. Obrigado, 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. 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. 166. Suspensão 161: Às vezes, freelancers são suspensos ou banidos da Upwork por fazerem algo que viola seus termos Então, vou te dar algumas dicas para garantir que você não se encontre em uma situação muito complicada com eles. Tentar receber pagamentos fora do Upwork é contra seus termos e condições E se eles suspeitarem que você está tentando fazer isso, provavelmente invadirão sua conta. Esse motivo é claro e simples. A Upwork ganha dinheiro com transações e transações de pagamento que acontecem entre você e o cliente Se você tentar fazer esses pagamentos fora da plataforma, eles não ganharão dinheiro e você os devia recompensar. Você pode encontrar mais informações sobre isso em seus termos e condições. E a cláusula é chamada convenção central que a circuncisão E você pode descobrir mais sobre isso. Isso se aplica não apenas ao projeto atual que você recebe do cliente, mas também a todos os projetos subsequentes do clube que vêm do mesmo cliente. Aí. 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, existem gatilhos em sua comunicação que podem levantar a bandeira vermelha porque as mensagens acontecem usando a plataforma de mensagens, certo Então, mesmo que nesta mensagem você discuta coisas como pioneiro, essas seriam as palavras que acionam a bandeira vermelha que instantaneamente acionam essa suspensão Se você mencionou coisas como pagar perto do PayPal, transferências bancárias, eu bandas, qualquer coisa que seja meio que pode estar associada ao fato de você estar tentando receber pagamentos externos E não importa, mesmo que o cliente esteja meio que iniciando a discussão e queira que você receba o pagamento externo, se você concordar com isso, ou se for você que mencionou algo como sim ou algo assim, você será suspenso mesmo que eles peçam Portanto, certifique-se de que, se o cliente perguntar: “ Vamos levar isso para fora”, diga que não, você quer manter as coisas no Upwork Agora, a maioria das suspensões acontece automaticamente. É só que se você mencionou algo que a IA é acionada e todas essas coisas. Mas às vezes talvez você tenha mencionado o PayPal, não porque você quer que ele seja pago fora, mas talvez esteja dando um exemplo. Como um site do PayPal, talvez você esteja tentando negociar site de design para bancos, ou talvez esteja criando carteira eletrônica ou algo relacionado ao financiamento Mas então, está tudo bem. Porque se você for suspenso automaticamente, poderá apelar. E então um ser humano analisará sua comunicação e, se estiver convencido de que você não está tentando ser pago fora, mas está discutindo que isso fazia parte do projeto, tudo ficará bem E eles levantarão a banda. Agora, naturalmente, se você está discutindo isso no Skype ou em uma videochamada, isso não faz parte do nosso problema, certo É impossível para Upward descobrir, mas eu tenho alguns bons motivos para você ficar realmente em nosso parque no final do dia Upwork é uma coisa boa Isso permite que muitos freelancers encontrem trabalho. Todos nós queremos crescer para ganhar dinheiro e não fechar negócios E se a maioria de nós sair do Upwork um dia, eles simplesmente fecharão o mercado porque a diminuição da taxa de comissão faz com que valha a pena, depois que a comissão de $500 cair pela metade, 20-10%, 10% não é pena, depois que a comissão de $500 cair pela metade, 20-10%, 10% 10% Você não quis dizer, por exemplo, é preciso pelo menos 50% do que eu faço aqui. Então, o Upwork não é tão ruim. Depois de ganhar dez mil, cai novamente para cinco por cento de taxa Isso não é nada, na verdade. Se você recebeu pagamentos via PayPal ou cartões de crédito, você ainda perde 23 por cento em taxas de transação. E se você tivesse que lidar com conversão de moeda além disso, definitivamente acabaria perdendo até 5% de qualquer maneira Finalmente, não ter que lidar com o faturamento é incrível. Seus clientes são cobrados automaticamente. Você nunca precisa lidar com o faturamento e a busca de pagamentos Isso economiza muito tempo e problemas. Porque, como freelancer, às vezes há casos em que você precisa perseguir os clientes para que paguem em dia. Mas com o Upwork é bom porque seu 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. Agora, a segunda razão pela qual os freelancers suspensos de nossa parte se eles estão enviando muitas propostas, mas não recebem muitos empregos Basicamente, isso acontece quando você está enviando spam e enviando muitas propostas sem realmente analisá-las e pensando deliberadamente onde está se candidatando e se inscrevendo exatamente onde quiser e se inscrevendo exatamente onde quiser Ninguém sabe exatamente qual é a porcentagem da taxa de sucesso que você precisa para ser contratado. Mas há um boato de que você tem que ser contratado a cada 20 propostas que envia, eu acho, mas é uma sala ou elas podem, podem não ser reais, podem ser menos, podem ser mais Mas se você aplicou as dicas que aprendeu nesta seção , isso nunca deveria acontecer. Não coloque nenhuma habilidade em seu perfil que você não tenha. Às vezes, o Upwork seleciona freelancers em uma escala aleatória e eles fazem esse tipo de teste oral e fazem uma entrevista com um freelancer para garantir que tudo o que eles colocam em suas habilidades Uma é que, na verdade, minha conta foi congelada por causa dessa verificação de habilidade. Eles meio que iniciaram a verificação de escala na minha conta e eu entrevistei um funcionário do atendimento ao cliente e eles estavam me questionando sobre HTML e CSS E foi estranho porque eu nunca coloquei HTML e CSS, essas são minhas habilidades. Mas acho que, como eu estava na categoria de web design, suponho que eu deveria saber HTML, CSS, embora eu nunca tenha afirmado que sabia disso. Felizmente, consegui apelar e explicar a eles que não preciso de HTML e CSS para fazer meu trabalho Que eu nunca afirmei que sabia disso. E eles entenderam e congelaram minha conta. Mas se eu os tivesse em minhas habilidades, eu estaria totalmente ferrado O fato é que o Upwork é uma plataforma muito grande e há tantas pessoas e muito dinheiro se deslocando para lá, atrai malfeitores também atrai malfeitores por tentarem burlar o sistema, abrir contas fraudulentas e se envolver em algumas atividades Portanto, a Upwork é muito diligente e está reprimindo muitas contas diferentes para garantir que as pessoas que estão lá afirmem garantir que as pessoas que estão lá quem são e afirmem que conhecem escalas e podem cumprir o que prometeram Portanto, certifique-se de que tudo o que você coloca no Upwork, tudo é verdadeiro e autêntico e você não está tentando burlar o sistema porque eles têm, eles não têm uma grande tolerância Então, mesmo que algo seja como tremer, basta remover qualquer coisa que não seja 100% 167. 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 168. 163 Preços: Bem-vindo ao tópico assustador para a maioria dos freelancers, preços. Quanto você cobra? Está confuso sobre preços? E o começo está bem. Também fiquei bastante confuso quando comecei. Lembro-me do meu primeiro projeto de página de empréstimo que fiz. Eu cobro $200. E foi muito trabalhoso, na verdade. Era o design e a construção da página de destino. Eu escrevi a cópia e o conteúdo da página de empréstimo. Era o segundo projeto de marketing, fiz anúncios no Facebook e também criei designs, banners e anúncios para o Facebook, e fiz tudo Em seguida, fiz o upgrade para a taxa horária e custava $20 por hora. E isso já era um upgrade descendente para mim porque, nesse ritmo, consegui me sustentar totalmente trabalhando como freelancer Trabalhando como freelancer basicamente em tempo integral. Em seguida, passei para o terceiro dólar por hora, que foi minha taxa por algum tempo Então eu dobrei para $60 por hora. E agora eu cobrei principalmente uma taxa fixa e cerca de, em média, $5.000 por um design e criação de um site Ganhar $30-60 por hora foi uma das coisas mais emocionalmente desafiadoras para mim Eu me sentia muito culpada, especialmente agora que tínhamos que dizer aos meus clientes existentes que eu dobraria a taxa de que eles já estavam trabalhando comigo há algum tempo. Racionalmente, eu sabia que fazia sentido, mas emocionalmente, eu estava suando de ansiedade depois perceber que estava tendo falsas crenças em Primeiro, eu estava projetando meus próprios problemas financeiros nos clientes em vez de vê-los da perspectiva deles, sempre olhando para eles do meu próprio ponto de vista, comparando-os com meus próprios hábitos de consumo de dinheiro, me sentindo culpada porque eu mesma teria dificuldade em pagar $6 por hora por qualquer Segundo, pensar que o preço que eu cobro está em correlação direta com o nível da minha escala Então, se eu cobrar o dobro da boca deles, 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 uma escala melhor? Na verdade, de jeito nenhum. Aqui está o mais importante, na verdade, 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 é Crystal e uma vez eu estava assistindo sua palestra sobre preços e fiquei surpreso Percebi o quanto eu não sabia sobre meus próprios preços. Imagine um cenário em que clientes em potencial se aproximem de você. Ambos ganharam um site muito semelhante, mesma quantidade de páginas, mesma funcionalidade, algo que levará a mesma quantidade de 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 quando era pequeno. O segundo é um grande escritório de advocacia que ganha milhões de dólares por ano. O que você acha que 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 o contador podem significar mais mil dólares por mês E para o escritório de advocacia, isso pode significar mais 100.000 por mês. Mesmo site, mesma quantidade de esforço de você, mas uma grande diferença de valor com base no cliente. Portanto, qualquer que seja a taxa que você atribua aos clientes, provavelmente é muito cara para o contador e ridiculamente barata para o escritório de advocacia, você acabará perdendo os dois Você pode pensar que, bem, pelo menos um escritório de advocacia ficará entusiasmado em conseguir um preço tão barato. Mas eles não pagarão $5.000 por um site que possa lhes render mais 1 milhão por ano Parece irreal. É um número muito pequeno. Eles não confiarão em seu trabalho. Mas se você ajustou seu preço com base em quem é o cliente, digamos que, hipoteticamente, oferecendo 2.000 para o contador e 20 mil para o escritório de advocacia, você pode acabar combinando esses dois empregos porque os preços pareceriam razoáveis para qualquer um deles preços pareceriam razoáveis para qualquer Steve Jobs pagou 100.000 pelo próximo logotipo. Nossos logotipos valem 100 K. Para ele Era para uma pequena startup. Não seria. Então, quanto custa um site depende de duas coisas. Primeiro, quem está pagando e, segundo, qual é o valor que eles esperam obter 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 de 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. Agora, essa é uma história diferente. Eles não planejam obter muito valor com isso. Então, 20 K pode parecer muito caro 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 que eles planejam obter O valor dependerá de cada projeto. E você pode descobrir fazendo várias perguntas, como qual é o objetivo do site? Em que eles esperam ganhar com isso? Quanto aos clientes, podemos dividi-los em quatro categorias. Um cliente particular é alguém que está pagando pelo projeto do próprio bolso. Portanto, podem ser profissionais independentes como nós, freelancers, consultores ou startups, que não têm Esses caras, eu diria que eles 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 algo vai custar, não sabe se, por exemplo $50 por hora é caro ou barato Se você leva duas ou 3 h, é bem barato, mas se leva 100.200 h e é muito caro, o que acontece com as tarifas horárias é que os clientes geralmente usam sua própria experiência e ideias preconcebidas sobre se algo é barato ou caro com base em quanto custa E eles usam sua própria referência cultural onde quer que morem, quantos serviços diferentes pagam e comparam isso com isso. E minha regra com tarifas horárias é que nunca fique abaixo $20 por hora, porque a maioria de seus clientes virá de países desenvolvidos E nos países desenvolvidos, qualquer coisa abaixo de $20 por hora chega muito perto de um salário mínimo No salário mínimo é algo que um faxineiro vai receber Você está oferecendo serviços altamente qualificados e não deve receber um salário mínimo E se você se valorizar como faxineiro , vai parecer um faxineiro e assustar qualquer cliente decente, porque ninguém quer que seu site seja construído por Então você tem estúdios e agências como estúdios criativos, agências de design, empresas de TI e tudo mais. Geralmente, são agências e estúdios de pequeno e médio porte , porque os grandes, maioria das vezes, têm sua própria equipe em tempo integral e não se envolvem, e não precisam contratar freelancers quando trabalham com agências, geralmente a taxa horária é a melhor opção Primeiro, é mais simples. Você não precisa renegociar toda vez em cada novo projeto E em segundo lugar, como as revisões e os projetos atingem um pouco o escopo dos projetos, basicamente , eles estão ficando cada vez maiores e você precisava trabalhar um pouco mais Porque o que acontece é que quando você projeta algo e constrói algo, certo? Você fará com que a equipe da agência forneça feedback. Em seguida, você teria que fazer as revisões e eles as enviarão ao cliente E então, os clientes terão seus próprios comentários e haverá seus próprios comentários e haverá mudanças próprias que eles querem fazer. mudanças próprias que eles querem fazer. E então você terá que fazer outra rodada de revisões com uma taxa fixa O estúdio em si não precisa se preocupar com essas revisões. Então, eles vão empilhar tudo isso em você. Mas se eles estão pagando você por hora agora , precisarão estar um pouco mais atentos e cautelosos com a quantidade de revisões que você está fazendo, porque isso resulta do pagamento que eles recebem do E, geralmente, quando trabalham com os clientes finais, não trabalham por hora. As empresas geralmente não trabalham com base na taxa de pagamento por hora, mas trabalham por projeto. Então, eles vão cobrar uma taxa fixa do cliente final. E a necessidade de garantir que, o que quer que isso lhes custe, não saia muito do controle. E quando eles estão pagando uma taxa fixa, eles não se importam. E você pode trabalhar nisso o quanto eles quiserem em termos de taxa horária Isso realmente depende do tipo de cliente com quem eles mesmos trabalham. Normalmente, eu diria que eles estão custando entre $20 a $70 por hora. Eles nunca irão, acho que acima de $70 por hora. Então, nesse caso, para eles, faz sentido contratar um funcionário em tempo integral e extrair o máximo possível E também depende do país em que eles estão localizados, talvez da cidade em que estão localizados. E se eles estiverem trabalhando com 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? Como nós, 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 as 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 possam conhecer e alguém que possam processar se as coisas puderem ser processadas, se as coisas correrem mal. Se você está negociando com estúdios, não tenha medo de reduzir sua taxa normal porque o fluxo constante de trabalho na redução de horas não faturáveis justifica totalmente o desconto que você lhes dará ao trabalhar com clientes finais diretos. Você realmente precisa fazer propostas, Você realmente precisa fazer Você tem que enviar propostas , contratos e negociar entrevistas com Han e coisas do tipo Mas quando se trabalha com um estúdio, você só faz isso uma vez, certo? E então eles têm cada novo projeto que surge em seu caminho. Você não precisa passar por todo esse processo de negociação e entrevista ou coisas mais antigas, porque a agência e o estúdio estão fazendo isso com o próprio cliente final Assim, você obterá o projeto que já está pronto para ser executado e pronto para ser construído. Então você tem empresas de pequeno e médio porte. Normalmente, são empresas de médio porte que estão ganhando dinheiro ou startups que têm financiamento Esses caras geralmente iam provavelmente de 2000 até atingirem o limite máximo, talvez em 10:15 E, finalmente, você tem grandes empresas com muitos funcionários que ganham muito dinheiro. E esse cara provavelmente começa com 15 km 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 eu nunca trabalhei com eles e não conheço freelancers que acabam trabalhando com grandes empresas. Vamos recapitular Portanto, calculamos o preço 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 próprio ou são uma agência e, em seguida, propõem o preço de acordo 169. 164 horas vs fixo: Vamos comparar as taxas horárias com as fixas. Ambos têm suas próprias vantagens e desvantagens. A vantagem de cobrar taxa horária é que é muito simples. Você realmente não precisa se preocupar em calcular quanto deve custar um determinado projeto Basta dar uma taxa e acabar com isso. Não é necessário negociar toda vez que você tem mais trabalhos do mesmo cliente que se preocupe com a possibilidade de as revisões saírem do controle Mais revisões significam mais dinheiro para você. Reuniões e comunicações podem levar muito tempo. Alguns clientes podem querer reuniões pelo Skype regularmente, mas se você também as criar para isso, e deveria , eles garantirão que não percam 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 h, então é barato. Mas se você precisar de 80 h , então é 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, pode ser bom pagar cinco mil pelo site. Mas se você contar a eles 100 dólares por hora, eles podem se assustar. É mais difícil para os clientes decidirem porque a taxa horária torna incerto quanto será a fatura final. Se você for mais eficiente e rápido em seu trabalho, ganhará eficiente e rápido em seu trabalho, menos 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. Considerando que uma taxa horária, existem limites mentais, por exemplo, 300 dólares por hora será 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 estiverem claramente definidas, por exemplo, para liberar as revisões e, depois disso, aplicar uma determinada taxa horária E quando seu cliente solicitar uma terceira revisão, você começará a cobrá-la. À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 revisões intermináveis Outra desvantagem do cálculo é a dor. Você precisará trabalhar mais no cálculo para definir claramente exatamente quanto tempo levará para concluir o projeto e garantir que ele tenha um preço lucrativo 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 você deve escolher? Assim como com os valores, é uma boa ideia ir caso e cliente por cliente, por exemplo, com estúdios e agências, a melhor abordagem seria provavelmente usar tarifas horárias quando se trata de clientes finais do que provavelmente optar tarifas 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 um saco misto 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 Em seguida, mudei para a taxa horária, o que foi ótimo. E eu mantive por muito tempo a taxa horária porque era simples para mim. Adoro a simplicidade disso. E agora, com meus clientes de longo prazo, faço taxas horárias e , com novos, faço notas fixas. Mas com mais clientes de longo prazo, eu trabalho de hora em hora porque faço muitos tipos diferentes de trabalho, como design de interface do usuário, por exemplo, para aplicativos móveis. E esses projetos podem se tornar monstruosamente grandes e estranhos e é impossível colocar uma taxa fixa neles Então, eu só uso o hour porque isso simplifica e facilita a construção. Um critério final a considerar é escolher o que você se sente confortável com. Porque, no final das contas, é o seu trabalho e você tem que fazer isso todos os dias. E é importante tornar cada aspecto, maior número possível de aspectos do seu trabalho, agradáveis E se algo te causa ansiedade como aconteceu comigo, então não há problema em sacrificar algum dinheiro pela paz de espírito e conforto. 170. 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 vai ajudar você a definir sua marca pessoal, fazer você 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 Eu inseri um pequeno resumo sobre como site deles 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ê esteja usando, então arredonde-os para cima ou você parecerá bobo 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ê está trabalhando 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 está 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 de 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 eles quiserem, se pedirem o desconto Ou, às vezes, você pode até mesmo reduzir o preço 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 elas realmente não puderem pagar o valor que você deu a elas 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 é, 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 de mínimo $4000-6 mil, e então eu dou a eles essa faixa, 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. E se, por exemplo, às vezes eu lhes der um valor e eles esperarem algo menos 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 Entendemos instantaneamente que estamos realmente em um jogo diferente aqui, e não somos uma boa combinação, então, você sabe, economize 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 171. Modelo de proposta: Taxa horária: 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, no 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. 172. Contrato de Freelancer: 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 Apwork , 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 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 humano com humano. 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 vínculo diferente 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 no final do projeto, 100%, então estou assumindo o risco total. 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 de confiar nos meus clientes e quando vejo que temos um bom relacionamento, gosto de 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 isso, 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 o 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 facilmente preencherá 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á 173. Venda do Webflow aos 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 ser convencida 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. E isso é algo que você precisará explicar para alguns clientes. Por exemplo, eu mesmo, quando dirigia uma empresa, não sabia muito sobre web design ou desenvolvimento, e achei que o site da nossa empresa vivia magicamente na nuvem Então, talvez você precise explicar um pouco como isso vai funcionar, que o site precisa ser hospedado em algum lugar e que temos que pagar a essa empresa para hospedar o site para nós em seus servidores. 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 aumento de preço muito pequeno , eu acho, dois, $3 por mês. 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 clientes regulares podem realmente usar esse benefício porque Crens 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 podemos fazer com que você saiba, ele pode ter mil páginas. Essa é uma história diferente. Estou falando 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 embolso 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 faz com que uma carga lateral seja como um caracol. Mas a hospedagem weblos 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 WebHosting 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. Mas os servidores Webflow precisam executar apenas um sistema, o Webflow. Portanto, é altamente ajustado para executar apenas o Webflow. Agora, é claro, existem provedores de hospedagem comparáveis que atendem todos os benefícios do Webflow, especializados em única plataforma, gerenciados e incluem recursos citan, 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 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 em seu site anterior, provavelmente porque tinha um site no Wordpress e estava usando algum plug-in específico, digamos que você esteja trabalhando com uma clínica odontológica e eles estejam usando um plug-in específico do Wordpress para seus compromissos, como, você sabe, marcar consultas, você sabe, algum plug-in do WordPress em seu site anterior, provavelmente porque tinha um site no Wordpress e estava usando algum plug-in específico, digamos que você esteja trabalhando com uma clínica odontológica e eles estejam usando um plug-in específico do Wordpress para seus compromissos, como, você sabe, marcar consultas, você sabe, como 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 plug-in, 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 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 CDM, 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 Webflows 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 weblo 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 onde eu vou construir, porque empresários e empreendedores geralmente até eu trabalho com equipes técnicas, equipes de desenvolvimento e até mesmo eles não estão muito preocupados com onde eu o construo, desde que equipes de desenvolvimento e até mesmo eles não estão muito preocupados com onde eu o construo, desde seja eficiente para mim e eu o produza e eu possa iterá-lo muito bem porque sou eu quem, na realidade, está construindo um quem, na realidade, está construindo Sou eu quem vai editar esse site e todas essas coisas. Então, tem que ser rápido e eficiente para eles, que eu possa tornar isso muito fácil e eles me perguntem quanto vai custar e digam o preço, e eles dizem: Ok, bom. Mas nos casos em que 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. 174. 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 da maneira certa. Sei que esse curso foi difícil e você aprendeu de tudo, desde um bom design até o desenvolvimento de fluxo na web e um freelancer bem-sucedido 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 seus próximos passos seria praticar de forma independente. Fora deste curso, você pode escolher um tópico ou produto que o inspire e criar esse 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 você 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 E enquanto você faz isso, você pode passar por essas aulas avançadas no seu próprio ritmo para continuar aprimorando suas habilidades e alimentando seu entusiasmo Os tutoriais desta seção são design e ao fluxo da web 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 o colocamos nessa parte avançada desta seção ou na incorporação de código personalizado, que é para webflow, certo Para incorporar alguns aplicativos de terceiros como o plug-in de comentários, o que faremos para site que já temos no último projeto que criamos E no bloco em que vamos inserir o código personalizado para comentar esses e mais alguns tutoriais em vídeo na seção avançada. Divirta-se 175. Webflow: Modal personalizado (Pop-Up): Neste vídeo, mostrarei 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. Você 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 Desta vez, vamos escolher opção menos controversa, um formulário que se abre quando o usuário clica no botão Obter acesso em nosso site T Map 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 uma que é chamada de caixa de luz, mas é principalmente para imagens e vídeos, mas formulários ou qualquer coisa parecida, não há nenhuma. Isso foi algo que me surpreendeu no começo e, quando assisti ao tutorial sobre como criar esse modelo com um formulário interno, entendi que tipo de fluxo de plataforma de web design era uma ferramenta profissional em que você cria coisas do zero, como um desenvolvedor, não apenas descartando componentes prontos Pode ser surpreendente para você também, mas é isso que torna o webflow incrível Vamos começar. O que acontece quando o modelo é aberto? Há uma cor de fundo que se sobrepõe à parte superior da página inteira e há esse formulário dentro dela. Logo em seguida, ao fechar, tudo desaparece Primeiro, vamos construir isso e depois cuidaremos das interações. Vou adicionar um bloco profundo e colocá-lo no topo da página e chamá-lo de wrapper 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. Está sobrepondo o herói, mas não a seção depois dele Além disso, está atrás da barra de navegação, mas queremos que esteja acima de tudo Para sobrepor isso, acima de tudo, precisamos usar um recurso que ainda não discutimos Índice Z, que podemos encontrar nas configurações de posição. Ele aparece em todas as posições, além Z automático ou estático, que representa o 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 tivéssemos dois elementos sobrepostos, um que tivesse maior valor se acumularia no topo Também vinculei o tutorial em vídeo do Web Flows sobre índice Z, caso você queira aprender um pouco mais sobre ele. Se eu mudar um índice para um, ele se acumulará no topo de todas as notas de valores zero Mas ainda está atrás da barra de soneca. Por que a barra mapa não mostra que tem um lado de valor z Mas como o navbar é um componente pronto, provavelmente ele tem algum índice Z padrão do Webflow O 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 ou tablets, se atribuirmos ao nosso modelo um valor de índice z mais alto , ele se acumulará no topo, podemos ver qual é o valor da barra de navegação Mas vou te dizer diretamente que é 1.000. 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 para o quão alto você pode ir. Coloque 10.000 se quiser. Por fim, vamos deixar a embalagem do modelo um pouco transparente Algo como 80% Em seguida, precisamos de um modelo no centro. Antes de adicionarmos isso, vamos transformar o invólucro em uma caixa flexível para que possamos alinhar o conteúdo no centro O novo bloco Do ficará bem no meio. Nomeie seu modelo e estilize com apenas um conteúdo, um título, um parágrafo e um bloco de formulário Não temos projetos para isso, estou apenas improvisando para demonstração Já temos classes para os elementos do formulário, vamos apenas reutilizar aquelas como botão e campo Vou dar ao modelo a largura máxima para que o conteúdo caiba perfeitamente dentro dos campos e tenha largura máxima, é por isso que eles estão sendo curtos dessa forma Excelente, precisamos de mais uma coisa sobre o modelo, um botão de fechar, caso contrário, como os usuários sabem onde clicar para fechar o modelo? Podemos colocar algo como cancelar ou fechar link abaixo um botão ou um ícone X no canto do modelo Vamos usar um ícone de fechar 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 de fechamento, qual podemos obtê-lo do ícone e posicioná-lo 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 modelo na posição relativa para que o ícone seja posicionado em relação ao modelo ali Agora podemos posicionar bem o ícone dando algumas margens Só para você saber, as cores esférgicas são editáveis no Figma. Se quiséssemos, poderíamos abrir esse Spgi 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 normal, mas tudo bem. Podemos alterar manualmente o tipo de cursor no painel de estilos muita facilidade. 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é remova as margens Um efeito de foco seria bom. Podemos simplesmente aumentar a opacidade mouse e, claro, dar a ela um efeito de transição, para que fique agradável Isso é tudo o que o modelo está feito. Agora, o que precisamos, interações próximas e interações abertas . Vamos começar com fechar. Como já está aberto, nosso gatilho é obviamente o ícone de fechar. Selecione e adicione um novo gatilho de clique no ícone de fechar. Nova animação e sem modelo. O que estamos animando? Queremos que todo o invólucro do modelo desapareça Selecione um invólucro de modelo na tela e adicione uma nova ação Podemos simplesmente alterar a opacidade para 0% para que ela desapareça. Vamos mudar a flexibilização e tornar a transição mais rápida, algo em torno de 200 milissegundos Tudo bem, mas se você mover mouse sobre a tela, verá que os elementos modais e de formulário ainda estão lá Isso porque simplesmente o tornamos transparente, eles não foram a lugar nenhum. Na verdade, esconda-os da página. Precisamos mudar a exibição para não. Logo após a conclusão da animação de desvanecimento, podemos adicionar uma nova ação que é ocultar e mostrar a ação dentro dos centros de exibição Vamos alterá-lo para não ou oculto. Confira a prévia e veja como tudo funciona. Perfeito, o fechamento está indo bem. Além disso, seria bom se pudéssemos acionar o fechamento clicando na área fora do modelo. Basicamente fecha quando o usuário clica no espaço de fundo 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 no modelo dois, mesmo dentro dos campos, porque tudo isso está aninhado dentro do invólucro do modelo. porque, embora funcione, ele também é acionado quando você clica em qualquer lugar no modelo dois, mesmo dentro dos campos, porque tudo isso está aninhado dentro do invólucro do Clicar no formulário é considerado o mesmo que clicar na embalagem do modelo Precisamos de um novo elemento que esteja sobreposto ao modelo e vamos acionar esse elemento Dê a ele um estilo semelhante, como a posição fixa e completa do invólucro modal , sem a necessidade da cor de fundo. Mantenha-o transparente. Agora, se você adicionar essa área próxima após o modelo , ela se acumulará em cima do modelo Mas se você movê-lo antes do modelo, modelo será empilhado no topo Normalmente, essa alteração de ordem é suficiente, mas se por algum motivo não for, você pode usar valores de índice z, dar ao modelo um índice Z mais alto. Por exemplo, 2.1 para a área próxima. E isso fará o trabalho. Adicione a mesma interação próxima a essa área próxima e pronto. Agora, quando clicamos no modelo em si, nada acontece, mas quando clicamos no plano de fundo, ele fecha. Finalmente, precisamos adicionar a interação aberta. Antes de fazer isso, primeiro vamos ocultar o invólucro do modelo em um estado padrão que podemos fazer da exibição de alteração da chave de estilo para nenhum para todo o invólucro do modelo Nosso gatilho é o botão de acesso na barra. Vamos adicionar uma nova interação a esse botão, uma nova animação. E vamos chamá-lo de modelo aberto. Agora precisamos selecionar o invólucro do modelo para adicionar animações a ele Mas não podemos mais fazer isso a partir do Canvavas, pois ele está Portanto, temos que selecioná-lo no Navegador. Depois de selecionada, adicione uma nova ação, pois o modelo está oculto. Primeiro, precisamos mostrá-lo, escolher ocultar, mostrar no menu suspenso Em seguida, altere a tela para flex. Por que linho Porque essa é a nossa configuração de exibição original para a embalagem do modelo Ok, bom. Mas isso mostra tudo instantaneamente. Sem desbotamento Para adicionar desvanecimento, precisamos iniciá-lo com 0% de opacidade e depois finalizar com 100% de opacidade Vamos adicionar 0% primeiro, que vamos definir para o estado inicial a partir desse botão, porque se não o fizermos, ele mostrará 100% por causa das configurações de exibição Em seguida, pule para 0% e depois faça a transição para 100% novamente, o que é uma animação terrível. 0% tem que vir antes da ação de esconde-esconde. Agora podemos adicionar 100% de opacidade à medida que o estado final altera a atenuação e a duração para valores semelhantes aos que fizemos com close. E é isso. Vamos testar tudo no modo de pré-visualização. Perfeito. Tudo está funcionando bem 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 fazer tudo manualmente. 176. Webflow: Custom Code Embed – Plugin de comentários (requer um plano pago): Antes de começarmos, basta lembrar que este tutorial precisa de um plano pago no Webflow Neste vídeo, aprenderemos como incorporar código personalizado em um site do Webflow Normalmente, isso é usado para inserir um plug-in de terceiros em qualquer lugar da nossa página. Por exemplo, coisas como componentes do calendário, agendamento de compromissos, cronômetros e muito mais Desta vez, instalaremos um plug-in de comentários na página de postagem do blog Depois disso, você saberá praticamente como instalar qualquer outro plug-in, embora cada plug-in tenha suas próprias especificações durante a instalação, mas essas especificações são explicadas pelos próprios fornecedores do plug-in, geralmente fornecendo tutoriais em vídeo Portanto, depois de saber o que acontece no lado do Webflow, não deve ser difícil contornar os outros plug-ins O plug-in de comentários que usaremos se chama discuss Para começar, precisamos criar uma conta no Discuss e obter instruções sobre como instalá-la em nosso site Então acesse discuss.com. Isso é dqs.com e clique em Começar. Em seguida, cadastre-se. Em seguida, você chegará a esse portão perguntando se deseja instalá-lo no site. Então, sim, escolha isso. A seguir, algumas informações básicas do site, como nome e categoria. Discs tem uma versão gratuita com anúncios e pacotes pagos sem Para qualquer site no início, versão gratuita é absolutamente adequada. É isso que eu sempre começo para meus clientes até que haja um tráfego grande o suficiente para mudar para a versão paga, que, de qualquer forma, não custa muito Obviamente, isso é para os clientes jogarem, não para nós. Em seguida, você verá a tela para escolher uma plataforma. Essas plataformas oferecem integrações diretas, mas o Webflow não está na lista O Webflow geralmente não tem nenhuma integração direta do tipo plug and play com outras plataformas e plug-ins, onde você pode simplesmente clicar em alguns botões e começar a usar o Isso é esperado porque o Webflow é um pouco diferente dos outros. É mais como codificar um site do zero, e podemos instalar manualmente o plug-in com facilidade Então, role para baixo na parte inferior da lista e selecione instalação manual. Receberemos esse código personalizado que precisa ser inserido diretamente na página de postagem do nosso blog. Agora, vamos copiar esse código e acessar o Webflow. Vamos adicionar um novo desbloqueio dentro do nosso contêiner. E no painel de elementos, adicione um novo elemento chamado Incorporar Você abrirá instantaneamente o editor de código, então cole seu código aqui. Para muitos plug-ins, é isso. É aqui que termina, mas não para discussão. Há algumas edições que precisamos fazer no próprio código. Primeiro, vamos ver como tudo parece. Observe que o código personalizado Embds geralmente não pode ser visto dentro do editor ou no modo de visualização apenas no site publicado O Webloa não executa o código para garantir que ele não entre em conflito com No lado ao vivo, está tudo bem visível. Essa caixa de mensagem na parte superior só é visível para nós porque somos administradores do site Está nos perguntando se queremos permitir reações do nosso lado, talvez mais tarde. Então é assim que vai parecer, mas ainda não está totalmente funcional. No momento, é estático, então só funcionará nessa página específica. E todos os outros comentários que fizermos em outras páginas serão os mesmos, porque realmente não conectamos isso ao nosso CMS Vamos voltar ao código e ver o que precisamos mudar. Se você clicar duas vezes no elemento incorporado, o editor de código será aberto. Esse é um código JavaScript e, dentro do código, há comentários que nos dizem exatamente o que precisamos mudar. O primeiro comentário diz que precisamos substituir o URL da página e o segundo diz que devemos substituir o identificador da página. Só precisamos fazer essas duas alterações e depois remover o comentário dessa seção Javascript, esses símbolos, que são uma barra na estrela ou duas barras, criam comentários Mas essa seção faz parte do código, então precisamos descomentá-la, caso contrário, ela não será executada. É bem simples. Atualmente, existem envoltórios dentro desses símbolos, um no início e outro depois Se removermos os dois, ele se transformará em código funcional. Você notará isso pela mudança de cor. Em seguida, precisamos substituir o URL da página. O PageRL precisa ser dinâmico. É o URL da postagem específica do blog. Como estamos fazendo isso em uma página dinâmica, na parte superior deste editor de código, temos esse botão para adicionar um campo, semelhante ao que tínhamos nas configurações de SEO, se você se lembra. Uma das opções é uma lesma. Isso é o que vem depois da barra final na URL. No nosso caso, depois do blog slash. Podemos usar isso para criar um valor de URL. Só precisamos inserir manualmente tudo o que vem na frente dessa lesma E então está bem ao lado dela. Portanto, o Webflow inserirá o resto do URL automaticamente. Apenas certifique-se de colocar isso entre aspas simples, é assim que o JavaScript funciona nesse caso. O identificador da página precisa ter um valor exclusivo que seja atribuído a cada postagem do bloco. Podemos novamente usar o slug para isso porque o slug sempre será exclusivo para cada poste Nesse caso, basta a lesma e não se esqueça de colocá-la entre aspas simples último, certifique-se de que , na seção abaixo, verifique se o URL do seu site de discussão está correto. Às vezes, dependendo de onde você copiou esse código, em vez do nome do seu site, ele pode dizer example.discuss.com Se for esse o caso, você precisará substituí-lo por um nome curto do seu site, que pode ser encontrado aqui em Discutir Admin. Na guia Geral. Basta copiar isso e substituir a palavra exemplo por ela para criar uma URL adequada. Isso é tudo. Publique as alterações e teste os comentários em diferentes postagens do blog Funciona apenas no site ao vivo, modo de visualização não vai mostrar isso. Essa foi provavelmente a instalação mais complicada do plug-in. Outros plug-ins geralmente são mais simples do que isso. Agora que você sabe como fazer isso, todos os outros plug-ins devem ser simples o suficiente. Se você ficar preso, peça ajuda nos fóruns do Webflow. A comunidade lá é muito útil. 177. 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. 178. 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 179. 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.