Tipos de componentes

Clase 10 de 17 • Curso de Patrones y Componentes en Sistemas de Diseño

Yusting Andrés Mora González

student•

Lo que les voy a compartir podría verse como un delito dentro de un sistema de diseño, aunque ahí estén los componentes, se que tengo que organizarlos mejor en un sistema muy bonito y hermoso llamado diseño atómico. No se preocupen, cuando terminemos la primera fase organizaré absolutamente todo, solo lo tengo así para no tardarme en diseñar la interfaz principal.

Alejandro Mayorga García

student•

jajaja asi los tengo yo xd

DANIELA FRANCO TOBON

student•

ese lo creaste tu yo quiero uno :D

Santi Orduno

student•

Tipos de componentes

Serán diferentes en cada Sistema de diseño y al final entre más proyectos se "alimenten" de un mismo sistema, más componentes tendrá este.

Pedro Isaac Aguilar

student•

Me sorprendió cómo hay entidades gubernamentales que se toman muy en serio el documentar sus SD y sus componentes de diseño de sus interfaces, como el caso expuesto del Gobierno Británico.

Marta Monterde Alonso

teacher•

Si Pedro, muchas de ellas están dando el cambio y viendo que, con la transformación tecnológica, es realmente necesario tener un punto común en donde mostrar toda esta información. Te dejo aquí un enlace también al portal de California Design System que te va a gustar seguro.

Diego Perdomo

student•

Dependiendo del objetivo del producto digital, diseñarás y desarrollarás los componentes más relevantes o que se utilicen con más frecuencia. Tipos de componentes:

Serán diferentes en cada Sistema de Diseño.
Cuantos más proyectos se alimenten de un mismo sistema, más componentes tendrá este.

Existen tipos de componentes infinitos, están hechos a la medida de tu producto de acuerdo a sus necesidades.

Silvia Gutierrez

student•

A partir de que conocí Carbon Design System, mis UI Kit han estado más completos. Me gustó que hasta abarcan el sistema de espaciado, que hasta ese momento yo no tenía claro como unificar.

Alejandro Perafán

student•

Muchas gracias por compartirnos esos sistemas de diseño, ¡muy interesantes!

Diego Perdomo

student•

Estos son los componentes que definí para una App Web de bienes raíces...

¿Agregarían alguno?

Sofia Grandas Aguirre

student•

![](

María Valentina Reyes Leon

student•

Seguir los patrones según los sistemas operativos nos permiten mayor agilidad. Sin duda alguna estos cursos me ayudan a seguir creciendo en el campo del UX UI

María Guadalupe Mendoza Luna

student•

Tipos de componentes Dependiendo del objetivo del producto digital, se desarrollan los componentes más relevantes o que se usen con más frecuencia

Son diferentes en cada Sistema de Diseño

MARIA TERESA PANIAGUA RIVERA

student•

gracias

Yusting Andrés Mora González

student•

🤨 ¿En que consiste el "Carbon design"? lo veo muy interesante pero no logro captar de que trata o que hay de diferente a las demás metodologías. 😪

Jorge Marroquin

student•

Sugiero revises la documentación oficial aquí. 🤗

Héctor Padilla

student•

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.

Remmy Bernardo Calamani Quispe

student•

en mi producto hay componenetes de mapa

Jo Zama

student•

componentes OP