<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head><meta name="viewport" content="width=device-width,initial-scale=1.0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Concreta Capacitación</title>
</head>
<body bgcolor="#FFFFFF" style="cursor: auto;margin: 0 auto;padding: 0;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height: 1.65; "><!-- HEADER --><!--header-->
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="left" style="border-bottom: solid #FFA73B 1px;" width="600"><img alt="Concreta Capacitación" height="64" src="http://concreta.uy/image/pepe.jpg?id=9648ef39d39c169b8e4891f28dddd540" /><a href="http://concreta.uy/cursos-en-linea/?utm_source=elastic&utm_medium=mailing&utm_campaign=PSUX20210120&utm_content=Diseño Atómico (Glosario de UX)" style="color: #2BA6CB;"> </a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center" style="padding:10px;" width="600">
<p>Un curso para introducirte en el diseño UX profesional<br />
<strong><a href="https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=emm171&utm_medium=mailing&utm_campaign=BuscarLectores&utm_content=Diseño Atómico (Glosario de UX)">Taller Intensivo de Diseño de la Interacción</a></strong><br />
Próximo comienzo: <strong>12 de octubre</strong> - <span style="font-size: 16px; margin-top: 24px"><a href="https://concreta.uy/contacto/">Hablá con un docente</a></span></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<!--contendio-->
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 0.2;"> </p>
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="left" width="600"><div class="newsletters_content"><br />
<h1 class="Landing-title" style="font-size: 36px;margin-top: .25rem;margin-bottom: .25em;line-height: 1.15;letter-spacing: -1px;font-weight: 500;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;text-transform: none;text-align: center">Diseño Atómico (Glosario de UX)</h1>
<p class="Landing-description" style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 1.5rem;line-height: 1.5;font-weight: 400;color: #333;text-align: center">El diseño atómico es una metodología que propone construir la interfaz en base a un pequeño grupo de componentes atómicos y un conjunto de reglas para agruparlos en componentes cada vez más complejos.</p>
<p><a href="https://concreta.uy/biblioteca/diseno-atomico/?utm_source=elastic&utm_medium=mailing&utm_campaign=TIDI20210907&utm_content=Diseño Atómico (Glosario de UX)"><img src="https://concreta.uy/wp-content/uploads/diseño-atómico-por-Brad-Frost600.png" alt="diseño atómico por Brad Frost" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></a></p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Tanto en la naturaleza como en las creaciones humanas los infinitos sistemas existentes, independientemente de su complejidad, están formados de pequeñas piezas atómicas. Desde la materia misma, formada literalmente por átomos y los organismos vivos formados por células, hasta el lenguaje formado por letras de un alfabeto y las composiciones musicales formadas por un puñado de notas y escalas.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">El diseño UX no es la excepción. A diferencia de lo que se podría presuponer, una interfaz concebida en dos pasos, primero definiendo un pequeño grupo de componentes atómicos y un conjunto de reglas de agrupación, seguido por una segunda instancia en la que en base a estas reglas se definen componentes cada vez más complejos, produce interfaces más potentes y flexibles que el diseño de cada página del sitio por separado en base a requerimientos y plantillas. Y lo hace a un costo menor, con mayor estabilidad en el tiempo y con un resultado más usable y accesible.</p>
<p class="destaque" style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">A diferencia de lo que se podría presuponer, una interfaz concebida en dos pasos produce interfaces más potentes y flexibles</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Si bien la idea parece incontestable y los beneficios justifican largamente su adopción, esto no resulta evidente en todos los casos, sobre todo al comienzo de un proyecto: los dos pasos en la construcción pueden llegar a ser más trabajosos, no tanto por el tiempo sino por la necesidad de alinear a la organización que diseña e implementa el producto basado en software detrás de la idea. Sumado a eso, como la mayoría de los beneficios de la Usabilidad, el resultado es impactante a mediano plazo, pero no siempre de inmediato, lo que redunda en poco apoyo de otras áreas de la organización acuciadas por los cronogramas y la necesidad de obtener logros ya.</p>
<h2 style="font-size: 30px;margin-top: 1.625em;margin-bottom: .25em;line-height: 1.25;font-weight: 500;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif">Consistencia interactiva</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Es muy importante tener en cuenta al aplicar la metodología de diseño atómico que la consistencia a nivel de interacción es aún más relevante que la consistencia visual o gráfica. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Desde los átomos se debe definir cómo se comportan en la interfaz los elementos. Qué sucede con ellos cuando se clickean, arrastran, editan, deshabilitan, copian, pegan o cualquier otra acción que tenga sentido en cada caso. Al agruparlos estos átomos en moléculas un escalón más arriba en la complejidad, es imprescindible definir el comportamiento interactivo del nuevo elemento: cómo se relacionan entre ellos los átomos que forman la molécula. Qué sucede con un campo cuando hago click en su etiqueta. </p>
<p class="destaque" style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Allí donde se despliegue un elemento, siempre tendrá las mismas propiedades interactivas, independientemente del tamaño que ocupe en la pantalla.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Y este proceso sigue hasta la construcción de plantillas y páginas completas, generando una interfaz sólida a partir de la consistencia: allí donde se despliegue un elemento, siempre tendrá las mismas propiedades interactivas, independientemente del tamaño que ocupe en la pantalla.</p>
<figure class="wp-block-image size-large"><img src="https://concreta.uy/wp-content/uploads/los-componentes-de-la-interfaz-deben-tener-un-comportamiento-homogeneo600.png" alt="los componentes de la interfaz deben tener un comportamiento homogeneo" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></p>
<p class="has-small-font-size has-text-align-center" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;text-align: center">Los elementos de la interfaz deben tener definido cómo utilizan el espacio en la pantalla y comportarse siempre igual independientemente del tamaño que se les asigne.</p>
</figure>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Un elemento relevante es la definición de cómo los organismos y otros elementos más complejos utilizan el espacio de la pantalla. Deben tener especificado cómo se representan en espacios de distinto tamaño, y cómo brindan desde ese espacio, sobre todo cuando es pequeño, acceso al conjunto de la funcionalidad para mantener la consistencia.</p>
<p></p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">La idea de <a href="https://bradfrost.com/blog/post/atomic-web-design/"><strong>diseño atómico, introducida por Brad Frost en 2012</strong></a> tiene un potencial enorme, producto de su simplicidad y fácil comprensión. Desde su nacimiento se ha difundido rápidamente, generando altos niveles de adopción y satisfacción de diseñadores, implementadores y usuarios.</p>
</div></td>
<td> </td>
</tr>
</tbody>
</table>
<!--inscripcion-->
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 1.6;"> </p>
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="left" width="600">
<br>
<p>___</p>
<p style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Te invitamos a la charla de Manuel Razzari sobre Mitos de la Accesibilidad, este 30 de setiembre a las 19 hs. de Montevideo y Buenos Aires, 18 hs. de Santiago y 17 hs. de Bogotá y Ciudad de México.</p>
<h2><a href="https://concreta.uy/charla-mitos-de-la-accesibilidad/?utm_source=elastic&utm_medium=mailing&utm_campaign=TIDI20210907&utm_content=Diseño Atómico (Glosario de UX)">Inscripción gratuita</a></h2>
<p><a href="https://concreta.uy/charla-mitos-de-la-accesibilidad/?utm_source=elastic&utm_medium=mailing&utm_campaign=TIDI20210907&utm_content=Diseño Atómico (Glosario de UX)"><img alt="Charla de Manuel Razzari: Mitos de la Accesibilidad" src="http://concreta.com.uy/wp-content/uploads/charla-de-Manuel-Razzari-Mitos-de-la-Accesibilidad600.png" style="width: 600px; height: 323px;" /></a></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<!--desuscribirse-->
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 1.6;"> </p>
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="center" width="600">
<p style="margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.25;"><a href="http://tracking.concreta.uy/tracking/unsubscribe?d=uSqUTx9n4N743ViptdRDE6VUsZyPTjcMZz3usw7-JERRsIkdyIhcevVA2BtMwWuWkDgpL7z-Qf-8kBV3EBxmJR4zEf74Pl2fhTrd7LbDHKeCGWeNjs9P17uVj1yrh10F9xaYPbVKk6sKZScdrkZpeuiP-s-2HT8w67ZN-4d6SghtuFM2k4EWf-ahkPs3j-L9pR_uGz6ykx1mk7M_i3OA88byb9BhVavepmvph_GIhYPXKgj27pb6Hh9AxskIfwJVKDX-2qIlXLG2Ld6b7A6Tex5OlYJz-P7AkCDzjcEBAahlHjYKnHAYyYQu8SPgQ1pC7sWoOd0ekUHAdyNUoYJzbPDZU6JKoWYQbYlKPkZ3UNrraU3XgGJia2QKls6FzixY7A2" style="color:#666666;">No quiero recibir información sobre cursos de Concreta<br />
<img alt="" src="https://www.google-analytics.com/collect?v=1&tid=UA-88473526-1&cid=698082699.1431301251&t=event&ec=ElasticEmail&ea=Dise%C3%B1o+At%C3%B3mico+%28Glosario+de+UX%29&el=698082699.1434050727&cs=newsletter&cm=email&cn=062413&cm1=1" style="width: 1px; height: 1px;" /></a></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 1.6;"> </p>
<div style="text-align:center; background-color:#fff;padding-top:10px;padding-bottom:10px;font-size:8pt;font-family:sans-serif;"><p style="text-align:center;text-decoration:none;color:#666;">Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy</p></div></body>
</html>