Estilos y reglas de diseño

Del 15/03/2024 al 14/05/2024 hubo un total de 927.867 usuarios y de los cuales 568.584 fueron desde un dispositivo movil

Cerrar Modal

Con el objetivo de asegurar una experiencia óptima para todos los usuarios de la sede electrónica, se ha decidido adoptar la estrategia de diseño mobile-first para el desarrollo de páginas web.

Esta decisión se fundamenta en la creciente importancia de los dispositivos móviles como canal primario de acceso a la información y los servicios municipales. Reconociendo esta tendencia, es esencial que las páginas web estén diseñadas con una prioridad en la experiencia del usuario móvil.

La metodología mobile-first implica iniciar el proceso de diseño desde la pantalla más pequeña, asegurando así que los servicios municipales sean accesibles y fáciles de usar para todos la ciudadanía, independientemente del dispositivo que utilicen.

En el diseño web, la alineación textual desempeña un papel crucial en la presentación y legibilidad del contenido. Mientras exploramos las opciones de alineación, es importante entender que podemos alinear el texto tanto a la izquierda como a la derecha, e incluso centrarlo para crear efectos visuales específicos. Sin embargo, debemos destacar que, a diferencia de otros medios, como la impresión, en el mundo digital, la justificación del texto no siempre es la mejor elección. Alinearse a la izquierda, mantener un margen derecho irregular y evitar la justificación garantiza una experiencia de lectura más cómoda y accesible para todas las personas usuarias.

Tamaño de pantallas

Una consulta de medios, o media query, se compone de un tipo de medio y una o más expresiones que se evalúan como verdaderas o falsas. La consulta es verdadera si el tipo de medio especificado coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones de la consulta son verdaderas. Cuando una consulta de medios es verdadera, se aplican las reglas de estilo correspondientes de la hoja de estilos, siguiendo las normas habituales de cascada.

Contamos con medidas de pantalla predefinidas que servirán como guía para nuestros diseños.

• xs: <768px
• sm: >768px
• md: >992px
• lg: >1200px
• xl: >1440px

Estas unidades serán utilizadas posteriormente en el sistema de diseño para definir clases que se adapten a la diversidad de dispositivos y tamaños de pantalla, garantizando así la capacidad de respuesta de nuestros diseños ante estas variaciones.

Sistema de grilla

Bootstrap proporciona un sistema de cuadrícula adaptable centrado en dispositivos móviles, que se expande hasta 12 columnas a medida que el tamaño del dispositivo o la ventana de visualización aumenta. Este sistema simplifica la creación de diseños de página utilizando filas y columnas.

• Para garantizar un alineamiento correcto, es necesario que las filas estén contenidas dentro de un elemento contenedor (container) de ancho fijo o completo (container-fluid).
• Las filas (row) se utilizan para agrupar columnas horizontalmente y resolver el problema de desbordamiento de elementos flotantes.
• El contenido debe colocarse dentro de las columnas (col-**-*), ya que son los únicos elementos que pueden ser hijos directos de las filas. Cualquier otro elemento puede comportarse de manera inadecuada debido al uso de flotantes.
• Utiliza clases predefinidas como col-xs-4 para crear diseños de cuadrícula.
• Las columnas tienen un espacio entre sí debido al relleno aplicado. Este relleno se ajusta en las filas para la primera y última columna mediante un margen negativo.
• Para crear columnas, especifica cuántas de las doce columnas disponibles se deben utilizar. Por ejemplo, tres columnas iguales ocuparían 4/12 (col-xs-4).
• Si hay más de 12 columnas en una fila, el exceso se envolverá a una nueva línea como una unidad.
• Las clases de cuadrícula se aplican según el tamaño de la pantalla, y las clases de tamaños más grandes anulan las de tamaños más pequeños. Por ejemplo, col-xs-12 col-sm-6 col-md-4.

Espaciado

El espaciado es el área negativa entre elementos y componentes, y generalmente se controla en el código mediante márgenes y rellenos (margin y padding).

El espaciado se establece en relación con el tamaño de la fuente para definir unidades predefinidas que sean consistentes con el diseño implementado.

Para implementarlo, se ofrece una serie de clases utilitarias que se definen con p (padding) y m (margin). Estas clases permiten especificar la dirección en la que se desea aplicar el espaciado mediante los sufijos: x (eje horizontal), y (eje vertical), t (top), b (bottom), l (left) y r (right). Por ejemplo: pb-1 pr-05 pt-0.

Además, estas clases son adaptativas y se pueden ajustar utilizando sufijos detallados en las unidades de media queries, seguidos de dos puntos. Por ejemplo: md:p-1 sm:mt-1.

• Padding
• Margin

Velocidad y aplicaciones

• Componentes pequeños: En elementos como botones, inputs y otros elementos de interacción rápida, se recomienda utilizar animaciones más cortas y dinámicas.

  Componentes pequeño

• Componentes grandes: Para componentes más grandes, como modales, acordeones o menús, se pueden emplear animaciones con mayor duración y suavidad.

  componente grande

