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
![](/wp-content/uploads/pa-98/region/images/po_re1.png")
Alternativa B
Versión desktop
![](/wp-content/uploads/pa-98/region/images/po_re2.png")
Versión mobile
![](/wp-content/uploads/pa-98/region/images/po_re3.png")
Alternativa C
Versión desktop
![](/wp-content/uploads/pa-98/region/images/po_re4.png")
Versión mobile
![](/wp-content/uploads/pa-98/region/images/po_re5.png")
Menús
Un portal web puede contar con distintos tipos de menús:
![](/wp-content/uploads/pa-98/region/images/po_re6.png")
Slider
Los sliders permiten presentar diversos contenidos alternados sobre un mismo espacio.
Footer
Existen tres alternativas para el diseño de footers en portales web:
Alternativa A
Versión desktop
![](/wp-content/uploads/pa-98/region/images/po_re7.png")
Versión mobile completa
![](/wp-content/uploads/pa-98/region/images/po_re8.png")
Versión mobile resumida
![](/wp-content/uploads/pa-98/region/images/po_re9.png")
Alternativa B
Versión desktop
![](/wp-content/uploads/pa-98/region/images/po_re10.png")
Versión mobile completa
![](/wp-content/uploads/pa-98/region/images/po_re12.png")
Versión mobile resumida
![](/wp-content/uploads/pa-98/region/images/po_re11.png")
Alternativa C
Versión desktop
![](/wp-content/uploads/pa-98/region/images/po_re13.png")
Versión mobile
![](/wp-content/uploads/pa-98/region/images/po_re14.png")
Versiones de color
Las tres alternativas de footer se pueden usar en los siguientes colores:
![](/wp-content/uploads/pa-98/region/images/po_re15.png")
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:
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).
![](/wp-content/uploads/pa-98/region/images/po_re16.png")
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.
![](/wp-content/uploads/pa-98/region/images/po_re17.png")
Inicio de sesión
![](/wp-content/uploads/pa-98/region/images/po_re18.png")
Newsletter
El formulario para suscribirse a un newsletter puede aparecer ya sea como pop-up o en el footer.
![](/wp-content/uploads/pa-98/region/images/po_re19.png")
Footer
![](/wp-content/uploads/pa-98/region/images/po_re20.png")
Datos de contacto
![](/wp-content/uploads/pa-98/region/images/po_re21.png")
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).
![](/wp-content/uploads/pa-98/region/images/po_re22.png")