Tipos de componentes

Curso de Patrones y Componentes en Sistemas de Diseño

Contenido del curso

Introducción

1
Patrones y Componentes en Sistemas de Diseño
02:33 min

Patrones en los SSDD

Componentes en los SSDD

UI Kit y SSDD

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:10

Tipos de componentes

Curso de Patrones y Componentes en Sistemas de Diseño

Clase 10 de 16

Clase 10 / 16

Héctor Alonso Padilla Ramírez

Hace 2 años

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.

Comentarios (15)15 comentarios

Yusting Andrés Mora González

Hace 5 años

Alejandro Mayorga García

Hace 4 años

DANIELA FRANCO TOBON

Hace 3 años

Santi Orduño

Pedro Isaac Aguilar

Marta Monterde Alonso

Profesor

Diego Perdomo

Silvia Gutierrez

Alejandro Perafán

Sofia Grandas Aguirre

María Valentina Reyes Leon

María Guadalupe Mendoza Luna

MARIA TERESA PANIAGUA RIVERA

Hace un año

Jorge Marroquin

Remmy Bernardo Calamani Quispe

Jo Zama

Introducción

Patrones y Componentes en Sistemas de Diseño

Patrones en los SSDD

Diseño Atómico: Creación de Patrones y Componentes Eficientes

Principios de Diseño para Sistemas Digitales

Patrones de Lenguaje en Diseño de Interfaces

Patrones Funcionales en Productos Digitales: Definición e Importancia

Patrones perceptivos

Definición de patrones en tu sistema

Documentación de los patrones

Componentes en los SSDD

¿Para qué utilizar los componentes?

Tipos de componentes

Requisitos mínimos

UI Kit y SSDD

Consejos para el UI Kit

Documentación del UI Kit

Design Tokens

Resumen y despedida

Autoevaluación del Curso de Patrones y Componentes en Sistemas de Diseño

Tipos de componentes

Progreso del curso

Introducción

Patrones en los SSDD

Componentes en los SSDD

UI Kit y SSDD

Recursos

Recursos