Digital Product
IE Design System no es solo una colección de componentes para construir interfaces. Es un sistema estructurado de diferenntes bloques de construcción, flexible y escalable.
Dentro de Digital Product partimos de la máxima abstracción, el lenguaje de diseño, y sobre este construimos los elementos necesarios hasta llegar a crear flujos de interacción.
1. Digital Product Language
Es el core de todo el sistema de diseño a partir del cual se contruyen el resto de elementos del sistema. Son los estilos y pautas que se embeben dentro de todos los componentes, módulos y patrones.
En el lenguaje del producto digital incluimos categorías como color, tipografía, espaciado, grid, etc.
2. Design Tokens
Los tokens de diseño es la parte mínima del diseño visual de un sistema de diseño, estos almacenan atributos. Se utilizan con valores codificados lo que permite a los eqquipos colaborar mejor y garantizar la coherencia de la marca,pero no son útiles por si solos, se les debe aplicar a un elemento.
Los tokens de diseño almacenan variables de la tipografía, el color o el espaciado permitiendo que se puedan utilizar en múltiples plataformas.
3. Componentes
Dentro del sistema de diseño de IE existe una doble categorización de componentes:
a. Funtional-focused
Unidades básicas de construcción que se caracterizan porque permiten al usuario centrarse en tareas a través de la interacción de los mismos.
b. Content-focused
Este tipo de componentes, también llamados editoriales, se utilizan principalmente para crear jerarquías tipográficas. Carecen de elementos de interacción y se utilizan principalmente para crear el contenido.
3. Módulos
Los módulos son los bloques de ensamblaje tangibles de la interfaz construidos con piezas más pequeñas, como elementos y componentes, que se configuran dentro de un contenedor.
En IE existe la siguiente categorización de módulos:
a. Estructurales
Forman parte de la estructura de cualquier producto digital o bien son esenciales en su creación, conforman la carcasa de la interfaz, como el header o el footer.
b. Editoriales
Módulos que contienen contenido meramente informativo o editorial, sin apenas interacción.
c. Funcionales
Bloques de componentes que permiten realizar algún tipo de tarea a los usuarios. Tienen interacción.
d. Otros
En esta sección se incluyen los módulos que pueden formar parte de otros. Son unidades más pequeñas como las tablas o cards.
4. Patrones
Indicaciones para respetar los estándares que se han fijado para todas las pantallas y estructuras estáticas que pueden aparecer en cualquier producto.
Dentro del sistema de diseño de IE existen ya diferentes patrones o templates para algunas de las categorías.
5. Flujos
Instrucciones y recomendaciones para seguir los estándares de interacción en los diferentes procesos transversales como el login de acceso al campus online.
