> ## 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 diseño y estructura
> Mantén tu app de Base44 consistente y bien estructurada: sistemas de diseño, imágenes y recursos visuales, diseño responsivo, tipos de página, personalización avanzada y accesibilidad.
Una vez que sabes cómo [personalizar el diseño de tu app](/Building-your-app/Design), estos fundamentos te ayudan a mantenerla consistente, bien estructurada y accesible a medida que crece. Esta página cubre cómo construir un diseño consistente, trabajar con imágenes y recursos visuales, la estructura responsiva y los tipos de página, la personalización avanzada y la accesibilidad.
***
## Mantener tu diseño consistente
Estas secciones cubren cómo establecer patrones de diseño consistentes en toda la app usando el chat de IA, para que tus colores, tipografía, espaciado y componentes se sientan cohesivos en toda tu app.
### Sistema de color
El color es una de tus herramientas más potentes para definir el tono y guiar la atención. Empieza por definir roles en lugar de códigos hex aleatorios. Apunta a:
* 1 color primario de marca
* 1 color secundario
* 1 color de acento para destacados
* 3 a 5 grises neutros para fondos, superficies y bordes
* Colores claros para estados de éxito, advertencia y error
Puedes pedir a la IA que proponga y aplique un sistema completo desde cero:
```text theme={null}
Crea un sistema de color para esta app:
- 1 color primario de marca
- 1 color secundario
- 1 color de acento para destacados
- 4 grises neutros para fondos, superficies y bordes
Asigna los colores a roles como primario, superficie, borde, éxito, advertencia y error.
Asegura que el texto sobre los fondos cumpla los niveles de contraste de accesibilidad.
Aplica este sistema en toda la app y reemplaza los colores sueltos.
```
Mantén consistente el significado del color. Por ejemplo, usa tu color de éxito solo para estados positivos y tu color de error para problemas, no como decoración.
Si ya tienes códigos hex de una guía de marca o una herramienta externa, pégalos y deja que la IA los asigne a roles:
```text theme={null}
Usa esta paleta y asigna cada hex a un rol:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
Define cuáles son los roles primario, secundario, de acento y neutros.
Reemplaza los colores fijos en el código con tokens o clases de Tailwind que sigan estos roles.
```
Puedes subir una captura o imagen de tu paleta de colores directamente al chat de IA y pedirle que aplique los colores a tu app:
```text theme={null}
Aplica los colores de esta imagen a mi app.
Asigna cada color a un rol como primario, fondo, primer plano y acento.
Reemplaza los colores existentes en toda la app para que coincidan.
```
***
### Sistema tipográfico
La tipografía controla lo legible y escaneable que se siente tu app. Es mejor tener pocos estilos de texto claros que muchos parecidos.
Define roles como:
* Título de página
* Encabezado de sección
* Texto de cuerpo
* Metadatos pequeños como etiquetas y marcas de tiempo
Puedes pedir a la IA que configure esto y lo aplique en todas partes:
```text theme={null}
Configura un sistema tipográfico:
- Títulos de página: tamaño más grande, negrita, sans serif moderna
- Encabezados de sección: tamaño medio, seminegrita
- Texto de cuerpo: tamaño estándar, peso regular
- Metadatos: pequeños en mayúsculas con espaciado extra entre letras
Aplica estos roles de forma consistente en todas las páginas y elimina los tamaños de fuente sueltos.
```
También puedes apuntar a tamaños de forma más directa:
```text theme={null}
Haz la tipografía más legible:
- Aumenta ligeramente el tamaño base del texto de cuerpo
- Aumenta la altura de línea de los párrafos
- Asegura que los encabezados sean al menos 1.4x el tamaño del texto de cuerpo
Mantén las mismas familias tipográficas.
```
Puedes usar fuentes personalizadas y aplicarlas a través de tu layout.
1. Obtén el fragmento de inserción (por ejemplo desde Google Fonts en [https://fonts.google.com](https://fonts.google.com)).
2. Pide a la IA que lo añada a `Layout.js` y lo conecte con tu sistema tipográfico.
Prompt de ejemplo:
```text theme={null}
Importa la fuente "Raleway" desde Google Fonts.
Úsala para los títulos de página y los encabezados de sección.
Mantén la fuente de cuerpo actual para los párrafos.
Actualiza los estilos en toda la app para seguir esta regla.
```
Intenta limitarte a una o dos familias tipográficas. Demasiadas fuentes hacen que la interfaz se sienta desestructurada y más difícil de mantener.
***
### Espaciado y densidad
El espaciado y la densidad controlan lo cómoda que se siente tu app al usarla. Una escala de espaciado simple evita huecos aleatorios y secciones apretadas.
Puedes definir una escala como 4, 8, 12, 16, 24 y pedir a la IA que la aplique:
```text theme={null}
Normaliza el espaciado usando esta escala: 4, 8, 12, 16, 24.
- Usa valores más grandes entre secciones principales
- Usa valores medios dentro de tarjetas y paneles
- Usa valores pequeños entre etiquetas y campos
Reduce las áreas que se sientan apretadas y evita valores de espaciado aleatorios.
```
Si una página se siente saturada o demasiado vacía, puedes dejar que el chat de IA lo diagnostique y lo arregle:
```text theme={null}
Mira esta página y ajusta el espaciado:
- Añade más relleno superior e inferior alrededor de cada sección
- Aumenta el espacio entre filas de tarjetas
- Asegura que los párrafos largos tengan una longitud de línea cómoda
Mantén los colores y el contenido existentes.
```
***
### Elementos base y estados
Una vez que el color, la tipografía y el espaciado están definidos, estandariza los bloques que usas en todas partes.
Enfócate en:
* Botones (primario, secundario y solo texto)
* Tarjetas y paneles
* Barras de navegación y barras laterales
* Campos de formulario (por defecto, foco, error, deshabilitado)
* Chips, etiquetas e insignias si las usas
Puedes pedir a la IA que detecte y unifique patrones:
```text theme={null}
Estandariza los elementos base:
- Botones: define los estilos primario, secundario y solo texto
- Tarjetas: define el radio de esquina, el relleno, la sombra y el diseño de encabezado/cuerpo
- Navegación: define los estados activo, hover y deshabilitado
- Campos de formulario: define los estados por defecto, foco, error y deshabilitado
Aplica estos patrones en toda la app y reemplaza los estilos que no coincidan.
```
Esto te da un lenguaje reutilizable para que las páginas nuevas parezcan pertenecer al mismo producto.
***
## Imágenes y recursos visuales
Los recursos visuales como imágenes, iconos y videos dan forma a cómo se siente tu app. La IA puede ayudarte a crearlos, colocarlos, estilizarlos y conectarlos con tus datos y tu código.
Sube imágenes o videos al chat de IA para darle contexto visual sobre el estilo, la estructura o el contenido de tu app.
Puedes pedir al chat de IA que añada imágenes hero directamente a tus páginas:
```text theme={null}
Añade una imagen hero de ancho completo a la página de inicio que combine con la paleta de colores actual.
Usa una imagen de marcador de posición que sugiera un panel de analítica moderno.
```
Para reemplazar una imagen de marcador de posición:
1. Abre el archivo de la página correspondiente, como `Store.js`, en la vista de código.
2. Busca la etiqueta `![]()
`.
3. Actualiza el atributo `src` con la URL de tu propia imagen.
También puedes subir imágenes para entidades en la sección **Data** y vincularlas a componentes para que las tarjetas y listas muestren las imágenes correctas automáticamente.
Pide al chat de IA que genere videos cortos para secciones visuales como heros, vistas previas de producto, tutoriales o pantallas de onboarding.
Prompt de ejemplo:
```text theme={null}
Crea un video corto de onboarding para mi app de fitness que muestre una rutina simple de ejercicio matutino. Añádelo a la pantalla de bienvenida encima del botón Get Started.
```
Generar videos desde el chat de IA requiere un [plan Starter](/Account-and-billing/Billing-and-plans) o superior. Cada video generado usa los créditos de mensaje del prompt más 1 crédito de mensaje adicional.
También puedes permitir que las personas generen videos en tu app publicada. Aprende más sobre [generar videos](/Integrations/built-in-integrations#generating-videos).
Las imágenes de referencia te ayudan a dirigir el diseño visualmente mostrando al chat de IA un estilo, una estructura, una paleta de colores o una dirección visual que quieras usar.
1. Haz clic en el icono de **subida (+)** en el chat de IA.
2. Sube una imagen de inspiración o una captura de pantalla.
3. Dile a la IA exactamente qué quieres tomar y qué ignorar.
Ideas de prompts:
```text theme={null}
Usa esta referencia como inspiración.
Mantén mi estructura y contenido, pero:
- Iguala las formas y sombras de los botones
- Iguala el radio de esquina y el estilo de borde de las tarjetas
- Aplica un degradado suave similar solo al encabezado superior
No copies los colores exactos, solo la estructura y la sensación.
```
```text theme={null}
A partir de esta captura, extrae reglas de diseño para:
- Roles de color
- Tamaños y pesos de fuente
- Radio de esquina y sombras
- Espaciado entre secciones y tarjetas
Explica las reglas y luego aplica un estilo similar usando mis colores de marca actuales.
```
Puedes copiar estilos visuales directamente desde una herramienta de diseño como Figma y pedir a Base44 que los aplique, en lugar de intentar describir cada detalle con palabras.
**Para copiar desde Figma:**
1. En Figma, selecciona el elemento cuyo estilo quieres copiar.
2. Cambia a **Dev mode** y consulta el panel **Code**.
3. Copia la línea de CSS relevante, por ejemplo un fondo con degradado: `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);`
4. En Base44, haz clic en el elemento correspondiente en tu vista previa para abrir el modo **Edit**.
5. Pega el estilo en un prompt de IA y dile a Base44 exactamente qué cambiar, por ejemplo:
```text theme={null}
Cambia el estilo de fondo de este elemento a:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Mantén todos los demás estilos igual.
```
Esto te permite igualar degradados, sombras, bordes y otros estilos de tu archivo de diseño con mucha precisión.
Los iconos deben aportar significado, no solo decoración. La consistencia es clave.
Tareas comunes:
* Reemplazar iconos genéricos por otros más significativos.
* Alinear los tamaños de icono y los grosores de trazo.
* Combinar iconos con etiquetas de texto donde la claridad importa.
Puedes usar bibliotecas de iconos como Lucide y pedir al chat de IA que las integre:
```text theme={null}
Reemplaza los iconos genéricos por otros más significativos:
- Usa iconos que coincidan claramente con cada elemento de navegación y acción principal
- Mantén el tamaño de icono y el grosor de trazo consistentes
- Alinea los iconos con las etiquetas en la navegación, las listas y los botones
```
```text theme={null}
Actualiza todos los botones principales de llamada a la acción:
- Usa el icono "sparkles" a la izquierda de la etiqueta
- Mantén el tamaño de icono pequeño y el relleno uniforme
- No añadas iconos a los botones secundarios o destructivos
```
***
## Estructura y capacidad de respuesta
La estructura controla cómo se agrupa y se escanea la información. La capacidad de respuesta asegura que esa estructura funcione en todos los dispositivos.
Piensa en tipos de página en lugar de pantallas sueltas:
* Páginas de aterrizaje y marketing
* Paneles
* Listas y tablas
* Páginas de detalle
* Formularios y asistentes
* Páginas de configuración y perfil
Puedes pedir al chat de IA que detecte y estandarice patrones:
```text theme={null}
Identifica los tipos de página principales de esta app (aterrizaje, panel, lista, detalle, formulario, configuración).
Para cada tipo:
- Propón una estructura de diseño consistente
- Sugiere qué componentes existentes reutilizar
Aplica esas estructuras a todas las páginas del mismo tipo, sin cambiar el contenido.
```
La jerarquía y el espacio en blanco ayudan a las personas a ver de un vistazo lo que importa.
Ideas que puedes pedir a la IA que aplique:
```text theme={null}
Mejora la jerarquía visual y el espacio en blanco en esta página:
- Haz que el título de la página destaque claramente sobre el resto del texto
- Usa encabezados de sección consistentes para agrupar el contenido
- Añade más relleno superior e inferior alrededor de cada sección
- Aumenta el espacio entre filas de tarjetas
Evita añadir nuevos colores o fuentes.
```
El espacio en blanco es especialmente importante para contenido denso como paneles y tablas, así que da a los elementos clave espacio para respirar.
Tu app necesita sentirse natural en teléfonos, tabletas y ordenadores.
Puedes codificar reglas responsivas en un solo prompt:
```text theme={null}
Haz esta estructura responsiva:
- En teléfonos, usa una sola columna vertical y apila las secciones
- En tabletas, usa dos columnas para las tarjetas donde el espacio lo permita
- En ordenadores, usa tres o cuatro columnas para las tarjetas
Mantén las imágenes en una proporción 4:3.
Colapsa la barra lateral en un menú superior en pantallas pequeñas.
Evita el desplazamiento horizontal en todos los puntos de quiebre.
```
Usa la vista previa de dispositivos en el editor de Base44 para comprobar cómo se comportan estas reglas en distintos tamaños de pantalla, y luego refínalas con prompts de seguimiento.
### Personalizar tu app para móvil
Tu app de Base44 ajusta automáticamente su estructura a cualquier dispositivo, pero puedes usar la vista previa móvil del editor y las herramientas de personalización para afinar cómo se ve y funciona tu app en móviles. Esto te permite crear una experiencia cómoda y fluida para los usuarios de móvil.
**Para personalizar tu app para móvil:**
1. Ve al editor de tu app.
2. Haz clic en el icono **Screen** en la parte superior y selecciona **Mobile**.
3. Revisa tu estructura, navegación y contenido.
4. Haz los cambios necesarios de una de estas formas:
* Pidiendo al chat de IA que haga cambios en la versión móvil.
* Usando el modo **Edit** en el chat de IA para cambiar el diseño o la estructura de elementos específicos.
**Consejos para que tu app se vea bien en móvil:**
* Asegúrate de que el texto sea legible
* Redimensiona los elementos para que quepan en la pantalla del móvil
* Oculta o muestra elementos según sea necesario
* Asegura que los botones y los botones de icono sean fáciles de tocar
* Comprueba que las imágenes se vean bien
***
## Tipos de página
Los distintos tipos de página necesitan decisiones de diseño distintas. Puedes usar estos patrones como punto de partida y adaptarlos con la IA.
Enfócate en una promesa clara, una llamada a la acción principal y una jerarquía visual fuerte.
Consejos de diseño:
* Usa un encabezado simple con navegación mínima.
* Haz que la sección hero sea clara y enfocada, con un titular corto y un botón primario.
* Usa secciones de apoyo para beneficios, funciones y prueba social.
* Mantén los formularios cortos y visibles sin desplazarse cuando sea posible.
Ejemplo de prompt:
```text theme={null}
Diseña la página de inicio como una página de aterrizaje enfocada:
- Sección hero limpia con un titular corto, una frase de apoyo y una llamada a la acción principal
- A continuación, tres beneficios clave en tarjetas
- Añade una sección simple de prueba social con logos
- Mantén la navegación mínima
Usa mi sistema de color y tipografía existente.
```
Los paneles deben responder de un vistazo a la pregunta de cómo van las cosas.
Consejos de diseño:
* Coloca la métrica o el estado más importante cerca de la esquina superior izquierda.
* Agrupa las métricas relacionadas en tarjetas con títulos claros y descripciones cortas.
* Evita demasiados tipos de gráfico en una pantalla, reutiliza unos pocos estándar.
* Mantén los filtros y los rangos de tiempo claramente visibles y consistentes.
Ejemplo de prompt:
```text theme={null}
Reestructura este panel:
- Coloca el KPI principal arriba a la izquierda en una tarjeta destacada
- Agrupa las métricas relacionadas en una cuadrícula de tarjetas de 2x2
- Mueve los filtros y los controles de rango de fechas a una barra superior limpia
- Reduce el ruido visual de los gráficos usando colores y estilos consistentes
```
Las listas y tablas permiten a las personas escanear y actuar sobre muchos elementos.
Consejos de diseño:
* Usa encabezados de columna claros con suficiente espaciado.
* Mantén una altura de fila cómoda, no demasiado apretada.
* Usa filas alternadas o separadores sutiles en tablas grandes.
* Mantén las acciones al final de la fila o en un menú consistente.
* Añade estados vacío, de carga y de error.
Ejemplo de prompt:
```text theme={null}
Limpia esta vista de tabla:
- Aumenta ligeramente la altura de las filas
- Usa separadores de fila sutiles o filas alternadas
- Alinea las acciones en una columna consistente al final
- Añade un estado vacío claro con un mensaje corto y una acción principal
```
Las páginas de detalle deben hacer obvios el objeto principal y sus acciones clave.
Consejos de diseño:
* Coloca el título del objeto y las acciones principales cerca de la parte superior.
* Usa una estructura clara con una columna de contenido principal y un panel lateral opcional.
* Agrupa la información relacionada con encabezados o pestañas.
* Mantén las acciones destructivas visualmente distintas y colocadas con cuidado.
Ejemplo de prompt:
```text theme={null}
Mejora esta página de detalle:
- Mueve el título principal y las acciones principales a la parte superior de la página
- Usa una estructura de dos columnas con el contenido principal a la izquierda y la información secundaria a la derecha
- Agrupa los campos relacionados bajo encabezados pequeños
- Haz que las acciones destructivas estén claramente etiquetadas y sean visualmente distintas
```
Los formularios son donde ocurren muchos flujos clave. Deben sentirse simples y tolerantes.
Consejos de diseño:
* Agrupa los campos relacionados bajo encabezados.
* Usa una estructura de una sola columna para la mayoría de los formularios.
* Muestra el progreso en flujos largos de varios pasos.
* Coloca los mensajes de error cerca de los campos y hazlos claros.
* Usa etiquetas claras y texto de ayuda.
Ejemplo de prompt:
```text theme={null}
Rediseña este formulario para mayor claridad:
- Usa una estructura de una sola columna
- Agrupa los campos relacionados bajo encabezados cortos
- Añade etiquetas claras y texto de ayuda donde sea necesario
- Muestra mensajes de error en línea bajo cada campo cuando falle la validación
Usa mi sistema de tipografía y espaciado existente.
```
***
## Personalización avanzada
Cuando quieres ir más allá de lo que la IA y el modo **Edit** te dan de serie, puedes incorporar tu propio código y paquetes npm. La IA aún puede ayudarte a conectar y alinear todo.
Puedes usar [paquetes npm](/Building-your-app/NPM-packages) para incorporar movimiento más rico, efectos visuales y componentes interactivos en tu app de Base44 sin construir todo desde cero. Los paquetes vienen del registro público de npm y se instalan a través del chat de IA en el editor de tu app, así que te mantienes en el mismo flujo de trabajo.
**Ejemplos enfocados en diseño:**
* Bibliotecas de animación (por ejemplo, anime.js) para añadir transiciones, efectos hover y microinteracciones.
* Bibliotecas de componentes de UI o de movimiento para gestionar modales, tooltips, carruseles o flujos por pasos con patrones de interacción integrados.
* Utilidades de gráficos para visualizar datos con colores, tipografía y espaciado personalizados que combinen con tu app.
* Bibliotecas de arrastrar y soltar o de gestos para hacer las estructuras más táctiles e interactivas.
* Ayudantes de fecha y hora para formatear marcas de tiempo y horarios de una forma que encaje con tu UI.
**Después de instalar un paquete, puedes usar el chat de IA para:**
* Importar las funciones o componentes correctos del paquete.
* Conectarlos con tu estructura existente y tus tokens de diseño (colores, tipografía, espaciado, radio).
* Ajustar props, variantes y movimiento para que se sientan consistentes con el resto de la app.
* Revisar detalles de accesibilidad como estados de foco, navegación por teclado y preferencias de movimiento reducido.
**Ejemplo de prompt**
```text theme={null}
Añadí el paquete npm framer-motion. Refactoriza la cuadrícula de tarjetas existente para que cada tarjeta se anime al pasar el cursor usando framer-motion:
- Mantén la estructura y los textos actuales
- Usa los tokens de color, el radio de borde y la tipografía existentes
- Respeta prefers-reduced-motion y mantén claros los contornos de foco del teclado
```
Todos los paquetes npm son código de terceros. Base44 no puede garantizar su calidad ni su seguridad, así que asegúrate de revisar el README del paquete, probarlo en tu app y confirmar que cumple los requisitos de diseño y rendimiento de tu proyecto.
Las apps de Base44 suelen usar utilidades de Tailwind CSS. La IA puede ayudarte a refactorizar estilos desordenados en algo más sistemático.
Tareas que puedes pedir a la IA:
* Reemplazar estilos en línea con utilidades de Tailwind.
* Extraer patrones repetidos en componentes reutilizables.
* Asignar los valores de color a tokens de diseño y a la configuración de Tailwind.
Ejemplo:
```text theme={null}
Refactoriza estos componentes para usar clases de Tailwind consistentes:
- Reemplaza los atributos de estilo en línea con utilidades de Tailwind
- Usa los tokens de diseño para colores, espaciado y tipografía
- Documenta las combinaciones de clases principales para navegación, tarjetas y botones
```
A veces quieres control preciso sobre la estructura, la animación o la composición de componentes. Puedes [abrir archivos de código](/documentation/building-your-app/editing-code) directamente y editarlos tú mismo o pedir a la IA que lo haga.
Ediciones comunes relacionadas con el diseño:
* Actualizar `Layout.js` para cambiar contenedores globales, encabezados o pies de página.
* Ajustar proveedores de tema o contexto.
* Cambiar cómo se componen los componentes y qué props aceptan.
Para editar el código:
1. Abre el archivo correspondiente.
2. Pega un fragmento de código en el chat de IA.
3. Pide un cambio y luego revisa el diff o la vista previa.
Ejemplo:
```text theme={null}
Aquí está mi componente Layout.js.
Ajústalo para que:
- El encabezado sea fijo al hacer scroll
- El contenido principal tenga un ancho máximo y esté centrado en pantallas grandes
- El color de fondo use el token de superficie de mi sistema de diseño
Explica lo que cambiaste en comentarios.
```
Las decisiones de diseño afectan al [rendimiento](/Performance-and-SEO/App-performance), especialmente cuando incorporas paquetes y elementos visuales pesados.
Ten en cuenta:
* Usa tamaños de imagen optimizados en lugar de recursos de fondo enormes.
* Evita cargar muchas animaciones pesadas o bibliotecas grandes en la carga inicial.
* Carga de forma diferida las secciones poco usadas, como informes profundos o filtros avanzados.
* Reutiliza componentes compartidos en lugar de muchas copias casi iguales.
Puedes pedir a la IA una revisión enfocada en rendimiento:
```text theme={null}
Revisa el diseño de esta app desde una perspectiva de rendimiento:
- Identifica elementos visuales o de código pesados que puedan ralentizar la carga
- Sugiere alternativas más ligeras que mantengan el mismo aspecto general
- Propón lugares específicos donde ayudaría la carga diferida o la división de código
```
***
## Accesibilidad
La accesibilidad es parte del buen diseño. Ayuda a que más personas usen tu app con comodidad y puede mejorar la claridad para todos.
Las decisiones de color tienen un impacto directo en la legibilidad.
Buenas prácticas:
* Usa un contraste fuerte entre el texto y el fondo.
* Evita usar solo el color para transmitir significado.
* Mantén los elementos interactivos, como botones y enlaces, claramente visibles en todos los estados.
* Comprueba los modos claro y oscuro si soportas temas.
Ejemplo de prompt:
```text theme={null}
Audita esta app en cuanto a contraste de color:
- Identifica texto o iconos con bajo contraste respecto a sus fondos
- Refuerza el contraste manteniendo la misma paleta general
- Asegura que los botones primarios y los enlaces se distingan claramente
Describe las correcciones principales que aplicaste.
```
Un texto legible es más que la elección de la fuente.
Buenas prácticas:
* Usa tamaños de fuente cómodos en todos los dispositivos.
* Usa suficiente altura de línea en los párrafos.
* Evita fuentes de peso muy ligero sobre fondos claros.
* Mantén una longitud de línea razonable, especialmente en pantallas anchas.
Ejemplo de prompt:
```text theme={null}
Mejora la legibilidad del texto:
- Aumenta ligeramente el tamaño base de la fuente de cuerpo
- Aumenta la altura de línea de los párrafos
- Asegura que los encabezados sean claramente más grandes que el texto de cuerpo
- Reduce las longitudes de línea muy largas en pantallas anchas
```
Las personas deben poder usar tu app con el teclado y ver dónde están.
Buenas prácticas:
* Asegúrate de que Tab recorra los elementos interactivos en un orden lógico.
* Asegura que los estilos de foco sean visibles y distintos.
* Evita trampas de teclado donde el foco no pueda salir.
Ejemplo de prompt:
```text theme={null}
Mejora la accesibilidad de teclado y foco:
- Asegura que todos los elementos interactivos se puedan alcanzar con Tab
- Añade estilos de foco visibles a botones, enlaces y campos de formulario
- Corrige cualquier problema de orden de foco en esta página
Describe cualquier cambio importante que hayas hecho.
```
El movimiento puede ayudar o perjudicar. Algunas personas prefieren menos.
Buenas prácticas:
* Respeta las preferencias de movimiento reducido.
* Evita destellos rápidos o parpadeos fuertes.
* Usa animaciones sutiles y con propósito en lugar de movimiento constante.
Ejemplo de prompt:
```text theme={null}
Ajusta las animaciones para accesibilidad:
- Respeta la preferencia de movimiento reducido del usuario
- Elimina o simplifica las animaciones continuas grandes
- Mantén solo movimiento corto y sutil que ayude a la comprensión
```
Un lenguaje claro y buenas descripciones ayudan a todos, incluidas las personas que usan tecnología de asistencia.
Buenas prácticas:
* Usa etiquetas claras y descriptivas para botones y enlaces.
* Proporciona texto alternativo significativo para las imágenes importantes.
* Usa encabezados para estructurar el contenido.
* Evita textos de enlace vagos como "haz clic aquí".
Ejemplo de prompt:
```text theme={null}
Mejora la accesibilidad de las etiquetas y el texto alternativo:
- Haz que las etiquetas de botones y enlaces sean más descriptivas donde sea necesario
- Añade o mejora el texto alternativo de las imágenes importantes
- Asegura que los encabezados sigan una estructura clara
Mantén el mismo tono y voz de marca.
```
***
## Preguntas frecuentes
Haz clic en una pregunta para aprender más sobre los fundamentos de diseño y la estructura.
Diseña para móvil, tableta y ordenador por separado, y luego comprueba cómo se adaptan tus estructuras.
Usa estas pautas cuando diseñes en Base44:
* Móvil: usa una sola columna vertical, mantén una acción principal clara por pantalla y haz las zonas táctiles grandes con suficiente espaciado. Mantén los textos cortos para que la gente no necesite hacer zoom.
* Tableta: trata la tableta como un híbrido. Puedes usar menús laterales o diseños divididos, pero mantén los botones aptos para tocar y evita tablas muy pequeñas o controles densos.
* Ordenador: usa el ancho extra para estructuras de varias columnas y barras laterales. Puedes añadir efectos hover, pero cualquier acción importante también debe funcionar con un clic o un toque.
* Todos los dispositivos: usa tamaños de fuente legibles, evita el desplazamiento horizontal y deja que los elementos se apilen en lugar de superponerse cuando el espacio escasee. Evita alturas fijas que corten el contenido.
También puedes pedir a la IA que aplique reglas responsivas, por ejemplo:
```text theme={null}
Haz esta estructura responsiva para móvil, tableta y ordenador.
Evita el desplazamiento horizontal y mantén las acciones principales visibles sin desplazamiento excesivo.
```
Las decisiones de diseño tienen un impacto directo en lo rápido que tu app carga y se siente. Cuando diseñes en Base44, ten en cuenta estas pautas:
* Usa tamaños de imagen optimizados para que los recursos grandes no ralenticen la carga inicial. Prefiere formatos comprimidos y evita subir imágenes mucho más grandes de lo que aparecen en pantalla.
* Limita las animaciones pesadas y los efectos complejos, especialmente en apps muy orientadas a móvil. Las transiciones cortas y simples están bien, pero evita el movimiento constante o los fondos animados grandes.
* Mantén las estructuras limpias y enfocadas. Menos capas, superposiciones y componentes anidados suelen significar un renderizado más rápido, especialmente en dispositivos de gama baja.
* Reutiliza componentes en lugar de crear muchas versiones ligeramente distintas. Los componentes compartidos son más fáciles de cachear y mantener.
* Evita cargar todo a la vez. Donde sea posible, carga después el contenido no crítico, por ejemplo secciones secundarias, listas largas o paneles poco usados.
* Ten cuidado con las inserciones de terceros como mapas, reproductores de video y widgets. Inclúyelas solo donde aporten valor real y evita acumular muchas en una sola pantalla.
Esta página fue traducida con IA. Para obtener la información más precisa y actualizada, consulta la [versión en inglés](/).