UX-UI

Tools y Referencias 💡

Páginas de ejemplo

Web Design Inspiration

Fonts

Herramientas de Web Design

Iconos

UI Librerías

CSS: ejemplos y generadores

Chakra UI

Angular

Adobe XD

  • curso files
  • curso
  • assets

    Packs UI

  • free ui adobe xd
  • Buenas prácticas:
    • Mantener librerías actualizadas
    • Descargar versiones light/dark si existen
    • Verificar licencias de uso
    • Integrar en bibliotecas de componentes

Dark Mode

  • Consideraciones de diseño:
    • Contraste mínimo WCAG
    • Colores de superficie y elevación
    • Sombras suaves vs. bordes definidos
    • Estados hover/active adaptados a fondo oscuro
    • Reducción de brillo en colores primarios

Recursos

Videos

Errores comunes — Drag & Drop / UAC

  • Add Take Ownership to Context Menu in Windows 10 - Tutorials
  • Registro:
    • Equipo\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System
  • Posibles soluciones:
    • Desactivar UAC temporalmente (no recomendado permanentemente)
    • Ejecutar Adobe XD como administrador
    • Ajustar permisos del sistema
    • Reiniciar Explorer
  • Unable to drag and drop images into Adobe XD on Windows machine.

curso UX UI Adobe XD Udemy 🌱

curso UX-UI basico

Herramientas de diseño - Adobe XD Desde Cero Parte 1

Disciplinas de diseño

  • UX: investigación, estructura, arquitectura.
  • UI: estética, interacción, patrones visuales.
  • IxD: interacción, microinteracciones, transiciones.
  • Research: información, entrevistas, análisis.
  • Prototipado: validación, hipótesis, pruebas con usuarios.

Proceso de negocio — Flujo de Procesos

  • Descubrimiento del negocio y stakeholders.
  • Mapeo de procesos actuales.
  • Identificación de fricciones y oportunidades.
  • Definición de requerimientos funcionales y no funcionales.
  • Resultados esperados, KPIs y métricas de éxito.

User Persona

  • Fichas de usuario con:
    • Datos demográficos
    • Valores y motivaciones
    • Historia y contexto
    • Objetivos claros
  • Añadir:
    • Dolor/frustraciones
    • Limitaciones técnicas
    • Nivel de experticia digital
    • Escenarios de uso

Screen Flow

  • Mapa de contenidos, plantillas y navegación.
  • Identificación de páginas críticas y rutas optimizadas.
  • Alineación entre objetivos del negocio y flujo real del usuario.

Sitio web:

APP:

Wireframes — Alta fidelidad y Prototipos

  • Bocetos rápidos (low fidelity).
  • Elementos base: layout, bloques, contenido.
  • Alta fidelidad: color, UI final, espaciado, componentes reales.
  • Prototipo funcional:
    • Simulación de interacciones
    • Conexión entre pantallas
    • Animaciones y microinteracciones
  • Feedback técnico y del cliente.
  • Entrega final:
    • Colores, medidas, tipografía, grids
    • Notas para desarrolladores
    • Estados de cada componente

Principios

  • Legibilidad
  • Jerarquía visual
  • Contraste y espaciado
  • Visibilidad del estado del sistema
  • Modelo mental cercano al usuario (mundo real)
  • Libertad del usuario (hacer/deshacer)
  • Guardado automático y borradores
  • Consistencia: terminología, patrones repetidos
  • Definición clara de colores y estados de interacción
  • Prevención y comunicación de errores
  • Uso correcto de placeholders, etiquetas y bloqueo de campos
  • Reconocimiento: pasos completos y pendientes
  • Ayuda contextual y microcopys útiles
  • Persistencia de acciones y datos ya ingresados
  • Considerar múltiples perfiles de usuario
  • Minimalismo intencional (evitar carga cognitiva)
  • Alertas claras con solución y contexto
  • Validación en tiempo real
  • Soporte adicional: FAQs, docs, tutoriales

Patrones de diseño

  • Patrones universales (UX universal heuristics).
  • Patrones locales definidos por un equipo:
    • Colores
    • Menús
    • Navegación repetida
    • Estructura de tarjetas, listas, formularios

Solución y expectativa

Navegación inferior y ergonomía

