Navegacao Rapida
Conteudo Detalhado
🎨 Estetica Contemporanea
Tendencias visuais atuais. Brutalismo, glassmorphism, neomorfismo e dark mode avancado.
Movimento estetico que rejeita convencoes de design polido. Usa tipografia crua, cores vibrantes e layouts intencionalmente "feios".
Brutalismo cria identidade memoravel. "Quero um site brutalista com tipografia bold, cores neon e layout grid quebrado".
Anti-design, tipografia bold, cores neon, grids quebrados, estetica raw.
Efeito de vidro fosco com transparencia, blur e bordas sutis. Popularizado pelo iOS e Windows 11.
Glassmorphism cria profundidade elegante. "Cards com glassmorphism: blur 20px, background rgba branco 10%, borda sutil".
Backdrop-blur, transparencia, bordas sutis, camadas, profundidade visual.
Evolucao do skeuomorfismo com sombras suaves que criam ilusao de elementos "saindo" da tela.
Neomorfismo cria interfaces tateis. "Botoes neomorficos com sombra dupla: uma clara acima, uma escura abaixo".
Soft shadows, extrusao, sombra dupla, cores suaves, interface tatil.
Uso de formas curvas, blobs, ondas e elementos que imitam a natureza, contrastando com grids rigidos.
Formas organicas criam acolhimento. "Hero com blob animado como fundo, formas organicas nos divisores".
Blobs, ondas, curvas bezier, formas fluidas, divisores organicos.
Dark mode avancado usa elevacao (tons mais claros = mais alto) em vez de sombras para criar hierarquia.
Dark mode bem feito reduz fadiga visual. "Hierarquia por elevacao: background #111, cards #1f2937, modais #374151".
Elevacao, hierarquia tonal, surface levels, contraste em dark, reduced eye strain.
Levar o minimalismo ao extremo: apenas o essencial, cada elemento justifica sua existencia.
Menos e mais quando bem executado. "Design ultra-minimalista: tipografia apenas, sem icones, espaco como protagonista".
Less is more, essential only, negative space, typography-driven, intentional emptiness.
💝 Design Emocional
Conexoes emocionais atraves do design. Psicologia, storytelling e personalidade.
Estudo de como cores afetam emocoes e comportamentos. Azul transmite confianca, vermelho urgencia, verde tranquilidade.
Cores certas criam a emocao certa. "Paleta que transmite confianca e profissionalismo: azuis escuros, cinzas, acento dourado".
Color psychology, emotional response, cultural context, brand personality.
Usar tipografia como elemento expressivo, nao apenas funcional. Fontes comunicam personalidade antes de serem lidas.
Tipografia e a voz visual da marca. "Headlines em fonte display dramatica, corpo em sans elegante e legivel".
Display fonts, type personality, font pairing, emotional typography.
Estruturar a experiencia do site como uma narrativa: introducao, desenvolvimento, climax (CTA), conclusao.
Historias conectam emocionalmente. "Scroll que conta uma historia: problema → solucao → transformacao → CTA".
Narrative arc, scroll storytelling, progressive disclosure, emotional journey.
Pequenos textos (botoes, mensagens de erro, loading states) escritos com personalidade e empatia.
Detalhes criam conexao. "Em vez de 'Erro 404', dizer 'Ops! Essa pagina foi passear. Que tal voltar ao inicio?'".
UX writing, microcopy, error messages, empty states, personality in UI.
Definir a "personalidade" da interface: seria ou divertida, profissional ou casual, luxuosa ou acessivel.
Consistencia de personalidade cria marca. "Tom de voz amigavel e acessivel em toda UI, como um amigo ajudando".
Brand personality, tone of voice, design character, consistency.
Elementos de design que ativam respostas emocionais: urgencia, exclusividade, pertencimento, curiosidade.
Gatilhos bem usados aumentam conversao. "Badge de 'Vagas limitadas' com cor de urgencia, contador regressivo sutil".
Emotional triggers, urgency, scarcity, social proof, FOMO design.
⚡ Performance como Design
Core Web Vitals, lazy loading, skeleton screens e otimizacao pratica.
Metricas do Google: LCP (tempo de carregamento), INP (interatividade), CLS (estabilidade visual).
Core Web Vitals afetam SEO e UX. "LCP abaixo de 2.5s, INP abaixo de 200ms, CLS abaixo de 0.1".
LCP, INP, CLS, PageSpeed, Lighthouse, performance budget.
Indicadores visuais de que algo esta carregando: spinners, progress bars, pulsing dots.
Feedback visual reduz percepcao de espera. "Spinner minimalista centralizado, mensagem de contexto abaixo".
Spinners, progress indicators, loading feedback, perceived performance.
Placeholders animados que mostram a estrutura do conteudo enquanto carrega. Usados por Facebook, YouTube.
Skeletons criam sensacao de velocidade. "Skeleton do card com retangulos pulsando onde ficara imagem, titulo, texto".
Skeleton screens, content placeholder, shimmer effect, progressive loading.
Carregar imagens e conteudo apenas quando entram no viewport. Blur-up: imagem de baixa qualidade → alta.
Lazy loading melhora performance inicial. "Imagens com loading='lazy', blur placeholder enquanto carrega".
Lazy loading, blur-up, LQIP, intersection observer, progressive images.
A sensacao de velocidade importa mais que velocidade real. Truques visuais fazem o site parecer mais rapido.
Percepcao e realidade. "Transicoes suaves, feedback imediato, conteudo above-the-fold priorizado".
Perceived performance, above-the-fold, instant feedback, optimistic UI.
Construir em camadas: funciona no basico, melhora com mais recursos. HTML primeiro, CSS depois, JS por ultimo.
Sites resilientes funcionam para todos. "Core content sem JS, animacoes como enhancement, offline support".
Progressive enhancement, graceful degradation, feature detection, resilience.
♿ Acessibilidade Universal
WCAG, semantica HTML, navegacao por teclado e leitores de tela.
Ratio de contraste entre texto e fundo. WCAG exige 4.5:1 para texto normal, 3:1 para texto grande.
Contraste adequado e lei. "Verificar todos os textos: contraste minimo 4.5:1, usar WebAIM Contrast Checker".
Contrast ratio, WCAG AA/AAA, legibility, color blindness, accessibility testing.
Toda funcionalidade acessivel via teclado. Tab para navegar, Enter para ativar, Escape para fechar.
Muitos usuarios nao usam mouse. "Focus visible em todos elementos interativos, skip links, tab order logica".
Keyboard navigation, focus states, tab order, skip links, focus trapping.
Software que le conteudo em voz alta. Depende de HTML semantico e atributos ARIA para contexto.
Milhoes usam screen readers. "alt em imagens, aria-labels em icones, landmarks semanticos, heading hierarchy".
Screen readers, ARIA, alt text, semantic HTML, landmarks, roles.
Projetar para a diversidade humana: idade, habilidade, contexto, dispositivo, conexao, idioma.
Design inclusivo beneficia todos. "Considerar usuario com uma mao ocupada, em ambiente barulhento, com sol na tela".
Inclusive design, permanent/temporary/situational disabilities, universal design.
Web Content Accessibility Guidelines. Quatro principios: Perceivable, Operable, Understandable, Robust.
WCAG e o padrao global. "Nivel AA como minimo, revisar checklist POUR antes de lancar".
WCAG 2.1/2.2, POUR principles, conformance levels A/AA/AAA, success criteria.
Ferramentas automaticas (Lighthouse, axe) + teste manual (navegacao por teclado, screen reader).
Testar e obrigatorio. "Lighthouse Accessibility 90+, axe sem erros criticos, teste com VoiceOver/NVDA".
Lighthouse, axe, WAVE, manual testing, screen reader testing, accessibility audit.
💬 Escrevendo Prompts Efetivos
Estrutura de prompts, especificidade e tecnicas avancadas de vibe coding.
Anatomia de um prompt efetivo: contexto (quem/o que), objetivo (o que criar), especificacoes (detalhes tecnicos).
Prompts bem estruturados geram resultados melhores. "Contexto: portfolio designer. Objetivo: landing minimalista. Specs: dark mode, glassmorphism".
Prompt structure, context setting, clear objectives, technical specifications.
Termos especificos que IAs reconhecem: hero section, CTA, above-the-fold, glassmorphism, skeleton screen.
Vocabulario certo = resultado certo. "Dizer 'hero com gradient mesh background' em vez de 'topo colorido bonito'".
Design vocabulary, technical terms, UI patterns, CSS properties, component names.
Quanto mais especifico, melhor o resultado. Incluir cores exatas, espacamentos, fontes, breakpoints.
Especificidade elimina suposicoes. "Em vez de 'azul', dizer 'azul indigo-600 (#4f46e5) com hover indigo-500'".
Specificity levels, exact values, color codes, sizing systems, named references.
Usar sites existentes como referencia visual. "Estilo visual como Linear.app, navegacao como Stripe.com".
Referencias aceleram comunicacao. "Hero inspirado em Vercel, pricing table como Notion, testimonials como Slack".
Visual references, style borrowing, component inspiration, mood boards.
Comecar simples, refinar progressivamente. Cada iteracao adiciona ou ajusta especificacoes.
Iteracao e mais eficiente que perfeicao inicial. "V1 estrutura basica → V2 adicionar cores → V3 animacoes → V4 responsivo".
Iterative prompting, progressive refinement, versioning, feedback loops.
Juntar todos os conceitos do curso em prompts coesos: estetica + emocao + performance + acessibilidade.
Sintese e maestria. "Landing page: dark mode com glassmorphism, tipografia Inter, hierarquia clara, WCAG AA, skeleton loading".
Comprehensive prompts, concept synthesis, holistic design, complete specifications.
🔄 Refinamento e Iteracao
O processo de polir. Iterar com IAs, dar feedback e chegar ao resultado perfeito.
Avaliar criticamente o que a IA gerou: o que funcionou, o que falta, o que precisa mudar.
Analise precede melhoria. "Revisar: hierarquia visual OK, cores precisam ajuste, espacamento inconsistente".
Output analysis, critical review, gap identification, quality assessment.
Dar feedback preciso e acionavel para a IA. Dizer exatamente o que mudar e como.
Feedback vago gera resultados vagos. "Em vez de 'melhore as cores', dizer 'mude o botao de blue-500 para purple-600'".
Specific feedback, actionable instructions, precise language, clear direction.
Fazer pequenas correcoes uma de cada vez, validando cada mudanca antes da proxima.
Mudancas pequenas sao mais controlaveis. "Primeiro ajustar tipografia, depois cores, depois espacamento".
Incremental changes, one thing at a time, validation, controlled iteration.
Manter historico de versoes para poder comparar e reverter. Git para codigo, exports para design.
Versoes permitem experimentar sem medo. "Salvar v1-estrutura, v2-cores, v3-animacoes, poder voltar se necessario".
Version control, git commits, design history, rollback, experimentation.
Criar duas ou mais versoes e comparar qual funciona melhor visualmente ou em metricas.
Dados vencem opinioes. "Gerar versao A com CTA verde e versao B com CTA laranja, testar qual converte mais".
A/B testing, variant comparison, data-driven design, conversion optimization.
Registrar por que cada decisao de design foi tomada. Ajuda em futuras iteracoes e handoffs.
Documentacao evita retrabalho. "Anotar: escolhi Inter por legibilidade em telas, purple por diferenciacao de mercado".
Decision log, design rationale, documentation, knowledge transfer.
🔍 SEO e Presenca Digital
Meta tags, structured data, Open Graph e otimizacao para buscadores e IAs.
Tags no head que informam buscadores e navegadores: title, description, viewport, charset.
Meta tags sao SEO basico. "Title com palavra-chave, description que convence o clique, viewport para mobile".
Meta title, meta description, viewport, charset, robots meta.
Usar elementos HTML semanticos: header, nav, main, article, section, footer. Hierarquia de headings h1-h6.
Semantica ajuda SEO e acessibilidade. "Um h1 por pagina, h2 para secoes principais, h3 para subsecoes".
Semantic HTML, heading hierarchy, landmarks, content structure.
Meta tags que controlam como seu link aparece quando compartilhado: og:title, og:image, twitter:card.
Social cards aumentam cliques. "Imagem 1200x630 para Facebook, 1200x600 para Twitter, titulo atraente".
Open Graph, Twitter Cards, social sharing, og:image, preview optimization.
JSON-LD que descreve seu conteudo para buscadores: Organization, Article, Product, FAQ, HowTo.
Schema gera rich snippets no Google. "Adicionar schema Organization, schema Article para blog, FAQ para perguntas".
Schema.org, JSON-LD, structured data, rich snippets, knowledge graph.
Google usa Core Web Vitals como fator de ranking. Sites rapidos rankeiam melhor.
Performance e SEO estao conectados. "Otimizar imagens, minificar CSS/JS, usar CDN, lazy load".
Page speed, Core Web Vitals, mobile-first indexing, technical SEO.
Escrever conteudo que responde a intencao de busca. Keywords naturais, estrutura escaneavel, value first.
Conteudo e rei. "Responder a pergunta no primeiro paragrafo, usar subheadings, listas quando apropriado".
Search intent, keyword research, content optimization, E-E-A-T, topical authority.
🚀 Do Design ao Deploy
Git, GitHub Pages, Vercel, Netlify e o caminho do codigo ao site publicado.
Preparar imagens e icones para producao: WebP para fotos, SVG para icones, multiplas resolucoes para retina.
Assets otimizados = site rapido. "Exportar em WebP com 80% quality, SVG para icones, srcset para responsivo".
Image formats, WebP, SVG, srcset, image optimization, compression.
Otimizar codigo para producao: minificar CSS/JS, tree shaking, bundling, gzip compression.
Codigo otimizado carrega mais rapido. "Build de producao com minificacao, purge CSS nao usado, bundle splitting".
Minification, bundling, tree shaking, gzip, production build.
Plataformas que hospedam sites estaticos gratuitamente: Vercel, Netlify, GitHub Pages, Cloudflare Pages.
Deploy em segundos, gratis. "Conectar repo GitHub → Vercel detecta, builda e deploya automaticamente".
Static hosting, Vercel, Netlify, GitHub Pages, CI/CD, automatic deploys.
Conectar um dominio customizado ao seu site. Configurar A records, CNAME, SSL automatico.
Dominio proprio e profissionalismo. "Comprar dominio, apontar nameservers, adicionar em Vercel, SSL automatico".
Domain, DNS, A record, CNAME, SSL/TLS, nameservers.
Ferramentas para entender usuarios e detectar problemas: Google Analytics, Plausible, Sentry, UptimeRobot.
Dados guiam decisoes. "Instalar analytics, monitorar Core Web Vitals em producao, alertas de downtime".
Analytics, error tracking, uptime monitoring, RUM, performance monitoring.
Manter o site atualizado: dependencias, conteudo, seguranca, backups, monitorar performance.
Lancamento e so o comeco. "Dependabot para updates, revisar analytics mensalmente, testar em novos dispositivos".
Maintenance, security updates, dependency management, content updates, backups.