Layout

La estructura que da forma a la experiencia

El layout es la estructura que define cómo se organizan los elementos en una pantalla, asegurando un equilibrio visual y una distribución eficiente del contenido. En los productos digitales de Repsol, el layout es una pieza clave de las Foundations del sistema de diseño Energy, diseñado para estructurar la información de manera clara y adaptable.

Piensa en el layout como el plano de una casa, define dónde van las habitaciones, las puertas y las ventanas para que todo fluya de manera ordenada y funcional. De la misma forma, nuestro enfoque dinámico permite reorganizar fácilmente los elementos según la resolución y el tipo de dispositivo, garantizando una experiencia consistente en todas las herramientas y plataformas. Un buen layout no solo mejora la usabilidad y la navegación, sino que también aporta coherencia visual, facilitando la comprensión y la interacción del usuario con nuestros productos digitales.

‍

Breakpoints

Tener diferentes breakpoints en el layout de Energy significa que el diseño de los productos digitales de Repsol se adapta de manera fluida a distintos tamaños de pantalla, desde móviles hasta monitores ultrawide.

En términos de comportamiento responsive, los breakpoints actúan como puntos de referencia en los que el diseño cambia para garantizar una experiencia óptima en cada dispositivo. Esto permite:

• Reorganizar el contenido: Elementos como menús, imágenes o textos pueden cambiar de posición para aprovechar mejor el espacio disponible.
• Ajustar proporciones y tamaños: Tipografías, márgenes y espacios se escalan para mantener la legibilidad y la armonía visual.
• Optimizar la navegación: En pantallas pequeñas, los menús pueden convertirse en hamburguesas y las columnas pueden apilarse para facilitar la interacción.

Gracias a los 5 breakpoints definidos en Energy, garantizamos que los productos digitales mantengan una experiencia consistente y funcional sin importar dónde se visualicen.

‍

Sidebar behaviour

El sidebar es un panel lateral que se utiliza en algunos productos digitales para organizar la navegación o mostrar información complementaria sin ocupar el espacio principal de la pantalla. En Energy, el layout está diseñado para convivir con un sidebar cuando sea necesario, adaptando su comportamiento para aprovechar al máximo el espacio disponible.

En pantallas desktop, un sidebar presenta varias ventajas:

• Mejora la navegación: Permite acceder rápidamente a secciones o herramientas sin interrumpir el contenido principal.
• Optimiza el espacio: Al aprovechar el ancho de la pantalla, evita que elementos clave compitan por visibilidad.
• Facilita la multitarea: Puede mostrar opciones, filtros o herramientas sin necesidad de cambiar de vista.

Gracias a su flexibilidad, el sidebar en Energy se ajusta dinámicamente para garantizar una experiencia fluida y eficiente en cada producto.