🔧 Tecnicas

Um conjunto completo de padroes, componentes e diretrizes que garantem consistencia visual e funcional em todos os produtos.

Design systems aceleram o desenvolvimento e garantem qualidade. "Siga o design system Material Design" - IAs entendem.

Design system, component library, style guide, pattern library.

Valores atomicos que representam decisoes de design: cores, espacamentos, tipografia, sombras. Ex: --color-primary: #3B82F6.

Tokens facilitam manutencao e temas. "Use CSS variables para cores e espacamentos" - codigo moderno.

Design tokens, CSS variables, custom properties, semantic tokens.

Escalas de cores com variantes (50-900), cores semanticas (primary, secondary, success, error) e cores de superficie.

Cores semanticas facilitam temas. "Use color-primary para acoes principais, color-error para erros".

Color scale, semantic colors, surface colors, color roles.

Uma escala consistente de espacamentos (4, 8, 12, 16, 24, 32, 48, 64px) usada em padding, margin, gap.

Espacamentos consistentes criam ritmo visual. "Use spacing-4 para gap pequeno, spacing-8 para medio".

Spacing scale, 4px grid, 8px grid, rem-based spacing.

Tokens para fontes, tamanhos, pesos e line-heights. Estilos compostos como "heading-1", "body-large", "caption".

Tipografia consistente e profissional. "Use text-heading-1 para titulos principais".

Type scale, font tokens, text styles, typography system.

Usar tokens semanticos que mudam de valor conforme o tema. O mesmo token --bg-primary pode ser branco em light e cinza escuro em dark.

Theming moderno usa tokens. "Implemente dark mode usando CSS variables com classe .dark".

Theming, dark mode, light mode, theme tokens, color scheme.

Diferentes estilos de botao para diferentes propositos: primary (acao principal), secondary (alternativa), ghost (discreto), icon-only.

Botoes sao os CTAs da interface. "Botao primary com hover state e focus ring" - IAs criam perfeitamente.

Button variants, states (hover, active, disabled), icon buttons, button groups.

Containers visuais que agrupam informacao relacionada. Cards com imagem, titulo, descricao, acoes.

Cards sao onipresentes em UIs modernas. "Card com imagem no topo, padding interno e hover elevado".

Card, container, panel, bento box, card grid.

Elementos de entrada: text input, textarea, select, checkbox, radio, toggle. Com labels, placeholders e estados de erro.

Forms bem desenhados aumentam conversao. "Input com label flutuante, borda de erro vermelha e mensagem de validacao".

Form fields, input states, validation, floating labels, error messages.

Janelas sobrepostas que focam atencao em uma tarefa especifica. Modals, dialogs de confirmacao, drawers.

Modals sao criticos para UX. "Modal centralizado com backdrop escuro, botao de fechar e animacao de fade".

Modal, dialog, overlay, backdrop, drawer, sheet.

Componentes de navegacao: navbar horizontal, sidebar vertical, tabs, breadcrumbs, dropdown menus.

Navegacao e a espinha dorsal da UX. "Navbar sticky com logo, links centrais e CTA no canto direito".

Navbar, sidebar, tabs, breadcrumb, dropdown, mobile menu.

Componentes que comunicam status: toast notifications, alert banners, progress bars, spinners, skeleton loaders.

Feedback e essencial para UX. "Toast de sucesso verde no canto inferior direito que desaparece apos 3s".

Toast, snackbar, alert, banner, progress, spinner, skeleton.

Sistema de 12 colunas flexiveis que permite divisoes de 1, 2, 3, 4, 6 colunas. Bootstrap, Tailwind e frameworks usam este padrao.

E o padrao universal. "Secao com container de 12 colunas, sidebar de 3 e conteudo de 9".

12-column grid, span, offset, gutter, container.

CSS Grid permite criar layouts bidimensionais com linhas e colunas. Controle total sobre posicionamento.

Grid e poderoso para layouts complexos. "Grid de 3 colunas com gap-6, auto-fit e minmax".

grid-template, grid-area, auto-fit, auto-fill, minmax, fr unit.

Flexbox e ideal para componentes unidimensionais: navbars, cards internos, alinhamento vertical.

Flexbox resolve alinhamento. "Flex container com items centralizados vertical e horizontalmente".

flex, justify-content, align-items, flex-wrap, flex-grow.

