{"id":330,"date":"2024-04-18T15:09:55","date_gmt":"2024-04-18T15:09:55","guid":{"rendered":"http:\/\/a2laboratoriodeideas.com\/renova2\/?p=330"},"modified":"2024-04-18T15:10:36","modified_gmt":"2024-04-18T15:10:36","slug":"diseno-atomico-en-el-desarrollo-de-interfaces","status":"publish","type":"post","link":"https:\/\/a2laboratoriodeideas.com\/renova2\/diseno-atomico-en-el-desarrollo-de-interfaces\/","title":{"rendered":"Dise\u00f1o At\u00f3mico en el desarrollo de interfaces"},"content":{"rendered":"\n

En el verano del 2013, el estadounidense Brad Frost<\/a> present\u00f3 su nuevo enfoque de dise\u00f1o – #Dise\u00f1o<\/strong> #At\u00f3mico<\/strong> -, que se basa en un enfoque cient\u00edfico del dise\u00f1o. Esto quiere decir que, \u201cun buen #dise\u00f1o<\/strong> y #desarrollo<\/strong> web en todos sus elementos individuales, debe tener una estructura consistente y modular\u201d.<\/p>\n\n\n\n

Y lo que me parece m\u00e1s interesante lo dice el propio Brad Frost cuando define el Dise\u00f1o At\u00f3mico;<\/p>\n\n\n\n

\n

\u00abnos permite crear consistencia en el dise\u00f1o de #productos<\/strong> #digitales<\/strong>, as\u00ed como escalar f\u00e1cilmente nuestros #proyectos<\/strong>.\u00bb<\/p>\n<\/blockquote>\n\n\n\n

Esta #metodolog\u00eda<\/strong> se divide en cinco etapas:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/h2>\n\n\n\n

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

Son la forma m\u00e1s simple en que podemos desglosar los diferentes elementos de nuestra interfaz.<\/p>\n\n\n\n

Por ejemplo: T\u00edtulos, botones, tipograf\u00edas, colores, iconos, etc.<\/em><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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

Como en qu\u00edmica, las mol\u00e9culas son una combinaci\u00f3n de varios \u00e1tomos, y con ellos hacemos los primeros elementos complejos dentro de nuestra #interfaz<\/strong>.<\/p>\n\n\n\n

 Por poner un ejemplo sencillo que todos visualizaremos. En el buscador de <\/em>Google<\/em><\/a> la uni\u00f3n que forman el campo de b\u00fasqueda con con el bot\u00f3n buscar se le considerar\u00eda una mol\u00e9cula formada por dos \u00e1tomos.<\/em><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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

Son un conjunto de mol\u00e9culas y\/o \u00e1tomos que forman elementos visuales sencillos y que a menudo representan componentes independientes y utilizables.<\/p>\n\n\n\n

Por ejemplo: Un buscador con su titulo sus campos y sus botones o una cabecera con el logotipo, el men\u00fa y el avatar.<\/em><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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

Con las plantillas, la p\u00e1gina empieza a cobrar sentido. Formando grupos de organismos que unidos pueden formar una p\u00e1gina sin ser en realidad un \u2013 entregable de alta fidelidad \u2013. Ser\u00edan gu\u00edas visuales que nos hacen entender la organizaci\u00f3n b\u00e1sica de los componentes dentro de una interfaz.<\/p>\n\n\n\n

5. P\u00e1ginas<\/strong><\/h3>\n\n\n\n

La \u00faltima etapa de la metodolog\u00eda de dise\u00f1o at\u00f3mico.<\/p>\n\n\n\n

Son las implementaciones finales que pueden ver los usuarios, en esta etapa nuestros sistemas se ponen a prueba. Y si alg\u00fan componente falla en los test, la metodolog\u00eda que hemos seguido nos permite de una manera m\u00e1s sencilla modificar cualquier organismo, mol\u00e9cula o \u00e1tomo que requiera de su #optimizaci\u00f3n<\/strong>.<\/p>\n\n\n\n

Una vez que comprobamos que todo est\u00e1 correcto, podemos generar la interfaz definitiva con texto, im\u00e1genes y diferentes de elementos con los que interactuar\u00e1 el #usuario<\/strong>.<\/p>\n\n\n\n

Para cualquier duda que te surja sobre Dise\u00f1o At\u00f3mico, puedes informarte con mayor detalle en la propia web de Brad Frost donde se explica todo con mayor detalle:<\/p>\n\n\n\n

\u2192 https:\/\/atomicdesign.bradfrost.com\/chapter-2\/<\/a><\/p>\n\n\n\n

Y aunque el art\u00edculo de hoy trata sobre Dise\u00f1o At\u00f3mico, hay que decir la verdad, la rueda ya estaba inventada, os invito a leer a: Jesse James Garrett o en DCU<\/p>\n","protected":false},"excerpt":{"rendered":"

En el verano del 2013, el estadounidense Brad Frost present\u00f3 su nuevo enfoque de dise\u00f1o – #Dise\u00f1o #At\u00f3mico -, que se basa en un enfoque cient\u00edfico del dise\u00f1o. Esto quiere decir que, \u201cun buen #dise\u00f1o y #desarrollo web en todos sus elementos individuales, debe tener una estructura consistente y modular\u201d. Y lo que me parece m\u00e1s interesante lo dice el propio Brad Frost cuando […]<\/p>\n","protected":false},"author":3,"featured_media":335,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[7],"tags":[14,15,16],"class_list":["post-330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-experiencia-de-usuario","tag-disenoatomico","tag-interfaces","tag-wireframe"],"_links":{"self":[{"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/posts\/330"}],"collection":[{"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/comments?post=330"}],"version-history":[{"count":1,"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/posts\/330\/revisions"}],"predecessor-version":[{"id":336,"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/posts\/330\/revisions\/336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/media\/335"}],"wp:attachment":[{"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/media?parent=330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/categories?post=330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a2laboratoriodeideas.com\/renova2\/wp-json\/wp\/v2\/tags?post=330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}