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 :)

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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 ;)

• 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.

• Acorn (Firefox)

• Carbon (IBM)

• Garden (Zendesk)

• Geist (Vercel)

• Lexicon (Liferay)

• Lightning (Salesforce)

• Material Design (Google)

• Mixpanel (Mixpanel)

• MongoDB (MongoDB)

• Pajamas (GitLab)

• Polaris (Shopify)

• Primer (GitHub)

• Protocol (Mozilla)

• Spectrum (Adobe)

• Vanilla (Ubuntu)

• Yoga (Gympass)

• 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 retículas - Aunque está enfocado para perfiles de diseño, es un libro esencial para comprender qué son las retículas, cómo se diseñan y qué límites tienen.

• No me hagas pensar - Sirve tanto para perfiles de diseño como para perfiles de desarrollo: en los productos digitales no hay que complicar excesivamente las cosas.

• Idea, producto, negocio - Para aquellos perfiles de desarrollo que quieran aprender mejor qué es esto del "negocio" y cómo tener mejores ideas para participar en sesiones de ideación o hacer buenas propuestas.