fcbk
Conéctate con TwitterConéctate con Facebook
14

¿Por qué usar Atomic Design?

13263Puntos

hace 6 meses

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

13263Puntos

hace 6 meses

Todas sus entradas
0
1840Puntos
2 meses

interesante aporte @ThespianArtist gracias por compartir