Card design pattern

Tab navigation

Sistema de diseño

  • Componentes reusables
  • Principios de diseño y paradigmas internos
  • Identidad visual, tono y coherencia
  • Documentación clara para equipos
  • Librerías de componentes

Recursos https://medium.com/ https://asana.com/es

Tono de voz

  • Guía para redacción uniforme
  • Reglas de comunicación
  • Ejemplos correctos/incorrectos

https://mailchimp.com/es/
https://quickbooks.intuit.com/eu/

Colores y tipografía

  • Variables de color
  • Accesibilidad (WCAG)
  • Combinaciones aceptadas
  • Escalas tipográficas, pesos y usos

Componentes de diseño

  • Biblioteca de elementos UI
  • Comunicación entre diseñador y frontend
  • Estados completos:
    • Hover
    • Active
    • Disabled
    • Loading
    • Success/Error

Omnivore ui

type: list
name: "Notas con #ui en Omnivore"
order:
  - property: date_saved
    direction: desc
columns:
  - file.name
  - date_saved
filters:
  and:
    - file.inFolder("Omnivore")
    - file.hasTag("ui")
views:
  - type: table
    name: Table
    sort:
      - property: file.mtime
        direction: DESC

—— UI GPT —–

UX‑UI Recursos Avanzados y Nuevas Referencias

Nuevos Tools y Referencias

Inspiración de Diseño UI / UX

Kits UI / Wireframes

  • 11 great free UI kits para web designers — kits gratuitos y muy variados. :contentReference[oaicite:4]{index=4}
  • Justinmind — herramienta de prototipado muy potente para wireframes de alta fidelidad. :contentReference[oaicite:5]{index=5}
  • Fluid UI — prototipado rápido en navegador para interfaces móviles o web. :contentReference[oaicite:6]{index=6}

Recursos de UX / UI Generales

Accesibilidad

  • Simulación de daltonismo y contraste: usar herramientas como Coblis (ya citado más arriba) + verificar contraste con verificadores de WCAG.
  • Políticas de accesibilidad + mejores prácticas: usar estándares WCAG 2.1, navegación por teclado, roles ARIA, mensajes de error accesibles.
  • Investigación académica: por ejemplo, enfoques de “diseño para todos” desde trabajos de accesibilidad web. :contentReference[oaicite:9]{index=9}

Investigación y Prototipado Avanzado (Papers / IA)

  • GANSpiration: uso de redes generativas adversarias para generar inspiración de UI diversificada. :contentReference[oaicite:10]{index=10}
  • Spacewalker: exploración de diseño UI con programación genética y trabajo colaborativo para generar múltiples variantes. :contentReference[oaicite:11]{index=11}
  • VINS: búsqueda visual para diseño de interfaces móviles usando detección de componentes y estructura jerárquica. :contentReference[oaicite:12]{index=12}
  • Misty: prototipado mediante blending conceptual interactivo para combinar ideas de diferentes diseños. :contentReference[oaicite:13]{index=13}

Extensiones y Herramientas de Productividad

  • GeeksforGeeks – Mejores extensiones Chrome para diseñadores UI/UX — incluye acceso rápido a imágenes, color, recursos visuales. :contentReference[oaicite:14]{index=14}
  • Almacenamiento y organización de inspiración:
    • Según diseñadores en Reddit: “tag cada screenshot con el nombre de la app + qué problema de diseño resuelve” > así organizas por flujos, no solo por proyecto. :contentReference[oaicite:15]{index=15}
    • Otro usuario recomienda usar bibliotecas organizadas por componente (hero, formulario, dashboard…) para facilitar la reutilización. :contentReference[oaicite:16]{index=16}

Generadores / Sistemas de Diseño

  • Generadores de color, escala tipográfica o ideas de UI podrían permitir combinar con herramientas ya conocidas.
  • Sistemas híbridos: usar design tokens + compartir en librerías para equipos (puedes combinar con herramientas que ya usas como Radix, Shadcn, etc, pero con inspiración nueva).
  • Considerar IA futura: integrar inspiración generada (como GANSpiration) en tu flujo de diseño para explorar variaciones creativas sin partir de cero.

Guía Avanzada UX‑UI: Patrones, Heurística, Workflow y Documentación

