Learn UX/UI

Try these UX and UI tutorials to learn the principles of user-centered design, prototyping, and wireframing. Learn to craft beautiful and intuitive user interfaces.

Getting started with UX/UI

  • 8 Usability Heuristics (Explained With Toasters)

    8 Usability Heuristics (Explained With Toasters)

    Maddy Beard
  • What is Information Architecture? (UX Tips and Examples)

    What is Information Architecture? (UX Tips and Examples)

    Andrea Eppy
    1. Cómo entender la jerarquía visual en el diseño web

      Cómo entender la jerarquía visual en el diseño web

      Tutorial Beginner

      La jerarquía visual es uno de los principios más importantes detrás de un diseño web efectivo. En este artículo examinaré por qué el desarrollo de una...

    2. Más de 25 wireframes y kits de UI necesarios en tu biblioteca de diseño

      Más de 25 wireframes y kits de UI necesarios en tu biblioteca de diseño

      Tutorial Intermediate

      Los mejores kits de wireframe para ayudarte a diseñar una página web o aplicación, además de plantillas UI para cubrir todos los detalles con iconos,...

    3. Resolviendo problemas con CSS Grid y Flexbox: Diseño de interfaz mediante tarjetas

      Resolviendo problemas con CSS Grid y Flexbox: Diseño de interfaz mediante tarjetas

      Tutorial Intermediate

      El diseño de interfaz mediante tarjetas han sido un gran éxito en el último tiempo, pero la manera de construirlas es todavía limitada por el CSS disponible...

    4. Cómo Crear un Slider de Pantalla Dividida con JavaScript

      Cómo Crear un Slider de Pantalla Dividida con JavaScript

      Tutorial Intermediate

      En video tutorial de hoy voy a mostrar cómo crear un elemento Slider de "pantalla dividida" (o UI, lo que usted prefiere llamarlo) utilizando JavaScript....

    5. Elaborando una Línea de Tiempo Horizontal Con  CSS y JavaScript

      Elaborando una Línea de Tiempo Horizontal Con  CSS y JavaScript

      Tutorial Intermediate

      En un post previo, te mostré cómo crear una línea de tiempo vertical responsiva desde cero. Hoy, cubriré el proceso de crear la línea de tiempo horizontal...

    6. Entendiendo las cualidades y características del color

      Entendiendo las cualidades y características del color

      Tutorial Beginner

      Continuando con nuestro artículo anterior sobre definir y reconocer los colores, ahora exploremos las cualidades y características de los colores.

    7. ¿Cómo hacer un Efecto Hover de Subrayado Movedizo con CSS y JavaScript?

      ¿Cómo hacer un Efecto Hover de Subrayado Movedizo con CSS y JavaScript?

      Tutorial Intermediate

      En el tutorial de Hoy, vamos a usar un poco de CSS y JavaScript para crear un sofisticado menu con efecto hover. No es un resultado final complicado, pero...

    8. Más de 15 kits de interfaz de usuario y recursos para diseñadores de aplicaciones que utilizan Sketch

      Más de 15 kits de interfaz de usuario y recursos para diseñadores de aplicaciones que utilizan Sketch

      Tutorial Beginner

      Crear una interfaz de usuario coherente para tu próxima aplicación es una parte muy importante del proceso del desarrollo. ¿Por qué? Bueno, la interfaz de...

    9. Cómo crear una barra de navegación responsiva con flexbox

      Cómo crear una barra de navegación responsiva con flexbox

      Tutorial Intermediate

      ¡Es momento de un ejercicio práctico en flexbox! En este tutorial utilizaremos flexbox para crear una barra de navegación basada en el enfoque «móviles...

    10. Básicos de Accesibilidad: Diseñando para Discapacidad Visual

      Básicos de Accesibilidad: Diseñando para Discapacidad Visual

      Tutorial Beginner

      Con el 4.5% de la población total experimentando daltonismo, 4% sufriendo de debilidad visual y otro 0.6% siendo ciegos, las dificultades visuales cuando se...

    11. Las Mejores Plantillas Adobe XD para el Diseño de Páginas Web

      Las Mejores Plantillas Adobe XD para el Diseño de Páginas Web

      Tutorial Beginner

      Desde estudios de yoga hasta jardines de niños, sigue leyendo para conocer mi selección de 15+ plantillas Adobe XD para el diseño de páginas web.

    12. Kit UI de Figma GRATIS: App de comida social

      Kit UI de Figma GRATIS: App de comida social

      Tutorial Beginner

      Descarga este kit UI para app de Figma, utiliza cualquiera de sus componentes UI, y guarda los otros para otros diseños, ¡o para otro día!