1

Sitios web

|
Ir a descargas

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:

  1. Favicon.
  2. Descriptor de negocio.
  3. Retícula.
  4. Contenedor.
  5. Encabezado.
  6. Menú secundario.
  7. Menú principal.
  8. Slider para imágenes.
  9. Tipografía.
  10. Botones.
  11. Módulos de información.
  12. Footer.
01_SITIOS_WEB-FUN_03

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.

01_SITIOS_WEB-FUN_15

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:

  1. El texto de los botones debe ir en tipografía DIN OT Bold de 10 pt, en color azul hexadecimal #0033A0.
  2. 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.
  3. El puntaje del descriptor de negocio se utiliza en tipografía DIN OT Medium a 17 pt.
01_SITIOS_WEB-FUN_23

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:

  1. Su tamaño depende de la estructura planteada para cada web, por lo general son rectangulares
  1. El banner o slider puede tener estas 3 alternativas:
  1. Cuando el banner tiene un slider y usa ventana, se recomienda que este siempre en la misma posición
  1. Se recomienda tener una imagen de banner para la versión de escritorio y otra para la versión móvil
  1. El banner o slider debe ser sencillo y no pueden tener elementos que se corten
  1. 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 DIN 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).

01_SITIOS_WEB-FUN_31

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:

También, se pueden usar en color blanco cuando se encuentren sobre fondo de color. Se podrán ubicar sobre distintos fondos de color, siempre y cuando haya suficiente contraste que favorezca la legibilidad del botó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:

  1. 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.

  1. 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.

  1. 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.

  1. 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:

  1. No se deben utilizar colores en la tipografía que no contrasten con el color del botón.
  2. No usar colores de fondo que no logren contraste con el botón.
  3. La esquina del botón nunca deberá ser cuadrada.
  4. Las esquinas no pueden tener curvaturas distintas a las indicadas.
  5. Los botones con línea de contorno deben tener el grosor indicado.
  6. No se debe modificar la altura de los botones.
  7. 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.

01_SITIOS_WEB-FUN_49

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

01_SITIOS_WEB-FUN_53

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.

01_SITIOS_WEB-FUN_56