Sitios web
Header
Existen tres alternativas para el diseño de header o encabezado del portal web:
Alternativa A
Versión desktop
Versión mobile
Alternativa B
Versión desktop
Versión mobile
Alternativa C
Versión desktop
Versión mobile
Menús
Un portal web puede contar con distintos tipos de menús:
Slider
Los sliders permiten presentar diversos contenidos alternados sobre un mismo espacio.
1. Pueden llevar o no ventana
2. Cuando se usa ventana, se remoienda 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 izquiuerda de la imagen.
4. El banner o slider debe ser sencillo y no se deben cortar elementos 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 tres alternativas de footer se pueden usar en los siguientes colores:
Favicon
Existen tres alternativas para el diseño de favicons:
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. Pueden usarse en distintos colores:
4. 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.
Pop-up
Footer
Datos de contacto
Existen formularios para obtener los datos básicos de un posible cliente interesado en algún servicio de la compañia. Estos pueden usarse en diferentes colores y estilos dependiendo del negocio en el que se use.
Landings de campaña
Los landings son micrositios temporales para campañas específicas de SURA. 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).
