Patron App03
La primera impresión
El Hero es el primer impacto visual de un producto digital, diseñado para captar la atención del usuario y transmitir la identidad de la marca.
En Energy, los Heros son moléculas complejas que se construyen con nuestras Foundations y nuestros componentes Core, asegurando que siempre reflejen la identidad de Repsol. Su función varía según el negocio: pueden inspirar, informar o invitar a la acción, pero siempre destacan por su fuerza visual y su impacto.
Para el sistema de diseño, el Hero es un patrón, lo que significa que no ofrecemos un componente cerrado, sino una guía de jerarquías y ejemplos para diseñarlo. Cada producto es responsable de gestionar y evolucionar su Hero con el tiempo, pero siempre siguiendo las bases del sistema para garantizar coherencia y consistencia.
Variantes
En un sistema de diseño, las variantes de un patrón son versiones diferentes de un mismo concepto, adaptadas a distintas necesidades dentro de un producto digital. Aunque comparten la misma esencia y están construidas con las mismas bases, su objetivo, funcionalidad y presencia en la página pueden variar según su jerarquía y contexto de uso.
Por eso, en Energy definimos distintos tipos de Hero, que pueden variar en:
- Tamaño y jerarquía.
- Cantidad de contenido que presentan.
- Interacción con el usuario, como llamados a la acción o navegación.
Hero Primary
El Hero Primary es el más destacado de todos los Heros en Energy. Se utiliza exclusivamente en la home o página principal de un sitio web, donde su objetivo es captar la máxima atención del usuario y comunicar el mensaje clave de forma clara y visualmente impactante.
Suele ocupar un espacio predominante en la parte superior de la página e incluir imágenes llamativas, un título potente y un llamado a la acción, asegurando que el usuario comprenda rápidamente la propuesta de valor del sitio. Su diseño está pensado para generar un impacto inmediato y guiar la navegación dentro del producto digital.
Puede presentarse en tres casos de uso de esta variante según la necesidad del producto:
- Default → Incluye una imagen principal, un texto destacado y, opcionalmente, un CTA. Es la versión más sencilla y directa, diseñada para comunicar el mensaje principal sin distracciones.
- Cards → Similar al Default, pero con cards adicionales a la derecha que complementan el contenido principal con información extra.
- Search → Incorpora un campo de búsqueda dentro del Hero, junto con la imagen y el copy. Su foco principal es facilitar la interacción a través del input de búsqueda.
- En la librería encontrarás más detalles sobre breakpoints y casos de mínimos y máximos, para adaptar cada variante según las necesidades del producto.
Hero Secondary
El Hero Secondary se usa en páginas con relevancia dentro del sitio, pero que no son la home o portada principal. Su función es proporcionar un punto de entrada claro a la información clave de la página, manteniendo una presencia destacada sin el nivel de protagonismo del Hero Primary.
Es ideal para subhomes o páginas con un propósito específico, como un portal de búsqueda de empleo, una sección de servicios o una categoría destacada dentro del sitio. Su diseño mantiene la coherencia con Energy, asegurando una jerarquía visual clara y facilitando la navegación del usuario.
Puede presentarse en tres casos de uso de esta variante según la necesidad del producto:
- Default → Destaca información relevante con una imagen, texto y, opcionalmente, botones de acción.
- Search → Incluye un campo de búsqueda, permitiendo a los usuarios encontrar contenido directamente desde el Hero.
- Promo → Enfatiza ofertas o tarifas mediante una card promocional dentro del diseño.
En la librería encontrarás más detalles sobre breakpoints y casos de mínimos y máximos, para adaptar cada variante según las necesidades del producto.
Hero Terciary
El Hero Tertiary es un elemento visual diseñado para destacar contenido de menor jerarquía en comparación con el Hero Primary y Secondary. Se utiliza en secciones como noticias, artículos relacionados, contenido editorial o promociones, ofreciendo una presencia destacada sin ocupar demasiado espacio.
Su diseño más compacto permite integrarlo de manera fluida dentro de la página, asegurando que la información relevante sea visible sin restar protagonismo a otros elementos.
Reglas de uso
Es una herramienta colaborativa, compuesta de patrones, componentes y pautas de diseño de interacción en una gramática común. Su objetivo es generar coherencia en el ecosistema de productos digitales de Repsol, y eficiencia en la creación y evolución de los productos.
Animación
Es una herramienta colaborativa, compuesta de patrones, componentes y pautas de diseño de interacción en una gramática común. Su objetivo es generar coherencia en el ecosistema de productos digitales de Repsol, y eficiencia en la creación y evolución de los productos.