{"id":27688,"date":"2021-05-12T06:38:01","date_gmt":"2021-05-12T06:38:01","guid":{"rendered":"https:\/\/www.conectasoftware.com\/?p=27688"},"modified":"2024-02-04T17:26:25","modified_gmt":"2024-02-04T17:26:25","slug":"que-es-el-sistema-atomic-design-y-cuales-son-sus-beneficios","status":"publish","type":"post","link":"https:\/\/www.conectasoftware.com\/magazine\/que-es-el-sistema-atomic-design-y-cuales-son-sus-beneficios\/","title":{"rendered":"\u00bfQu\u00e9 es el sistema Atomic Design y cu\u00e1les son sus beneficios?"},"content":{"rendered":"

El concepto de Atomic Design<\/strong> se emplea por primera vez en el a\u00f1o 2013, de la mano de Brad Frost,<\/strong> autor del libro Atomic Design<\/i>. Este sistema de trabajo basa su funcionamiento en la creaci\u00f3n de elementos modulares sencillos que permiten crear estructuras de informaci\u00f3n<\/strong> mucho m\u00e1s complejas.<\/p>\n

\u00bfQu\u00e9 es Atomic Design?<\/h2>\n

Brad Frost apuesta por una perspectiva del dise\u00f1o<\/b> que pivote desde elementos particulares hacia proyectos de car\u00e1cter general.\u00a0Por lo tanto, en cada flujo de trabajo deben quedar presentes un universo de \u00e1tomos, mol\u00e9culas, organismo y sistemas que permiten cubrir con nuestras necesidades.
\n\"conecta<\/a>
\nAtomic Design<\/strong> se utiliza para construir sistemas de dise\u00f1o efectivos y orientados hacia un sitio web o un destino digital. Para ello, se inspira en los principios de la Teor\u00eda General de Sistemas. <\/b>Esta teor\u00eda considera los sistemas vivos como un conjunto de sistemas abiertos.<\/p>\n

Los componentes de Atomic Design<\/h2>\n

\u00c1tomos<\/h3>\n

Los \u00e1tomos constituyen la identidad b\u00e1sica del sistema Atomic Design. <\/b>Son los bloques elementales sobre los que se fundamentan estos sistemas. Su principal caracter\u00edstica es que no pueden ser divididos en otras unidades.
\nEn un sitio web, <\/b>los \u00e1tomos son, por ejemplo, el titular de una p\u00e1gina o la imagen principal de un art\u00edculo. Son los elementos m\u00e1s simples pero, al mismo tiempo, imprescindibles.<\/p>\n

Mol\u00e9culas<\/h3>\n

Tras los \u00e1tomos,<\/strong> llegan las mol\u00e9culas. \u00c9stas adquieren nuevas funcionalidades y caracter\u00edsticas a partir de la uni\u00f3n de diferentes \u00e1tomos. <\/b>En conjunto, se encargan de formar componentes de la interfaz de una web que se caracteriza por su simplicidad. Pero con una estructura algo m\u00e1s compleja que en el caso anterior.
\nUn men\u00fa en una categor\u00eda de productos<\/b> o una tabla son solamente algunos de los elementos que pueden adquirir esta perspectiva. La reutilizaci\u00f3n<\/b> de mol\u00e9culas nos permite eliminar la complejidad de nuestro sitio web. Asegurando una coherencia a nivel tanto gr\u00e1fico como estructural.<\/p>\n

Organismos<\/h3>\n

Los organismos son conjuntos de mol\u00e9culas <\/b>que nos permiten crear elementos mucho m\u00e1s complejos de los alcanzados hasta este momento. Un logotipo<\/b> o la selecci\u00f3n de un idioma son, por ejemplo, algunos de los organismos m\u00e1s habituales.\u00a0<\/b>
\nLos organismos suelen reutilizarse en forma de cabeceras o de footers. <\/b>No obstante, es importante conocer que existen una gran cantidad de aplicaciones que permiten llevar a cabo su ejecuci\u00f3n.<\/p>\n

Las plantillas<\/h3>\n

Las plantillas permiten organizar los organismos,<\/b> focalizando su utilidad en la estructura del contenido, no en el contenido final de la p\u00e1gina. Las plantillas definen las propiedades de todos los componentes que las integran.<\/b> Es decir, se centran en atributos como el tama\u00f1o del texto, la alineaci\u00f3n del mismo o el estilo, entre otros muchos elementos.
\nSu aplicaci\u00f3n en el producto digital asume la forma de la Home<\/i>, la p\u00e1gina de Contacto<\/i> o el Sobre nosotros,<\/i> entre muchos otros elementos.<\/p>\n

Sistema<\/h3>\n

El sistema<\/strong> se encuentra conformado por un conjunto de organismos. Un conjunto de p\u00e1ginas de un sitio web conforman la web completa, por ejemplo.
\nMediante el t\u00e9rmino de sistema se hace referencia al resultado final<\/strong> de una p\u00e1gina web, una aplicaci\u00f3n m\u00f3vil o un software, entre otros productos.<\/p>\n

Construir y crear interfaces al detalle<\/h2>\n

Inspirada en los principios de la qu\u00edmica, esta metodolog\u00eda nos permite construir interfaces de manera detallada, perfectamente planificadas. De este modo, se facilita tanto el proceso de actualizaci\u00f3n como el de ejecuci\u00f3n<\/strong> de cualquier proyecto web que se desee llevar a cabo.\u00a0Una integraci\u00f3n de la metodolog\u00eda Atomic Design<\/strong> nos permite, adem\u00e1s, optimizar la gesti\u00f3n de sprints entre dise\u00f1ador, programador y cliente.
\nEl Atomic Design<\/strong> ayuda, adem\u00e1s, a definir un sistema que en un futuro podr\u00e1 asumir nuevas funcionalidades gracias a que los \u00e1tomos ya estar\u00e1n creados. Asegurando la m\u00e1xima escalabilidad para cada proyecto que llevemos a cabo.<\/p>\n","protected":false},"excerpt":{"rendered":"

Desde elementos particulares hacia proyectos de car\u00e1cter general… \u00bfConoces c\u00f3mo integrar el Atomic Design en tu modelo de negocio.<\/p>\n","protected":false},"author":1,"featured_media":27716,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[24],"tags":[],"class_list":{"0":"post-27688","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-marketing-digital"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/27688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/comments?post=27688"}],"version-history":[{"count":3,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/27688\/revisions"}],"predecessor-version":[{"id":40461,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/27688\/revisions\/40461"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/27716"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=27688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/categories?post=27688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/tags?post=27688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}