Grids inspirados em caixas de bento japones: cards de tamanhos variados criando layouts visualmente interessantes.

Bento grids sao tendencia. "Bento grid com um card grande a esquerda e dois menores empilhados a direita".

Bento box, asymmetric grid, masonry, span rows/cols.

Grids que mudam de layout conforme o tamanho da tela: 1 coluna em mobile, 2 em tablet, 4 em desktop.

Responsividade e obrigatoria. "Grid de 1 coluna em sm, 2 em md, 4 em lg".

Responsive grid, breakpoints, mobile-first, column collapse.

Queries baseadas no tamanho do container pai, nao da viewport. Componentes verdadeiramente modulares.

Container queries sao o futuro. "Card que muda de vertical para horizontal baseado no container".

Container queries, @container, container-type, container-name.

Pequenas animacoes e feedbacks que respondem a acoes do usuario: hover em botoes, toggle switches, loading states.

Micro-interacoes criam experiencias memoraveis. "Botao com hover scale e transicao de cor suave".

Micro-interaction, feedback, trigger, rules, loops.

Mudancas visuais quando o mouse passa sobre um elemento: cor, escala, sombra, underline.

Hovers indicam interatividade. "Card com hover:shadow-lg e hover:translate-y-1".

:hover, transition, transform, opacity change.

Indicadores visuais quando elemento esta focado via teclado: focus rings, outlines, bordas destacadas.

Focus states sao essenciais para acessibilidade. "Focus ring azul de 2px com offset, nao remover outline".

:focus, :focus-visible, outline, ring, keyboard navigation.

Animacoes suaves em toggles, checkboxes e switches quando mudam de estado.

Toggles animados sao satisfatorios. "Switch com bolinha que desliza suavemente e muda cor de fundo".

Toggle, switch, checkbox animation, state change.

Indicadores visuais de carregamento: spinners, skeleton loaders, progress bars, shimmer effects.

Loading states reduzem percepcao de espera. "Skeleton loader com animacao de shimmer da esquerda para direita".

Skeleton, shimmer, spinner, progress bar, loading state.

Resposta visual imediata a acoes: ripple effect em clique, checkmark ao completar, shake em erro.

Feedback confirma que acao foi registrada. "Botao com ripple effect no clique e animacao de sucesso".

Ripple, success animation, error shake, haptic feedback.

Motion design nao e decoracao - guia atencao, mostra relacoes, cria continuidade. Cada animacao deve ter proposito.

Animacao sem proposito distrai. "Animacao sutil que guia o olhar para o CTA".

Purposeful motion, attention guide, hierarchy through motion.

Duracao das animacoes: micro-interacoes (100-200ms), transicoes (200-300ms), animacoes complexas (300-500ms).

Timing errado parece lento ou brusco. "Transicao de 200ms para hover, 300ms para modal".

Duration, timing, fast/slow, 60fps.

Como a animacao acelera e desacelera: ease-in, ease-out, ease-in-out, cubic-bezier. Movimentos naturais.

Easing torna movimento natural. "Ease-out para entradas, ease-in para saidas".

Easing, ease-in, ease-out, cubic-bezier, spring.

Animacoes ativadas pelo scroll: fade-in ao entrar na viewport, parallax, scroll-triggered reveals.

Scroll animations engajam. "Elementos que fazem fade-in quando entram na viewport".

Scroll animation, intersection observer, scroll-triggered, reveal.

Animacoes entre paginas ou estados: fade, slide, morph. Criam sensacao de aplicativo.

Transicoes suaves eliminam "flicker". "Transicao de pagina com fade-out e fade-in".

Page transition, view transition, morph, shared element.

Elementos que animam em sequencia com delays escalonados, criando efeito de "cascata".

Stagger cria ritmo visual. "Cards que aparecem um apos o outro com delay de 100ms".

Stagger, animation-delay, cascade, orchestrated motion.

Cada formato tem seu uso: WebP/AVIF para fotos otimizadas, SVG para icones/logos, PNG para transparencia, JPG para fotos simples.

Formato errado = site lento. "Use WebP com fallback para JPG, SVG para icones".

WebP, AVIF, SVG, PNG, JPG, image optimization.

Proporcao entre largura e altura: 16:9 (widescreen), 4:3 (classico), 1:1 (quadrado), 9:16 (stories).

Aspect ratios criam consistencia. "Grid de imagens com aspect-ratio 16/9".