Accesibilidad (UX Inclusivo)

  • Normativas WCAG 2.1 (AA/AAA)
  • Contraste de color adecuado
  • Tamaño mínimo de textos y botones
  • Navegación completa por teclado
  • Lectores de pantalla y ARIA roles
  • Buenas prácticas:
    • Etiquetas claras
    • Mensajes de error accesibles
    • Feedback visible y audible

Patrones y Componentes

  • Formularios:
    • Campos, validación en tiempo real, placeholders
  • Navegación:
    • Menús, tabs, breadcrumbs, mega menus
  • Cards y grids:
    • Layouts responsivos
    • Jerarquía de información
  • Feedback:
    • Alertas, mensajes de confirmación
    • Popups y modales accesibles
  • Microinteracciones:
    • Hover, focus, click, swipe
    • Transiciones suaves y consistentes

Herramientas de Colaboración

  • Diseño colaborativo:
    • Figma, Adobe XD, Sketch
  • Handoff a desarrollo:
    • Zeplin, Abstract, Storybook
  • Gestión de proyectos UX/UI:
    • Notion, Jira, Asana

Documentación y Sistemas de Diseño

  • Tokens de diseño:
    • Color, tipografía, espaciado, iconografía
  • Librerías de componentes reutilizables
  • Documentación de estados y comportamientos
  • Versionamiento y control de cambios
  • Ejemplos de guías:

Conceptos de UI Avanzados

  • Microinteracciones y animaciones:
  • Dark Mode / Light Mode dinámico
  • Temas personalizables y adaptativos
  • Diseño para accesibilidad y responsive
  • Optimización de performance:
    • Carga progresiva de assets
    • Uso de SVG y icon fonts
    • Lazy loading y caching

Heurística de Usabilidad

  • Utiliza las 10 heurísticas de Nielsen como punto de partida para evaluar la usabilidad de tus diseños: visibilidad de estado, coincidencia con el mundo real, control y libertad, consistencia, prevención de errores, reconocimiento frente a recuerdo, flexibilidad, diseño minimalista, manejo de errores, ayuda/documentación. :contentReference[oaicite:0]{index=0}
  • Asigna severidad a los problemas detectados según su impacto, frecuencia y persistencia — esto permite priorizar mejoras. :contentReference[oaicite:1]{index=1}
  • Realiza sesiones de evaluación heurística con 5‑8 evaluadores para obtener la mayoría de problemas más comunes sin gastar demasiado. :contentReference[oaicite:2]{index=2}
  • Para dominios especializados (como VR o IA), considera desarrollar heurísticas propias usando metodologías como PROMETHEUS, que define etapas para adaptar las heurísticas a nuevas tecnologías. :contentReference[oaicite:3]{index=3}

Patrones de Diseño (UI / Interacción)

  • Los UI patterns son soluciones reutilizables para problemas comunes: navegación persistente, formularios, tarjetas, modales, feedback, etc. :contentReference[oaicite:4]{index=4}
  • Patrones de interacción: agrupa controles según la percepción humana (basado en principios Gestalt como proximidad, semejanza, continuidad) para mejorar la agrupación visual. :contentReference[oaicite:5]{index=5}
  • Incluye patrones de diseño consistentes en tu sistema de diseño (design system): definir cuándo usar un patrón, variaciones, estados (hover, error…) y ejemplos. :contentReference[oaicite:6]{index=6}
  • Documenta también antipatrones (soluciones comunes, pero ineficaces), como exceso de carga cognitiva, navegaciones confusas, listeners masivos (“Blob Listeners” en código que manejan demasiados comandos) que afectan mantenimiento. :contentReference[oaicite:7]{index=7} :contentReference[oaicite:8]{index=8}

