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.

Índice de apartados de esta página

• Tipos de cabeceras
• Anatomía de cabecera para aplicaciones web
• Anatomía de cabecera para sitios web o portales
• Buenas prácticas

Tipos de cabeceras #

1. 1
   Cabecera estándar. Elemento obligatorio en las aplicaciones y herramientas del Gobierno de Aragón.
2. 2
   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.
3. 3
   Cabecera avanzada. Elemento obligatorio en los portales web.

Anatomía de 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.

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.

Anatomía de 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.

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, animación o carrusel como presentación del portal.

Si tu organización tiene logotipo #

Si eres un instituto, empresa pública, fundación o similares y posees tu propia marca, puedes incluirla en monocromo blanco, con unas dimensiones determinadas y una línea divisoria junto al título. En anchuras pequeñas, el logotipo escala y se apila sobre el título. De esta forma cumplirás accesibilidad y tu marca no competirá con la del Gobierno de Aragón. Si necesitas incluir más identificadores, hazlo en la zona habilitada del pie de página.

Buenas prácticas #

Aviso

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

Incorrecto

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

Incorrecto

No utilices tu logotipo en versiones que no sean monocromo.

No sustituyas el título y no lo coloques en otras zonas que no sean la definida para ello.

Incorrecto

No utilices tu logotipo en la cabecera si es de un departamento o un proyecto.