Aprende Inglés, Programación, AI, Ciberseguridad y más a precio especial.

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
23 Hrs
26 Min
15 Seg

Sistemas de Diseño y Diseño Atómico

11/19

Lectura

El diseño de las interfaces en un producto, como hemos conocido en clases anteriores, es la creación de lo que se percibe por los sentidos por parte de las personas.

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 30

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En este ejemplo tome la pagina de inicio de Canva, en este caso solo me centre en el aside de la pagina, debido a que considero representa muy bien la jerarquía en un sistema de diseño. Marque los átomos de color amarillo, que vendrían siendo los iconos, y también los textos o etiquetas, las moléculas de color naranja vendrían siendo la conjunción de un icono con su etiqueta o texto, un organismo seria el aside completo que es la conjunción de varias moléculas y por ultimo el sistema entero seria toda la pagina.


En este caso, el site completo es un sistema, el cual está subdividido por átomos: botones, el logo, textos, tipografías y espaciados como puede apreciarse. El header y los selectores desplegables hover son moléculas, y el landing page o home del sitio (que es la imagen adjunta) es un organismo.

Ejemplo, el sitio web de Susuerte, otra forma de ver cómo se jerarquizan los elementos:

  • Átomos: Íconos y texto - círculos verdes en opacidad.

  • Moléculas: En este caso el conjunto de varios íconos y textos que tienen una intención - rectángulo violeta.

  • Organismo: Página home del sitio web, rectángulo rojo.

  • Sistema: Todo el sitio web de Susuerte.

![](https://www.google.com/url?sa=i\&url=https%3A%2F%2Fes.linkedin.com%2Fposts%2Fanthony-morales-sv_uxdesign-atomicdesign-activity-7048690574299688960-kQeZ%3Ftrk%3Dpublic_profile_share_view\&psig=AOvVaw1stAWElao8MAbt8gbiOhAX\&ust=1700621295224000\&source=images\&cd=vfe\&opi=89978449\&ved=0CBEQjRxqFwoTCPDespSK1IIDFQAAAAAdAAAAABAI)Reconozco estos conceptos ya que literal los implemento. Suelo dejar en el sistema de diseño como el "guideline" del proyecto, deifnido los colores, textos, tamaaños, efectos, recursos gráficos y demás, todo esto organizado en estilos desde figma. Por aparte trabajo lo iconos, se deja identificado el estilo de los iconos, pero hay proyectos que son tan grandes que prefiero darles una sección específica para ir organizandolos y usarlos según las necesidades. En adelante dejo la sección de componentes, específicamente para la creación de las moléculas y los organismos, y se dejan listos para usarse como templates.![](https://www.google.com/url?sa=i\&url=https%3A%2F%2Fes.modyo.com%2Fblog%2Fdisenando-productos-consistentes-y-escalables\&psig=AOvVaw1stAWElao8MAbt8gbiOhAX\&ust=1700621295224000\&source=images\&cd=vfe\&opi=89978449\&ved=0CBEQjRxqFwoTCPDespSK1IIDFQAAAAAdAAAAABAv)
Mi ejemplo sería la web de Turismo City: Los átomos considero son los botones por separado como el de vuelo Las moléculas, el conjunto de botones que te hace saber que es una web para buscar vuelos, hoteles, servicios turísticos El organismo, el buscador de vuelos con los botones de origen - destino y fecha EL sistema, la web en general. ![]()

Yo eleigí Airbnb porque desde el Home se aprecio sus sistema de diseño y los componentes creados del mismo.

Yo lo entendí así, si es posible que se me corrija seria perfecto:

Holaa, dejo mi análisis por aquí por si quieren compartir algúnc omentario.

Ejemplo de Netflix

Dejo mi aporte, elegí Netflix
(Bueno molécula en este caso sería el cuadrado de una película)

El producto digital que elegí fue Waze. El sistema es la app como tal.

El producto digital que seleccioné fue la página de adidas, teniendo como:

**- Sistema **su página web.

- Organismo el home, recuadro amarillo.

- Molécula la cabecera de la página, recuadro rojo.
**
-Átomos** Textos, colores, íconos y bonotes presentes en el home, recuadros verdes.

En este ejemplo tome la página de inicio de Instagram desde el ordenador. Marqué los átomos de color azul, que vendrían siendo los iconos, y también los textos o etiquetas, las moléculas de color rojo vendrían siendo la conjunción de un icono con su etiqueta o texto, un organismo es la conjunción de varias moléculas las cuales están de color verde y por último el sistema entero seria toda la página.

Análisis a el navbar de GitHub:

  • Los átomos son lo más básico texto, botones y logo.
  • Las moléculas son la unión de esos átomos.
  • Los organismos, son las páginas que te llevan a dar clic en este caso en acctions te lleva a otro apartado.
  • El sistema, que vendría ser toda la página de GitHub.

Átomo: Buscador de productos (input)
Molécula: Cuando se dirige a la parte del ecommerce, hay una sección para llenar los datos de la TC, el título y el input generarían la molécula.
Organismo: En la página de donde se solicitan los datos de compra se consideraría un organismo.
Sistema: Todo el sitio completo de mercadolibre

Átomos (VERDE): textos, títulos, botones, tipografías.
Molécula (ROSA): cabecera.
Organismo (AZUL): sección de selección de productos.
Sistema: toda la página.

Página web de Amazon

Átomos: Los textos que aparecen en los recuadros de acciones.

Moléculas: Los cuadros que incluyen los textos de las acciones, con imagenes de los productos propuestos.

Organismos: Sección del home, donde podrás realizar cualquier acción

Sistema: Página web.

En la página de Mis Pichos marqué:
Átomo: Rojo – Una sola palabra del menú
Molécula: Verde – Dos componentes del menú
Organismo: Amarillo – Toda la parte superior de ingreso de datos y menú.
Sistema: Toda la página

(https://static.platzi.com/media/user_upload/Mis pichos elementos-95f8d493-cfe4-4b22-9eb2-a6de9fcc20e8.jpg)

Átomos en Rojo
Moléculas en Naranja
Organismos en Azul
Sistema en Morado

Mercado libre con su sistema de diseño andes uno de los quipos de diseño más grande de Latam, muy bueno para inspirarse y observar buenas prácticas

En la WEB de Bancolombia se ve:

Atomos: Títulos o secciones de la web
Moléculas: Toda la sección de header
Organismos: la sección publicitaria con banner, botón, titulo y CTA.
Sistema: En si todo el header de la WEB.

Mi ejemplo lo tomé de la página de Spotify:

  • El sistema sería la página como tal
  • Atomos: Los texto y botones
  • Moléculas: los botones de control de las reproducciones
  • Organismos: la página de “Liked songs”

Elegí Bandcamp, una página de venta y distribución de música.
Las moléculas las elegí así porque son hipervínculos que redirigen a otra página. Ahora escribiendo eso me pregunta, ¿ serían organismos en lugar de moléculas? igual dejaré el ejemplo así.

Ejemplo, la página de nueva pestaña de Google:

  1. Átomos: Íconos y texto - rectángulos celestes.

  2. Moléculas: En este caso el conjunto de varios íconos y textos que tienen una intención - rectángulo fino violeta.

  3. Organismo: Página home del sitio web, rectángulo grueso violeta.

  4. Sistema: Todo el sitio web de Google, rectángulo amarillo.