Please enable JavaScript.
Coggle requires JavaScript to display documents.
ATOMIC DESIGN, 12 - Coggle Diagram
ATOMIC DESIGN
MOLECULAS
-
-
-
-
TIENES PROPIEDADESY FUNCIONALIDADES PROPIAS, LO QUE LOS CONVIERTE EN LOS COMPONENTES BASICOS DE NUESTRO SISTEMAS E DISEÑO
ORGANISMOS
-
De Partes a Secciones: Mientras que una molécula es un grupo de átomos, un organismo es un grupo de moléculas y átomos que forman una sección completa como la barra de navegación completa que contiene ese campo de búsqueda.
Contexto y Estructura: Los organismos son los primeros componentes que realmente comienzan a dar estructura a la página. Definen cómo se relacionan y disponen las moléculas entre sí.
Reutilización con Contexto: Un organismo es un componente reutilizable que lleva su propio contexto interno. Por ejemplo, una Barra de navegación en una página de productos y en un carrito de compras, manteniendo siempre su estructura interna consistente.
Independencia: Un organismo bien construido debe ser portable y poder funcionar en cualquier lugar donde se lo coloque, sin depender de los estilos o componentes de sus padres directos
PLANTILLAS
¿Qué es?
Las plantillas son objetos a nivel de página que integran componentes en un diseño y articulan la estructura de contenido subyacente. :
-
-
¿Qué hace?
Las plantillas definen el esqueleto de la aplicación, muestran componentes clave en acción, demuestra su contenido con respecto a tamaños, espacios que ocupa y la longitud de los textos y caracteres.
-
ÁTOMOS
incluyen
elementos HTML básicos como etiquetas de formulario, entradas, botones y otros que no pueden descomponerse sin perder su funcionalidad
-
-
-
-
-
Paginas
En Atomic Design, una Página es el nivel más alto de la jerarquía. Representa una vista completa y funcional de la interfaz donde se integran átomos, moléculas, organismos y plantillas ya con contenido real (textos, imágenes, datos).
Es lo que finalmente ve y utiliza el usuario final.
Caracteristicas
Contenido real:
No usa ejemplos, sino textos, imágenes y datos verdaderos.
Muestra todo junto
Muestra todo junto → Reúne átomos, moléculas, organismos y plantillas en una sola vista.
-
-
-
El diseño atómico es una metodología compuesta por cinco etapas distintas que trabajan conjuntamente para crear sistemas de diseño de interfaz de forma más deliberada y jerárquica.
-
