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.

Título

Subtítulo

Título del Hero

Subtítulo del Hero

Se caracteriza por tener varias franjas que albergan distintos elementos. De arriba a abajo encontramos:

  • Banda amarilla: Permite saltar directamente al contenido principal de la página. Se usa por tema accesibilidad. Está oculto y sólo se muestra al tomar el foco.
  • Banda con el logo Gobierno de Aragón: El logotipo debe quedar alineado a la izquierda y la banda incluye un borde de 1 px en el lado inferior. Este elemento se corresponde con la versión mini de la cabecera.
  • 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 azul que consiste en una imagen, inspeccionar para obtener el .svg. Se incluirá un elemento de subtítulo para el nombre extendido de los títulos con acrónimos.
  • Banda con un menú de navegación: Con fondo gris claro y borde de 1 px abajo de gris oscuro. En móviles o anchuras pequeñas, el menú se convierte en un botón que abre el menú para dispositivos móviles.
  • 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 descripctivos.
Cabecera para sitios web o portales
Haz click en la imagen para abrirla en una pestaña nueva.

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. Antes de hacer login se muestra el logotipo del Gobierno de Aragón normal expandido. Tras hacer login o en versión móvil, podemos usarlo en versión reducida sólo con la bandera, sin las letras.

Nombre de la aplicación

  • Banda con el logo Gobierno de Aragón: En el área superior izquierda, que puede mostrarse de forma expandida antes de hacer login, mostrando bandera y todas sus letras. O bien, mostrarse de forma contraída tras el login al entrar en la zona privada, sólo con la bandera, sin las letras.
  • Banda amarilla: Permite saltar directamente al contenido principal de la página. Se usa por tema accesibilidad. Está oculto y sólo se muestra al tomar el foco.
  • Nombre de aplicación: Se oculta de la cabecera en dispositivos móviles porque se mostrará dentro del menú para dispositivos móviles.
  • Menú de navegación: Se oculta de la cabecera en dispositivos móviles porque se mostrará dentro del menú para dispositivos móviles.
  • Botón para mostrar el menú de navegación para dispositivos móviles: En anchuras pequeñas se muestra en la cabecera a la derecha y sustituye a todo excepto al logo contraído de la izquierda.
  • Dropdown de usuario: Es una navegación o información relativa al usuario identificado (Ej: Perfil, Cerrar sesión...) se muestra en el extremo de la derecha en escritorio. En anchuras pequeñas o móviles se encuentra dentro del menú. Este elemento es opcional.
Cabecera para apps
Haz click en la imagen para abrirla en una pestaña nueva.

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

Nombre de la aplicación

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

  • Se recomienda que no se queden con la posición fijada (stickies)