Aprende diseño UX/UI (siendo un perfil de desarrollo)

El roadmap que necesitas para entender mejor el diseño y desarrollar mejores productos digitales.

Este repositorio contiene una lista seleccionada de recursos para ayudarte a aprender sobre el diseño de interfaces y de experiencia del usuario. Incluye recursos como artículos, tutoriales, vídeos y cursos. Todo en español :)

Contenido

• Color
• Tipografía
• Retículas y 8pt grid
• Atomic Design y tokens
• Accesibilidad
• Proceso de trabajo
• Trabajar con perfiles de diseño
• Componentes y patrones UI
• Leyes y psicología UX
• Handoff
• Recursos gratuitos
• Sistemas de diseño
• Libros

Color

• Paletas de colores para diseño UI en solo 2 pasos - Para crear una buena paleta de color solo necesitas 1 color principal, 1 color acento, 4 colores semánticos y 4 colores neutros.

• Guía de color HSL - El modo de color HSL es más intuitivo que HEX, RGB o RGBA, ya que permite tener más flexibilidad a la hora de crear paletas de color.

Tipografía

• Cómo escoger tipografías - Cinco pasos para seleccionar la mejor tipografía de Google Fonts para el tipo de proyecto en el que estás trabajando.

• Jerarquía tipográfica - Los básicos de la jerarquía tipográfica para que los textos se lean y se entiendan bien.

Retículas y 8pt grid

• Conceptos básicos de las retículas - En pocas palabras: qué son y por qué deberían importarte.

• Retícula de 8pt - Aprende (o recuerda) por qué se suele utilizar una retícula de 8pt para diseñar y desarrollar productos digitales.

Atomic Design y tokens

• Qué es el Atomic Design - Un buen proceso basado en átomos, moléculas, organismos, plantillas y páginas para diseñar mejor y facilitar el desarrollo.

• Qué son los Design Tokens y para qué sirven - El santo grial del diseño atómico. Ventajas de utilizar design tokens y cómo implementarlos.

Accesibilidad

• Principios de la accesibilidad - Conocer los principios de diseño te permitirá detectar los errores en los que puedan caer los perfiles de diseño de tu equipo. Conoce qué es WCAG, A11y y conceptos como el ratio y el contraste.

• Herramientas para comprobar la accesibilidad - Extensiones y herramientas para que puedas asegurarte de que estás desarrollando algo que será accesible.

• European Accessibility Act: guía práctica - Guía práctica sobre cómo implementar la European Accessibility Act en productos digitales, con estrategias reales y herramientas útiles.

Proceso de trabajo

• Trabaja con casos de uso - Una cosa es que lo que has desarrollado funcione. Otra muy diferente es que realmente esté resolviendo casos de uso y necesidades para los usuarios.

• Shape Up - Aprende los básicos de esta metodología de Basecamp enfocada en trabajar proyectos bien definidos y delimitados en ciclos de seis semanas. Porque el desarrollo tiene mucha incertidumbre y, a veces, no tiene sentido seguir sprints u otros métodos.

• Happy Path y Edge Cases - Empieza siempre con el camino fácil, el que no tiene errores, pero no te olvides de los casos extremos... porque pasar, pasan.

• Toma de requisitos - Esta parte es vital, porque las user stories no siempre están completas o contienen toda la información que necesitas.

• Wireframes - Qué son, para qué sirven, tipos existentes, elementos clave y herramientas recomendadas para crearlos. Fundamental para entender lo que el equipo de diseño te está entregando antes del diseño final.

• Investigación cuantitativa vs cualitativa - Las diferencias entre ambos tipos de investigación y cuándo aplicar cada una: datos numéricos de comportamiento vs. comprensión del «por qué».

• Customer Effort Score (CES) - Métrica que mide el esfuerzo que percibe un usuario al interactuar con tu producto. Útil para identificar fricciones en flujos clave que el equipo de desarrollo puede resolver.

Trabajar con perfiles de diseño

• Product Trio, la estructura perfecta - Trabaja mano a mano con product managers y product designers, creando un triunvirato que evite repetir trabajo o ralentizarlo.

• Tipos de estructuras en el equipo - En función de cómo esté estructurado el equipo de diseño con el que trabajes tu trabajo desarrollando será más (o menos) fácil.

• Design Critiques - Aunque puedan parecer enfocadas a perfiles de diseño, si participas en ellas mejorarás el trabajo resultante. Tu enfoque como desarrollador/a es importante.

