{"id":12948,"date":"2020-02-26T12:12:16","date_gmt":"2020-02-26T10:12:16","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=12948"},"modified":"2023-11-28T11:12:55","modified_gmt":"2023-11-28T10:12:55","slug":"como-utilizar-la-metodologia-del-diseno-atomico-al-crear-una-web","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/como-utilizar-la-metodologia-del-diseno-atomico-al-crear-una-web\/","title":{"rendered":"C\u00f3mo utilizar la metodolog\u00eda del dise\u00f1o at\u00f3mico al crear una web"},"content":{"rendered":"

En el \u00e1rea de Design & User Experience nos gusta trabajar con la metodolog\u00eda del dise\u00f1o at\u00f3mico, que es un sistema de trabajo que se basa en la creaci\u00f3n de elementos modulares sencillos para crear estructuras de dise\u00f1o mucho m\u00e1s complejas<\/strong>, una teor\u00eda ideada por el dise\u00f1ador Brad Frost<\/a>. En este post te queremos contar c\u00f3mo esto ha mejorado nuestro flujo de trabajo al momento de construir un nuevo producto digital.<\/span><\/p>\n

A Frost se le ocurri\u00f3 utilizar el modelo at\u00f3mico para transmitir la idea de que, tanto en el dise\u00f1o como en el desarrollo, se debe trabajar desde los elementos particulares hacia los generales, creando as\u00ed, todo un universo de \u00e1tomos, mol\u00e9culas, organismos y sistemas.<\/p>\n

A medida que avanza el dise\u00f1o y el desarrollo en entornos digitales, se palpa la necesidad de crear componentes que sean \u00fatiles para desarrollar sistemas de dise\u00f1o de forma inteligente y productiva.<\/span><\/p>\n

Es por ello que Frost, creador de esta metodolog\u00eda hizo una peque\u00f1a b\u00fasqueda en la qu\u00edmica, donde parte de que toda materia (tanto s\u00f3lida, liquida, gaseosa, simple, compleja, etc) est\u00e1 compuesta de \u00e1tomos. Estos \u00e1tomos se unen para formar mol\u00e9culas, que a su vez se unen para formar sistemas m\u00e1s complejos y as\u00ed sucesivamente.<\/span><\/p>\n

 <\/p>\n

\u00c1tomos<\/h2>\n

Un \u00e1tomo es aquel elemento que por s\u00ed solo no tiene sentido<\/strong>. Un ejemplo claro de \u00e1tomos puede ser un t\u00edtulo, un texto, un icono o un color. Es el elemento m\u00e1s peque\u00f1o que necesita estar acompa\u00f1ado por otros \u00e1tomos para que tenga coherencia.<\/strong> <\/span><\/p>\n

 <\/p>\n

\"atomo\"<\/a><\/p>\n

Mol\u00e9culas<\/h2>\n

Como en qu\u00edmica, las mol\u00e9culas surgen de la uni\u00f3n de los \u00e1tomos<\/strong>. Una mol\u00e9cula es aquel elemento que puede utilizarse de forma aut\u00f3noma, debido a que ya ofrece informaci\u00f3n suficiente y puede funcionar como una unidad. Si llevamos el ejemplo a una interfaz, una mol\u00e9cula podr\u00eda representar un header, un footer o un post.<\/strong><\/span><\/p>\n

 <\/p>\n

\"mol\u00e9cula\"<\/a><\/p>\n

Organismos<\/h2>\n

Los \u201corganismos de la interfaz\u201d son formados por el conjunto de mol\u00e9culas y \u00e1tomos, unidos para formar una secci\u00f3n m\u00e1s compleja<\/strong>. Estos organismos ya ofrecen una experiencia completa para el usuario.<\/strong><\/span><\/p>\n

 <\/p>\n

\"organismos\"<\/a><\/p>\n

Plantilla<\/h2>\n

Las plantillas organizan los organismos y se enfocan en la estructura del contenido en lugar del contenido final de la p\u00e1gina<\/strong>. Si lo traspasamos a un producto digital; como por ejemplo una web, el organismo comprender\u00eda las p\u00e1ginas que la conforman: la \u201cHome\u201d, la p\u00e1gina de \u201cContacto\u201d, etc. Es en este punto donde la interfaz comienza a tener sentido propio<\/strong>.<\/span><\/p>\n

 <\/p>\n

\"plantilla\"<\/a><\/p>\n

Sistema<\/h2>\n

El sistema se conforma con el conjunto de organismos<\/strong>. Por ejemplo, un conjunto de p\u00e1ginas formar\u00eda la web. El conjunto de pantallas y acciones construye una app. El sistema, por lo tanto, ser\u00eda la suma del todo lo anterior. Es el resultado final; la web, la aplicaci\u00f3n, el software o cualquier producto digital que estemos desarrollando.<\/strong><\/span><\/p>\n

 <\/p>\n

\"sistemas\"<\/a><\/p>\n

 <\/p>\n

Dise\u00f1ando cada interfaz con este sistema, nos aseguramos que sea consistente todo el tiempo, es decir, que un bot\u00f3n 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\u00f3n.<\/span><\/p>\n

Un sistema de dise\u00f1o es igual de importante y muy parecido a la documentaci\u00f3n de cualquier framework, librer\u00eda o c\u00f3digo. Va a ser la respuesta a muchas preguntas comunes entre el equipo.<\/span><\/p>\n

 <\/p>\n

Desde Hiberus Digital<\/a> aseguramos el resultado de tu\u00a0producto o servicio digital, aplicando metodolog\u00edas \u00e1giles y Design thinking <\/strong>que permitan definir el roadmap del proyecto. Nuestro equipo\u00a0analizar\u00e1\u00a0tus necesidades y te asesorar\u00e1<\/strong>\u00a0en el desarrollo de tu proyecto digital. Ponte en contacto con nosotros y estaremos encantados de ayudarte.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

En el \u00e1rea de Design & User Experience nos gusta trabajar con la metodolog\u00eda del dise\u00f1o at\u00f3mico, que es un sistema de…<\/p>\n","protected":false},"author":167,"featured_media":12954,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3,230],"tags":[31,143,91],"class_list":{"0":"post-12948","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"category-ux-analitica","9":"tag-diseno","10":"tag-diseno-web","11":"tag-usabilidad"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/12948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/167"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=12948"}],"version-history":[{"count":1,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/12948\/revisions"}],"predecessor-version":[{"id":15254,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/12948\/revisions\/15254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/12954"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=12948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=12948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=12948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}