Guías generales
Los sitios web son herramientas de suma importancia para el intercambio de información con clientes. En este capítulo se han establecido lineamientos generales para su diseño y maquetación. Debido a que existen distintos tipos de sitios web (informativos, transaccionales, etc.) y las tecnologías de programación y maquetación son tan cambiantes, el siguiente manual profundiza únicamente en el elemento unificador para todos los sitios web que deberá ser el header o encabezado. Todos los elementos que se encuentran debajo del encabezado podrán variar de acuerdo a la necesidad específica del sitio web. Será importante que dichos elementos sigan los lineamientos básicos de uso del color, imagen y tipografía para Fundación SURA.
Elementos
A continuación, se enumeran los elementos básicos que componen un sitio web:
- Favicon.
- Descriptor de negocio.
- Retícula.
- Contenedor.
- Encabezado.
- Menú secundario.
- Menú principal.
- Slider para imágenes.
- Tipografía.
- Botones.
- Módulos de información.
- Footer.
Construcción
Encabezado
Como se mencionó anteriormente, el encabezado es el elemento unificador para todos los sitios web de SURA.
Se deberá respetar siempre la ubicación y dimensiones del logotipo, así como del descriptor de negocio, en los casos en que aplique. Además, se deberán seguir los lineamientos para los puntajes de los textos de los botones, uso de íconos de redes sociales y campo para búsquedas, cuando sea necesario incluir estos elementos.
Menús
El encabezado de un sitio web puede contar con diversos niveles de menús, de acuerdo a las funcionalidades requeridas en cada caso. A continuación, se describen los lineamientos para el uso de cada uno de ellos
Menú global
Este menú permite desplazarse entre las distintas páginas de los países donde SURA cuenta con presencia.
Menú utilitario
Este menú puede contener diversas acciones utilitarias como lo describe su nombre. Algunos ejemplos son el campo del buscador, el botón para hacer login o el botón con información de contacto. Para identificar estas acciones, se pueden utilizar iconos o botones.
Menú principal
El menú principal contiene los botones de acceso a las secciones informativas del sitio web. Éstos se ubican sobre la franja de color que va de extremo a extremo del encabezado y dan acceso a secciones de contenido sobre los productos, servicios o beneficios que se ofrecen a los clientes. Además, en este espacio se ubican los botones que dirigen al usuario a las redes sociales correspondientes. A continuación, se describen los lineamientos gráficos para su aplicación:
- El texto de los botones debe ir en tipografía Barlow OT Bold de 10 pt, en color azul hexadecimal #0033A0.
- El grupo de botones debe estar alineado hacia la derecha, especto a los otros tipos de menús que aparezcan en el sitio web y deben contar con una separación equidistante entre ellos.
- El puntaje del descriptor de negocio se utiliza en tipografía Barlow OT Medium a 17 pt.
Banner o slider
A continuación se muestran lineamientos generales para tener en cuenta a la hora de diseñar el banner o slider de la página web:
- Su tamaño depende de la estructura planteada para cada web, por lo general son rectangulares
- El banner o slider puede tener estas 3 alternativas:
- Cuando el banner tiene un slider y usa ventana, se recomienda que este siempre en la misma posición
- Se recomienda tener una imagen de banner para la versión de escritorio y otra para la versión móvil
- El banner o slider debe ser sencillo y no pueden tener elementos que se corten
- No se pueden usar el logotipo, por que esté ya esta en el encabezado
Tipografía
Los sitios web contienen varios elementos tipográficos y a cada uno de ellos se le ha asignado una tipografía y un peso para mantener un estilo uniforme en todos los materiales.
Las tipografías que se deben utilizar son Barlow y FS Joey para aquellas secciones del sitio web que se maquetan como imagen (ej: imágenes dentro de sliders o carruseles) y Arial para el cuerpo de texto que se maquetará en html.
Paleta de color
El siguiente diagrama presenta los cuatro colores de la paleta corporativa en los cuales se basa toda la comunicación de la marca SURA, para sitios web. Cada color está especificado en PANTONE®, CMYK, RGB y hexadecimal (valores para aplicaciones digitales).
Botones
Formas de botones
Existen dos formas de botones que se pueden utilizar:
Construcción
Los botones se construyen partiendo de un rectángulo. El botón debe tener una altura de 37 px y puede crecer hacia lo largo hasta un límite de 200 px, siempre respetando el área de reserva para el texto, como se muestra a continuación.
Rectangulares con bordes redondeados
Las esquinas son ligeramente curvas; éstas se logran utilizando la herramienta redondear vértices (round corners) a 2 px.
Circulares
Las esquinas son completamemte circulares su diámetro debe ser igual a la altura del botón.
Caso especial
En los casos donde se requiera un botón más pequeño se puede usar circular o cuadrado.
Versiones
Independientemente de la forma, los botones se pueden usar en color sólido o en línea de contorno. En el último caso, su grosor puede variar del 3 al 4 % de X, siendo X la altura del botón.
Colores
Los colores que se deben utilizar en los botones son los de la paleta de color corporativa.
No se deben utilizar combinaciones de colores entre tipografía y fondo que no tengan contraste o que no favorezcan la legibilidad. A continuación, se muestran algunos ejemplos de aplicación:
Trasnparencia
Los botones pueden tener una opacidad del 90-95% de su color. El porcentaje depende del color del botón, la legibilidad que tenga con el fondo donde se aplique (generalmente una imagen) y el color de la tipografía.
Tipos de botones
A continuación, presentamos los distintos tipos de botones que podemos usar:
-
Botón de acción primaria
Son botones sencillos que constan de una forma contenedora sólo con tipografía. El texto debe iren mayúsculas sostenidas y puede usar cualquier forma o color de los ya establecidos.
-
Botón con ícono
Este tipo de botón está compuesto por una forma contenedora con un ícono y tipografía. Los íconos deben seguir los lineamientos establecidos para la iconografía de la marca. El texto va en altas y bajas y puede usar cualquier forma o color de los ya establecidos.
-
Botón de navegación y acción secundaria
Está compuesto por dos botones:
El primero, el de acción secundaria, se usa en línea de contorno. El segundo, el botón de navegación, se usa en color sólido. En ambos, el texto va en altas y bajas y se puede usar cualquier color de los ya establecidos.
-
Botón de acción inmediata
Este tipo de botón está compuesto por un campo de ingreso de texto y una forma contenedora. Dentro del contenedor, se ubica el texto correspondiente en altas y bajas y puede o no llevar un icono. Puede usar cualquier forma y color de los ya establecidos.
Usos incorrectos
A continuación, presentamos algunos de los usos incorrectos para la creación de botones:
- No se deben utilizar colores en la tipografía que no contrasten con el color del botón.
- No usar colores de fondo que no logren contraste con el botón.
- La esquina del botón nunca deberá ser cuadrada.
- Las esquinas no pueden tener curvaturas distintas a las indicadas.
- Los botones con línea de contorno deben tener el grosor indicado.
- No se debe modificar la altura de los botones.
- Para el caso especial del botón en formato cuadrado, no se deben usar iconos, sólo flechas.
Favicon
El favicon o ícono de página, es una pequeña imagen asociada a un sitio web que aparece en la barra de direcciones o encabezado de pestañas de un navegador.
Todo sitio web debe tener un favicon ya que es un fácil identificador de las páginas, al presentarse junto al título de la página, en las listas de marcadores o favoritos, así como en historiales de páginas visitadas recientemente.
Construcción
Para su correcta visualización, es necesario incluir el favicon en las siguientes medidas:
16px: Para uso general en todos los navegadores. Puede desplegarse en la barra de direcciones, en pestañas o en los marcadores del navegador.
24px: Para Internet Explorer 9
32px: Para una nueva pestaña en Internet Explorer, el botón de tareas en Windows en adelante y Safari.
57px: Para la pantalla de inicio en iOS (iPod Touch, iPhone desde la primera generación hasta 3G)
72px: Para el icono en la pantalla de inicio de iPad.
96px: Para la plataforma de GoogleTV.
114px: Para el ícono en la pantalla de inicio de iPhone 4 en adelante (el doble del tamaño estándar para retina display)
128px: Para Chrome Web Store
195px: Para Opera Speed Dial
Formatos
El formato ICO es el más utilizado para el favicon ya que contiene resoluciones múltiples y profundidades bit, sin embargo debe generarse a partir de un plug-in especial que se debe descargar e instalar en Photoshop.
El formato PNG también puede ser más conveniente ya que no requiere herramientas especiales para su creación, soporta transparencias en alpha y tiene menor peso.
Maquetación
Formato responsivo
Es importante que el diseño de la página web sea responsivo para que los contenidos se adapten para su visualización en móviles.
El formato que se debe considerar en su programación para dispositivos móviles es de 320 px de ancho.
'