Paradigmas: Diseño atómico, diseño procedural y DRY

Este artículo del blog de Platzi también explica muy bien cómo funciona y por qué usar Atomic Design:

• ⚛ ¿Por qué usar Atomic Design? ⚛

Procedural: Permite la construcción de funciones que a futuro se van a reconstruir a sí mismas. Se basa en objetos ya hechos para obtener resultados diferentes. Por ejemplo, cuando se usa código se utiliza el concepto procedural.

Atómico: Le da una organización a los elementos: átomos, moléculas, organismos, templates, páginas. Es decir, ir desde los elementos más sencillos como las etiquetas más básicas, hasta los elementos mayores que corresponden a la unión de varios átomos, moléculas, organismos y templates para obtener una página.

DRY: Don’t Repeat Yourself. No repetir los mismos elementos.

Dejo un articulo de internet en donde hablan de Kiss,Dry y Solid, principios fundamentales tanto en diseño como en programación. Recuerdo que en algún curso con fredy (creo que fundamentos de programación) y en otro con el profe Emiro (creo que de Illustrator) se explicó y se habló de como evitarlos en cada área.

https://tantacom.com/principios-diseno-software-kiss-dry-solid/

Procedural: Son elementos ya hechos que van hacer que el resultado sea variable. (Es el conjunto de funciones que en un futuro se van hacer así misma). Un sistema de diseño se resuelve asi mismo. Nosotros debemos crear los elementos que se puedan unir y crear elementos nuevos a futuro.

Diseño atómico:

Átomo puede ser un label, input, button,etc

Molecula: Es el conjunto de 2 atomos, ej (Input de buscador)

Organismo Es cuando juntamos 2 moleculas.

Template: Es cuando juntamos mas de 2 organismo.

Pagina: Son elementos ya personalizados. (Template personalizar las imagenes, textos, etc)

**Dry:**No repitas elementos. No estés invirtiendo tiempo en construir algo que ya esta construido.

Martín Coronel
Diseño UX/UI

Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel

En el diseño procedural se definen las funciones que luego se aplican, se parametrizan y se combinan para dar como resultado un paradigma dentro del cual se pueden mover sus variables o sintagmas, que combinados entre sí, pueden incluso auto-resolver situaciones de diseño.

Paradigmas (De los cuales podemos partir)

Diseño Procedural : El Sistema tiene la capacidad de generarse así mismo a partir de objetos base.

Diseño Atómico: Es partir de elementos particulares a generales y/o complejos.

DRY: Don’t Repeat Yourself.

Recomendado el libro de Atomic Desing de Brand Frost.

Si los átomos cambian, todo lo demás en el Sistema de Diseño cambiará, porque todos los componentes están unidos en la misma estructura “viva”. Por ello, el Diseño Atómico, que divide los elementos de diseño según su nivel de complejidad y unión en: átomos, moléculas, organismos, templates y páginas, es muy utilizado en el diseño de software hoy en día, por su funcionalidad.

No entiendo el concepto DRY… dices que no deberíamos de copiar y pegar elementos una y otra vez… Pero no es ese el espíritu? Re-usar elementos para no estar creando nuevos una y otra vez?

⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.

✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.

Paradigmas:
.

• Procedural: Es el más complejo, pero una forma sencilla de verlo es que son elementos ya hechos que van a hacer que los resultados sean variables. Es la construcción de funciones que a futuro se van a construir a si mismas.
  .
  Un sistema de diseño se basa en en la creación procedural de elementos. Un sistema de diseño se puede resolver a si mismo.
  .
• Diseño atómico: Es básicamente darle una organización a los elementos: Átomos > Moléculas > Organismos > Templates > Páginas.
  .
  Átomos: Los elementos más sencillos de un sistema (botones, texto, cajas).
  .
  Moléculas: Dos o más átomos o elementos básicos juntos.
  .
  Organismos: Cuando juntamos varias moléculas.
  .
  Templates: Son la forma más básica de toda nuestra plataforma.
  .
  Páginas: El producto final una vez se le agregan las personalizaciones a la template utilizada.
  .
