> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # Fundamentos de design e layout > Mantenha sua aplicação Base44 consistente e bem estruturada: sistemas de design, imagens e ativos visuais, layout responsivo, tipos de página, personalização avançada e acessibilidade. Depois de saber como [personalizar o design da sua aplicação](/Building-your-app/Design), estes fundamentos ajudam você a mantê-la consistente, bem estruturada e acessível à medida que cresce. Esta página cobre a construção de um design consistente, o trabalho com imagens e ativos visuais, layout responsivo e tipos de página, personalização avançada e acessibilidade. *** ## Mantendo seu design consistente Estas seções mostram como estabelecer padrões de design consistentes em toda a aplicação usando o chat de IA, para que cores, tipografia, espaçamento e componentes pareçam coesos. ### Sistema de cores A cor é uma das suas ferramentas mais fortes para definir o clima e guiar a atenção. Comece definindo papéis em vez de códigos hexadecimais aleatórios. Busque: * 1 cor primária da marca * 1 cor secundária * 1 cor de destaque para realces * 3 a 5 cinzas neutros para fundos, superfícies e bordas * Cores claras para estados de sucesso, aviso e erro Você pode pedir à IA para propor e aplicar um sistema completo do zero: ```text theme={null} Crie um sistema de cores para esta aplicação: - 1 cor primária da marca - 1 cor secundária - 1 cor de destaque para realces - 4 cinzas neutros para fundos, superfícies e bordas Mapeie as cores para papéis como primária, superfície, borda, sucesso, aviso e erro. Garanta que o texto sobre os fundos atenda aos níveis de contraste de acessibilidade. Aplique este sistema em toda a aplicação e substitua cores avulsas. ``` Mantenha o significado das cores consistente. Por exemplo, use sua cor de sucesso apenas para estados positivos e sua cor de erro para problemas, não para decoração. Se você já tem códigos hexadecimais de um guia de marca ou de uma ferramenta externa, cole-os e deixe a IA mapeá-los para papéis: ```text theme={null} Use esta paleta e atribua um papel a cada hexadecimal: - #1D4ED8 - #6366F1 - #10B981 - #F3F4F6 - #111827 Defina quais são os papéis primário, secundário, de destaque e neutros. Substitua cores fixas no código por tokens ou classes Tailwind que sigam esses papéis. ``` Você pode enviar uma captura de tela ou imagem da sua paleta de cores diretamente para o chat de IA e pedir que aplique as cores à sua aplicação: ```text theme={null} Aplique as cores desta imagem à minha aplicação. Mapeie cada cor para um papel como primária, fundo, primeiro plano e destaque. Substitua as cores existentes em toda a aplicação para corresponder. ``` Alterando a paleta de cores de uma aplicação Base44 *** ### Sistema de tipografia A tipografia controla o quão legível e escaneável sua aplicação parece. É melhor ter poucos estilos de texto claros do que muitos parecidos. Defina papéis como: * Título da página * Título de seção * Texto do corpo * Metadados pequenos, como rótulos e carimbos de data e hora Você pode pedir à IA para configurar isso e aplicar em todos os lugares: ```text theme={null} Configure um sistema de tipografia: - Títulos de página: maior tamanho, negrito, sans serif moderna - Títulos de seção: tamanho médio, seminegrito - Texto do corpo: tamanho padrão, peso regular - Metadados: pequenos, em maiúsculas, com espaçamento extra entre letras Aplique esses papéis de forma consistente em todas as páginas e remova tamanhos de fonte avulsos. ``` Você também pode direcionar os tamanhos de forma mais específica: ```text theme={null} Torne a tipografia mais legível: - Aumente levemente o tamanho base do texto do corpo - Aumente a altura de linha dos parágrafos - Garanta que os títulos tenham pelo menos 1.4x o tamanho do texto do corpo Mantenha as mesmas famílias de fontes. ``` Você pode usar fontes personalizadas e aplicá-las por meio do seu layout. 1. Obtenha o trecho de incorporação (por exemplo, no Google Fonts em [https://fonts.google.com](https://fonts.google.com)). 2. Peça à IA para adicioná-lo ao `Layout.js` e conectá-lo ao seu sistema de tipografia. Exemplo de prompt: ```text theme={null} Importe a fonte "Raleway" do Google Fonts. Use-a para títulos de página e títulos de seção. Mantenha a fonte atual do corpo para os parágrafos. Atualize os estilos em toda a aplicação para seguir esta regra. ``` Usando uma fonte personalizada no arquivo de layout da Base44 Tente se limitar a uma ou duas famílias de fontes. Fontes demais deixam a interface desestruturada e mais difícil de manter. *** ### Espaçamento e densidade Espaçamento e densidade controlam o quão confortável sua aplicação é de usar. Uma escala simples de espaçamento evita lacunas aleatórias e seções apertadas. Você pode definir uma escala como 4, 8, 12, 16, 24 e pedir à IA para aplicá-la: ```text theme={null} Normalize o espaçamento usando esta escala: 4, 8, 12, 16, 24. - Use valores maiores entre seções principais - Use valores médios dentro de cards e painéis - Use valores pequenos entre rótulos e campos Reduza áreas que parecem apertadas e evite valores de espaçamento aleatórios. ``` Se uma página parecer cheia ou vazia demais, você pode deixar o chat de IA diagnosticar e corrigir: ```text theme={null} Analise esta página e ajuste o espaçamento: - Adicione mais preenchimento superior e inferior em cada seção - Aumente o espaço entre as linhas de cards - Garanta que parágrafos longos tenham um comprimento de linha confortável Mantenha as cores e o conteúdo existentes. ``` *** ### Elementos principais e estados Com cor, tipografia e espaçamento definidos, padronize os blocos de construção que você usa em todos os lugares. Foque em: * Botões (primário, secundário e apenas texto) * Cards e painéis * Barras de navegação e barras laterais * Campos de formulário (padrão, foco, erro, desabilitado) * Chips, tags e badges, se você os usar Você pode pedir à IA para detectar e unificar padrões: ```text theme={null} Padronize os elementos principais: - Botões: defina estilos primário, secundário e apenas texto - Cards: defina raio de canto, preenchimento, sombra e layout de cabeçalho/corpo - Navegação: defina estados ativo, hover e desabilitado - Campos de formulário: defina estados padrão, foco, erro e desabilitado Aplique esses padrões em toda a aplicação e substitua estilos divergentes. ``` Isso lhe dá uma linguagem reutilizável, para que novas páginas pareçam pertencer ao mesmo produto. *** ## Imagens e ativos visuais Ativos visuais como imagens, ícones e vídeos moldam a sensação da sua aplicação. A IA pode ajudar você a criá-los, posicioná-los, estilizá-los e conectá-los aos seus dados e código. Envie imagens ou vídeos para o chat de IA para dar contexto visual sobre o estilo, o layout ou o conteúdo da sua aplicação. Você pode pedir ao chat de IA para adicionar imagens de destaque diretamente às suas páginas: ```text theme={null} Adicione uma imagem de destaque em largura total na página inicial que combine com a paleta de cores atual. Use uma imagem de exemplo que sugira um painel de análise moderno. ``` Exemplo de imagem de destaque em uma aplicação Base44 Para substituir uma imagem de exemplo: 1. Abra o arquivo da página relevante, como `Store.js`, na visualização de código. 2. Encontre a tag ``. 3. Atualize o atributo `src` com a URL da sua própria imagem. Você também pode enviar imagens para entidades na seção **Data** e vinculá-las a componentes, para que cards e listas exibam as imagens certas automaticamente. Gerenciando imagens de entidades na seção Data da Base44 Peça ao chat de IA para gerar vídeos curtos para seções visuais, como destaques, prévias de produto, tutoriais ou telas de onboarding. Exemplo de prompt: ```text theme={null} Crie um vídeo curto de onboarding para meu app de fitness mostrando uma rotina simples de treino matinal. Adicione-o à tela de boas-vindas, acima do botão Get Started. ``` Gerar vídeos pelo chat de IA requer um [plano Starter](/Account-and-billing/Billing-and-plans) ou superior. Cada vídeo gerado usa os créditos de mensagem do prompt mais 1 crédito de mensagem adicional. Você também pode permitir que as pessoas gerem vídeos na sua aplicação publicada. Saiba mais sobre [gerar vídeos](/Integrations/built-in-integrations#generating-videos). Imagens de referência ajudam você a direcionar o design visualmente, mostrando ao chat de IA um estilo, layout, paleta de cores ou direção visual que deseja usar. Enviando uma imagem de referência como inspiração para o design da aplicação 1. Clique no **ícone de upload (+)** no chat de IA. 2. Envie uma imagem de inspiração ou captura de tela. 3. Diga à IA exatamente o que você quer aproveitar e o que ignorar. Ideias de prompt: ```text theme={null} Use esta referência como inspiração. Mantenha meu layout e conteúdo, mas: - Reproduza os formatos e sombras dos botões - Reproduza o raio de canto e o estilo de borda dos cards - Aplique um gradiente suave semelhante apenas no cabeçalho superior Não copie as cores exatas, apenas a estrutura e a sensação. ``` ```text theme={null} A partir desta captura de tela, extraia regras de design para: - Papéis de cores - Tamanhos e pesos de fonte - Raio de canto e sombras - Espaçamento entre seções e cards Explique as regras e depois aplique um estilo semelhante usando as cores atuais da minha marca. ``` Você pode copiar estilos visuais diretamente de uma ferramenta de design como o Figma e pedir à Base44 para aplicá-los, em vez de tentar descrever cada detalhe em palavras. **Para copiar do Figma:** 1. No Figma, selecione o elemento cujo estilo você quer copiar. 2. Mude para o **Dev mode** e veja o painel **Code**. 3. Copie a linha CSS relevante, por exemplo um fundo com gradiente: `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);` 4. Na Base44, clique no elemento correspondente na sua prévia para abrir o modo **Edit**. 5. Cole o estilo em um prompt de IA e diga à Base44 exatamente o que mudar, por exemplo: ```text theme={null} Altere o estilo de fundo deste elemento para: background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%); Mantenha todos os outros estilos iguais. ``` Isso permite reproduzir gradientes, sombras, bordas e outros estilos do seu arquivo de design com muita precisão. Ícones devem apoiar o significado, não apenas decorar. Consistência é fundamental. Tarefas comuns: * Substituir ícones genéricos por outros mais significativos. * Alinhar tamanhos de ícones e espessuras de traço. * Combinar ícones com rótulos de texto onde a clareza importa. Você pode usar bibliotecas de ícones como a Lucide e pedir ao chat de IA para integrá-las: ```text theme={null} Substitua ícones genéricos por outros mais significativos: - Use ícones que correspondam claramente a cada item de navegação e ação principal - Mantenha o tamanho dos ícones e a espessura do traço consistentes - Alinhe os ícones com os rótulos na navegação, nas listas e nos botões ``` ```text theme={null} Atualize todos os botões primários de chamada para ação: - Use o ícone "sparkles" à esquerda do rótulo - Mantenha o ícone pequeno e o preenchimento uniforme - Não adicione ícones a botões secundários ou destrutivos ``` *** ## Layout e responsividade O layout controla como as informações são agrupadas e lidas. A responsividade garante que esse layout funcione em qualquer dispositivo. Pense em tipos de página em vez de telas avulsas: * Páginas de destino e marketing * Painéis * Listas e tabelas * Páginas de detalhes * Formulários e assistentes * Páginas de configurações e perfil Você pode pedir ao chat de IA para detectar e padronizar padrões: ```text theme={null} Identifique os principais tipos de página desta aplicação (destino, painel, lista, detalhe, formulário, configurações). Para cada tipo: - Proponha uma estrutura de layout consistente - Sugira quais componentes existentes reutilizar Aplique esses layouts a todas as páginas do mesmo tipo, sem alterar o conteúdo. ``` Hierarquia e espaço em branco ajudam as pessoas a ver o que importa em um relance. Ideias que você pode pedir à IA para aplicar: ```text theme={null} Melhore a hierarquia visual e o espaço em branco nesta página: - Faça o título da página se destacar claramente sobre os demais textos - Use títulos de seção consistentes para agrupar o conteúdo - Adicione mais preenchimento superior e inferior em cada seção - Aumente o espaço entre as linhas de cards Evite adicionar novas cores ou fontes. ``` O espaço em branco é especialmente importante para conteúdo denso, como painéis e tabelas, então dê aos elementos-chave espaço para respirar. Sua aplicação precisa parecer natural em celulares, tablets e desktops. Você pode codificar regras responsivas em um único prompt: ```text theme={null} Torne este layout responsivo: - Em celulares, use uma única coluna vertical e empilhe as seções - Em tablets, use duas colunas para os cards onde houver espaço - Em desktops, use três ou quatro colunas para os cards Mantenha as imagens em proporção 4:3. Recolha a barra lateral em um menu superior em telas menores. Evite rolagem horizontal em todos os pontos de quebra. ``` Use a prévia de dispositivos no editor da Base44 para verificar como essas regras se comportam em diferentes tamanhos de tela e depois refine-as com prompts de acompanhamento. ### Personalizando sua aplicação para dispositivos móveis Sua aplicação Base44 ajusta o layout automaticamente para qualquer dispositivo, mas você pode usar a prévia mobile e as ferramentas de personalização do editor para refinar como ela aparece e funciona em celulares. Isso permite criar uma experiência confortável e fluida para usuários mobile. Visualizando a versão mobile da sua aplicação no editor da Base44 **Para personalizar sua aplicação para dispositivos móveis:** 1. Acesse o editor da sua aplicação. 2. Clique no ícone **Screen** no topo e selecione **Mobile**. 3. Revise seu layout, sua navegação e seu conteúdo. 4. Faça as mudanças necessárias: * Pedindo ao chat de IA para fazer alterações na versão mobile. * Usando o modo **Edit** no chat de IA para alterar o design ou o layout de elementos específicos. **Dicas para deixar sua aplicação bonita no celular:** * Garanta que o texto seja legível * Redimensione os elementos para caber na tela do celular * Oculte ou exiba elementos conforme necessário * Garanta que botões e botões de ícone sejam fáceis de tocar * Verifique se as imagens ficam boas *** ## Tipos de página Tipos de página diferentes exigem escolhas de design diferentes. Você pode usar estes padrões como ponto de partida e adaptá-los com IA. Foque em uma promessa clara, uma chamada para ação principal e uma hierarquia visual forte. Dicas de design: * Use um cabeçalho simples com navegação mínima. * Deixe a seção de destaque clara e focada, com um título curto e um botão primário. * Use seções de apoio para benefícios, recursos e prova social. * Mantenha os formulários curtos e visíveis sem rolagem quando possível. Exemplo de prompt: ```text theme={null} Projete a página inicial como uma página de destino focada: - Seção de destaque limpa, com um título curto, uma frase de apoio e uma chamada para ação primária - Em seguida, três benefícios principais em cards - Adicione uma seção simples de prova social com logotipos - Mantenha a navegação mínima Use meu sistema existente de cores e tipografia. ``` Painéis devem responder "Como estou indo?" em um relance. Dicas de design: * Coloque a métrica ou o status mais importante perto do canto superior esquerdo. * Agrupe métricas relacionadas em cards com títulos claros e descrições curtas. * Evite muitos tipos de gráfico em uma tela, reutilize alguns padrões. * Mantenha filtros e intervalos de tempo visíveis e consistentes. Exemplo de prompt: ```text theme={null} Reestruture este painel: - Coloque o KPI principal no canto superior esquerdo em um card de destaque - Agrupe métricas relacionadas em uma grade 2x2 de cards - Mova filtros e controles de intervalo de datas para uma barra superior limpa - Reduza o ruído visual dos gráficos usando cores e estilos consistentes ``` Listas e tabelas permitem que as pessoas leiam e ajam sobre muitos itens. Dicas de design: * Use cabeçalhos de coluna claros com espaçamento suficiente. * Mantenha a altura das linhas confortável, sem apertar. * Use listras alternadas ou separadores sutis em tabelas grandes. * Mantenha as ações no fim da linha ou em um menu consistente. * Adicione estados de vazio, carregamento e erro. Exemplo de prompt: ```text theme={null} Organize esta visualização de tabela: - Aumente levemente a altura das linhas - Use separadores sutis ou listras alternadas - Alinhe as ações em uma coluna consistente no final - Adicione um estado vazio claro com uma mensagem curta e uma ação primária ``` Páginas de detalhes devem deixar o objeto principal e suas ações-chave evidentes. Dicas de design: * Coloque o título do objeto e as ações primárias perto do topo. * Use um layout claro com uma coluna principal de conteúdo e um painel lateral opcional. * Agrupe informações relacionadas com títulos ou abas. * Mantenha ações destrutivas visualmente distintas e posicionadas com cuidado. Exemplo de prompt: ```text theme={null} Melhore esta página de detalhes: - Mova o título principal e as ações primárias para o topo da página - Use um layout de duas colunas, com o conteúdo principal à esquerda e informações secundárias à direita - Agrupe campos relacionados sob títulos pequenos - Deixe as ações destrutivas claramente rotuladas e visualmente distintas ``` Formulários concentram muitos fluxos importantes. Eles devem parecer simples e tolerantes. Dicas de design: * Agrupe campos relacionados sob títulos. * Use um layout de coluna única na maioria dos formulários. * Mostre o progresso em fluxos longos com várias etapas. * Posicione as mensagens de erro perto dos campos e deixe-as claras. * Use rótulos claros e textos de ajuda. Exemplo de prompt: ```text theme={null} Redesenhe este formulário para maior clareza: - Use um layout de coluna única - Agrupe campos relacionados sob títulos curtos - Adicione rótulos claros e textos de ajuda onde necessário - Mostre mensagens de erro em linha abaixo de cada campo quando a validação falhar Use meu sistema existente de tipografia e espaçamento. ``` *** ## Personalização avançada Quando quiser ir além do que a IA e o modo **Edit** oferecem por padrão, você pode trazer seu próprio código e pacotes npm. A IA ainda pode ajudar a conectar e alinhar tudo. Você pode usar [pacotes npm](/Building-your-app/NPM-packages) para trazer mais movimento, efeitos visuais e componentes interativos para sua aplicação Base44 sem construir tudo do zero. Os pacotes vêm do registro público do npm e são instalados pelo chat de IA no editor da sua aplicação, então você permanece no mesmo fluxo de trabalho. **Exemplos focados em design incluem:** * Bibliotecas de animação (por exemplo, anime.js) para adicionar transições, efeitos de hover e microinterações. * Bibliotecas de componentes de UI ou de movimento para lidar com modais, tooltips, carrosséis ou fluxos em etapas com padrões de interação prontos. * Utilitários de gráficos para visualizar dados com cores, tipografia e espaçamento personalizados que combinam com sua aplicação. * Bibliotecas de arrastar e soltar ou de gestos para deixar os layouts mais táteis e interativos. * Auxiliares de data e hora para formatar carimbos de data e agendas de um jeito que se encaixe na sua UI. **Depois que um pacote é instalado, você pode usar o chat de IA para:** * Importar as funções ou os componentes certos do pacote. * Conectá-los ao seu layout e aos seus tokens de design existentes (cores, tipografia, espaçamento, raio). * Ajustar props, variantes e movimento para que fiquem consistentes com o restante da aplicação. * Verificar detalhes de acessibilidade, como estados de foco, navegação por teclado e preferências de movimento reduzido. **Exemplo de prompt** ```text theme={null} Adicionei o pacote npm framer-motion. Refatore a grade de cards existente para que cada card anime no hover usando framer-motion: - Mantenha o layout e o texto atuais - Use os tokens de cor, o raio de borda e a tipografia existentes - Respeite prefers-reduced-motion e mantenha os contornos de foco do teclado visíveis ``` Todos os pacotes npm são código de terceiros. A Base44 não pode garantir sua qualidade ou segurança, então revise o README do pacote, teste-o na sua aplicação e confirme que ele atende aos requisitos de design e desempenho do seu projeto. Aplicações Base44 costumam usar utilitários do Tailwind CSS. A IA pode ajudar você a refatorar estilos bagunçados em algo mais sistemático. Tarefas que você pode pedir à IA: * Substituir estilos em linha por utilitários do Tailwind. * Extrair padrões repetidos em componentes reutilizáveis. * Mapear valores de cor para tokens de design e para a configuração do Tailwind. Exemplo: ```text theme={null} Refatore estes componentes para usar classes Tailwind consistentes: - Substitua atributos de estilo em linha por utilitários do Tailwind - Use os tokens de design para cores, espaçamento e tipografia - Documente as principais combinações de classes para navegação, cards e botões ``` Às vezes você quer controle preciso sobre layout, animação ou estrutura de componentes. Você pode [abrir arquivos de código](/documentation/building-your-app/editing-code) diretamente e editá-los você mesmo ou pedir à IA para fazer isso. Edições comuns relacionadas a design: * Atualizar o `Layout.js` para mudar wrappers globais, cabeçalhos ou rodapés. * Ajustar provedores de tema ou contexto. * Mudar como os componentes são compostos e quais props aceitam. Para editar o código: 1. Abra o arquivo relevante. 2. Cole um trecho de código no chat de IA. 3. Peça uma mudança e depois revise o diff ou a prévia. Exemplo: ```text theme={null} Aqui está meu componente Layout.js. Ajuste-o para que: - O cabeçalho fique fixo durante a rolagem - O conteúdo principal tenha uma largura máxima e fique centralizado em telas grandes - A cor de fundo use o token de superfície do meu sistema de design Explique o que você mudou em comentários. ``` Escolhas de design afetam o [desempenho](/Performance-and-SEO/App-performance), especialmente quando você introduz pacotes e visuais pesados. Tenha em mente: * Use tamanhos de imagem otimizados em vez de ativos de fundo enormes. * Evite carregar muitas animações pesadas ou bibliotecas grandes no carregamento inicial. * Carregue sob demanda seções pouco usadas, como relatórios profundos ou filtros avançados. * Reutilize componentes compartilhados em vez de muitas cópias quase iguais. Você pode pedir à IA uma revisão focada em desempenho: ```text theme={null} Revise o design desta aplicação sob a perspectiva de desempenho: - Identifique elementos visuais ou de código pesados que possam atrasar o carregamento - Sugira alternativas mais leves que mantenham o mesmo visual geral - Proponha lugares específicos onde carregamento sob demanda ou divisão de código ajudariam ``` *** ## Acessibilidade Acessibilidade faz parte de um bom design. Ela ajuda mais pessoas a usar sua aplicação com conforto e pode melhorar a clareza para todos. As escolhas de cor têm impacto direto na legibilidade. Boas práticas: * Use contraste forte entre o texto e o fundo. * Evite usar apenas a cor para transmitir significado. * Mantenha elementos interativos, como botões e links, claramente visíveis em todos os estados. * Verifique os modos claro e escuro, se você oferecer temas. Exemplo de prompt: ```text theme={null} Audite esta aplicação quanto ao contraste de cores: - Identifique textos ou ícones com baixo contraste em relação aos fundos - Reforce o contraste mantendo a mesma paleta geral - Garanta que botões primários e links sejam claramente distinguíveis Descreva as principais correções aplicadas. ``` Texto legível vai além da escolha da fonte. Boas práticas: * Use tamanhos de fonte confortáveis em todos os dispositivos. * Use altura de linha suficiente nos parágrafos. * Evite fontes muito finas sobre fundos claros. * Mantenha o comprimento das linhas razoável, especialmente em telas largas. Exemplo de prompt: ```text theme={null} Melhore a legibilidade do texto: - Aumente levemente o tamanho base da fonte do corpo - Aumente a altura de linha dos parágrafos - Garanta que os títulos sejam claramente maiores que o texto do corpo - Reduza linhas muito longas em telas largas ``` As pessoas devem conseguir usar sua aplicação com o teclado e ver onde estão. Boas práticas: * Garanta que a tecla Tab percorra os elementos interativos em ordem lógica. * Garanta que os estilos de foco sejam visíveis e distintos. * Evite armadilhas de teclado em que o foco não consegue sair. Exemplo de prompt: ```text theme={null} Melhore a acessibilidade de teclado e foco: - Garanta que todos os elementos interativos possam ser alcançados com Tab - Adicione estilos de foco visíveis a botões, links e campos de formulário - Corrija problemas de ordem de foco nesta página Descreva as principais mudanças feitas. ``` O movimento pode ajudar ou atrapalhar. Algumas pessoas preferem menos. Boas práticas: * Respeite as preferências de movimento reduzido. * Evite flashes rápidos ou cintilação forte. * Use animações sutis e com propósito, em vez de movimento constante. Exemplo de prompt: ```text theme={null} Ajuste as animações para acessibilidade: - Respeite a preferência de movimento reduzido do usuário - Remova ou simplifique animações grandes e contínuas - Mantenha apenas movimentos curtos e sutis que ajudem na compreensão ``` Linguagem e descrições claras ajudam a todos, incluindo pessoas que usam tecnologia assistiva. Boas práticas: * Use rótulos claros e descritivos para botões e links. * Forneça texto alternativo significativo para imagens importantes. * Use títulos para estruturar o conteúdo. * Evite textos de link vagos, como "clique aqui". Exemplo de prompt: ```text theme={null} Melhore a acessibilidade de rótulos e textos alternativos: - Deixe os rótulos de botões e links mais descritivos onde necessário - Adicione ou melhore o texto alternativo de imagens importantes - Garanta que os títulos sigam uma estrutura clara Mantenha o mesmo tom e voz da marca. ``` *** ## Perguntas frequentes Clique em uma pergunta abaixo para saber mais sobre fundamentos de design e layout. Projete para celular, tablet e desktop separadamente e depois verifique como seus layouts se adaptam. Use estas diretrizes ao projetar na Base44: * Celular: use uma única coluna vertical, mantenha uma ação primária clara por tela e crie áreas de toque grandes com espaçamento suficiente. Mantenha os textos curtos para que as pessoas não precisem dar zoom. * Tablet: trate o tablet como um híbrido. Você pode usar menus laterais ou layouts divididos, mas mantenha os botões amigáveis ao toque e evite tabelas muito pequenas ou controles densos. * Desktop: use a largura extra para layouts de várias colunas e barras laterais. Você pode adicionar efeitos de hover, mas qualquer ação importante também deve funcionar com clique ou toque. * Todos os dispositivos: use tamanhos de fonte legíveis, evite rolagem horizontal e deixe os elementos empilharem em vez de sobrepor quando o espaço for curto. Evite alturas fixas que cortem o conteúdo. Você também pode pedir à IA para aplicar regras responsivas, por exemplo: ```text theme={null} Torne este layout responsivo para celular, tablet e desktop. Evite rolagem horizontal e mantenha as ações primárias visíveis sem rolagem excessiva. ``` Escolhas de design têm impacto direto na velocidade de carregamento e na fluidez da sua aplicação. Ao projetar na Base44, tenha estas diretrizes em mente: * Use tamanhos de imagem otimizados para que ativos grandes não atrasem o carregamento inicial. Prefira formatos comprimidos e evite enviar imagens muito maiores do que aparecem na tela. * Limite animações pesadas e efeitos complexos, especialmente em aplicações com muito uso mobile. Transições curtas e simples são aceitáveis, mas evite movimento constante ou grandes fundos animados. * Mantenha os layouts limpos e focados. Menos camadas, sobreposições e componentes aninhados geralmente significam renderização mais rápida, especialmente em dispositivos mais simples. * Reutilize componentes em vez de criar muitas versões levemente diferentes. Componentes compartilhados são mais fáceis de armazenar em cache e manter. * Evite carregar tudo de uma vez. Quando possível, carregue conteúdo não crítico depois, por exemplo seções secundárias, listas longas ou painéis pouco usados. * Tenha cuidado com incorporações de terceiros, como mapas, players de vídeo e widgets. Inclua-as apenas onde agregam valor real e evite empilhar muitas incorporações em uma única tela. Esta página foi traduzida usando IA. Para as informações mais precisas e atualizadas, consulte a [versão em inglês](/).