• Scroll suave: En enlaces internos (#) que conducen a diferentes secciones de la misma página, se recomienda implementar un scroll suave

  scroll suave

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim libero, dapibus at pharetra eget, viverra eget turpis. Ut a bibendum nulla. Suspendisse auctor nisi a nunc maximus porttitor. Ut pharetra placerat risus, quis condimentum libero vulputate ac. Donec posuere, mauris ut gravida fringilla, felis erat lobortis ex, vel sodales mauris orci vitae tellus. Nunc bibendum, lacus at pulvinar tincidunt, dolor dolor consectetur urna, sit amet elementum lacus tortor sit amet nisl. Praesent at tortor vitae libero malesuada imperdiet non sed lacus. Sed ut consectetur ipsum. Praesent consectetur cursus sem vel molestie. Vestibulum tempor purus viverra feugiat scelerisque. Aenean varius nunc sit amet convallis imperdiet. Curabitur volutpat odio quis pharetra volutpat.

  scroll suave

  La transición de scroll suave ya se encuentra configuradoa por defecto para todas los enlaces de navegación interna de la sede electrónica

  Para implementarlo data-scroll="smooth" Hará que todos los enlaces internos del bloque se comporten de esa manera y evitaremos mover la página entera

Beneficios

• Mejoran la experiencia del usuario: Las animaciones bien diseñadas hacen que la interacción sea más intuitiva, agradable y eficiente. Aumentan la atención: Las animaciones atractivas captan la atención del usuario y lo mantienen involucrado.
• Refuerzan la imagen de marca: Las animaciones coherentes con la identidad visual refuerzan la imagen de marca y transmiten modernidad.

Consideraciones importantes

• Accesibilidad: Las animaciones no deben distraer ni perjudicar a usuarios con discapacidades. Se deben evitar movimientos bruscos, cambios de color intensos o efectos estroboscópicos.
• Mecanismo de control: Se debe ofrecer al usuario la posibilidad de detener o pausar las animaciones si las considera molestas o innecesarias.
• Preferencia de movimiento reducido: Para respetar las preferencias de los usuarios/as que han configurado su sistema operativo para reducir el movimiento, las transiciones de la interfaz se desactivarán por defecto cuando se detecte la media query "prefers-reduced-motion: reduce"

      
  @media (prefers-reduced-motion: reduce) {
  	* {
  		transition: none;
  		animation: none;
  	}
  }
  
  

Librerias externas

En caso de ser solicitado disponemos de AOS Animate para realizar animaciones sencillas.

Ejemplo: Portal de Etopia

Cuando javascript está desactivado, se limpian los atributos de opacidad y transformaciones para que sigan siendo visibles los elementos a los que se les aplicó la animación

Ilustraciones

Se recomienda utilizar el formato SVG para todas las ilustraciones. Este formato vectorial permite escalar las imágenes sin perder calidad, garantizando una visualización óptima en diferentes dispositivos y pantallas.

• Diseño en servicios

  • Minimalista: Se prioriza la simplicidad y la claridad en las ilustraciones. Se emplean pocos detalles y colores sólidos para lograr un impacto visual directo y evitar la sobrecarga de elementos.
  • Cohesión Estética: Se mantiene una estética uniforme en todas las ilustraciones, utilizando una paleta de colores consistente y un estilo de dibujo coherente. Esto genera una sensación de armonía y profesionalidad en la comunicación visual.
  • Iconografía Claramente Definida: Las ilustraciones funcionan como íconos que representan conceptos de forma clara y concisa. Deben ser fácilmente reconocibles e intuitivos para la comprensión de los usuarios/as.
  Ejemplos

  Cerrar Modal

  

  

  

  

  

  

  

  

  

• Diseño de ilustraciones en portales

  Las ilustraciones en los portales deben ajustarse a las necesidades y temáticas específicas. Dado que cada portal aborda asuntos distintos, no es viable aplicar un único diseño ilustrativo para todos.

  • Adaptación a Temáticas Específicas: Cada portal tratará temas diferentes, por lo que las ilustraciones deben reflejar con precisión el contenido y los objetivos del portal. Es fundamental que las imágenes sean relevantes y adecuadas para los temas tratados.
  • Estilo Definido: Cada portal contará con un estilo visual particular, determinado por las especificaciones y preferencias de la entiedad encargada del portal. Es esencial que este estilo sea coherente y uniforme en todas las ilustraciones para mantener una identidad visual sólida.

  Estas directrices garantizan que las ilustraciones en los portales del Ayuntamiento sean efectivas y coherentes, proporcionando una experiencia visual atractiva y relevante para la ciudadanía

Imágenes

    
<img src="imagen.jpg" class="img-responsive" alt="Descripción de la imagen">

Portadas de portales

Sin imagen de portada

---

Portada personalizada

---

PDFs

Los documentos pdf deben ir acompañados por la clase .pdf que agregará la herramienta readspeaker

    
<a href="zaragoza.es/documento.pdf" class="pdf" target="_blank">
	Nombre del documento pdf
</a>

Resultado: Nombre del documento