En esta guía, se proporcionan consejos de diseño tanto para los banners principales como para los banners de espacio en el diseño web adaptable, y se destacan las áreas clave visibles y los espacios seguros para texto y gráficos. Se recomienda centrarse en los puntos principales, minimizar el texto y evitar las fotos de personas. Entre los consejos para el diseño de la pantalla de inicio de sesión, se incluyen evitar texto en los bordes y tener en cuenta la cobertura del cuadro de inicio de sesión. Los tipos de archivo admitidos son PNG, JPG, JPEG, JFIF o GIF de menos de 3MB. Las vistas en dispositivos móviles muestran la parte central de los diseños.
Esta guía se aplica tanto al diseño del Banner principal como al del Banner espacial. Puede resultar complicado diseñar una página web adaptable, por lo que las dimensiones incluidas deberían funcionar como una guía práctica para ayudarle al usar texto o cualquier gráfico clave que quiera que esté visible en todo momento en el diseño de su banner.
Puedes utilizar las dimensiones incluidas para configurar tu diseño o, para hacerlo aún más fácil, hemos incluido tres ejemplos que te serán de utilidad en este artículo.
Banner principal (vista de escritorio)
Diseño de banner: recomendamos minimizar la cantidad de texto incluido y evitar fotografías de personas siempre que sea posible.
Tipo de archivo de banner: PNG, JPG, JPEG, JFIF o GIF < 3 MB
Dimensiones: 2241px x 474px
Espacio seguro para texto/imágenes clave: 895px x 474 px centrado
Echa un vistazo a este artículo para obtener instrucciones sobre cómo cambiar el banner principal.
Diseño de pancartas espaciales: qué hacer y qué no hacer
Como la imagen del Banner Espacial es visible tanto en dispositivos móviles como en computadoras de escritorio, es importante asegurarse de que el diseño funcione bien cuando se vea en ambos.
En el escritorio, se ve más de la imagen del banner; sin embargo, hay un espacio seguro, como se ilustra a continuación, que se garantiza que será visible cuando se vea en la aplicación móvil.
Los siguientes ejemplos resaltan cómo utilizar este espacio seguro de manera efectiva, garantizando siempre que el punto focal del diseño de la imagen del banner esté en una posición central.
Ejemplo 1 - Ilustración vectorial y elementos
Mantén el punto principal del diseño en el centro del banner, no a la izquierda ni a la derecha, para asegurarte de que el espacio seguro esté ocupado con la parte más importante del diseño.
Ejemplo 2: Fotografía
Es importante seleccionar fotografías adecuadas para la imagen del banner de un espacio. Siempre opta por fotografías que tengan el tema principal centrado y no tengan demasiado Zoom; de lo contrario, podrían verse afectadas en los dispositivos móviles.
Ejemplo 3: Patrón
Un patrón es una apuesta segura para un diseño de banner de espacio, siempre que los elementos que componen el patrón sean pequeños y estén bien concentrados en el diseño.
Si los elementos son demasiado grandes, el patrón no se lucirá.
Como se ilustra a continuación, la primera imagen es nuestra imagen recomendada.
Banner espacial (vista de escritorio)
Banner de espacio (vista en dispositivo móvil)
Guía de diseño de la pantalla de inicio de sesión
Ten en cuenta que la página de inicio de sesión solo es visible para los usuarios que acceden a Workvivo mediante autenticación con contraseña. Cualquier usuario que acceda a través de SSO verá la página de inicio de sesión SSO de su organización en lugar de la pantalla de inicio de sesión de Workvivo.
Consejos principales a la hora de analizar una nueva imagen de inicio de sesión:
-
Área visible en el escritorio: esta área puede cambiar ligeramente en función del tamaño de la pantalla.
-
Área visible en dispositivos móviles: la sección central de la imagen proporcionada será visible en dispositivos móviles.
-
Tipos de archivos soportados: PNG, JPG
Diseño de la respuesta de la página de inicio de sesión
Puede ser complicado diseñar una página web adaptable, por eso las dimensiones aquí expuestas deberían servir como guía para ayudarte al usar texto o cualquier gráfico clave que quieras que esté visible en todo momento en el diseño de tu banner.
También te recomendamos evitar poner texto o elementos gráficos vitales en los bordes del diseño.
Consejo clave:
- Parte de la imagen quedará cubierta por el cuadro de inicio de sesión, así que tenlo en cuenta.
- Para obtener resultados óptimos, evite utilizar texto en su diseño.
- Área visible en pantalla de 24": 1500px x 750px
- Área oculta: 1500px x 125px
Diseño de respuesta de la página de inicio de sesión (versión móvil)
Como diseño web adaptable, tenga cuidado al usar texto o cualquier gráfico clave que desee que esté visible en todo momento en el diseño de su banner. La pantalla del móvil utiliza el mismo diseño que la pantalla del escritorio y mostrará la parte central del elemento creativo.
nuevamente, te recomendamos mantener los fondos genéricos y sin texto.
El mejor consejo:
- Parte de la imagen quedará cubierta por el cuadro de inicio de sesión, así que tenlo en cuenta.
- Para obtener resultados óptimos, evite utilizar texto en su diseño.
- Área visible: 545px x 971px en el centro