• Dry(Don’t Repeat Yourself): Se trata de no invertir tiempo en hacer las mismas cosas una y otra vez. Mientras menos veces nos repitamos, mejor.

⭐ Cuando descubrí los sistemas de diseño cambiaron muchísimo mi forma de diseñar. El atomic design (O Diseño atómico) es el sistema de diseño más recomendable, claro, hay muchísimos más sistemas de diseño, pero en mi opinión personal, el atomic design es simplemente una maravilla, y lo es aún más cuando usamos Figma y sus famosísimos “Componentes reactivos”. ✔

• En vez de estar una y otra vez diseñando el mismo botón, podrías simplemente diseñarlo en diferentes faces (Hover, clic, desactivado) y usar los componentes reactivos para así “Reciclar” ♻ esos diseños, y nos estaríamos ahorrando muchísimo tiempo.

Clase de biología básica

Todos estos paradigmas me hacen comprender mucho mejor como se crea un sitio web.

Esta muy bueno el curso, no me esperaba que en diseño también habia el Don’t Repeat Yourself

El diseño procedural me cambió la vida ❤️

En este medio libro. Brand frost nos habla sobre Atomic Design desde sus inicios. Les dejo el link para que lo lean 👉🏽https://atomicdesign.bradfrost.com/table-of-contents/

Les dejo un par de artículos que me ayudaron a entender a profundidad este tema.
https://generativeways.com/teoria/cocreacion-valor-para-innovar/
https://generativeways.com/diseno-parametrico/que-es-el-diseno-procedural/

Dry = Don’t repeat yourself.

07. Paradigmas: Diseño atómico, diseño procedural y DRY

• Paradigmas
  • Procedural
    • Son elemento ya hechos que van a hacer que el resultado sea variable. Construcción de funciones que al final se van a construir a sí mismas.
    • Generar los elementos para que el resultado sea variable
    • Resultados procedurales es la construcción con los elementos anteriores
    • Un DS debe resolver a sí mismo de diferentes formas
    • Construir funciones por separado, para luego unirlos y crear un resultado variable
  • Diseño atómico
    • Darle una organización a los elementos
      • Átomos: **Etiquetas más básicas.
        • Label
        • Input
        • Botón
      • Moléculas: Cuando se juntan 2 o más átomos
        • Label + input + botón
      • Organismos: Cuando juntamos 2 o más Moléculas.
        • Header
      • Templates: 2 o más organismos.
        • Organismo que se pueden configurar de diferentes formas
        • No se debe diseñar páginas, se deben diseñar organismos, moléculas y átomos.
      • Páginas: Templates ya personalizado.
  • Dry (Don’t repeat yourself)
    • No repetir y volver a construir siempre los mismos elementos manualmente.

Paradigma o Metodología

✨ Concepto clave
Llamamos a un paradigma a aquel ejemplo o marco de referencia donde se producirá un modelo. Por su parte metodología es un marco y sistema que se usa para la resolución de un problema.

.
Similar al software, el diseño debe tener calidad externa e interna de la cual habla de sus principios fundamentales de los cuales se logra tener diferente niveles (legibilidad, reusabilidad, sencillez, testeabilidad, entre otros).
.

Principio KISS (Keep It Simple, Stupid)

ℹ️ Definición
“Mantenlo simple y estúpido”, se refiere a que las cosas sencillas funcionan mejor cuando son simples de ver.

.
Este principio implica que nuestra solución tanto en diseño como en implementación debe ser sencilla, no excederse en sobre-diseño o sobre-arquitectura cuando no sea necesario.
.
La clave para aplicar este principio, radica en la capacidad nuestra para poder descomponer un problema hasta sus elementos más indivisibles, y desde esa base poder aplicarlo.
.

Principio DRY (Don’t Repeat Yourself)

ℹ️ Definición
“No lo repitas”, se refiere a la práctica en sí misma de la sobre iteración.

.
Este principio implica que el sistema tiene que ser única, no ambigua y con un objetivo único.
.
La clave para aplicar este principio, radica en la observación de aquellos patrones que caracterizan a aquella entidad, simplificando su duplicidad o clonación mediante la unicidad.
.

Principio YAGANI (You Aren’t Gonna Need It)

