Existen varios tipos de componentes dentro de un sistema de diseño, los cuales se pueden categorizar según su propósito y nivel de abstracción. Estos tipos varían según la estructura del sistema y el enfoque del equipo, pero en general, los componentes se pueden agrupar en las siguientes categorías:
1. Componentes Atómicos o Básicos
Son los componentes más simples y fundamentales dentro de un sistema de diseño. Suelen representar los bloques de construcción más pequeños y no pueden dividirse en partes más simples.
• Botones: Elementos interactivos esenciales para acciones del usuario, como enviar formularios o realizar clics.
• Iconos: Pequeños gráficos representativos de acciones o categorías.
• Tipografía: Estilos de texto definidos como títulos, párrafos, subtítulos, etc.
• Inputs: Campos de entrada como cajas de texto, casillas de verificación o botones de opción (radio buttons).
• Colores y Espaciados: Paletas de colores y reglas de espaciado para asegurar una experiencia visual consistente.
2. Componentes Moleculares o Compuestos
Son componentes formados por la combinación de componentes atómicos. Crean unidades funcionales simples que pueden cumplir un propósito más específico que los componentes individuales.
• Campos de Formulario: Un campo de formulario que combina un input (campo de texto), un label (etiqueta) y un button (botón de envío).
• Tarjetas (Cards): Un contenedor que incluye un título, una imagen, texto y botones, como las que se usan para mostrar productos o información en bloques.
3. Componentes Organismos
Son componentes complejos formados por múltiples componentes moleculares. Estos son más grandes y comienzan a definir secciones completas de una interfaz de usuario.
• Cabeceras (Headers): Combina logo, barra de navegación, campo de búsqueda, íconos de usuario y carrito de compras.
• Pies de Página (Footers): Un componente que puede incluir enlaces, información de contacto, suscripciones y otros íconos sociales.
• Listas de Productos: Una colección de tarjetas de producto en un formato repetitivo que organiza contenido en la página.
4. Plantillas (Templates)
Las plantillas son estructuras que definen la disposición de los componentes dentro de una página o sección. Aunque las plantillas no suelen tener contenido real, muestran cómo se distribuyen los componentes en un diseño.
• Plantilla de Página de Producto: Organización visual de los componentes como imágenes, descripciones de productos, especificaciones técnicas y botones de acción (como agregar al carrito).
• Plantilla de Dashboard: Un esquema que organiza gráficos, tablas, menús laterales y tarjetas en un tablero de control o panel administrativo.
5. Páginas (Pages)
Las páginas son versiones finales de las plantillas con contenido real. Representan un nivel más alto en el sistema de diseño, ya que combinan todos los componentes anteriores para crear interfaces completas.
• Página de Inicio: Contiene cabecera, secciones promocionales, lista de productos destacados y un pie de página.
• Página de Perfil de Usuario: Incluye formularios de actualización de datos, foto de perfil y botones de interacción.
6. Componentes de Interfaz de Usuario (UI Patterns)
Son patrones o combinaciones de componentes que resuelven problemas específicos de interacción. Estos componentes son comunes en aplicaciones y sitios web y se reutilizan en distintos lugares para ofrecer consistencia.
• Modales y Diálogos: Ventanas emergentes que solicitan confirmaciones o muestran mensajes importantes.
• Acordeones: Listas de información colapsables que permiten expandir y contraer contenido.
• Notificaciones y Alertas: Mensajes para advertir, informar o confirmar una acción reciente.
• Tooltips: Indicaciones o descripciones que aparecen cuando un usuario pasa el cursor sobre un ícono o elemento.
7. Componentes de Navegación
Son elementos que guían al usuario a través de las diferentes secciones o páginas del sitio o aplicación.
• Barras de Navegación (Navbars): Un conjunto de enlaces organizados que permiten al usuario moverse entre las secciones principales de la aplicación.
• Menús Laterales (Sidebars): Estructuras de navegación que se encuentran a los lados de la pantalla, usualmente en interfaces más complejas o dashboards.
• Breadcrumbs (Migajas de Pan): Indicadores visuales que muestran el rastro de navegación del usuario y su ubicación actual.
8. Componentes de Datos
Ayudan a visualizar o interactuar con información estructurada, como gráficos o tablas.
• Tablas de Datos: Componentes que muestran información tabular de manera clara y accesible.
• Gráficos y Diagramas: Elementos visuales como gráficos de barras, líneas, círculos o diagramas para representar datos cuantitativos.
• Filtros y Ordenadores: Controles para gestionar la visualización de grandes cantidades de datos.
9. Componentes de Animación e Interacción
Ayudan a mejorar la experiencia de usuario mediante la animación y la interacción.
• Spinners o Indicadores de Carga: Elementos visuales que indican que una acción o proceso está en curso.
• Hover States (Estados al pasar el cursor): Cambios visuales en los componentes cuando el usuario interactúa con ellos.
• Transiciones y Microinteracciones: Animaciones suaves que guían al usuario a través de diferentes acciones o flujos.
