Guía de estilos

Plantilla

En Gob.pe, manejamos un estilo gráfico base par todas sus páginas internas (trámites, servicios, informativas e institucionales). Utiliza esta plantilla para mantener tus páginas con el mismo estilo.

Cabecera

Al tener como objetivo unificar todas las páginas del Estado dentro de Gob.pe, el usuario tiene que saber que se encuentra ahí mediante su estilo gráfico. Por esto, en la parte superior izquierda de la cabecera (header), se encuentra el logo de Gob.pe, que cumple con las siguientes 3 funciones: comunicar al usuario que está dentro de Gob.pe, reforzar la marca del sitio web y permitir un fácil retorno hacia el home.

Además del logo,en el lado derecho de la cabecera, pueden encontrarse otros elementos que son comunmente esperados por los usuarios:

  • Botones de utilidades para servicios digitales: inicio de sesión, registro, cerrar sesión, cuenta, búsqueda, mensajes, etc.
  • Las utilidades dependen de la página y, en el caso de Gob.pe, dependen del servicio, ya que no siempre será necesario incluirlas.

Nombre del servicio

El nombre del servicio debe ser visible en la misma cabecera, al lado del logo de Gob.pe. De esta manera, unificamos todos los servicios dentro de una sola plataforma de cara al usuario.

Migas de pan

Las migas de pan son un elemento interactivo que permite al usuario ver la ruta que ha recorrido para llegar a donde está, permitiéndole volver a cualquier página anterior.

Navegación

La navegación debe ser en botones claros y visibles en la parte superior de la página. Los nombres usados en cada botón debe ser precisos y claros para todas las personas, de manera que sepan qué encontrarán en cada sección.

Contenido

El contenido debe ser claro y conciso, guiando a las personas a obtener lo que buscando del servicio. Revisa la guía de Creación de contenido para mayor detalle.

Pie de página

Dentro del pie de página deben colocarse elementos que las personas están acostumbrados a encontrar en esa zona, como los siguientes:

  • Información de contacto, ya sea números de teléfono, correo electrónico, dirección o un formulario.
  • Redes sociales
  • Términos y condiciones

Adicionalmente, se puede incluir, del lado derecho de la página y en color blanco, el logo de la entidad proveedora del servicio.

Ejemplo