• Comunicación efectiva - Lo que se cuenta en el artículo es común para cualquier persona que trabaje en el sector tecnológico. Conoce cuáles son las barreras más comunes y las cuatro estrategias que puedes seguir para comunicarte mejor.

• Cómo dar y recibir feedback sin morir en el intento - Lo que dice el título: ni todo el feedback es malo, ni hay que ponerse siempre a la defensiva.

• Diseña poco, comparte mucho - Cómo conseguir que el equipo de diseño te haga actualizaciones periódicas en lugar de enviarte el diseño finalizado y cerrado al final.

• Método SBI: cómo dar feedback - El modelo Situación-Comportamiento-Impacto del Center for Creative Leadership para dar retroalimentación objetiva y constructiva en equipos de producto.

Componentes y patrones UI

• Diseño de formularios - Por qué el 67% de los usuarios abandona los formularios y estrategias clave para evitarlo: labels visibles, validación inteligente y estructura de una columna.

• Modales en diseño UX - Cuándo utilizar modales en una interfaz, patrones que funcionan, errores comunes y buenas prácticas de accesibilidad.

• Tooltips en diseño UX - Cuándo implementar tooltips, buenas prácticas y errores habituales que conviene evitar.

• Guía para diseñar cards - Anatomía, tipos principales y mejores prácticas de las tarjetas en interfaces digitales: espaciado, consistencia y contraste visual.

• Botones deshabilitados - Por qué los botones deshabilitados suelen ser un antipatrón y qué alternativas (como mensajes de error claros) funcionan mejor en usabilidad y accesibilidad.

Leyes y psicología UX

• Ley de Jakob - Los usuarios esperan que tu producto funcione como el resto de productos que ya conocen. Cuándo innovar y cuándo seguir las convenciones establecidas.

• Ley de Pareto en diseño - El 80% de los resultados proviene del 20% de las causas: cómo aplicar este principio para priorizar funcionalidades y maximizar el impacto del producto.

• Pirámide de Maslow en diseño UX - Cómo traducir los cinco niveles de necesidades humanas en decisiones de diseño concretas, con ejemplos de productos digitales conocidos.

• La configuración predeterminada siempre gana - La mayoría de usuarios nunca cambia los valores por defecto: por qué diseñar buenos defaults es una de las decisiones de mayor impacto en un producto.

• Tu interfaz no es tan intuitiva como crees - Los sesgos cognitivos de quien diseña (y desarrolla) hacen que asumamos que algo es obvio cuando para el usuario no lo es.

Handoff

• Cómo hacer un buen handoff al equipo de desarrollo - Hacer un buen handoff es un arte, y no todos los perfiles de diseño lo hacen bien. Conoce qué puedes pedirles ;)

Recursos gratuitos

• SVG Repo - Más de 500.000 iconos en SVG bajo licencia abierta.

• Material Icons - Los iconos de Google Material Design.

• Color Hunt - Utiliza palabras clave para generar paletas de color que funcionen.

• Eva Design System - Crea automáticamente los colores semánticos a partir del color de la marca.

• Componentes UI open-source - Como indica el nombre, aquí encontrarás más de 4.000 componentes de UI en CSS y Tailwind.

• Checklist Design - Asegúrate de que te envían las cosas como deberían...

• Frontend Checklist - Listas para asegurarte de que estás considerando aspectos como la accesibilidad, performance, etc.

Sistemas de diseño

• Acorn (Firefox)

• Ant Design (Alibaba)

• Atlassian Design System

• Carbon (IBM)

• Fluent (Microsoft)

• Garden (Zendesk)

• Geist (Vercel)

• Lexicon (Liferay)

• Lightning (Salesforce)

• Material Design (Google)

• MongoDB (MongoDB)

• Orbit (Kiwi.com)

• Pajamas (GitLab)

• Polaris (Shopify)

• Primer (GitHub)

• Protocol (Mozilla)

• Spectrum (Adobe)

• Vanilla (Ubuntu)

• Yoga (Wellhub)

Libros

• Diseño desde Marte - El primer manual de diseño de producto digital en español. Ideal si quieres aprender "qués es el diseño", cómo trabajan y cómo puedes trabajar mejor con ellos.

• Better web typography for a better web - Está en inglés, pero es el mejor libro que puedes comprar si quieres entender tanto la parte visual como la parte de código.

• Psicología del color - Un libro clásico si quieres entender mejor el uso del color y por qué transmiten sensaciones y emociones.

• [Sistema de r