Aspect-ratio, 16:9, 4:3, 1:1, object-fit, object-position.

Carregar imagens apenas quando estao prestes a entrar na viewport. Economiza bandwidth e acelera load inicial.

Lazy loading melhora performance. "Imagens com loading=lazy e placeholder blur".

Lazy loading, loading="lazy", LQIP, blur placeholder.

Imagens grandes de destaque: hero full-width, background com overlay para texto legivel, parallax.

Hero images definem primeira impressao. "Hero full-width com overlay escuro gradiente e texto branco".

Hero image, background-image, overlay, gradient, object-cover.

Incorporar videos de forma responsiva: iframes 16:9, video background com autoplay muted, lazy load de embeds.

Videos engajam mas afetam performance. "Video embed responsivo com aspect-ratio 16/9 e facade pattern".

Video embed, iframe, autoplay, muted, loop, facade.

Servir diferentes tamanhos de imagem conforme viewport e densidade de pixels usando srcset e picture element.

Economiza dados em mobile. "Imagem com srcset para 1x, 2x e 3x densidades".

srcset, sizes, picture element, art direction, retina.

Estruturar conteudo em niveis de importancia: informacao primaria, secundaria e terciaria. O que o usuario precisa ver primeiro?

Hierarquia clara melhora compreensao. "Headline principal, subtitulo explicativo, detalhes em texto menor".

Content hierarchy, primary/secondary content, information scent.

Modelos de navegacao: global nav, local nav, contextual, faceted, breadcrumbs. Cada tipo serve um proposito.

Navegacao intuitiva = usuarios felizes. "Navbar global com 5-7 items, breadcrumb para profundidade".

Global nav, local nav, breadcrumb, faceted navigation.

Diagrama hierarquico de todas as paginas e suas relacoes. Define a estrutura antes de construir.

Sitemap evita paginas orfas. "Site com home, sobre, servicos (3 subpaginas), contato".

Sitemap, information architecture, taxonomy, categorization.

O caminho que um usuario percorre para completar uma tarefa: entrar > navegar > decidir > converter.

Fluxos otimizados aumentam conversao. "Fluxo de checkout em 3 passos com progresso visivel".

User flow, task flow, happy path, edge cases.

Escolher nomes claros e consistentes para links, botoes e secoes. "Produtos" vs "Loja" vs "Catalogo".

Labels confusos perdem usuarios. "Use verbos em CTAs: 'Comece agora', nao 'Clique aqui'".

Labeling, naming convention, action-oriented copy.

Busca interna do site, autocomplete, filtros e facetas. Para quando o usuario sabe o que quer.

Busca e essencial para sites grandes. "Barra de busca com autocomplete e resultados instantaneos".

Site search, autocomplete, filters, facets, search results.

Estrutura classica: Hero > Problema > Solucao > Features > Prova Social > Preco > FAQ > CTA Final.

Estrutura testada converte. "Landing page com hero, 3 features, testimonials e CTA final".

Landing page structure, above the fold, value proposition.

Headlines claras e diretas que comunicam beneficio em segundos. Formula: O que + Para quem + Beneficio.

Headline decide se usuario le o resto. "Headline que foca no beneficio, nao no produto".

Headline, subheadline, value prop, benefit-focused copy.

Botoes de acao posicionados estrategicamente: above the fold, apos cada secao de valor, sticky no mobile.

CTAs bem posicionados aumentam conversao. "CTA primario no hero, repetido apos prova social".

CTA placement, button color, action copy, urgency.

Elementos que provam credibilidade: depoimentos com foto, logos de clientes, estatisticas, badges, press mentions.

Prova social reduz objecoes. "Secao de logos 'Empresas que confiam em nos' + 3 testimonials com foto".

Social proof, testimonials, trust badges, client logos, stats.

Antecipar e resolver objecoes: FAQs, garantia de devolucao, risk reversal, comparacoes honestas.

Objecoes nao respondidas viram abandono. "FAQ com as 5 perguntas mais comuns + garantia de 30 dias".

Objection handling, FAQ, guarantee, risk reversal.

Conteudo visivel sem scroll (above) vs resto da pagina (below). O que aparece primeiro e crucial.

Above the fold decide conversao. "Hero com headline, subtitulo e CTA visiveis sem scroll".

Above the fold, first viewport, hero optimization, scroll depth.