Workflow Diseño UX / UI

  1. Investigación
    • Personas, escenarios, análisis competitivo
    • Card sorting, entrevistas, test de tareas
  2. Arquitectura de la información
    • Mapas de sitio
    • Flujos de usuario (user flows)
    • Esquemas de pantallas (wireframes low‑fidelity) :contentReference[oaicite:9]{index=9}
  3. Prototipado
    • Bocetos → wireframes → prototipos de media / alta fidelidad
    • Validación continua mediante pruebas de usabilidad
  4. Evaluación heurística
    • Ejecutar con expertos según las heurísticas
    • Consolidar hallazgos, priorizar y planificar corrección
  5. Iteración
    • Ajustes de diseño basados en feedback
    • Nuevas pruebas si es necesario
  6. Handoff a desarrollo
    • Tokens de diseño (colores, tipografía, espaciado)
    • Biblioteca de componentes (botones, formularios, modales…)
    • Guías de uso (cuando aplicar cada patrón)
  7. Documentación y mantenimiento
    • Guía de estilo UI / UX
    • Documentación de componentes (states, accesibilidad, variaciones)
    • Versionamiento del sistema de diseño

Documentación (Design System / Guías)

  • Define tokens de diseño: variables para color, tipografía, espaciado, iconografía.
  • Reúne tus patrones en una biblioteca de componentes: cada componente debe tener propósito, estados, variaciones y restricciones.
  • Crea guías de estilo y uso: incluye reglas sobre cuándo aplicar cada patrón, cómo combinar componentes, accesibilidad, feedback.
  • Documenta interacciones: microinteracciones, animaciones, transiciones, cómo deben reaccionar los componentes a eventos.
  • Versiona el sistema de diseño: guarda cambios, añade changelog para que los equipos sepan qué ha cambiado y por qué.

Métricas y Validación

  • Mide la usabilidad con pruebas de usuarios: tareas, tiempo, tasa de éxito, errores.
  • Usa heurística para auditorías rápidas entre iteraciones.
  • Registra feedback y hallazgos en herramientas de gestión (Notion, Jira, Confluence) para hacer seguimiento.
  • Define KPIs claros: tasa de conversión, abandono, satisfacción, accesibilidad (por ejemplo, cumplimiento WCAG).

Buenas Prácticas Finales

  • Mantén coherencia visual y de interacción: usar patrones predecibles reduce la carga cognitiva. :contentReference[oaicite:10]{index=10}
  • Prioriza accesibilidad desde el diseño: contraste, navegación por teclado, feedback claro.
  • Itera rápido, pero documenta bien: cada cambio debe quedar reflejado en tu sistema de diseño.
  • Involucra a stakeholders y desarrolladores en el proceso para garantizar que tu diseño sea implementable y sostenible.
  • Revisa y actualiza heurísticas y patrones regularmente: las tecnologías cambian y tus guías deben adaptarse.

Guía para la Elaboración de Guías de Diseño / Diseño de Sistema

¿Por qué Crear una Guía?

  • Garantiza coherencia visual y de interacción entre equipos de diseño y desarrollo. :contentReference[oaicite:0]{index=0}
  • Actúa como fuente de verdad (“single source of truth”) para componentes, estilos, tokens, patrones. :contentReference[oaicite:1]{index=1}
  • Facilita el onboarding: nuevos diseñadores o desarrolladores pueden entender rápidamente cómo usar los elementos del sistema. :contentReference[oaicite:2]{index=2}
  • Ayuda a escalar el producto: las guías evolutivas permiten que el diseño evolucione sin romper la consistencia. :contentReference[oaicite:3]{index=3}

Tipos de Guías (Qué Documentar)

  • Guía de Estilo (Style Guide): define color, tipografía, iconos, espaciado, tono visual. :contentReference[oaicite:4]{index=4}
  • Sistema de Diseño (Design System): incluye componentes reutilizables, patterns, documentación técnica, tokens de diseño. :contentReference[oaicite:5]{index=5}
  • Guía de Patrones / Interacción: define cómo deben comportarse los componentes (modales, formularios, navegación, feedback).
  • Guía de Accesibilidad: estándares de accesibilidad, roles ARIA, contraste, navegación por teclado.
  • Guía de Contribución: cómo proponer nuevos componentes, cómo documentar, flujos para mantener la guía actualizada.

Estructura Recomendada para la Guía

