Cuando comenzamos con nuestro análisis la organización estaba trabajando con diferentes equipos los mismos elementos digitales. Por ejemplo, podríamos tener un grupo de desarrolladores y diseñadores trabajando en implementar el mismo botón. La forma de solucionar este inconveniente es teniendo un sistema de diseño. Pero ¿Que entendemos como un sistema de diseño?
Un sistema de diseño es un conjunto de elementos estandarizados que se pueden utilizarlos en diferentes combinaciones para dar como resultado un producto final. Teniendo presente esta definición podemos decir que todos los días utilizamos sistemas de diseño. Por ejemplo, al prepara un sándwich.
Nosotros podemos utilizar ingredientes similares, por ejemplo el pan, queso, proteína y obtener dos aperitivos diametral diferentes entre ellos.
Este concepto aplicado al mundo digital nos deja en claro que podemos estándarizar componentes sin perder la oportunidad de personalizar nuestras aplicaciones.
Para construir algo debes escoger alguna metodología, em este caso decidimos utilizar la metodología de Atomic Design.
El creador de esta metodología es Brad Frost, el cual nos explica que debemos dividir nuestras experiencias digitales en los siguientes elementos:
Los átomos son componentes que no pueden ser divididos en elementos más pequeños sin dejar de ser interactuadle con otros. Un buen ejemplo son las etiquetas HTML comunes<button>, <input>, <h1>, o en Flutter los elementos más simples(por ejemplo el IconButton).
Las moléculas son elementos constituidos por varios átomos, pero ellos no tienen múltiples responsabilidades. Por ejemplo un botón de búsqueda, o por ejemplo un modal.
Los organismos son elementos compuestos por moléculas y átomos. Puede tener varias responsabilidades por ejemplo un header con elementos de búsqueda, enlaces y notificaciones, claramente son un modal.
Los templates definen el orden de los elementos en una pantalla.
Son una instancia de un template.