Hay múltiples lugares donde puedes personalizar tu plataforma con imágenes (fotos o gráficos diseñados) para hacerla más atractiva y comunicar el aspecto y la sensación adecuados. Aquí tienes las directrices exactas por tipo de imagen para asegurarte de que tus imágenes se recortan correctamente y no aparecen borrosas.
1. Tipos de imágenes en tu plataforma
Una imagen puede ser una simple foto o un diseño visual o gráfico. Estos son los diferentes tipos de imágenes que puedes construir en tu plataforma y proyectos:
Banner de la página de inicio
Tarjeta de proyecto/carpeta
Banner de proyecto/carpeta
Tarjeta de entrada (idea)
Logotipo
2. Tamaño de las imágenes
Para evitar imágenes pixeladas, asegúrate siempre de que tu imagen tiene el peso suficiente, es decir, debe tener una resolución (ppp) de 72 ppp como mínimo. Las imágenes deben ser png o jpg y tener un tamaño máximo de 5 MB.
* dpi, o puntos por pulgada, es una medida de la resolución de una imagen. Cuanto mayor sea la densidad de puntos, mayor será la resolución de la imagen.
3. Dimensiones de la imagen, proporción y capacidad de respuesta
Las dimensiones recomendadas son diferentes según el tipo de imagen. Es importante tener en cuenta que las imágenes se muestran de forma diferente según el dispositivo que utilices para visitar la plataforma. Consulta el punto 4 para ver las recomendaciones de exposición.
En esta tabla se indican las dimensiones sugeridas y la proporción por tipo de imagen. La herramienta de carga de imágenes te ayuda a recortar cualquier imagen a la proporción correcta en todo momento.
Tipo de imagen | ¿Dónde se muestra? | Dimensiones | Relación |
|
Banner de la página de inicio | Puede ser un banner de ancho completo o de 1 fila o columna, según tu configuración. | 1440 x 480 px | 3:1 | Puede mostrarse como aproximadamente 1:1 en los teléfonos móviles |
Tarjeta de proyecto/carpeta
- Cuadrado | En la página de inicio o en una carpeta para representar un proyecto | 960 x 720 px | 4:3 | También se mostrará como 4:3 en los teléfonos móviles |
Banner de proyecto/carpeta | Se muestra en la parte superior de la página de tu proyecto o carpeta de proyecto | 1440 x360px | 4:1 | Puede mostrarse como aproximadamente 3:1 en los teléfonos móviles |
Tarjeta de entrada (idea) | Se muestra en la parte superior de la entrada (idea e.a) o en la vista general de la entrada |
| 1:1 | Puede mostrarse como aproximadamente 2:1 o 3:1 en los teléfonos móviles |
Logotipo del sitio | Arriba a la izquierda en el menú de navegación | Altura mínima 45 px; sin anchura mínima ni máxima | ||
Tarjeta de evento dentro de un proyecto | Se muestra en la parte inferior de las páginas de tu proyecto | no se aplican dimensiones de imagen forzadas | (proporción clásica recomendada de 3:1 para los banners) |
Tu plataforma es receptiva. Esto significa que las imágenes se muestran de forma diferente según el tipo de pantalla (ordenador, tableta, teléfono móvil). Por tanto, te recomendamos que evites incluir texto o información en la imagen y que sólo utilices imágenes decorativas.
¿Por qué recomendamos no incluir texto o información en las imágenes?
Esto no sólo es mejor para la accesibilidad y la legibilidad, sino que además es probable que cualquier texto quede recortado en diferentes tamaños de navegador. Piensa que tus imágenes aportan interés visual más que contenido crítico: puedes utilizar los campos de título y descripción para transmitir información escrita y añadir imágenes adicionales a las descripciones de tus proyectos y carpetas si quieres proporcionar más información a los visitantes de tu plataforma.
4. Visualización de imágenes en el banner de la página de inicio (+ejemplos)
Para el banner de la página de inicio puedes elegir entre 3 opciones: "Ancho completo", "Dos filas" o "Proporción fija".
Para cualquiera de las 3 opciones de diseño es importante elegir una imagen que preferiblemente no tenga texto ni información.
Para cada tipo de imagen, hay un comportamiento diferente, para asegurarnos de que la plataforma funciona bien en todos los dispositivos. La "Zona Segura" es el área que se muestra en todo momento.
Banner de ancho completo
El banner de ancho completo da el mejor efecto visual, pero es el que más redimensiona los cultivos de & . Utilízalo sólo con imágenes abstractas.
Banner de dos filas
Este banner es especialmente útil con imágenes que no funcionan bien con el texto del título, subtítulo o botón. Estos elementos se empujarán por debajo del banner.
Banner de proporción fija
El banner de proporción fija mantiene su altura y la mayor parte de su anchura en todo momento. Este es un buen tipo de banner si quieres que el área principal de la imagen esté visible en todo momento.
La proporción recomendada para el banner de proporción fija es de 3:1. Esta imagen siempre se recorta a una determinada proporción para garantizar que todos los aspectos cruciales se muestren en todo momento. Si subes una imagen que aún no tiene una proporción de 3:1, podrás arrastrar la imagen hacia arriba y hacia abajo para asegurarte de que las partes importantes se muestran en el área fija.
5. Visualización de imágenes en proyectos
En un proyecto hay tres lugares donde puedes añadir imágenes: Tarjeta de proyecto/carpeta, Banner de proyecto/carpeta y Tarjeta de entrada (idea).
Cuando subas una imagen para utilizarla como tarjeta de proyecto/carpeta o como banner de proyecto/carpeta, puedes arrastrar la imagen y elegir qué parte de la imagen es siempre visible. La cuadrícula muestra lo que siempre será visible y la parte imprecisa de la imagen se cortará. Si subes una imagen que ya tiene las dimensiones correctas, no podrás arrastrarla.
Las tarjetas de ideas siempre se mostrarán en una proporción de 4:3. Aquí no hay opción de arrastrar la imagen en la cuadrícula.
6. Encontrar una buena imagen
💡 ¿Te cuesta encontrar una buena imagen? Las galerías de imágenes libres de derechos de autor como Pexels y Unsplash o Burst pueden ser a menudo un buen punto de partida para encontrar imágenes bonitas y de buena calidad.
¿Necesitas más ayuda o apoyo? Contacta con nuestro Equipo de Soporte a través de la burbuja de chat .