ℹ️ Definición
“No vas a necesitarlo”, se refiere a aquello que prevé su valor o su importancia.

.
Este principio implica en la eliminación de ruido, que es innecesario para el desarrollo y diseño del caso.
.
La clave para aplicar este principio es la objetividad del caso, eliminando la lógica o utilidad “por si acaso” que no aporta valor directo a la solución.
.

Diseño atómico

ℹ️ Definición
Es una metodología que artesana los sistemas de diseño mediante niveles de abstracción.

.
Diseño atómico cree en 5 capas (átomos, moléculas, organismos, plantillas y páginas), de las cuales, en conjunto, trabajan como una misma unidad y, al mismo tiempo, una individualidad.
.
Dicha metodología, genera diferentes abstracciones que empalman tanto desarrollo como diseño, permitiendo que ambas partes pueden generar un puente de comunicación sólido y sencillo.

O sea que aquí podrían entrar los preprocesadores como pug, con los mixin y todo eso? Me avente el curso de preposesadores pero al ch casi no entendía jajaja lo tendre que repetir

El Atomic Design muy resumido:
Se trata de construir Web components a partir de atomos, que luego formaran moleculas, que se convertiran en organismos que daran vida a nuestros templates.

Un web component es como construir un elemento o cuerpo que tenga estructura, diseno e interaccion (html, css y js) que luego podemos guardar en una cajita y al momento de construir un sitio web podemos reutilizar. Obviamente esto esta plazmado en diseño y luego hacemos el web component en codigo.

Hay 3 paradigmas

• Procedural:Son elementos ya hechos que van a hacer que el resultado sea variable. Es la construcción de funciones que a futuro se van a construir a si mismas.un SD que se basa en la creación procedural de elementos, un sistema de diseños se puede resolver a sí mismo.

• Diseño átomico: Se basa en un principio en el que se basa Brend Frost. Darle una organización a los elementos, átomos→moleculas→organismos→templates→páginas (Es uno de los métodos más usados para desglosar los elementos de un software)

{

1. átomos: input, label button (elementos más sencillos de todo el sistema )

2. molecula: cuando se juntan dos átomos. label con input y un boton de buscar)

3. organismos: cuando se generan con moleculas.

4. template: cuando se empiezan a generar organismos, la forma más básica de una página

5. paginas: ya personalizado.
   }

• Dry (Don’t repeat yourself) No repitas los elementos, mijo

#dry

Lo que entendi:
Procedural :a futuro se construyen a sí mismas, se generan elementos para que luego sean variables.
Sistema de diseño se basa en un ente Procedural…
Diseño Procedural

Atomic Design me interesa tanto porque entiende el diseño como un ecosistema, en un átomo o en una molécula se pueden producir cambios que pueden alterar el ecosistema.

Gracias

Procedural: 2 tipos de mangas, 2 tipos de bolsillos y 2 tipos de frentes = 8 tipos de remeras

El paradigma procedural se centra en construir elementos individuales, como mangas o cuellos, que se ensamblarán más adelante para formar un producto completo, como un abrigo. El diseño atómico organiza los elementos en átomos, moléculas y organismos, proporcionando una estructura jerárquica para la construcción de diseños y software. Al combinar organismos, se crean templates que permiten la reutilización en diversas partes del diseño.
El paradigma “Don’t Repeat Yourself” (DRY) destaca la importancia de construir elementos reciclables para ahorrar tiempo y evitar redundancias. En conjunto, estos paradigmas ofrecen un enfoque integral para el diseño eficiente y coherente de sistemas.

jajaja siempre hago DRY 🙈

Paradigmas: Diseño atómico, diseño procedural y DRY

Procedural: Son elementos hecho quevan a hacer que el resultado sea variable

“Tú no tienes que diseñar todo los elementos, solo tienes que generar los elementos oreglas que se crearan asi mismos”

Diseño atómico: Darle una organización a los diseños, desde; Atómico → Moléculas → Organismos → Templates → Páginas

DRY “Don’t repeat yourself”

