Atomic Design
css design atomic ui ux frontend web
Atomic Design es una metodología para crear sistemas de diseño. En este artículo se explica cómo funciona y cómo implementarlo.
¿Qué es un sistema de diseño?
Un sistema de diseño es un conjunto de patrones de diseño, componentes y guías de estilo que se utilizan para crear una experiencia de usuario coherente en uno o varios productos.
¿Qué es Atomic Design?
Atomic Design es una metodología para crear sistemas de diseño. Fue creado por Brad Frost en 2013 y se basa en la idea de que los sistemas de diseño deben crearse como sistemas de diseño atómicos.
Hay cinco niveles en Atomic Design: átomos, moléculas, organismos, plantillas y páginas.
Átomos
Los átomos son los bloques de construcción más pequeños de un sistema de diseño. Los átomos incluyen elementos HTML como etiquetas, botones, entradas, etc. Los átomos no tienen ningún estilo aplicado y no tienen ningún significado semántico.
Moléculas
Las moléculas son grupos de átomos que funcionan juntos como una unidad. Las moléculas pueden ser simples o complejas, pero siempre son más grandes que los átomos. Las moléculas pueden incluir átomos del mismo tipo o de diferentes tipos.
Organismos
Los organismos son grupos de moléculas que funcionan juntas como una unidad. Los organismos pueden incluir moléculas del mismo tipo o de diferentes tipos. Los organismos son componentes de interfaz de usuario más complejos que pueden incluir componentes de interfaz de usuario más pequeños.
Plantillas
Las plantillas son grupos de organismos que funcionan juntos como una unidad. Las plantillas son componentes de interfaz de usuario más complejos que pueden incluir componentes de interfaz de usuario más pequeños.
Páginas
Las páginas son instancias específicas de plantillas. Las páginas son simplemente plantillas con contenido real.
¿Por qué Atomic Design?
Atomic Design nos da la capacidad de pasar de lo abstracto a lo concreto. Nos permite crear sistemas de diseño que son más fáciles de desarrollar y mantener con el tiempo.
Fuente: Atomic Design