Clase Taller Diseño Plataformas Digitales semana 14/09/2025

Lista referencial de los elementos del Kit UI

Elementos básicos de diseño (diseñar considerando estados):

Botones y Acciones

◦ Botón primario: Acción principal como "Comprar" o "Guardar".
◦ Botón secundario: Acción alternativa como "Cancelar" o "Volver".
◦ Botón terciario: Enlaces de texto simples sin contenedor.
◦ Botón de icono: Botones circulares o cuadrados que solo contienen un icono (ej.
carrito, notificaciones).
◦ Botón flotante (FAB): Botón que flota sobre la interfaz, ideal para accesos rápidos como "Crear producto".

Elementos de Formulario y Entrada de Datos

◦ Campo de texto: Input básico para ingresar nombres, correos o descripciones.
◦ Campo de texto numérico: Input específico para precios, stock o códigos postales.
◦ Área de texto: Input multilínea para descripciones largas de productos.
◦ Casilla de verificación (Checkbox): Elemento de selección múltiple (ej. elegir varias categorías).
◦ Botón de opción (Radio button): Elemento de selección única (ej. elegir un metodo de envio).
◦ Interruptor (Toggle switch): Activar o desactivar estados (ej. "Producto visible en la tienda").
◦ Lista desplegable (Select item): Opción individual dentro de un menú de selección.
◦ Control deslizante (Slider): Para ajustar rangos como el precio mínimo y máximo.

Indicadores, Estado y Navegación

◦ Etiqueta (Badge / Tag): Indicador visual pequeño para estados (ej. "Nuevo", "Sin stock", "Envio gratis").
◦ Icono: Glifos individuales del sistema (ej. lupa, engranaje, usuario, estrella).
◦ Avatar: Contenedor circular para la foto de perfil del emprendedor o el logo de su marca.
◦ Punto de paginación: Indicador de qué página o imagen del carrusel se está visualizando.
◦ Indicador de carga (Spinner / Loader): Elemento animado individual que muestra que un proceso está en curso.

Separadores y Contenedores Básicos

◦ Línea divisoria (Divider): Línea sutil para separar secciones de contenido.
◦ Línea de progreso: Barra horizontal que indica un porcentaje (ej. progreso de configuración de la tienda).
◦ Fondo de tarjeta (Surface / Card basic): El contenedor vacío con sombra o borde, antes de agregarle texto o imágenes.