Descripción general de la tematización

Explicación de la tematización de Jutro

La tematización de Jutro es un mecanismo que permite a los diseñadores y desarrolladores aplicar la marca de un cliente a la interfaz de usuario de una aplicación de Jutro. La tematización de Jutro utiliza tokens de diseño para definir las decisiones temáticas específicas. A continuación, los tokens de diseño se transforman en variables que la aplicación puede utilizar.

Hay muchos tipos de decisiones de diseño que los diseñadores deben tener en cuenta. Estas son algunas de los más importantes:

• Colores
• Fuentes/tipografía
• Espaciado
• Sombras
• Redondeado de borde

Un ejemplo de un cambio global sería reemplazar la familia de fuentes predeterminada de Jutro, Source Sans Pro, por Roboto de Google. Esto es tan simple como cambiar el valor del token de diseño asociado con la familia de fuentes:

{
  jds:
    {
      "font-family":
        { "heading": { "type": "fontFamilies", "value": "'Roboto'", "description": "Global font-family for headings" },
          "label": { "type": "fontFamilies", "value": "'Roboto'", "description": "Global font-family for label text" },
          "body": { "type": "fontFamilies", "value": "'Roboto'", "description": "Global font-family for body text" },
          "monospace": { "type": "fontFamilies", "value": "'Roboto'", "description": "Global font-family for monospace text" }
        },
      }
    }

Una vez que el cambio en el valor del token de diseño se transforma en la variable CSS correspondiente, cambiará la fuente en toda la aplicación. Un cambio al nivel del componente, por otro lado, implicaría cambiar el tamaño de la fuente en un cierto tipo de botón, sin afectar los tokens globales.

Análisis de un diseño

Cuando se aplican temas con Jutro, generalmente se da el caso de que un cliente de Guidewire está involucrado. Los diseñadores de UX contribuirán de alguna manera, ya sea interna o externa a Guidewire. Dependiendo de las necesidades de diseño de ese cliente, estos son algunos de las situaciones que pueden darse en cuanto al cliente:

• Tiene un diseño y quiere adaptarlo a Jutro.
• Tiene diseños antiguos que quieren actualizar.
• Tiene una guía de marca/sistema de diseño con el que les gustaría que trabajáramos.
• Están empezando desde cero y quieren que Guidewire dirija el trabajo de diseño (poco frecuente).

En la mayoría de estos casos, se le pedirá que analice los diseños del cliente y extraiga la marca y el estilo de estas múltiples fuentes.

Algunos de los elementos clave que debe tener en cuenta al analizar un diseño:

Opciones globales

• Colores
• Fuentes/tipografía
• Espaciado
• Sombras
• Redondeado de borde

Detalles de estilo

• Encabezado: color, logotipo, espaciado entre borde y texto, tamaño
• Color de fondo del cuerpo
• Color de fondo de la tarjeta (si corresponde)

• Fuentes: variables de color de texto 1 y texto 2, tamaños
• Botones: color de fondo, color de texto, espaciado entre borde y texto en los 3 tipos de botones

• Entradas: color de fondo, borde, tamaño del texto, espesor y color, espacio entre el rótulo y la entrada, espaciado entre borde y texto, y tamaño del campo de entrada.

• Enlace: color (si es diferente de marca 1)

Estos son los elementos de estilo clave en un diseño. Si puede extraer estos estilos del diseño de sus clientes y replicarlos en sus diseños, habrá hecho la mayor parte del trabajo.

Revisión de un documento de marca

La revisión de un documento de marca, una guía de estilo o un sistema de diseño sigue un proceso similar al descrito antes. Sin embargo, en lugar de analizar una página completamente diseñada, examinaría los patrones y componentes que se utilizan para crear esa página.

Esto significa considerar cada opción como parte de un componente diseñado. La ventaja de trabajar con un sistema de diseño o una guía de estilo es que tendrá acceso a información detallada sobre cómo utilizar estos estilos correctamente.

Cómo diseñar con Jutro

El diseño con Jutro consta de los siguientes pasos generales:

1. Elegir el plano de planta.

2. Elegir su composición y disposición.

3. Diseñar usando componentes de Jutro.

4. Obtener la lista de tokens de diseño del diseñador de UX y aplique estilos obteniendo los archivos de tema a través del proceso de transformación de tokens de diseño a variables CSS.