Diseño Gráfico (Parte 1)

Tiempo estimado de lectura, 10 minutos

La sección de Diseño Gráfico abarca desde la identidad de marca hasta la presentación visual de productos y la experiencia del usuario. Con el objetivo principal de crear un entorno visualmente atractivo, intuitivo y confiable que impulse la participación del usuario y facilite el proceso de compra.

• Elementos gráficos del app
  • Banner Principal
  • E-commerce

Elementos gráficos del app

Estos elementos son todos los componentes visuales y elementos de diseño que conforman la interfaz de una aplicación para comercio electrónico y son esenciales para crear una experiencia visualmente atractiva y fácil de usar para los usuarios que interactúan con la plataforma.

Banner Principal

Esta imagen prominente se sitúa en la parte superior de la página de inicio del sitio web con el propósito de atraer la atención de los visitantes y transmitir mensajes clave sobre la marca, promociones, productos destacados u otra información relevante

Nota: La imagen predeterminada en el banner corresponde a CLAU.IO, y tanto la imagen como los banners pueden ser editados. Además, es posible crear un nuevo banner. Cuando se crea uno nuevo, este se generará inicialmente en estado inactivo y mostrará la imagen del último banner creado, ya sea que esté activo o no. Será necesario activarlo manualmente.

Pasos para modificar el Banner Principal en el panel de Elementos Gráficos de la aplicación:

1. En el panel de Elementos Gráficos de la aplicación, selecciona la primera casilla correspondiente al Banner Principal.
2. Haz clic sobre la imagen que deseas cambiar, lo que desplegará la galería de opciones disponibles.
3. Para cargar una nueva imagen, desplázate hasta el final de la galería y elige la opción Cargar Imagen.
   • Nota: La imagen debe ser en formato JPG o PNG y no debe pesar más de 2 MB, las medidas del banner son de 1125 x 375 JPG/PNG y el área segura es de 270 x 90 píxeles.
4. Posteriormente, selecciona la imagen recién cargada, que aparecerá al principio de la Galería.
5. Activa el banner una vez que hayas seleccionado la imagen deseada.

Siguiendo estos pasos, podrá realizar con éxito la modificación del Banner Principal en el panel de Elementos Gráficos de la aplicación.

E-commerce

En esta sección se puede personalizar la paleta de colores de la plataforma. Cuenta con opciones específicas que permitirán definir los colores del sitio a los elementos específicos como botones, fondos y textos, proporcionándote un control completo sobre la estética visual de tu sitio web o aplicación.

Para seleccionar el color deseado, se debe tocar el campo, ha modificar. El panel de selección aparecerá bajo la vista previa, justo sobre los botones de guardar y cancelar.

Imágenes

• Imagen 1: Cambia el logo de los correos transaccionales (Nota: Estos son los correos que los clientes reciben al realizar la compra con la información de su pedido). Además, modifica la imagen en la sección de Mi Usuario de la versión móvil y el Perfil en la versión web,
• Imagen 2: Cambia el logo de la página principal en la versión web y el logo del menú. 
• Imagen 3: Cambia el logo de Sobre nosotros.

Colores

• Primario Claro:
  • Cambia los botones de menú y carrito.
  • En la versión web, adapta los botones Perfil o Iniciar Sesión y Registrarse.
  • Establece el color de la pantalla al finalizar la compra.

• Primario Oscuro:
  • Cambia la barra de búsqueda.
  • Modifica los textos de selección 
  • Instaura el fondo de los correos transaccionales. (Nota: Para visualizar correctamente el color en los correos, el mensaje debe estar completamente abierto; de lo contrario, solo se verá la sección blanca donde aparece el texto).
  • Establece el color del logo de WhatsApp que se modifica en un botón de subir al deslizar la pantalla.
  • Afecta el botón de agregar al carrito.
  • Cambia los bordes de la cantidad al seleccionar el ítem y en el carrito de compra.
  • En el perfil, se refleja en los iconos: Verifica tu E-mail, Mis Órdenes, Tiendas de Punto, Mis Regalos, Contáctenos y Sobre Nosotros; 
  • Identifica el texto de Editar Perfil, Actualizar y Cancelar.
  • En la sección de pago, se refleja en la confirmación del correo y en el ícono siguiente del apartado Cuenta.
  • En Métodos de Envío, establece el color del ícono siguiente y en los botones para aplicar cupón y puntos, y el de agregar regalo.
• Secundario Claro:
  • Se mantiene en blanco.
• Secundario Oscuro:
  • Modifica los iconos de menos y más, el valor total, el botón de compartir y el de siguiente en el carrito de compra.
  • Modifica el color de las siglas, los puntos y el ícono de cerrar sesión.
  • Establece el color de todo el texto en la sección de Editar Perfil y el fondo de los mensajes flotantes.
  • También está presente en todas las selecciones a realizar en la sección de pago, el valor de los ítems, el campo Compartir Carrito y el ícono Finalizar.
  • Cambia los iconos contáctenos y Políticas dentro de la sección Sobre Nosotros.
  • Decide el color que tendrá el campo Cerrar al agradecer la compra.
• Fondo:
  
  • Este campo no se modifica.

Nota: Sí, cuenta con el código correspondiente al color, lo puede ingresar en el campo deseado. No se verá en el cuadro del color, pero una vez guardado, el color se registrará en las secciones establecidas.

Barras

• Barra o Footer:
  • Este color altera el color en la barra de menú para la vista desde la aplicación.
• Color Header:
  • Modifica la barra superior de la página web.

Texto

• Estos, preferiblemente, deben quedar en los colores preestablecidos, ya que existe la posibilidad de no visualizar el texto al modificar los colores antes presentados.