Cuando creas una promoción en Easypromos, se genera un borrador que viene con un diseño base. Todos los elementos se pueden modificar, pero así ya te haces una idea de las posibilidades.
Pensado para móvil y para cualquier tamaño de pantalla
La interfaz de la promoción se adapta perfectamente a cualquier ancho de pantalla, de forma que la experiencia a través de dispositivos móviles es excelente. Además, se ha seguido la filosofía “mobile first”: los elementos están pensados para presentarse de forma óptima en pantallas móviles. Esta característica es relevante porque más del 90% de los usuarios participarán en la promoción con su dispositivo móvil. Tenlo en cuenta en tu diseño y utiliza la función de test para confirmar cómo se ven las pantallas de la promoción en móvil.
Estructura y pantallas de la promoción online
Las promociones tipo microsite de Easypromos tienen una estructura que se aplica en todas las pantallas (tanto en versión móvil como en desktop). Este aspecto permite que el diseño sea coherente y fácil de aplicar en todo el microsite. Presenta los siguientes elementos:
A) Cabecera
B) Fondo de pantalla
C) Contenedor principal: dentro de este contenedor se sitúan los contenidos (texto, imágenes, botones) propios de cada pantalla.
D) Pie de promoción
El contenedor es la parte más importante del diseño porque es donde se presentan los contenidos más importantes. Estos son sus componentes:
- Control de las transparencias, para mostrar más o menos fondo de pantalla.
- Control del color del contenedor para ir acorde con tu imagen de marca
- Control de la posición: puedes configurar que el contenedor se alinee en el centro de la pantalla o a los lados.
- Control del ancho y alto del contenedor de los elementos dentro del fondo.
- Control de las estructuras del contenido: 1 o 2 columnas.
Con todas estas opciones, la interfaz de Easypromos permite a los diseñadores explotar al máximo sus capacidades creativas para que la promoción sea única.
En versión móvil, los componentes dentro del contenedor se presentarán de forma óptima en la pantalla. En cambio, la imagen de fondo se recortará. ¡Tenlo en cuenta en tu diseño!
Apartado específico de diseño dentro del editor
La interfaz de diseño de las promociones mantiene la filosofía de los desarrollos de Easypromos: encontrar el equilibrio entre la flexibilidad y la facilidad de uso. Por eso hay varias opciones que permiten realizar diseños únicos y con los estilos propios de la marca organizadora. Todo sin necesidad de añadir código HTML, CSS y sin tener ningún conocimiento de programación.
Para facilitar la configuración de la promoción, el editor permite visualizar los cambios del diseño en tiempo real y en la misma pantalla, en el canvas. Podrás modificar los siguientes aspectos (entre otros):
A. Colores: Selecciona el color de los textos y de los elementos de acción, como botones principales y enlaces destacados.
B. Tipografías: Personaliza las fuentes principales y las fuentes secundarias de la promoción, compatibles con librería de Google Fonts. Además, con los planes Marca Blanca y Corporate se pueden subir tipografías propias mediante código para ir acorde con la marca.
C. Botones: Selecciona el tamaño, color de texto y color de fondo de los botones, así como su estado hover. Además, también podrás personalizarlo con tu propia imagen adaptada a sus medidas correspondientes.
D. Contenedor: Personaliza el color, nivel de opacidad, margen y padding, redondez de las esquinas, la posición y el alto del contenedor.
E. Fondo de pantalla: Podrás configurarlo con las siguientes opciones
- Color: Selecciona un color como fondo de la promoción.
- Opacidad: Configura el nivel de transparencia del color configurado para el fondo de la promoción.
- Imagen: Te permite subir una imagen de fondo de tu elección.
- Posición: En caso de subir una imagen de fondo propia, puedes definir el punto de foco de la imagen.
Opciones de la pantalla de bienvenida
Por defecto, la primera pantalla de la promoción es la de bienvenida. En ella se suele presentar en qué consiste la promoción, indicar el premio y dar un mínimo de instrucciones para participar.
Los elementos principales de esta pantalla son el título, la descripción y el botón CTA, pero esta estructura puede simplificarse o hacerse más compleja para albergar otra información si así lo necesitas.
Si quieres simplificar el contenido de la página de bienvenida, puedes convertir una única imagen, GIF o vídeo en el único elemento, y que sea también el enlace hacia la acción. También puedes desactivar esta pantalla y presentar directamente el formulario de registro.
Si quieres utilizar la landing de bienvenida para explicar varios aspectos de la promoción, puedes hacer un diseño más complejo utilizando el editor de bloques. El apartado de descripción se convierte en uno o varios bloques de texto, y cada uno puede contener además imágenes, vídeos o gifs. De esta forma puedes construir una página de bienvenida mucho más informativa.
También puedes crear varias columnas ajustando el ancho del bloque y definir la alineación del texto según tus necesidades. Si la promoción ha sido creada en Marca Blanca, el editor incluye un campo específico para clases CSS, lo que facilita una personalización avanzada de la landing, alineándose con el look&feel de tu marca.
Consulta el tutorial sobre el editor de bloques para personalizar la descripción de la página de bienvenida de tu promoción.
Personalización de todos los textos de la promoción
Todos los borradores de promociones tipo microsite se presentan con textos predefinidos para ayudarte a agilizar el proceso de creación de la promoción. Aún así, todos se pueden modificar; la mayoría se cambian desde el editor, y los textos del sistema como mensajes de errores o de estado de la participación también se pueden modificar desde la herramienta de “Diccionarios”. Todo para que puedas controlar al 100% el mensaje que das con tu promoción digital.
Diseño con potencial para desarrolladores
Sabemos que grandes marcas y agencias disponen de los recursos para poder ir más allá con los diseños de sus promociones. La interfaz de diseño de Easypromos ha sido programada totalmente en Flex para facilitar los cambios de posicionamiento de elementos y contenidos dentro de cada pantalla. Además los estilos y clases CSS están perfectamente estructurados, para que cualquier programador de front-end, pueda fácilmente sobrescribir los estilos que vienen por defecto en la plantilla, y poder dar estilo a cualquier elemento de las pantallas. Para cada pantalla de la promoción, los programadores podrán subir e insertar sus propios códigos HTML, y sus scripts en Javascript, para una personalización avanzada de cada pantalla.
La interfaz ha tenido en cuenta muchos de los briefings de diseño que los clientes nos hacen llegar. Es por ello que el diseño, la estructura de los estilos y las herramientas que ofrecemos son lo suficientemente flexibles para que un programador de front-end pueda programar prácticamente al 100% muchos de los diseños que le hagan llegar sus creativos.
Diseño sin renunciar a la fiabilidad y la robustez
El éxito de una promoción online depende de muchos factores como el premio ofrecido, la inversión en difusión o la mecánica planteada. Pero realmente el factor que mayor importancia tiene en una promoción digital es que la tecnología funcione. Y este factor está por encima del propio diseño del concurso. Todo ha sido minuciosamente testeado: cada mecánica de la promoción, cada navegador web, cada dispositivo móvil, la experiencia en widgets, la inserción en un dominio propio, etc.
La forma en que ha sido diseñado el editor de promociones permite personalizar todas las pantallas de la promoción sin que esto afecte a la fiabilidad y robustez de la aplicación. Y este aspecto es fundamental para ofrecer una plataforma que permita a las marcas lanzar sus campañas online con total seguridad y tranquilidad.
Utilizar el diseño de una promoción demo
Muchas de las promociones demo que creamos desde Easypromos para mostrar el funcionamiento y diseño son copiables. Si te gusta alguna de las demos y crees que el diseño encaja con tu proyecto, puedes hacer una copia y guardarla en tu panel para modificarla y adaptarla a tu campaña.
Las demos copiables presentan un botón en la parte superior con las instrucciones para generar una copia.
¡Escoge un diseño y ponte manos a la obra! Tu próxima promoción te está esperando. Y si tienes más dudas, contacta con nuestro equipo vía chat o videollamada y te ayudaremos.
