Biological Design. Un paso más allá del Atomic Design.
Desde que lo descubrí me ha encantado el concepto de Atomic Design creado por Brad Frost. La analogía es genial y además me pilla muy de cerca, ya que yo estudié química en la universidad.
El caso es que trabajando en el desarrollo de un sistema de diseño y toda la arquitectura de símbolos de Sketch que estamos utilizando para crearlo, decidí basarme en Atomic Design para vertebrar la documentación y tenía la sensación de que no era suficiente. Con los componentes originales no conseguía explicar cada una de las capas del proyecto.
Como resultado de esa necesidad surge Biological Design, un paso más allá del atomic design, con permiso de Brad Frost
Biological Design
El concepto se basa en ampliar el punto de vista inicial e ir más allá de lo atómico y molecular y explorar otras dimensiones de los niveles de organización biológica, tanto a nivel estructural como de procesos.
Por cierto, si algún biólogo lee esto, por favor, no seáis muy duros conmigo :)
1. ADN
Simplificando, el ADN es lo que nos define y nos hacer ser como somos; aquello que nos hace únicos.
Así pues, El ADN de nuestro sistema de diseño está formado por el conjunto de estilos que lo definen: Colores, tipografía, sombras, imágenes, etc.
Dándole forma a todo esto se encuentra el Software de diseño, y en este caso, las estructuras de símbolos anidados que nos permiten empezar a construir componentes y hace que sea escalable y fácil de actualizar, entre otras cosas.
2. Células
Las células son el nivel estructural fundamental y funcionan aquí como los átomos originales: Son aquellos elementos que se pueden describir a través de una etiqueta HTML.
Ejemplo: Un input o un botón
3. Organismos sencillos
Los organismos sencillos sustituyen a las moléculas en el Atomic Design y son aquellos que se unen por la combinación de distintas células, dando como resultado unidades con propiedades únicas que permiten una funcionalidad e interacciones concretas.
Ejemplo: Un input de búsqueda más un botón nos permite realizar una búsqueda y obtener una lista de resultados.
4. Organismos complejos
La unión de varios organismos sencillos da pie a otros (los organismos en el modelo original) que son más complejos y que normalmente tienen lugares específicos y relevantes en la interfaz.
Ejemplo: Cabecera web.
Proceso 1: Simbiosis
Podemos definir la simbiosis de una forma sencilla de la siguiente manera:
Asociación íntima de organismos para beneficiarse mutuamente en su desarrollo vital.
En este modelo, además de niveles de organización, tenemos procesos como la simbiosis, que permite y define la unión entre distintas células y organismos simples. Estas uniones solo se producen cuando se dan las condiciones necesarias y con un objetivo concreto.
5. Comunidad
Hablamos de comunidades cuando diferentes tipos de organismos se unen y generan un conjunto. En una comunidad, los organismos se relacionan entre ellos y pueden cambiar en número y en su modo de interactuar. Además, la comunidad puede verse afectada por efectos externos.
Ejemplo: Las páginas de una web (Home, perfil de usuario, etc)
La comunidad sustituye a los patrones y páginas de Atomic Design (que ente punto se aleja de la analogía química) sin diferenciar entre los distintos niveles de fidelidad en los que se puede encontrar a lo largo del proceso de diseño.
El concepto permite introducir ideas como el cambio y las relaciones entre organismos dentro de una misma página y cómo éstas pueden verse afectadas por los usuarios, lo que nos lleva al segundo proceso.
Proceso2: Evolución
Los sistemas de diseño no son estáticos y pueden sufrir cambios a todos los niveles. Además, los productos que se construyen con ellos se relacionan constantemente con el entorno y con los usuarios por lo que no puede pensarse en ellos de una forma aislada.
Dejando a un lado que la evolución es un proceso que se da de forma aleatoria, sí que conduce a soluciones concretas y lleva a los organismos que la sufren a prosperar desde el punto de vista biológico.
Por otra parte, dichos cambios se pueden producir para adaptarse a condiciones externas o cambios en dichas condiciones.
Del mismo modo, nuestros sistemas de diseño, al estar vivos, están o pueden estar en constante evolución para adecuarse al entorno y a las necesidades muchas veces cambiantes de nuestros usuarios.
6. Ecosistema
El ecosistema es el último nivel del modelo y se define como:
Agrupación de organismos de todos los dominios biológicos en conjunción con el entorno físico.
En nuestro ecosistema tendremos todo el sistema de productos de una marca o compañía: Webs, aplicaciones móviles, software, etc y sus relaciones con usuarios, competidores, mercado…
La evolución nos permite iterar, buscando mejores soluciones a problemáticas concretas o como respuesta a los test de usuario.
Por otra parte, la aparición de nuevas necesidades hace que haya que crear funcionalidades y soluciones que den respuesta a los nuevos retos.
Nuestro sistema de diseño deberá ser lo suficientemente sólido y flexible para ser una herramienta útil que nos permita afrontar cada una de estos escenarios de forma eficaz.
Hasta aquí esta pequeña vuelta de tuerca al genial concepto de Atomic Design. Espero que lo encontréis de utilidad a la hora de entender y de explicar los sistemas de diseño.
Si piensas que el modelo puede mejorarse de algún modo, no dudes en decirlo en los comentarios.
Foto de portada por Joel Filipe
