Objetivo
Definir buenas prácticas y lineamientos visuales para la generación de imágenes de portada utilizadas en distintos puntos de la plataforma, asegurando consistencia, atractivo visual y adaptabilidad en todos los dispositivos.
Escenarios de Visualización
La imágen de portada de los cursos se renderiza en tres contextos principales. Esto genera variaciones en zoom, posición, proporción y recorte, lo que puede:
Cortar parte del texto
Volver ilegible el mensaje
Cuanto más texto contiene una imagen de portada, más difícil será garantizar que se vea correctamente en todos los contextos de uso dentro de la plataforma actualmente.
Visualización | Ubicación | Formato |
🏠 Home (Academia) | Vista inicial de la academia donde se muestra el catalogo de contenidos | Header dentro del card |
✏️ Vista del Content Creator | Pantalla inicial dentro del curso/elemento | Banner ocupando toda la pantalla |
📦 Listado de cursos | Listado de todas las formaciones desde el backoffice | Preview card miniatura
|
Comportamiento de Renderizado
Todas las portadas usan la propiedad css object-fit: cover. Para asegurar que:
La imagen ocupe completamente el contenedor asignado.
Se mantenga una buena estética visual sin dejar bordes vacíos.
Se pueda soportar dinámicamente distintos aspect ratios (cuadrado, apaisado, vertical) sin romper la maquetación ni causar overflow en pantallas mobile o en escritorios.
⚠️ IMPORTANTE
Este comportamiento puede implicar un recorte de la imagen, especialmente en bordes.
Aspect Ratio
El aspect ratio (relación de aspecto) define la proporción entre el ancho y la altura de una imagen. Se expresa como una relación matemática:
Aspect Ratio = Ancho : Alto
🗒️ NOTA
Es importante considerar que si el aspect ratio de la imagen es menor a 2 se mostrará una preview de la imagen.
Aspect Ratio | Descripción | Resoluciones comunes |
Cuadrado Mismo ancho y alto (1:1) | 300 x 300 400 x 400 500 x 500 | |
Apaisado Más ancho que alto (16:9 o similar) | 1920 x 1080 | |
Banner Mucho más ancho que alto
| 1200 x 400 | |
| Vertical Altura mayor que el ancho (9:16 o similar) | 1080 x 1920 |
Consideraciones y recomendaciones
Debemos elegir el aspect ratio que más se ajuste a nuestras necesidades y requerimientos. El aspect ratio de la imagen determina cómo se verá y se recortará al ser mostrada en los distintos componentes de la plataforma.
Por eso es fundamental elegir un ratio adecuado que funcione bien en todas las visualizaciones, y mantener el contenido visual centrado o con márgenes de seguridad.
Aspect Ratio | Pros | Contras | Ejemplos | Preview |
Menor a 2
| Es más útil para mostrar portadas con información y texto importante, ya que se mostrará una preview con todo su contenido. | Puede quedar ajustada o verse demasiado reducida en dispositivos mobile o en el listado de cursos. | 1920 x 1080 1280 x 720 500 x 500 | Si |
Mayor a 2 | Ideal para visualización tipo banner. Puede usarse como imagen de fondo artística. | Puede perder contenido relevante como textos por recorte. | 1400 x 200 | No |
Se recomienda una resolución de 1920 x 1080 para obtener una buena visualización en la mayoría de casos.
Ejemplos Visuales
Cards en Home de la academia
Vista del Content Creator
Listado de cursos
Tips Finales
Usar zonas visuales centrales para lo más importante (logos, íconos, personas).
Tener en cuenta que un aspect ratio menor a 2 mostrará una preview de la imagen. Ver ejemplos visuales anteriores.
Validar cómo se ve la portada en varios contextos antes de publicarla. Si se desea incluir texto, asegurarse de que:
Esté centrado o en zonas con margen de seguridad.
Use un tamaño legible en resoluciones bajas.
No incluir texto importante cerca de los bordes.
Preferir fondos limpios o con patrones suaves que no compitan con el texto.