Los tercios

La máxima abstracción de nuestro símbolo son tres franjas horizontales. Son la base conceptual de una renovada identidad visual generada a partir de este elemento ya reconocido entre nuestras audiencias. Un sistema versatil que nos permite ecualizar la presencia de las franjas, de una presencia máxima a una presencia mínima, en entornos físicos y digitales, tanto en estático como en movimiento.


Composición y movimiento

El espacio donde queremos representar los tercios se divide en franjas, horizontales o verticales, quedando tres espacios diferenciados y que guarden proporción entre ellos.

En la imagen de la derecha vemos un ejemplo de proporciones, pero no siempre tienen que ser estas. Los contextos y las necesidades de contenidos, así como el comportamiento en diferentes resoluciones puede hacer que los espacios varíen más o menos entre ellos.

Para transmitir movimiento y progreso los tercios se han de animar de izquierda a derecha y de abajo a arriba, indicando el camino hacia el futuro.

Origen conceptual de la regla de los tercios

Heros

A continuación listamos los ejemplos más comunes de aplicación de la regla de los tercios en módulos promocionales y de carácter más emocional, los “Heros”.

Son algunos ejemplos, pensados para explicar el comportamiento de los tres espacios de contenidos en distintos casos y dando respuesta a diferentes necesidades.

Hero de la home del Repsol.com

Ejemplo de composición de los tercios sobre imagen 100%

Ejemplo de composición de los espacios de los tercios

Módulos de contenido promocional o destacados

Para aquellos casos en los que el contenido debe destacar sobre el resto, por una acción comercial o un mensaje relevante, el recurso de los tercios es perfecto es este sentido, aportando carga gráfica al contenido y haciendo que destaque del resto.

Este recurso hay que utilizarlo siempre los contenidos nos lo permitan y no dificulte la comprensión de los mismos, teniendo en cuenta comportamientos responsive, altura de pantallas...

Ejemplo de aplicación de los tercios en un destacado de navegación

Responsive y mobile

En dispositivos con resoluciones más pequeñas como dispositivos móviles, la regla de los tercios se puede simplificar. La altura de la pantalla cobra un papel muy relevante a nivel estratégico y funcional y, con ello, la carga gráfica.

Hero de la home del Repsol.com

Buenas prácticas

En los proyectos donde hemos podido estudiar cómo aplicar la regla de los tercios hemos descubierto varios puntos aconsejables a seguir para que este recurso sea un elemento que acompañe el diseño, no dificulte la lectura ni la funcionalidad de la página, y aporte esa presencia de marca que estamos buscando.

  • Tener en cuenta el comportamiento responsive si estamos diseñando en desktop.

  • Generar los tres espacios proporcionales entre ellos. No hay una proporción definida y está abierto a trabajarlo de la mejor forma posible para acompañar los contenidos.

  • Si juntamos espacios de color tratar de utilizar tonos de la misma gama para ayudar a armonizar la página.

  • Cuidado con los espacios vacíos de color, en vertical y en mobile sobretodo, parecen errores de carga

Brand Center

Accede a Brand Center para ver las guidelines de marca de Repsol.

Ir a Brand Center

Recursos

Descarga y accede a todos los materiales que necesitas para trabajar con el sistema de diseño.

Componentes

Conoce las unidades mínimas para construir productos digitales en Repsol.

Grid

Descubre cómo estructurar contenido en la página.