El diseño procedural se basa en la idea de que es posible crear contenido de calidad y variado utilizando reglas y procesos matemáticos en lugar de crearlo manualmente. Algunos de los beneficios de utilizar el diseño procedural incluyen la eficiencia en la generación de contenido, la personalización y adaptabilidad a diferentes contextos y la capacidad de explorar rápidamente múltiples soluciones.

comparto mis notas ![](

🤯 Un sistema de diseño se basa en la creación procedural de elementos.

Siempre doy al botón de pasar a la siguiente clase unos 5 segundos antes para ir más rápido, pero con las increíbles y poderosisisismas despedas de Rulótico, hasta repito las despedidas.

Paradigmas:

• Procedural: Los SD pueden resolverse a sí mismos
• Atómico: Átomos > Moleculas > Organismos > Templates > Páginas
• DRY: No repetir lo innecesario

Hola, les recomiendo este articulo sino les quedó claro el último paradigma de DRY, lo ejemplifican con un código 😃)
https://dzone.com/articles/software-design-principles-dry-and-kiss#:~:text=DRY stand for “Don’t,unambiguous representation within a system.”

Pienso que una de las partes mas importantes de los sistemas de diseño es la practica.

Es decir, a algunos puede que eso de definir, organizar y seguir lineamientos se les hagas mas facil, eso es verdad.

Pero sigue siendo una actividad muy abstracta que con la practica podras dominar, como la programacion

Cuanta suma a mis conocimientos! Gracias Ruló me encanta todo lo que he visto hasta ahora!

Donde estan los atomic design lovers?

maincraft es procedural

Diseño Atómico, entre mas pequeño…mas escalable!!!

NFT’s Ser como: Lo que explican en esta clase XD

Página oficial de Atomic Design
https://bradfrost.com/blog/post/atomic-web-design/

Wow! muchas cosas nuevas!!

Paradigmas: Diseño atómico, diseño procedural y DRY

Procedural

Son elementos ya hechos que van hacer que el resultado sea variable o es la construcción de funciones que a futuro se van a construir así mismas 🏗

Ejemplo:

Diseño atómico ⚛

Esto es básicamente darle una organización a los elementos que se vería así:

Atomos > Moléculas > Organismos > Templates > Páginas

Atomos: Label, Input o Button

Moléculas: Buscador de sitio (input con label)

Organismo: Barra de navegación, input de buscar, botón

Templates: Son la forma más básica de toda nuestra plataforma, pero es configurable. Por eso no diseñamos pantallas, sino diseños atómicos.

Páginas: Son los elementos ya personalizables

En resumen todos van progresivo o creciendo. Lo genial es que los átomos pueden cambiar y si estos cambian todos cambian.

dry = don’t repeat yourself 🕶

Relacionando el PARADIGMA PROCEDURALde los sistemas de Diseño con las estrategias de aprendizajes, podemos compararlo con la estrategia Chunking, que divide algo muy grande en pequeños fragmentos para luego hilar todo.

En Diseño, con paradigma Procedural, pasa algo similar, en lugar de complicarnos con una totalidad, se divide por partes sencillas y luego se unifica.

Apuntes de la clase:

• Procedural: Es el más difícil. Son elementos ya hechos que van a hacer que el resultado sea variable. Es la construcción de funciones que a futuro se van a construir a sí mismas. Esto es importante porque un sistema de diseño se basa en la creación procedural de elementos. Un sistema de diseño se puede resolver a sí mismo.
• Diseño atómico: Se basa en un principio que propuso Brad Frost. Es básicamente darle una organización a los elementos.
  • Átomos -> Moléculas -> Organismos -> Templates -> Páginas
  • Los átomos pueden cambiar. Este paradigma es uno de los más utilizados. Tú puedes crear tus propios paradigmas.
• DRY: Don’t Repeat Yourself. Principio básico en programación y en diseño.

El paradigma procedural me recuerda mucho al concepto de recursividad en programación donde una misma función sirve para construirse a sí misma.

Que maravilloso me resulto este tema.
Partir de lo mas simple (atomo) y mediante la combinacion de estos llegar a sistemas tan complejos como un organismo, o incluso una pagina.

Paradigmas para organizar los elementos de un sistema:

