Layout de Landing Page no Figma: primeira dobra que prende

Transformando o wireframe em layout: a primeira dobra (hero) da landing page do nutricionista. Logo, paleta extraída com conta-gotas, headline, imagem recortada com sombra, elementos de profundidade, luz com desfoque e modo de mesclagem e destaque em palavras-chave. 📌 Neste vídeo você vai aprender: • Do wireframe para o layout • Paleta, logo e headline • Imagem, sombra e profundidade • Luz e destaque de palavras ❓ Perguntas frequentes O que é a primeira dobra de um site? É a parte visível assim que a página abre, antes de rolar. O que não pode faltar na primeira dobra? Promessa clara, imagem de apoio e botão de ação visível. ⏱️ Capítulos 0:00 A primeira dobra pronta 2:25 Logo: recorte com Ctrl 4:33 Cores: azul escuro, verde e branco 6:36 Detalhes de fundo com recortes 8:35 Ajuste de cor e sombra na foto 10:52 Cor de fundo pela referência 12:44 Folhas no fundo com opacidade 14:45 Degradê no fundo 15:21 Destaques no texto 16:25 Primeira dobra pronta ◀️ Aula anterior: Wireframe de Landing Page no Figma: do texto à estrutura →    • Wireframe de Landing Page no Figma: do tex...   ▶️ Próxima aula: Design de Landing Page Completa no Figma: todas as seções →    • Design de Landing Page Completa no Figma: ...   📚 Playlist: Landing Page de Vendas na Prática (Figma + Elementor) →    • Landing Page de Vendas na Prática (Figma +...   Este vídeo faz parte do Mapa do Webdesign, um caminho completo e gratuito para aprender web design do zero: princípios de design, Figma, Photoshop, criativos, WordPress, Elementor, HTML, CSS e otimização de sites. 🔔 Inscreva-se para acompanhar a série completa. 📲 Dicas rápidas no Instagram: @jonas.webp #landingpage #elementor #webdesign