Navegacao Rapida
Conteudo Detalhado
🧠 A Nova Era do Web Design
Por que sites ainda importam quando a IA domina a busca. Entenda o paradoxo e o conceito de vibe coding.
O paradoxo onde o aumento da busca por IA/voz nao diminui a importancia de sites visuais - pelo contrario, aumenta.
Entender este paradoxo muda sua mentalidade: sites nao estao morrendo, estao evoluindo.
Descoberta por IA, validacao visual, ponto de conversao, jornada multi-canal.
A diferenca fundamental entre ter um site proprio (propriedade) e depender de redes sociais (aluguel).
Empresas que dependem 100% de redes sociais estao vulneraveis. Seu site e o unico espaco digital que voce controla.
Propriedade digital, controle de dados, independencia de plataforma, hub central.
A evolucao do SEO para um mundo onde a busca acontece em multiplos canais: Google, ChatGPT, YouTube, TikTok.
LLMs consultam multiplas fontes. Marcas citadas consistentemente tem mais autoridade nas respostas de IA.
SEO, GEO (Generative Engine Optimization), presenca omnichannel, autoridade de marca.
LLMs sao treinados para priorizar fontes confiaveis. Sites com boa reputacao tem mais peso nas respostas de IA.
Um site bem projetado transmite profissionalismo. Design amador = percepcao de baixa autoridade.
E-E-A-T (Experience, Expertise, Authority, Trust), backlinks, reputacao digital.
O funil moderno: Usuario pergunta a IA → IA menciona sua marca → Usuario visita seu site → Site converte.
Entender o novo funil muda como voce projeta seu site. E sobre converter visitantes que ja ouviram de voce.
Funil de conversao, trafico quente, validacao visual, CTA estrategico.
Vibe coding e criar aplicacoes descrevendo o que voce quer em linguagem natural para IAs como v0, Lovable ou Claude.
Este curso existe porque vibe coding funciona - mas so se voce souber o que pedir.
Prompting, especificidade, vocabulario de design, iteracao, referencias visuais.
👁️ Hierarquia Visual
Como o olho humano processa informacao. Aprenda a controlar a atencao atraves de tamanho, cor e posicao.
A ordem em que o olho humano processa elementos. Elementos maiores ou mais contrastantes sao vistos primeiro.
Controlar a hierarquia visual e controlar a atencao do usuario. Voce decide o que ele ve primeiro.
Hierarquia, prioridade visual, fluxo de leitura, atencao direcionada.
Elementos maiores sao percebidos como mais importantes. Um titulo grande domina a pagina.
Saber usar escala permite destacar o que importa. "Titulo dominante", "CTA grande" - termos que IAs entendem.
Scale, tamanho relativo, dominancia visual, proporcao.
Cores contrastantes ou vibrantes atraem o olho. Um botao vermelho em fundo branco sera visto primeiro.
Usar cor estrategicamente direciona atencao. "CTA com cor de destaque" - prompts que funcionam.
Contraste, cor de acento, cores neutras, peso visual da cor.
Usuarios ocidentais leem em padroes previsíveis: Z (landing pages) ou F (texto longo).
Posicionar elementos estrategicamente garante que sejam vistos. "Layout em padrao Z" - prompts precisos.
Padrao F, padrao Z, above the fold, pontos de atencao natural.
Alguns elementos "pesam" mais visualmente: cores escuras, formas densas. Elementos leves: cores claras, espaco.
Equilibrar peso visual cria layouts harmoniosos. "Hero com imagem pesada a esquerda, texto leve a direita".
Peso visual, equilibrio, densidade, leveza visual.
O ponto focal e onde o olho descansa primeiro - o elemento que domina a cena.
Sem ponto focal, a pagina parece confusa. "Hero com titulo como ponto focal" - clareza no prompt.
Ponto focal, ancora visual, elemento dominante, centro de atencao.
📝 Tipografia como Comunicacao
Fontes falam mais que palavras. Anatomia, escala, legibilidade e personalidade tipografica.
As categorias basicas de fontes: serif (com serifas), sans-serif (sem serifas), display (decorativas) e monospace.
Cada categoria transmite personalidade diferente. "Use fonte sans-serif moderna" - IAs entendem isso.
Serif, sans-serif, display, monospace, font-family.
Um sistema de tamanhos de fonte que seguem proporcoes matematicas (ex: 12, 14, 16, 18, 24, 36px).
Escalas tipograficas criam harmonia visual. "Use escala tipografica de 1.25" - prompts tecnicos.
Type scale, modular scale, font-size, proporcao aurea.
Fatores que afetam a facilidade de leitura: espacamento entre linhas, largura da coluna, contraste.
Texto ilegivel afasta usuarios. "Line-height de 1.6, max-width de 65ch" - especificacoes que funcionam.
Line-height, letter-spacing, max-width, legibilidade.
Cada fonte carrega uma personalidade: serif = tradicional, sans-serif = moderno, display = expressivo.
Escolher a fonte certa reforca sua mensagem. "Fonte que transmita confianca e modernidade".
Brand voice, personalidade de marca, tom tipografico.
A arte de combinar 2-3 fontes de forma harmoniosa. Geralmente: uma para titulos, outra para corpo.
Combinar fontes mal cria visual amador. "Playfair Display para titulos, Inter para corpo".
Font pairing, contraste tipografico, hierarquia de fontes.
Ajustar tamanhos de fonte e espacamento para diferentes tamanhos de tela.
Texto que funciona em desktop pode ser ilegivel em mobile. "Titulo responsivo: 2xl em mobile, 4xl em desktop".
Fluid typography, clamp(), viewport units, breakpoints.
🎨 Teoria das Cores
Psicologia e sistemas de cor. Esquemas, proporcao 60-30-10, contraste e acessibilidade.
Como cores evocam emocoes: azul = confianca, vermelho = urgencia, verde = crescimento.
Cores influenciam percepcao de marca. "Paleta que transmita confianca e inovacao" - prompts efetivos.
Psicologia da cor, associacoes culturais, emocao cromática.
Cores quentes (vermelho, laranja, amarelo) vs cores frias (azul, verde, roxo) e seus efeitos.
Temperatura afeta o "clima" do site. "Paleta de cores frias para app de meditacao".
Cores quentes, cores frias, temperatura cromatica.
Metodos para criar paletas harmoniosas: monocromatico, complementar, analogo, triadico.
Esquemas garantem harmonia. "Use esquema complementar com azul como primario".
Color scheme, roda de cores, harmonia cromatica.
60% cor dominante, 30% cor secundaria, 10% cor de acento. Formula classica de design de interiores que funciona em web.
Evita paletas confusas. "Siga a regra 60-30-10 com cinza escuro dominante".
Cor dominante, cor secundaria, cor de acento, proporcao.
Padroes de contraste para acessibilidade: 4.5:1 para texto normal, 3:1 para texto grande (WCAG AA).
Sites inacessiveis perdem usuarios e podem ter problemas legais. "Garanta contraste WCAG AA".
Ratio de contraste, WCAG AA, WCAG AAA, acessibilidade visual.
Criar paletas que funcionam tanto em fundo claro quanto escuro, mantendo legibilidade.
Dark mode e esperado pelos usuarios. "Suporte dark/light mode com toggle".
Dark mode, light mode, theme toggle, CSS variables.
⬜ Espaco em Branco
O poder do vazio estrategico. Micro e macro whitespace, equilibrio e proximidade.
Espaco vazio entre elementos. Nao e "desperdicado" - e um elemento de design ativo.
Whitespace cria respiracao visual e sofisticacao. "Layout com bastante whitespace" = design premium.
Whitespace, negative space, breathing room.
Pequenos espacos dentro de componentes: padding interno, line-height, letter-spacing, gap entre icone e texto.
Micro whitespace afeta legibilidade e toque. "Botao com padding generoso" - detalhe importante.
Padding, gap, line-height, letter-spacing.
Grandes espacos entre secoes, margens laterais amplas, separacao visual entre blocos de conteudo.
Macro whitespace define ritmo da pagina. "Secoes com muito espaco entre elas" - layout que respira.
Margin, section spacing, container width, max-width.
Elementos proximos sao percebidos como relacionados. Espaco agrupa ou separa visualmente.
Proximidade cria hierarquia sem linhas ou bordas. "Agrupe label e input com pouco espaco".
Lei da proximidade, agrupamento visual, relacao espacial.
Sites premium usam muito espaco. Sites baratos apertam tudo. Apple vs sites de promocao.
Whitespace comunica valor. "Design minimalista estilo Apple" = muito espaco.
Minimalismo, luxo visual, percepcao de valor.
Um sistema de valores de espaco (4, 8, 12, 16, 24, 32, 48px) usado consistentemente no design.
Sistemas criam consistencia. "Use escala de espacamento de 8px" - prompts tecnicos.
Spacing scale, 4px grid, 8px grid, design tokens.
🧩 Principios Gestalt
Como o cerebro agrupa informacao. Proximidade, similaridade, continuidade e fechamento.
Elementos proximos sao percebidos como pertencentes ao mesmo grupo, mesmo sem bordas ou linhas.
Proximidade organiza sem poluir. "Agrupe elementos relacionados usando espacamento".
Agrupamento, proximidade, spacing como organizador.
Elementos com aparencia similar (cor, forma, tamanho) sao vistos como relacionados.
Use mesma cor/estilo para indicar funcao similar. "Todos os botoes primarios com mesmo estilo".
Consistencia visual, padroes de design, estilos repetidos.
O olho prefere seguir linhas continuas e curvas suaves, ignorando interrupcoes.
Guie o olho com linhas implicitas. "Timeline vertical conectando os passos".
Fluxo visual, linhas guia, direcao implicita.
O cerebro completa formas incompletas automaticamente. Vemos circulos mesmo com gaps.
Permite designs minimalistas. "Logo minimalista que sugere a forma sem completar".
Closure, formas implicitas, minimalismo.
O cerebro separa elementos em "figura" (foco) e "fundo" (contexto). Cards flutuam sobre fundos.
Criar separacao clara entre camadas. "Cards com sombra para destacar do fundo".
Figure/ground, camadas, elevacao, sombras.
Elementos simetricos sao percebidos como um todo. Simetria transmite ordem e estabilidade.
Simetria cria layouts profissionais. "Grid simetrico de 3 colunas com cards iguais".
Simetria, equilibrio, assimetria intencional.
📱 Responsividade e Mobile-First
Design que funciona em qualquer tela. Breakpoints, layouts fluidos, flexbox e grid.
Comecar o design pelo mobile e ir adicionando complexidade para telas maiores.
+60% do trafico e mobile. "Abordagem mobile-first" - IAs entendem e priorizam.
Mobile-first, progressive enhancement, graceful degradation.
Larguras de tela onde o layout muda: sm (640px), md (768px), lg (1024px), xl (1280px).
Saber os breakpoints permite prompts precisos. "Grid de 1 coluna em mobile, 3 em desktop".
Breakpoints, media queries, sm/md/lg/xl.
Usar porcentagens, vw/vh, em/rem em vez de pixels fixos para que elementos se adaptem.
Layouts fluidos se adaptam melhor. "Container com max-width e margens automaticas".
Unidades relativas, %, vw, vh, rem, em.
Sistema de layout para distribuir elementos em uma direcao (linha ou coluna) com alinhamento flexivel.
Flexbox e fundamental. "Flex container com items centralizados" - linguagem que IAs entendem.
Flex, justify-content, align-items, flex-wrap.
Sistema de layout para criar grades bidimensionais com linhas e colunas definidas.
Grid e poderoso para layouts complexos. "Grid de 12 colunas responsivo".
Grid, grid-cols, grid-rows, gap, span.
Areas clicaveis/tocaveis devem ter minimo 44x44px (Apple) ou 48x48px (Google) para dedos.
Touch targets pequenos frustram usuarios. "Botoes com minimo 44px de altura".
Touch target, tap area, hit area, mobile UX.
🏗️ Anatomia de uma Pagina Web
As secoes fundamentais. Hero, navegacao, conteudo, prova social, CTAs e footer.
A area principal acima da dobra (above the fold). Headline, subheadline, CTA e imagem/video.
O hero decide se o usuario continua ou sai. "Hero com headline impactante e CTA claro".
Hero, above the fold, headline, CTA primario.
O header com logo, links de navegacao, e possivel CTA. Geralmente sticky no topo.
Navegacao confusa = usuarios perdidos. "Navbar sticky com logo, links e CTA".
Header, navbar, sticky nav, hamburger menu.
Blocos que apresentam features, beneficios, processo, comparacoes. O "corpo" da landing page.
Cada secao deve ter proposito claro. "Secao de 3 features com icones e descricao".
Features section, benefits, how it works, alternating layout.
Elementos que provam credibilidade: depoimentos, logos de clientes, estatisticas, reviews.
Prova social aumenta conversao. "Secao de logos de clientes + testimonials com foto".
Social proof, testimonials, trust badges, client logos.
Botoes e links que direcionam para acao: comprar, assinar, contatar. Diferentes intensidades.
Sem CTA claro, ninguem converte. "CTA primario destacado, secundario em outline".
CTA, primary/secondary buttons, action verbs.
Area final com links de navegacao, contato, redes sociais, legal (termos, privacidade).
Footer bem organizado transmite profissionalismo. "Footer com colunas: produto, empresa, legal, social".
Footer, sitemap, legal links, social links.