DESY

Sistema de Diseño del Gobierno de Aragón.

Cabeceras

Se trata de un elemento siempre disponible en la parte superior de la pantalla. Proporciona un acceso a funciones de todo el sistema y elementos de navegación local.

Tipos y anatomía

Según el contexto se utiliza una de las dos cabeceras definidas:

Cabecera para sitios web o portales

Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón, es decir, sitios webs públicos en los que hay una comunicación "unidireccional" y, normalmente, no tienen un acceso de usuarios restringido.

Anatomía de la cabecera para sitios web o portales
  1. Skip-link: Permite saltar directamente al contenido principal de la página. Lo usamos por accesibilidad. Está oculto y sólo se muestra al tomar el foco.
  2. Cabecera pequeña: El logotipo debe quedar alineado a la izquierda y la banda, de 45px de altura, incluye un borde inferior de 1 px neutral-base. Este elemento se corresponde con la versión mini de la cabecera.
  3. Banda con el título del sitio web: Las letras del título del sitio web irán en blanco y sin ningún logotipo sobre fondo heading-base con ornamentos en heading-dark.
  4. Subtítulo: Utilízalo para el nombre extendido de los títulos con acrónimos.
  5. Banda con un menú de navegación: Con fondo neutral-lighter y borde inferior neutral-base de 1 px. En móviles o anchuras pequeñas, los items se encuentran dentro de un desplegable que abre un menú lateral.
  6. Perfil con menú desplegable: Es una navegación o información relativa al usuario identificado (Ej: Perfil, Cerrar sesión...) y lo mostramos en el extremo derecha en escritorio. En anchuras pequeñas o móviles se encuentra dentro del menú lateral. Este elemento es opcional.
  7. Banda con Hero opcional: Sección con una altura determinada en la que se puede encajar una imagen ilustrativa de la temática del sitio, junto con un texto que incluya un título y/o subtítulo descriptivos.
Construcción de la cabecera para sitios web o portales

Cabecera para aplicaciones web

Se usa en intranets o aplicaciones web para escritorio o móviles y que suelen tener un acceso de usuarios restringido. Tiene menos altura al estar compuesta por una sola banda.

Anatomía de la cabecera para aplicaciones web
  1. Banda gris: Tiene 56px de altura en todas sus variantes, fondo neutral-lighter y borde neutral-base inferior de 1px de grosor.
  2. Logo Gobierno de Aragón: Lo mostramos de forma expandida antes de la identificación del usuario. Cuando accede a la aplicación aparece de forma reducida, sólo con la bandera. En anchuras pequeñas y móviles siempre aparece reducido.
  3. Skip-link: Permite saltar directamente al contenido principal de la página. Lo usamos por accesibilidad. Está oculto y sólo se muestra al tomar el foco.
  4. Nombre de aplicación: Separado por dos líneas divisorias. En anchuras pequeñas se omiten y únicamente se muestra la etiqueta con el nombre. Cuando es necesario cambiar entre distintas aplicaciones, colocamos un listado en caja para facilitar la navegación. En dispositivos móviles esta función se encuentra dentro del menú lateral, a través del componente detalles.
  5. Menú de navegación: En móviles o anchuras pequeñas, los items se encuentran dentro de un desplegable que abre un menú lateral.
  6. Perfil con menú desplegable: Es una navegación o información relativa al usuario identificado (Ej: Perfil, Cerrar sesión...) y lo mostramos en el extremo derecha en escritorio. En anchuras pequeñas o móviles se encuentra dentro del menú lateral.
Construcción de la cabecera para aplicaciones web

Diferencias entre cabecera pequeña, cabecera avanzada y cabecera estándar

Cabecera pequeña

Banda que forma parte de la cabecera avanzada, obligatoria su presencia en los sitios web del Gobierno de Aragón. En situciones especiales, es posible añadir un logo en el extremo derecho.

Ver código

Cabecera avanzada

Elemento obligatorio en los sitios web del Gobierno de Aragón.

Ver código

Cabecera estándar

Elemento obligatorio en las aplicaciones y herramientas del Gobierno de Aragón.

Ver código

Buenas prácticas

Aviso

No recomendamos que la posición quede fijada (stickies) ya que reduce mucho el área de visualización.

Cabecera con barra de búsqueda y logotipo
Incorrecto

No coloques componentes ni logotipos adicionales en la cabecera. Hazlo en el pie de página o en el hero.

Uso incorrecto
Incorrecto

No coloques fotografías en la banda del título de cabecera. Hazlo en el hero.