Sitios web
Header
Existen tres alternativas para el diseño de header o encabezado del portal web:
Se deben seleccionar imágenes que no tengan ruido visual en la zona debajo del logotipo o se deben retocar para que cuente con suficiente contraste.
Alternativa A
Versión desktop
Menú desplegable
Versión mobile
Alternativa B
Versión desktop
Menú desplegable
Versión mobile
Alternativa C
Versión desktop
Menú desplegable
Versión mobile
Menús
Un portal web puede contar con distintos tipos de menús:
Sliders
Los sliders permiten presentar diversos contenidos alternados sobre un mismo espacio.
1. Pueden llevar o no ventana.
2. Cuando se usa ventana, se recomienda que esté ubicada siempre en la misma posición.
3. Se debe seleccionar una fotografía en la que el logotipo, en versión en positivo o negativo, tenga buen contraste sobre el fondo de la esquina superior izquerida de la imagen.
Footer
Existen tres alternativas para el diseño de footers en portales web:
Alternativa A
Versión desktop
Versión mobile completa
Versión mobile resumida
Alternativa B
Versión desktop
Versión mobile completa
Versión mobile resumida
Alternativa C
Versión desktop
Versión mobile
Versiones de color
Las alternativas de footer se pueden usar en los siguientes colores:
Tanto las versiones de headers como las de footer pueden usarse indistintamente unas con otras.
Favicon
Descargar los favicons en versión editable
Formularios
Los formularios se pueden utilizar para diversos propósitos como solicitar información o asesoría sobre productos, inscirbirse a un newsletter, obtener datos para contactar a nuestros clientes, entre otros. Llevan los colores de la marca y pueden usar íconos y botones dependiendo de la sección en la que se usen. No deben ser intrusivos ni ocupar mucho espacio en el sitio.
Campos de texto
Los campos son los espacios en los que el usuario ingresa sus datos. Para diseñarlos, se deben tomar en cuenta las siguientes características:
1. Pueden ser cuadrados con esquinas curvas ya sea en sólido o en línea de contorno de 0.5 pt.
2. Pueden ser redondeados ya sea en sólido o en línea de contorno de 0.5 pt.
3. La longitud de los campos varía de acuerdo a la información que se requiera.
Usos
Chat
La ventana del chat se abre al dar click en un botón. Por lo general, éste se ubica en la parte inferior o derecha de la interfaz y puede tener distintas, formas, colores y copy (call to action).
En algunos chats, se usa un formulario para capturar los datos del cliente y así poder brindarle soporte. Se pueden utilizar los distintos colores de la paleta corporativa, según el negocio.
Inicio de sesión
Por lo general, los formularios de inicio de sesión son pop-ups y se pueden usar en distintos colores dependiendo del negocio.
Newsletter
El formulario para suscribirse a un newsletter puede aparecer ya sea como pop-up o en el footer.
Footer
Landings de campaña
Los landings son micrositios temporales para campañas específicas. En el encabezado, se debe ubicar el nombre de la campaña o iniciativa en texto del lado izquierdo. Del lado derecho, se debe ubicar el logotipo de SURA (con o sin descriptor). Los tamaños de ambos elementos están establecidos de la siguiente manera:
Datos de contacto
Existen formularios para obtener los datos básicos de un posible cliente interesado en algún servicio de la compañía.
Estos pueden usarse en diferentes colores y estilos dependiendo del negocio en el que se use.
