{"id":111,"date":"2019-03-29T16:34:18","date_gmt":"2019-03-29T22:34:18","guid":{"rendered":"http:\/\/tesseractspace.com\/blog\/?p=111"},"modified":"2022-09-21T11:55:32","modified_gmt":"2022-09-21T17:55:32","slug":"sistemas-de-diseno-con-atomic-design","status":"publish","type":"post","link":"https:\/\/www.tesseractspace.com\/blog\/sistemas-de-diseno-con-atomic-design\/","title":{"rendered":"Sistemas de dise\u00f1o con Atomic Design"},"content":{"rendered":"\n

El t\u00e9rmino \u00abp\u00e1gina web\u00bb es una reminiscencia del pasado. Es necesario de ir m\u00e1s all\u00e1 de dise\u00f1ar solo \u00abp\u00e1ginas\u00bb para comenzar a crear sistemas de dise\u00f1o. Atomic Design provee un m\u00e9todo y las herramientas para lograrlo.<\/h4>\n\n\n\n

La Web ha evolucionado y ya no est\u00e1 confinada a un navegador web en una PC, sino que ha dado el salto a una enorme cantidad de dispositivos muy diversos, desde dispositivos m\u00f3viles hasta televisiones inteligentes, todos con diferentes capacidades, tama\u00f1os, resoluciones de pantalla, formatos y m\u00e9todos de interacci\u00f3n.<\/p>\n\n\n

\n
\"\"
Pruebas de responsividad en varios dispositivos m\u00f3viles.<\/figcaption><\/figure>\n<\/div>\n\n\n

Con una diversidad tecnol\u00f3gica tan grande, los dise\u00f1adores y desarrolladores que crean, dise\u00f1an y mantienen sitios y apps <\/em>en la web pueden beneficiarse al utilizar m\u00e9todos y mejores pr\u00e1cticas que ayuden a mantener la consistencia <\/strong>y la escalabilidad <\/strong>de sus proyectos, utilizando sistemas de dise\u00f1o<\/a>. <\/p>\n\n\n\n

Aunque se recomienda nunca comenzar desde cero y un dise\u00f1ador puede utilizar sistemas de dise\u00f1o como Material Design<\/a>, las Human Interface Guidelines de Apple<\/a> o Fluent Design System<\/a>, en ocasiones es necesario crear un sistema de dise\u00f1o propio. Para hacerlo con un enfoque metodol\u00f3gico se utiliza la t\u00e9cnica de Atomic Design<\/strong>.<\/p>\n\n\n\n

La metodolog\u00eda de Atomic Design<\/h3>\n\n\n\n

Dise\u00f1o At\u00f3mico<\/strong> (Atomic Design<\/em>)<\/a> es una metodolog\u00eda de dise\u00f1o creada por Brad Frost<\/a> <\/strong>enfocada en la reutilizaci\u00f3n acumulativa de elementos modulares sencillos para crear estructuras de informaci\u00f3n m\u00e1s complejas.<\/p>\n\n\n\n

El Atomic Design<\/strong> no se trata de dise\u00f1ar una sola instancia de una p\u00e1gina web a la vez, sino que vistos desde un punto de vista m\u00e1s amplio, se usa para crear la base de sistemas m\u00e1s grandes. Atomic Design<\/strong> ayuda a que el dise\u00f1o de un producto digital pueda adaptarse con facilidad a diferentes dispositivos o plataformas, y es compatible con procesos de dise\u00f1o centrado en el usuario, ya que se puede implementar desde las etapas tempranas de dise\u00f1o usando sketches<\/em> y prototipos.<\/p>\n\n\n\n

La metodolog\u00eda de Atomic Design<\/strong> se compone de cinco etapas para crear interfaces y sistemas:<\/p>\n\n\n

\n
\"Atomic
Atomic Design. Cr\u00e9dito: Brad Frost<\/a> <\/figcaption><\/figure>\n<\/div>\n\n\n

1. \u00c1tomos<\/h4>\n\n\n\n

Los \u00e1tomos<\/strong> son los elementos b\u00e1sicos que se utilizan en la construcci\u00f3n de interfaces digitales que no pueden ser reducidos en componentes m\u00e1s simples sin perder su funcionalidad. Los \u00e1tomos para una p\u00e1gina web incluyen las etiquetas b\u00e1sicas de HTML como p\u00e1rrafos, campos de texto, botones y  etiquetas, as\u00ed como elementos b\u00e1sicos de estilo como colores y tipograf\u00edas.<\/p>\n\n\n

\n
\"\u00c1tomos
\u00c1tomos en HTML<\/figcaption><\/figure>\n<\/div>\n\n\n

La tabla peri\u00f3dica de elementos HTML de Josh Duck<\/strong> ilustra como los sitios web, web apps, <\/em>mensajes de correo, intranets y cualquier cosa que se visualice con un navegador web est\u00e1n compuestos de los mismos elementos:<\/p>\n\n\n

\n
\"\"<\/a>
Tabla peri\u00f3dica de elementos HTML. Cr\u00e9dito: MadeByMike<\/a> <\/figcaption><\/figure>\n<\/div>\n\n\n

2. Mol\u00e9culas<\/h4>\n\n\n\n

Las mol\u00e9culas<\/strong> son grupos de elementos visuales (o \u00e1tomos)que funcionan juntos como una unidad y que tienen propiedades y funcionalidades que los \u00e1tomos individuales no tienen. <\/p>\n\n\n\n

Un ejemplo ser\u00eda juntar un campo de texto, una etiqueta de formulario y un bot\u00f3n para crear la mol\u00e9cula de un formulario de b\u00fasqueda<\/em>.<\/p>\n\n\n

\n
\"Mol\u00e9cula
Mol\u00e9cula de b\u00fasqueda. Cr\u00e9dito: Brad Frost<\/a> <\/figcaption><\/figure>\n<\/div>\n\n\n

Cuando se combinan, sus \u00e1tomos tienen un prop\u00f3sito nuevo: la etiqueta define la entrada del campo, y el bot\u00f3n env\u00eda la informaci\u00f3n del formulario para ejecutar una b\u00fasqueda. El resultado es un componente simple y reutilizable que puede ser incluirse en cualquier sistema que necesite la funcionalidad de b\u00fasqueda.<\/p>\n\n\n\n

3. Organismos<\/h4>\n\n\n\n

Los organismos<\/strong> son componentes m\u00e1s complejos compuestos por combinaciones de \u00e1tomos y mol\u00e9culas. Los organismos se integran para crear las secciones y los elementos funcionales de la interface de una p\u00e1gina o app<\/em>.<\/p>\n\n\n\n

Si a nuestra mol\u00e9cula de b\u00fasqueda<\/em> le agregamos algunos elementos m\u00e1s, podremos obtener el organismo del encabezado<\/em>, un elemento com\u00fan en muchas p\u00e1ginas web.<\/p>\n\n\n

\n
\"Organismo
Organismo de Encabezado. Cr\u00e9dito: Brad Frost<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

4. Plantillas<\/h4>\n\n\n\n

Las plantillas<\/strong> son objetos a nivel de una p\u00e1gina (en este punto abandonamos la met\u00e1fora de los elementos qu\u00edmicos y regresamos a elementos editoriales) que utilizan componentes creados por combinaciones de \u00e1tomos, mol\u00e9culas u organismos en una distribuci\u00f3n que hace tangible la estructura general de contenido.<\/p>\n\n\n

\n
\"Plantilla
Plantilla con contenedores para contenido. Cr\u00e9dito: Brad Frost<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

Las plantillas<\/strong> organizan los componentes b\u00e1sicos y les agregan contexto para que la p\u00e1gina funcione correctamente. Una caracter\u00edstica importante de las plantillas es que se enfocan en la estructura del contenido en lugar del contenido final de la p\u00e1gina. <\/p>\n\n\n\n

Los sistemas din\u00e1micos deben poder adaptarse a contenido din\u00e1mico que cambia todo el tiempo y las plantillas proveen los mecanismos para definir las propiedades de los componentes que las integran, como el tama\u00f1o y alineaci\u00f3n de sus im\u00e1genes o la longitud y estilo de sus encabezados y p\u00e1rrafos.<\/p>\n\n\n\n

5. P\u00e1ginas<\/h4>\n\n\n\n

Las p\u00e1ginas<\/strong> son instancias espec\u00edficas de las plantillas que utilizan contenido real. Si tomamos la plantilla de la capa anterior y la llenamos contenido real en sus contenedores podremos ver el resultado final del proceso.<\/p>\n\n\n

\n
\"P\u00e1gina
P\u00e1gina con contenido final. Cr\u00e9dito: Brad Frost<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

Ventajas de utilizar Atomic Design<\/h3>\n\n\n\n

Una de las principales ventajas de utilizar esta metodolog\u00eda es que est\u00e1 enfocada en la modularidad<\/strong>, lo que permite crear elementos simples que pueden reutilizarse constantemente en equipos de dise\u00f1o y desarrollo de cualquier tama\u00f1o sin perder la consistencia del dise\u00f1o final.<\/p>\n\n\n\n

La modularidad enAtomic Design<\/strong> tambi\u00e9n habilita la transversalidad<\/em> entre los componentes abstractos y concretos del dise\u00f1o, lo que permite generar diferentes patrones de interfaz reutilizando los mismos elementos al reorganizar su arquitectura y crear nuevos contextos para ellos.<\/p>\n\n\n

\n
\"Modularidad
Modularidad y reutilizaci\u00f3n de elementos at\u00f3micos. Cr\u00e9dito: Brad Frost<\/a> <\/figcaption><\/figure>\n<\/div>\n\n\n

Atomic Design<\/strong> es un acercamiento para crear un sistemas de dise\u00f1o<\/a><\/strong> (<\/a>design systems<\/a><\/em>)<\/a> para crear prototipos y c\u00f3digo m\u00e1s eficiente y que cualquier persona en el equipo de producci\u00f3n puede entender y utilizar para procesos de dise\u00f1o y desarrollo m\u00e1s r\u00e1pidos y productivos. <\/p>\n\n\n\n

Atomic Design<\/strong> no es un proceso lineal, sino un modelo de pensamiento sobre el que se puede iterar para crear sistemas complejos partiendo de elementos sencillos.<\/p>\n\n\n\n

Equipos de producto como los de Airbnb<\/a><\/strong> se han beneficiado al implementar <\/a>Atomic Design<\/a><\/strong> en sus procesos de dise\u00f1o y desarrollo<\/a>, integr\u00e1ndolo a los procesos que ya usaban.<\/p>\n\n\n\n

\n
\"\"
\u00c1tomos en AirBnb. Cr\u00e9dito: Karri Saarinen<\/a> <\/figcaption><\/figure>\n\n\n\n
\"\"
Mol\u00e9culas en AirBnb. Cr\u00e9dito: Karri Saarinen<\/a><\/figcaption><\/figure>\n\n\n\n
\"\"
Mol\u00e9culas y componentes en AirBnb. Cr\u00e9dito: Karri Saarinen<\/a><\/figcaption><\/figure>\n\n\n\n
\"\"
Organismos y plantillas en AirBnb. Cr\u00e9dito: Karri Saarinen<\/a><\/figcaption><\/figure>\n\n\n\n
\"\"
Las plantillas son responsivas desde el principio. Cr\u00e9dito: Karri Saarinen<\/a><\/figcaption><\/figure>\n\n\n\n
\"\"
Las p\u00e1ginas finales en AirBnb. Cr\u00e9dito: Karri Saarinen<\/a><\/figcaption><\/figure>\n<\/figure>\n\n\n\n

PatternLab para sistemas de dise\u00f1o<\/h3>\n\n\n\n

Brad Frost<\/a><\/strong> y Dave Olsen<\/a><\/strong> crearon Pattern Lab<\/a><\/strong>, un gestor de sistemas de dise\u00f1o basados en los principios de Atomic Design<\/strong>. Este gestor es opensource<\/em> y tiene opciones para ajustar el tama\u00f1o de las p\u00e1ginas y de agregar comentarios a las secciones del sitio y a los bloques de construcci\u00f3n a nivel de c\u00f3digo.<\/p>\n\n\n

\n
\"Pattern<\/a>
Pattern Lab<\/a>, un gestor de elementos para Atomic Design<\/figcaption><\/figure>\n<\/div>\n\n\n

La versi\u00f3n original de Pattern Lab<\/strong> est\u00e1 escrita en PHP<\/strong>, pero ya hay dos versiones para NodeJS<\/strong>: una para Gulp<\/strong><\/a> y otra para Grunt<\/strong><\/a>. Es recomendable explorar el demo en PatternLab<\/strong><\/a> <\/strong>para entender mejor c\u00f3mo funciona una implementaci\u00f3n real de Atomic Design.<\/strong><\/p>\n\n\n

\n
\"Atomic
Atomic Design con Patternlab<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

La diversidad en los dispositivos con los que los usuarios navegan la web o consumen informaci\u00f3n no se detendr\u00e1, sino que seguir\u00e1 creciendo de manera acelerada, y posiblemente los modelos de dise\u00f1o y desarrollo tradicionales no soportar\u00e1n esa diversidad sin adaptarse a formas m\u00e1s \u00e1giles de trabajo. Atomic Design<\/strong> es una metodolog\u00eda que puede ayudarnos a crear sistemas de dise\u00f1o para construir p\u00e1ginas y apps <\/em>que se puedan adaptar a cualquier plataforma.<\/p>\n","protected":false},"excerpt":{"rendered":"

Atomic Design es una metodolog\u00eda de dise\u00f1o enfocada en la reutilizaci\u00f3n de elementos modulares sencillos para crear sistemas de dise\u00f1o m\u00e1s complejos.<\/p>\n","protected":false},"author":1,"featured_media":112,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[69,1,70],"tags":[44,46,49,48,45,26],"class_list":["post-111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-experiencia-de-usuario","category-tecnologia","tag-atomic-design","tag-brad-frost","tag-colaboracion","tag-consistencia","tag-design-systems","tag-diseno","entry"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/atomic-design-process.png?fit=1024%2C768&ssl=1","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/comments?post=111"}],"version-history":[{"count":9,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":926,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/111\/revisions\/926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media\/112"}],"wp:attachment":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/categories?post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/tags?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}