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.
Introducción al Diseño de Producto
¿Qué es el diseño de producto?
Términos básicos de diseño y experiencia de usuario
Roles en product design
Introducción de las metodologías de trabajo en diseño de producto
Metodologías ágiles en diseño de producto
Disciplinas afines al diseño de productos digitales
Inicio del proceso de diseño y UX
Lanzamiento del proyecto
Conceptos básicos en la investigación con usuarios
Técnicas de Research
Diseño UI
Introducción al diseño UI
Sistemas de Diseño y Diseño Atómico
Diseño UX
Dimensiones de la experiencia de usuario (UX)
Arquitectura de la información
Diseño UX: Las leyes UX
Fases del diseño UX
Testear el diseño y escuchar al usuario
Análisis heurístico o auditoría UX
Testing del diseño
Analítica: métricas e indicadores de la experiencia de usuario (UX)
Clase de cierre
Convierte tus certificados en títulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
19 Días
14 Hrs
0 Min
11 Seg
Sistemas de Diseño y Diseño Atómico
11/19Lectura
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 31
Preguntas 0
Ordenar por:
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.
Voy a seleccionar **Spotify** como producto digita
* **Átomos**:* **Iconos de reproducción** (Play, Pause, Skip): Elementos individuales que no tienen mucho sentido por sí solos, pero forman la base de las interacciones.
* **Tipografía**: Fuente utilizada para los nombres de canciones, artistas, álbumes.
* **Colores**: Verde característico de Spotify, negro, blanco.
* **Botón**: El botón de "play" es un átomo clave.
* **Moléculas**:* **Barra de búsqueda**: Combina un ícono de lupa (átomo) y un campo de texto para ingresar palabras clave.
* **Controles de reproducción**: Una combinación de botones (Play/Pause, Skip) y el control deslizante para ajustar la posición de la canción.
* **Tarjeta de canción**: Combina imagen de álbum, nombre de la canción y del artista (átomos).
* **Organismos**:* **Reproductor**: Incluye controles de reproducción (moléculas), barra de progreso, información de la canción, y la opción para añadir a una lista de reproducción.
* **Lista de reproducción**: Conjunto de tarjetas de canciones (moléculas) organizadas de forma secuencial, con su propio título e imagen.
* **Sistema**:* **Aplicación completa**: Incluye múltiples organismos como la pantalla de inicio (con listas de reproducción, recomendaciones, etc.), la pantalla de búsqueda y la página del perfil del usuario.
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.
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
Á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:
-
Átomos: Íconos y texto - rectángulos celestes.
-
Moléculas: En este caso el conjunto de varios íconos y textos que tienen una intención - rectángulo fino violeta.
-
Organismo: Página home del sitio web, rectángulo grueso violeta.
-
Sistema: Todo el sitio web de Google, rectángulo amarillo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?