-Sistema Procedural: está conformado por patrones o elementos claves que, tras ser combinados, originan múltiples resultados o procesos. -Diseño atómico: clasificación de los elementos de un software que permite organizarlos para que el desarrollo sea más efectivo y preciso. Los grupos de elementos se clasifican de micro a macro, así: átomos (elementos pequeños como botones, labes o inputs), molécula (unión de 2 elementos átomos), organismo (unión de 2 o más moléculas), templates (forma más básica de una plataforma, unión de varios organismos), páginas (software en sí). Todas estás clasificaciones dependen una de la otra, por la que si una cambia, eso resto lo hará también. -Dry (don’t repeat yourself): evitar invertir tiempo tomando las mismas decisiones una y otra vez. Automatizar y reutilizar elementos tanto como sea posible.

¿Osea que ésto lo puedo usar desde estilizar en CSS hasta construir grandes aplicaciones a partir de componentes? Magnífico.

Yo usé atómico en mi empresa y me gistó mucho 😃

El Diseño atómico es un concepto que cuando lo logras entender. Ves las cosas de manera diferente 😄

En este Curso podrán ver este paradigma de Atomic Design en la práctica. Esta muy bien explicado y tiene un proyecto. Espero que les sirva.

Composicion de funciones se llama .

Diseño Procedural

Diseño Atómico

DRY: Don't Repeat Yourself

Programación basada en componentes!

Utilizar Atomic Design en sketch es una forma muy facil y organizada de hacer que el diseño de tus interfaces sea escalable reutilizable.

Como metodología de desarrollo también se podría utilizar BEM (Block, Element, Modifier), que es una metodología ágil de desarrollo basada en componentes.
BEM