Basado en buenas prácticas: :contentReference[oaicite:6]{index=6}

  1. Visión General (“Overview”): qué es el sistema, para quién es, cómo usar esta guía.
  2. Fundamentos (“Foundations”):
    • Tokens de diseño: color, tipografía, espaciado, sombras, etc. :contentReference[oaicite:7]{index=7}
    • Principios de diseño: consistencia, accesibilidad, jerarquía.
  3. Componentes:
    • Para cada componente: descripción, estados (hover, activo, deshabilitado…), variantes, cuándo usarlo o no. :contentReference[oaicite:8]{index=8}
    • Código de ejemplo si es relevante (React, HTML, CSS…). :contentReference[oaicite:9]{index=9}
  4. Patrones: flujos, layouts, interacción. :contentReference[oaicite:10]{index=10}
  5. Contenido (“Content”):
    • Tono de voz, microcopy, errores, mensajería. :contentReference[oaicite:11]{index=11}
  6. Accesibilidad (“Accessibility”): pautas, roles ARIA, testing recomendado. :contentReference[oaicite:12]{index=12}
  7. Contribución: cómo proponer cambios, plantilla para nuevos componentes.
  8. Changelog / Versionado:
    • Control de versiones de la guía, registro de cambios. :contentReference[oaicite:13]{index=13}
  9. Recursos adicionales: herramientas, plugins, tutoriales, documentación para equipos. :contentReference[oaicite:14]{index=14}

Buenas Prácticas para Escribir la Guía

  • Define tu audiencia: no documentes todo para todos. Adaptar el contenido según diseñadores, desarrolladores, PMs. :contentReference[oaicite:15]{index=15}
  • Usa lenguaje claro, sobre todo en definiciones, evita jerga innecesaria. :contentReference[oaicite:16]{index=16}
  • Proporciona ejemplos visuales: capturas, diagramas, GIFs o prototipos interactivos para mostrar componentes en acción. :contentReference[oaicite:17]{index=17}
  • Explica no solo qué es el componente, sino cuándo usarlo, cómo debe comportarse, qué estados tiene, y qué no debe hacerse. :contentReference[oaicite:18]{index=18}
  • Documenta consideraciones de accesibilidad: contraste, roles ARIA, navegación de teclado. :contentReference[oaicite:19]{index=19}
  • Mantén un glosario de términos para asegurar consistencia terminológica.

Herramientas y Plataformas para la Documentación

  • Usa plataformas que se integren con tus flujos: Figma, Storybook, Zeroheight, Confluence, etc. :contentReference[oaicite:20]{index=20}
  • Elige una herramienta fácil de mantener para tu equipo: no vale de nada si la guía no se actualiza. :contentReference[oaicite:21]{index=21}
  • Automatiza la versión: usa control de versiones, registros de cambios, plantillas para nuevas entradas. :contentReference[oaicite:22]{index=22}
  • Considera sistemas donde los diseñadores y devs colaboren para mantener la guía viva (no solo un documento estático). :contentReference[oaicite:23]{index=23}

Gobernanza y Mantenimiento

  • Establece un equipo de gobernanza: responsables de revisar y aprobar cambios.
  • Define un workflow de contribución: cómo proponen y documentan nuevos componentes o cambios.
  • Programa revisiones regulares: para actualizar tokens, componentes o pautas según evolución del producto.
  • Integra la documentación en el ciclo de liberación: cada vez que se lanza una nueva versión de componentes, actualizar la guía. :contentReference[oaicite:24]{index=24}
  • Mantén un changelog activo, para que todos sepan qué ha cambiado y cuándo.

Principios Avanzados

  • Documenta reglas de diseño como reglas comprobables: por ejemplo, podrías definir reglas de diseño que se puedan validar contra el código, para asegurar coherencia. (RulePad) :contentReference[oaicite:25]{index=25}
  • Cronicle (“cronicar lo que ya existe”): en lugar de solo describir lo ideal, documenta cómo se usa el sistema en la práctica, para que sea más real y adoptable. :contentReference[oaicite:26]{index=26}
  • Diseña para inclusividad desde la documentación: asegura que la guía sea accesible para todos los roles del equipo, incluso personas con poca experiencia técnica.

Medición del Éxito de la Guía

  • Feedback de los usuarios de la guía: encuestas internas (diseñadores, devs) para saber si es útil.
  • Métricas de adopción: cuántos equipos usan el sistema, cuántas incidencias de inconsistencias ocurren.
  • Auditorías de consistencia: verifica periódicamente que los componentes del producto coinciden con la guía.
  • Actualizaciones regulares basadas en feedback y métricas recogidas.