131

¿Por qué usar Atomic Design?

17809Puntos

hace 7 años

En Platzi amamos Atomic Design como metodología de diseño de producto, ya que parte de la primicia de que cada elemento de una interfaz debe funcionar tanto individual como en conjunto (bueno nada mejor como su creador para saber más de que se trata http://atomicdesign.bradfrost.com/chapter-2/) .

0B052198-E473-4908-8866-43780AB15729.png

Pero más que hablar puntualmente de su implementación, te quiero contar cómo esto ha mejorado nuestro flujo de trabajo al momento de construir cualquier producto dentro de Platzi, sólo por el hecho compartir muchas cosas en común con temas que creíamos particulares de la programación. Sí, es como ir del diseño a la programación y viceversa.

Todo es un componente

Captura de pantalla 2017-05-22 a la(s) 5.19.47 p.m..png
A la izquierda ¿Qué es un web componente?, a la derecha, algunos de los átomos de Platzi en Sketch.

La popularidad de usar componentes en cualquier sitio web surge de algo muy parecido a un Lego: tú puedes construir productos más rápidos partiendo de elementos ya preestablecidos. En frontend, tecnologías como React.js nos han permitido compartir fragmentos de UI en varias partes de la aplicación al tiempo sin tener la necesidad de construirlo todo cada vez.

C8EE5FFE-80A7-4890-AAE8-369D8E84DB15.png

Al momento de diseñar cada interfaz nos aseguramos que sea consistente todo el tiempo, es decir, que un botón siempre se vea y sienta de la misma manera, que los formularios se vean y comporten igual y pensar que cada uno cumpla una sola función, muy parecido al principio de una sola responsabilidad en software (https://en.wikipedia.org/wiki/Single_responsibility_principle).

Entonces: ¿Qué logramos con esto? Que los cambios sean particularmente fáciles de hacer y que los nuevos elementos que nos pensemos para el producto sean fáciles de ejecutar sin afectar lo que ya tenemos. Al inicio va a parecer algo cansado tener todas las definiciones, pero creanme que vale toda la pena.

Parte por orientado a objetos - Símbolos

El abstraer un objeto real, digamos un profesor, a su equivalente a código, es sin duda uno de los primeros pasos que hacemos al momento de desarrollar algo. ¿Por qué? Porque nos ayuda entender mejor todo su comportamiento y flujo a lo largo de todo el programa.

Captura de pantalla 2017-05-19 a la(s) 5.34.24 p.m..png

En diseño de interfaces usando Sketch tenemos algo muy parecido llamado símbolos. Los símbolos nos van a permitir crear referencias de uno o más de elementos que vamos a estar usando una y otra vez, para poder instanciarlos donde queramos y sustituirlo por otros datos, es como es esqueleto, es como programación orientada a objetos. Por ejemplo, un profesor en Platzi:

Creación de un Simbolo el tipo profesor

Captura de pantalla 2017-05-22 a la(s) 5.25.23 p.m..png

Instancia de un nuevo profesor, se sustituyen los datos más no la estructura

Y como aprendimos anteriormente, podemos crear un símbolo por cada componente que tenemos en nuestra guía de átomos con Atomic Design.

Tú propio sistema de diseño

Una de las cosas que más que llamaron la atención de Material Design fue lo perfectamente documentado que están todos sus elementos, inclusive llegué a creer que era algo único de ellos. Sin embargo eso es algo llamado sistema de diseño, e inclusive hay un sitio donde están compartidos poco más de 400 http://styleguides.io/

Captura de pantalla 2017-05-22 a la(s) 4.34.32 p.m..png

Un sistema de diseño es igual de importante y muy parecido a la documentación de cualquier framework, librería o código. Va a ser la respuesta a muchas preguntas comunes entre el equipo y se trata igual de dar contexto de como llegado a cada resultado (y quizás actualizar algunos), cómo usar ciertos elementos y sería recomendable que llegarán a ser tan específicos que incluyeran todas las equivalencias a CSS.

Es totalmente opcional compartirla con el mundo, pero te recomiendo mucho que en donde te encuentras seas participe de crear este sistema.

Por último

No puedo dejar de recomendarte que sigas todo el contenido de Brad Frost y en especial su Atomic Design http://atomicdesign.bradfrost.com/. De mi lado seguiré compartiendo cosas que hacemos en diseño de producto en Platzi. Si tienes alguna sugerencia de tema o fuente interesante para seguir aprendiendo en conjunto, déjala en los comentarios.

Uriel
Uriel
ThespianArtist

17809Puntos

hace 7 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
1
5357Puntos

Genial artículo

1
11852Puntos

¿Osea que ésto lo puedo usar desde estilizar en CSS hasta construir grandes aplicaciones a partir de componentes? Magnífico.

1
1580Puntos
2 años

Mas que eso. Desde su concepto hasta su etapa final. Estableciendo no solo el estilo, sino el comportamiento de cada componente y el porqué se comporta de esa manera otorgando consistencia, estabalidad y escalabilidad a cada proyecto en el que lo implementes.

1
13099Puntos

Muchas Gracias por tu aporte ha sido de gran ayuda

1
25022Puntos

Buenisimo el artículo

1
13540Puntos

Hermosa lectura, muchas gracias por compartirla.

1
8651Puntos

Buen contenido, definitivamente implementar Atomic Design en cada uno de nuestros proyectos nos traerá muchos beneficios y tener una idea clara de lo que queremos.

1
23292Puntos

Muchas Gracias Uriel

1
604Puntos

muy interesante

1
38286Puntos

Muy buen contenido. Me ayudó a terminar de entender el símil entre programación orientada a objetos y los componentes en el diseño de interfaces.

0
40233Puntos

Muy buen contenido 😄