Oxygen 1.1.0

Buenas prácticas

Es fundamental entender que para implementar y aprovechar un sistema de diseño, necesitamos seguir una serie de normas y buenas prácticas. El objetivo principal de Oxygen es enmarcar y dirigir el uso del lenguaje digital. Esto no solo contribuye a la consistencia visual y a la usabilidad, sino que también asegura que todas las interacciones digitales estén alineadas con los objetivos y la identidad de Repsol.

1: No podemos inventarnos cosas

En ocasiones el sistema puede parecer que no responde a nuestras necesidades.

En estos casos, podemos emprender algunas exploraciones para resolver el problema en cuestión, pero es crucial que validemos estas soluciones con el sistema para ver si hay algún elemento ya existente que pueda proporcionar una solución.

Además, tenemos una visión más amplia de otros proyectos, por lo que podemos sugerir o proporcionar soluciones que otros equipos ya han implementado.

TIP! Revisa siempre la documentación
Podrás ver ejemplos, y las options que permite el componente

2: Nunca usar los fragmentos de forma descontextualizada

El propósito del fragmento es servir a su componente. El fragmento se define dentro del componente, no debe usarse fuera de ese contexto.

Puede usarse de inspiración o referencia para realizar exploraciones, pero una vez validados, hay que alinearse con el sistema.

3: No usar librerías de app en web mobile

Si estamos en web mobile debemos tener en cuenta los siguientes puntos:

  • No usamos componente de la librería de APP para web mobile. Son librerías distintas, con patrones de interacción distintos.
  • Podemos usarlos como referencia, y pueden llegar a formar parte de la librería de web, pero hace falta validar.
TIP! Revisa que el archivo tenga las librerías conectadas correctamente
En general, recomendamos no conectar librerías de entornos que no son parte del producto (app para una web, data viz si no vamos a diseñar data...)

4: No posicionar contenidos sobre un componente

Al utilizar un componente, si este no cubre nuestra necesidad:

  • No deberíamos posicionar elementos por encima del componente ocultando los existentes para adaptarlo a nuestro caso de uso
  • En la mayoría de casos se puede hacer swap o adaptar el componente sin detachear
  • Podemos proponer mejoras o modificaciones al sistema
TIP! Recuerda que puedes hacer componente locales.
Hasta más o menos un 20% de los componentes podrían ser específicos del producto mientras usen las foundations y los elementos Core de Oxygen.

5: No usar componentes procedentes de otros productos

Se pueden usar a modo exploratorio. Una vez encontramos la solución buscada, se debería comunicar a sistema para que lo trate como un elemento transversal.

TIP! El sistema tiene un modelo de gobernanza que hay que conocer y respetar ;)

6: Recuerda que puedes hacer componentes locales

Si tenemos un elemento de diseño que aparecerá de forma recurrente a lo largo del archivo, es recomendable que creemos un componente. Esto nos permitirá:

  • Ahorrar tiempo
  • Realizar cambios de forma rápida, solo hay que cambiar el componente
  • Mantener cohesión del diseño
  • Posibilidad de convertirse en un elemento de área privada que puedan utilizar otros equipos
  • Evitamos que nos olvidemos de un elemento que no hemos actualizado al nuevo diseño
TIP! Recuerda que estos componentes locales siempre hay que validarlos con el sistema ;)

7: Respeta los límites en la modificación de estilos

Al reutilizar componentes, deberíamos consultar en la documentación hasta dónde está permitido hacer ajustes en tokens de color y texto. Por lo general:

  • Los tokens de color no se deben eliminar/modificar
  • En algunos casos se puede ajustar tamaños de texto mientras se mantenga la jerarquía (titular-body-caption)Ahorrar tiempo

8: No detachear iconos

Bajo ningún concepto. Cualquier propuesta o necesidad de nuevo icono, se mete en librería previa revisión por el equipo del sistema. El paquete iconográfico es transversal a todos los productos y respetarlo es crítico para evitar conflictos con desarrollo y contribución.

9: No generar estilos locales

Bajo ningún concepto, las Foundations son sagradas. Cualquier propuesta de estilos nuevos se debería validar con el sistema. El sistema de colores de Oxygen tiene un reflejo en producción y para poder mantener los productos, se debe respetar.


Tampoco se deben utilizar colores globales de visualización de datos para cubrir necesidades fuera de su contexto.

10: No alterar la metodología de trabajo

Es muy importante para el buen funcionamiento de todo el sistema que tengamos una metodología de trabajo estable, validada por todos y que escale a los diferentes tipos de productos y equipos de trabajo. Este es un resumen del modelo actual:

  • Task: Toda tarea que esté abierta y en la que estemos trabajando. Este es el lugar de las exploraciones.
  • Main: Para archivos entregados a desarrollo. Fuente de verdad que no se actualiza ni se modifica -> Si necesitas modificar algo pequeño se trabaja con mediante Branches.
  • Archive: Pensado para guardar todo lo que ya no esté siendo usado, ni por diseño (tasks que se quedan en el camino, investigaciones...) ni por desarrollo, archivos que estuvieron en Main, pero ya no se está trabajando con ellos.

Contribución de diseño

No olvides visitar la sección de contribución. Te dará todo el conocimiento sobre nuestro modelo de gobernanza para las fases de diseño.
Contribución diseño

Contacto

Descubre cómo Oxygen te ayudará a crear mejores productos y a generar nuevos modelos de relación y hábitos energéticos entre nuestros clientes.