dry=> don`t repite yourself no repitas lo mismo, crea algo que de tal forma que se pueda utilizar donde sea

#dry

Principios Teológicos => Diseño de las leyes de un universo => formación de átomos conforme a las leyes de un universo => formación de moléculas => formación de organismos => templates => páginas

Don’t repeat ypurself versión diseño 😄

“No debemos diseñar pantallas, sino átomos, moléculas y organismos”… Me siento DIOOOS!!

No debemos diseñar pantallas, debemos diseñar átomos, molecular, organismos. Eso no me lo esperaba.

no me quedo claro lo de dry, por que como asi que no se repitn elementos, o mas bien es que no se demoore el tiempo en una desicion ya tomada?

DRY Don’t Repeat Yourself!

Wuo el mundo del diseño es bastante interensate, cuantas cosas

Diseño atómico

No había conocido ninguno de estos paradigmas

No se si lograre entender bien los puntos a futuro.
Pero al menos me esta abriendo mucho mi criterio y lo que creía que era el diseño dentro de un proyecto.
Gracias rulotico, por el curso 😃

DRY Don´t repeat yourself, genial no lo conocía.

ProceduralPor Tamara Gascó | 17 abril 2019SHARETWEETSHARESHARE0 COMMENTS

¿Qué significa procedural? ¿Qué papel tiene este término en la cultura gamer? Si tú también te has hecho esta pregunta, lo primero que debes saber del término procedural es que proviene de procedimental y esto guarda una estrecha relación con respecto al ámbito del desarrollo de videojuegos. Así, se estima que algo es considerado como procedural o procedimental cuando ha sido creado mediante un algoritmo, haciendo referencia especialmente a los escenarios y las ambientaciones del juego.

¿Cuál es el significado de procedural?
También conocido como la generación por procedimentos, cuando nos encontramos ante la creación de los datos bajo estas características, nada es desarrollado o creado de forma manual. Para comprender mejor en qué casos los juegos son creados de forma procedural, pondremos un ejemplo. Los juegos de exploración.

5. Paradigmas: Diseño atómico, diseño procedural y DRY

El paradigma procedural, son elementos ya hechos que van a ser que el resultado sea variable. Es la contrucción de funciones que a futuro se van a contruir a sí mismas.

Un sistema de diseño se puede resolver a sí mismo:

Luego tenemos el diseño atómico:

Tiene las siguientes partes:

Átomos, moléculas, organismos, tempaltes y páginas:

Los átomos son los elementos más básicos (en este caso del HTML):

Una molécula son 2 o más átomos juntos:

Una o más moléculas juntas son un organismo:

Cuando juntamos estos organismos, tenemos templates:

Los elementos ya personalizados son llamados páginas:

Dry, es Don’t repeat yourself, aplica en programación y diseño.

Hay varios conceptos que tenemos que ver antes de aprender cualquier cosa de diseno, como los paradigmas, unos de estos son:

• Procedural:

  Son elementos ya hechos que van a hacer que el resultado sea variable. Es la construcción de funciones que a futuro se van a construir a si misma.

• Diseño Atómico:

  Esta forma organiza todos los elementos que puede haber en una pantalla de la siguiente forma:

  • Atomos: Los elementos por si solos
  • Moléculas: Es cuando juntamos 2 elementos o 3 para una sección.
  • Organismo: Es cuando se juntan 3 o 2 moléculas,
  • Templates: Es cuando se juntan varios organismos, esta es la forma mas básica de toda la plataforma, pues es repetitiva, se puede construir así misma, pero esta es configurable.
  • Paginas: Son los elementos ya personalizados y con sus variantes.

  Todo esto es algo progresivo, pues va creciendo. Es el mas utilizado para HTML.

• Dry:

  Don’t Repeat Yourself, es ineficiente estar copiando y pegando código o diseños.

El diseño procedural lo comparo con la Programacion Orientada a Objetos

Mis Apuntes:

Elementos ya hechos que hacen que el resultado sea variables (funciones que a futuro se construyen a sí mismas). Un sistema de diseño se basa en un sistema procedural de elementos.

Brad Frost, de los métodos más utilizados.

Los elementos básicos

• Label
• Input
• Button
• Etiquetas básicas

Combinación de 2 o más “atómos”

• Label + Input + button

Combinación de 2 o más “moléculas”

• Nav-bar:
  • Logo
  • Inputs
  • List
  • Button

La forma básica de la plataforma

Elementos ya personalizados.

Don’t repeat yourself.

No usar el tiempo para lo mismo 2 veces.

Procedural: Permite la construcción de funciones que a futuro se van a reconstruir a sí mismas. Se basa en objetos ya hechos para obtener resultados diferentes. Por ejemplo, cuando se usa código se utiliza el concepto procedural.

Atómico: Le da una organización a los elementos: átomos, moléculas, organismos, templates, páginas. Es decir, ir desde los elementos más sencillos como las etiquetas más básicas, hasta los elementos mayores que corresponden a la unión de varios átomos, moléculas, organismos y templates para obtener una página.

DRY: Don’t Repeat Yourself. No repetir los mismos elementos

#dry

el diseño procedural es igual al sistema de terraformación de horizon zero dawn, la idea es construir un macrosistema, que en el juego era una inteligencia artificial que engendraba a otras

https://www.youtube.com/watch?v=pzZE0S4WdGU&t=89s

👌

Great!!

Les dejo mi humilde apunte.

Paradigmas:
• Procedural: Son elementos ya hechos que hacen que el resultado sea variable, o en otras palabras, es la construcción de funciones que a futuro se van a construir a sí mismas. Ejemplo: Cuando pensamos en construir diseño para una remera, diseñamos dos tipos de cuello, dos tipos de manga, varios talles, etc. Y cuando los combinamos, creamos un Sistema procedural.
• Atómico: Darles una organización a los elementos, la organización que se le dio fue Atomos -> Moléculas -> Organismos -> Templates -> Páginas. Es uno de los paradigmas más utilizados para crear software.
Los átomos son, por ejemplo, un label, un input o un botón. Son los elementos más sencillos o pequeñas de nuestro diseño.
Cuando juntamos dos átomos o más se genera una molécula.
Cuando juntamos dos moléculas o más, se genera un organismo.
Cuando se juntan organismos, se generan templates.
Páginas son los templates, pero modificados y adaptados.
• DRY: Se utiliza mucho en programación, significa, Don’t Repeat Yourself. No repitas código.

Está buenísimo este curso, la verdad lo veía en la ruta y me lo saltaba y ahora ¡lo estoy siguiendo con todo!

Me gusto mucho el paradigma del diseño atómico, es el mas común y la forma como se organizo los elementos para crear un sistema es muy fácil de entender.