¿Cómo se estructura?

Nuestro product design system está organizado en un diseño atómico, el cual sirve como jerarquía a nivel de organización, ayuda a ordenar interfaces complejas con una gran cantidad de elementos e interacciones.

Usa una lógica orgánica para ordenar los elementos desde sus átomos, para juntar un par y construir una molécula, que en conjunto con otras moléculas forman un organismo que es la base estructural para crear una página.

A continuación vamos a ver ejemplos de cada parte del diseño atómico.

Open

Primero que todo tenemos los átomos los cuales no tienen sentido por sí solos, son el elemento más pequeño del diseño atómico, los átomos necesitan estar acompañados por otros átomos para tener coherencia.

Por ejemplo tenemos aquí la tipografía,iconos, colores y sombras con los cuales construiremos una molécula más adelante.

Open

Luego tenemos las moléculas que como en química surgen de la unión de dos átomos, una molécula es aquel elemento que puede utilizarse de forma autónoma debido a que tiene información suficiente para poder funcionar como 1 unidad básica.

Que llevado ejemplos tenemos Chips, labels, notificaciones, Campos de texto, botones, Etc.

A continuación están los organismos de la interfaz los cuales se forman a partir de los átomos y moléculas unidos, para formar un elemento más complejo.

Éstos organismos ya ofrecen una experiencia completa para el usuario, ya que teniendo un par de organismos en una pantalla logramos construir la base de la interfaz.

Una vez construida la base entramos a estructurar el esqueleto, un template es la base estructural a nivel de diagramación con el cual vamos a construir una página a continuación.

 El template organiza los elementos en un layout para articular el diseño de página. Es importante destacar que el template tiene foco en la estructura y no en el contenido.

Por último tenemos las páginas que son la representación final del diseño visual de una interfaz, y que integran todos los elementos que hemos escrito hasta ahora. 

Una vez construidas las páginas tipo que utilizaremos tenemos la base visual de nuestro sistema el cual ha venido creciendo en el tiempo ya que en cada nueva propuesta se van creando distintas variantes de los templetes lo que no se entrega diferentes resultados visuales.