Discusión:Aura: Skin wiki Casiopea/Semestre 2 - Semana 5

De Casiopea

Avances

Sobre el diseño de los componentes

Como ya se sabe, se utilizó de base el sistema de diseño open source Space DS, el cual se fue modificando hasta que calzara con el diseño de la nueva skin.

Para la creación de los distintos componentes, se tomaron en cuenta los siguientes principios:

  • Todo componente debe estar construido en base a estilos (colores, estilos de fuentes, efectos, etc.) y variables (strings, números, etc.).
  • Se deben utilizar la menor cantidad de variables y estilos posibles.
  • El kit debe servir para mantener jerarquías claras de los contenidos en la página.
  • Debe tener un estilo simple, cuidado y sin muchas decoraciones. Si se usan recursos gráficos, deben ser mínimos y consistentes a través de todo el diseño.
  • Se debe cuidar la legibilidad a través de los estilos de texto, contrastes de colores y blancos de la página

Cómo documentar el sistema de diseño

En la pasada conferencia, Design systems best practices relizada en la Config 2024 por Figma, se exponen algunos principios que hay que seguir a la hora de diseñar un sistema de diseño. Se habla sobre cómo el sistema es un producto por sí mismo, en el que los usuarios son otros diseñadores y desarrolladores, y trata la importancia de no sobrecomplicarles sus tareas a través de la simpleza y la buena documentación, entre otras cosas.

Si bien Aurora DS no cuenta con una gran cantidad de componentes, como puede ser con otros kits de diseño, sí se debe tomar en cuenta que los futuros colaboradores no serán, necesariamente, expertos en el manejo de Figma, y deberán aprender muchas cosas desde cero.

Es importante pensar en el usuario futuro de este kit de diseño de interfaz a la hora de organizar todos los elementos, y en la documentación que se le va dejando al usuario, ya sea escrita, o a través de hipervínculos a documentación creada por otras personas que puedan ayudarlos en su camino (ayuda contextual).

Además, la información que se le entregue al usuario debe ser conciza, pero suficiente para que pueda navegar entre las páginas y utilizar las distintas variaciones de cada uno de los componentes como corresponde.

Otro factor importante es el idioma. El desarrollo de la skin se realizará en inglés, pero el usuario diseñador que utilizará el sistema de diseño en Figma es probable que entienda mejor el español, por lo que toda la documentación debe estar en ambos idiomas.

Finalmente, para organizar los contenidos, se tomó de ejemplo Material 3 Design y Space DS, además de tomar en cuenta los principios expuestos en la conferencia mencionada anteriormente.

Documentación de los componentes

Franciscaortega-titulo2-casiopea-semana5-documentacioncomponentes2.png

A continuación se encuentran cada una de las páginas en el sistema de diseño. El propósito es que el orden esté en función de lo que el usuario debe entender primero, de lo más general a lo más específico.

Pasa primero por una introducción, donde se muestran algunos recursos que le ayudarán a comprender cómo utilizar las distintas herramientas, junto con la tabla de contenidos que le permite navegar directamente a cada componente.

A continuación, muestra algunas plantillas que le permite comprender el total del diseño, para que cuando vea los componentes específicos comprenda a dónde pertenecen y qué es lo que construye.

Luego, se muestran los estilos (átomos) que construyen los componentes siguientes (moléculas y organismos). Los últimos componentes que se muestran, son aquellos específicos de los diseños de la wiki misma, como la tabla de contenidos, las fichas, los widgets, el footer, etc.

(falta reordenar estas páginas, van desde lo más "atómico" a lo más "molécular").

  • 💻 Start here!
  • Templates
  • Space
  • Color
  • Typography
  • Shadow and elevation
  • Icons
  • Utilities
  • Components/buttons
  • Components/radio-buttons
  • Components/checkbox
  • Components/chips
  • Components/snackbar
  • Components/avatar
  • Components/cards
  • Components/tooltip
  • Components/tabs
  • Components/inputs
  • Components/textarea
  • Components/table-of-content
  • Components/nav-bar
  • Components/ficha
  • Components/footer
  • Components/images
  • Components/logo
  • Components/tables
  • Components/widgets