BACKGROUND_diseño_centrado_en_las_personas

LOGO_diseño_centrado_en_las_personas

Diseño UI

Explora tu ruta de aprendizaje.
curva_bottom

Ruta aprendizaje Diseño UI

Descubre y aprende principios, conceptos, metodologías, procesos y herramientas sobre diseño UI para construir interfaces de usuario usables, eficientes y estéticas.

Estación 1

Principios de diseño visual

Aprende los fundamentos y principios de la composición visual, cómo usar el color, la tipografía, imágenes e iconografía en tus diseños.

Estación 2

Branding

Conoce cuáles son los fundamentos del branding y su relación con el UI.

Estación 3

Investigación básica para diseño UI

Obtén información y documentación sobre productos similares al tuyo para construir tu propuesta, analizando marcas, tendencias y competidores.

Estación 4

Fundamentos UX

Conoce algunas técnicas, métodos y las bases necesarias para diseñar productos usables, accesibles, eficientes y deseables.

Estación 5

Usabilidad y Accesibilidad

Para que todos los usuarios puedan cumplir sus objetivos eficiente y satisfactoriamente, se debe tener en cuenta: la usabilidad (facilidad de uso) y la accesibilidad (considerar el uso para personas con capacidades diferentes).

Estación 6

Metodologías y frameworks

Permiten dar solución a problemas complejos y construcción de productos, poniendo en el centro a las personas, haciendo validaciones tempranas y promoviendo la iteración.

Estación 7

Herramientas de diseño UI

Conoce los conceptos y funciones de los diferentes software para diseño UX/UI y practica lo aprendido.

Estación 8

Design System y Atomic Design

Para asegurar la consistencia, la eficiencia y optimizar el tiempo del proceso de diseño, se requiere un sistema organizado, estandarizado y reutilizable.

Estación 9

Diseño Web y Móvil

Aprende a diseñar aplicaciones en entornos web y móviles conociendo las diferencias entre las tecnologías: web responsive, PWA, aplicaciones móviles nativas e híbridas.

Estación 10

Prototipado y microinteracciones

Un prototipo es un artefacto que permite imitar la funcionalidad de una página web o aplicación para, idealmente, ponerlo a prueba con usuarios ahorrando tiempo y costos de desarrollo.

Estación 11

Entregables y Handoff

Al terminar de diseñar, es el momento de hacer la entrega del diseño, los activos y los assets al equipo de desarrollo Frontend. Aprende las herramientas y la estructura para hacerlo.

Estación 12

Aproximación al frontend

Conoce los elementos, librerías y algunos frameworks Frontend para construir interfaces y, además, aprende algunos fundamentos del SEO.

Estación 13

Diseño para la Conversión y Product Growth

Aprende cómo hacer diseños que aporten a la conversión, así mismo, conoce las bases y fundamentos del Product Growth.

curva_bottom

Propósito del diseñador UI en Pragma

Guiar a los usuarios a través de interfaces fáciles de usar, accesibles, estéticamente agradables, creativas, innovadoras y conectadas con el lenguaje de cada marca.

íconos ruta de ui_diseño
1. Fundamentos del diseño visual
Vídeo

Conoce cuáles son los elementos básicos del diseño: líneas, formas, texturas y más.

6
Minutos
íconos ruta de ui_gestalt
2. Principios de la Gestalt
Artículo

Aprende y aplica los principios de la percepción visual en el diseño UI.

4
Minutos
íconos ruta de ui_color
3. Uso del color
Artículo

El color es una parte fundamental del diseño, saber su significado y cómo combinarlo te ayudará en el desarrollo de tus proyectos de diseño.

40
Minutos
íconos ruta de ui_composición
4. Disposición y Composición
Vídeo
Aprende cómo usar la disposición, la composición en diseño, qué es proximidad, espacio en blanco, alineación, contraste y establecer una jerarquía en un diseño.
5
Minutos
íconos ruta de ui_tipografía
5. Tipografía
Artículos y herramientas
Profundiza tus conocimientos en el uso, elementos y combinación de tipografía.
Dedicación
Libre
íconos ruta de ui_imágenes
6. Uso de imágenes
Presentación y Artículo
Aprende sobre los formatos de imágenes y su óptimo uso en la web para evitar tiempos de carga altos que generen una mala experiencia en los usuarios.
15
Minutos
íconos ruta de ui_iconos
7. Uso de íconos en UI
Artículos
Cuando hagas uso de iconografía en tus diseños, asegúrate de que sean familiares y entendibles para el usuario, acá te dejamos algunas recomendaciones:
20
Minutos
Icon_card_angular_animation
1. Adobe XD
Curso en video

Aprende a diseñar prototipos interactivos de sitios web, aplicaciones móviles y software de forma profesional con esta gran herramienta. 

Dedicación
Libre
Icon_card_pruebas_angular
2. Figma
Curso en vídeo
Aprende a diseñar prototipos interactivos de cualquier activo digital, de forma profesional, con una de las herramientas más importantes de la industria UX/UI.
Dedicación
Libre
Icon_card_contentful_cms
3. Sketch
Tutorial en video

Sketch sigue siendo un jugador importante en el competido mundo del diseño de interfaces; así que te invitamos a aprender sobre diseño UI en esta herramienta.

Dedicación
Libre
Icon_card_curso_angular
4. Ejercicio
Herramientas de diseño UI
Teniendo en cuenta el contexto y el método, realiza el ejercicio número tres, ubicado en el slide 7 de la presentación.
Dedicación
Libre
Icon_card_PWA
1. Usabilidad
Artículos
¿Qué es la usabilidad? ¿Cuáles son sus principios? ¿Cuándo y cómo mejorarlo? Aprende a aplicar los principios de usabilidad en tus diseños.
60
Minutos
Icon_card_gatsby
2. Test de usabilidad
Artículo
Conoce cómo configurar pruebas de usabilidad remotas optimizadas para obtener resultados reales y procesables.
45
Minutos
ball_blue
3. Accesibilidad
Artículos
Familiarízate con la accesibilidad, ¿qué es, cuáles son las mejores prácticas y cómo se pueden aplicar a través del diseño?
70
Minutos
Icon_card_PWA
4. Directrices de accesibilidad del contenido web
Artículo
Conoce sobre las Pautas de accesibilidad al contenido web, las diferentes versiones y niveles, los requisitos de conformidad y por qué los sitios web deben ser accesibles.
Dedicación
Libre
ball_JS
5. Pruebas de accesibilidad
Plantilla
Conoce cuáles son los criterios a evaluar al realizar tests de accesibilidad de un producto con las mejores prácticas.
Dedicación
Libre
Icon_card_pruebas_angular
6. Modelo de un producto accesible
Charla
Conoce cómo documentar un producto digital accesible a nivel de componentes y flujos.
90
Minutos
Icon_card_phaser3_curso
1. Fundamentos de UX
Artículo y Libro
La experiencia de usuario (UX) es un proceso que permite diseñar productos significativos, relevantes para los usuarios y de valor para los negocios.
Dedicación
Libre
Icon_card_PWA
2. Evaluación heurística
Artículo

Es una técnica usada en la fase de evaluación dentro del proceso de DCU (diseño centrado en el usuario). Permite diagnosticar elementos por corregir que no hayan sido visibles en etapas previas antes del desarrollo o lanzamiento. También puede aplicarse a productos desarrollados.

20
Minutos
Icon_card_javascript
3. Leyes de UX
Artículo
Son un conjunto de buenas prácticas a considerar cuando se diseñan o construyen interfaces de usuario.
60
Minutos
Icon_card_gatsby
4. Ux Research
Artículos
La investigación UX permite estudiar el comportamiento y características de los usuarios en su contexto y, de esta manera, ayudar a definir el camino que orientará la construcción de un producto.
40
Minutos
ball_doc
5. Métodos de UX Research
Artículo
Conoce diferentes métodos de investigación UX y aprende cómo aplicarlos.
Dedicación
Libre
Icon_card_PWA
6. Arquitectura de información
Artículos
La arquitectura de información organiza y etiqueta la información para determinar la estructura y el marcado de contenidos de un producto interactivo que responda a las necesidades de los usuarios.
25
Minutos
ball_blue
7. Diseño de interacción
Artículos
Es la rama de TI que estudia, planifica y aplica puntos de interactividad en sistemas digitales y físicos con el objetivo de optimizar la relación entre el usuario y el producto.
45
Minutos
ball_JS
8. Flowcharts, Sketching y Wireframing
Artículos, presentación
Para diagramar el flujo de interacción y organizar el contenido de una interfaz de usuario, se construyen bocetos y wireframes basados en flowcharts.
70
Minutos
ball_doc
9. Prototipado
Artículo
El prototipado es un proceso que permite generar un artefacto que incluya aspectos funcionales, estructurales y gráficos del diseño.
20
Minutos
Icon_card_gatsby
10. Testing con usuarios
Guía
El test con usuarios es una técnica dentro del proceso de DCU (diseño centrado en el usuario) para la evaluación y validación de prototipos, conocer cómo fue la experiencia y que barreras tuvo el usuario.
20
Minutos
Icon_card_PWA
1. Benchmark visual y funcional
Contenido variado
Analiza la competencia y opciones del mercado para diseñar tu producto desde el valor diferencial.
40
Minutos
Icon_card_gatsby
2. Moodboard
Artículo, video
Herramienta visual que ayuda a encontrar la dirección correcta para los diseños y crear una base sólida que defina el look and feel o la apariencia.
60
Minutos
Icon_card_PWA
3. Análisis de tendencias
Presentación
Aprende a seleccionar las tendencias de diseño relacionándolas con el tipo de usuario, la personalidad de marca y lo que espera el mercado.
25
Minutos
Icon_card_gitgalaxy
4. Inspiración y referencias visuales UI
Sitios web
¿Listo para empezar con tu propuesta de diseño? Busca referencias visuales e inspírate en los siguientes sitio web:
Dedicación
Libre
Icon_card_curso_angular
5. Ejercicio
Benchmark visual
Teniendo en cuenta el contexto y el método, realiza el ejercicio número dos, ubicado en el slide 6 de la presentación.
Dedicación
Libre
Icon_card_PWA
1. Design System
Artículos
Es una colección de elementos reutilizables, de estándares y guías que se pueden ensamblar para construir cualquier activo digital.
Dedicación
Libre
Icon_card_javascript
2. Design Systems VS patrones de diseño
Artículo
Conoce y aprende cuáles son las diferencias entre un sistema de diseño y una librería de patrones.
5
Minutos
Icon_card_gatsby
3. Validación de un sistema de diseño
Checklist
Conoce los estándares fundamentales de un DS y analiza cuáles se aplican de acuerdo a la madurez de tu sistema de diseño.
40
Minutos
Icon_card_gatsby
4. Patrones de diseño
Artículo y herramienta
Los patrones de diseño son componentes, elementos y estructuras reutilizables y recurrentes para construir interfaces de usuario. Además, nos permiten construir experiencias con modelos de navegación y uso estandarizados.
Dedicación
Libre
Icon_card_javascript
5. Atomic Design
Artículo y libro
Atomic Design es una metodología para crear sistemas de diseño, la cual propone 5 niveles para organizar los elementos de una interfaz.
Dedicación
Libre
Icon_card_react_spring_library
6. Curso Design System Figma
Videos
Este curso de 80 minutos te guiará para aprender conceptos fundamentales, construcción, pruebas y documentación del DS.
80
Minutos
Icon_card_curso_ract
7. Ejercicio
Guía de estilos y DS
Teniendo en cuenta el contexto y el método, realiza el ejercicio número cuatro, ubicado en el slide 8 de la presentación.
Dedicación
Libre
ball_blue
1. Diseño Centrado en las Personas
Artículo y Ruta DCP
El objetivo del DCU es crear productos útiles y usables para satisfacer las necesidades de las personas, involucrándolas en todas las fases de desarrollo de producto.
Dedicación
Libre
ball_doc
2. Design Thinking
Artículo y guía
Es un proceso iterativo que permite solucionar problemas complejos a través de la generación de ideas innovadoras que involucran equipos multidisciplinarios.
Dedicación
Libre
Icon_card_PWA
3. Lean UX
Artículo
Es una metodología que integra conceptos de UX, metodología ágiles y de innovación para el desarrollo de soluciones y proyectos.
30
Minutos
Icon_card_javascript
4. Agile UX
Artículo
Agile UX combina los principios del desarrollo de software ágil con el diseño de UI/UX.
16
Minutos
Icon_card_gatsby
5. Design Sprint
Artículo
Es la solución ideal para validar ideas y solventar problemas. Involucra metodologías ágiles y Design Thinking para crear un prototipo desde cero y testearlo con usuarios en tan solo 4 días.
7
Minutos
Icon_card_angular_animation
6. Dual Track
Presentación
Un marco de trabajo que conecta los procesos de diseño de producto con procesos ágiles y de desarrollo.
30
Minutos
Icon_card_PWA
1. Fundamentos del branding
Artículo
Entender qué es una marca y su relación con el diseño.
22
Minutos
Icon_card_angular_animation
2. Identidad de marca
Vídeo
Conoce sobre la identidad de marca y para qué sirve; además, algunos de sus componentes: logotipo, colores, tipografía e imágenes.
6
Minutos
Icon_card_javascript
3. Relación del branding con el UI
Artículo
Conocer la relación del branding con el UI, nos permitirá incorporar personalidad y los elementos que componen la marca en nuestro diseño.
10
Minutos
Icon_card_react_spring_library
4. ¿Cómo entender una marca?
Vídeo
Nuestra experiencia aporta conocimiento, te compartimos cómo los equipos Pragma entienden las marcas en un entorno real.
37
Minutos
ball_curso
5. Ejercicio
Branding
Teniendo en cuenta el contexto y el método, realiza el ejercicio número uno, ubicado en el slide 5 de la presentación.
Dedicación
Libre
Icon_card_PWA
1. Diseñando para entornos web y móviles
Artículo
Diferencias entre PWA, aplicaciones móviles nativas e híbridas.
40
Minutos
Icon_card_javascript
2. Web Responsive Design
Contenido múltiple
Capacidad de las páginas para visualizarse y adaptarse de manera fluida en diferentes dispositivos: desktop, tablet y smartphone en pro de la accesibilidad.
60
Minutos
Icon_card_gatsby
3. Patrones de diseño móvil
Artículos
Conoce los patrones y mejores prácticas de diseño para construir aplicaciones móviles nativas, híbridas o PWA.
Dedicación
Libre
Icon_card_seo_checklist
4. Ejercicio
Diseño en alta fidelidad
Teniendo en cuenta el contexto y el método, realiza el ejercicio número cinco, ubicado en el slide 9 de la presentación.
Dedicación
Libre
ball_JS
1. Prototipos
Artículos
Artefacto que permite hacer una demostración o validación de cualquier tipo de producto, servicio, software o app, teniendo en cuenta diferentes niveles de fidelidad.
50
Minutos
ball_doc
2. Principios de la animación
Artículos
La animación es el medio visual que permite tener una navegación óptima y una mejor visibilidad de los estados de una interfaz de usuario para mejorar la experiencia.
Dedicación
Libre
ball_blue
3. Microinteracciones
Artículos
Son eventos que comunican estados, resultados y retroalimentación. Mejoran la sensación de manipulación de una interfaz para los usuarios.
60
Minutos
Icon_card_curso_angular
4. Ejercicio
Prototipado interactivo
Teniendo en cuenta el contexto y el método, realiza el ejercicio número seis, ubicado en el slide 10 de la presentación.
Dedicación
Libre
Icon_card_PWA
1. Zeplin
Guías
Es una herramienta donde se publican los diseños UI (specs) y Design Systems para ser consultados e inspeccionados por los desarrolladores Frontend y otros stakeholders.
Dedicación
Libre
Icon_card_pruebas_react
2. Zeplin y Figma
Vídeo
Conecta Zeplin con Figma para entregar de manera óptima tus diseños e interfaces al equipo de desarrollo frontend.
10
Minutos
Icon_card_react_spring_library
3. Zeplin y Adobe XD
Vídeo
Conecta Zeplin con Adobe XD para entregar de manera óptima tus diseños e interfaces al equipo de desarrollo frontend.
17
minutos
Icon_card_pruebas_angular
4. Zeplin y Sketch
Vídeo
Conecta Zeplin con Sketch para entregar de manera óptima tus diseños e interfaces al equipo de desarrollo frontend.
7
Minutos
Icon_card_PWA
5. Manejo de versiones
Artículos
El control de versiones  de tus diseños permite identificar cambios por menores que sean; también, darle claridad al equipo de desarrollo sin generar archivos duplicados, además, tener la información centralizada en una sola fuente de consulta.
Dedicación
Libre
Icon_card_seo_checklist
6. Ejercicio
Exploración Zeplin
Teniendo en cuenta el contexto y el método, realiza el ejercicio número siete, ubicado en el slide 11 de la presentación.
Dedicación
Libre
Icon_card_gitgalaxy
1. Fundamentos de frontend
Artículo y Ruta Frontend
El Frontend es la parte visual del desarrollo web con la que interactúan los usuarios. Combina HTML, CSS y JS para construir interfaces funcionales.
Dedicación
Libre
Icon_card_PWA
2. HTML5, CSS3 y JS
Videoos, Artículos
Para construir la interfaz gráfica de las páginas que componen un sitio web, es necesario aprender HTML (estructura), CSS (estilos) y JS (interacción).
Dedicación
Libre
Icon_card_javascript
3. SEO y UI
Artículos, charlas, ebook
Proceso para posicionar un sitio web en los motores de búsqueda a través de la optimización del contenido, la navegación, la estructura, la carga, los metadatos y otras prácticas adicionales.
Dedicación
Libre
Icon_card_gatsby
4. Ecommerce para UI
Artículos y recursos
Conoce los elementos, componentes y estándares de diferentes plataformas de comercio electrónico para diseñar interfaces de usuario.
Dedicación
Libre
ball_blue
5. Herramientas Low Code y no code
Charlas y Documentación
Las tecnologías Low Code / No Code son herramientas que permiten la creación de soluciones digitales con mínimos de programación y, en algunos casos, sin necesidad de codificación.
Dedicación
Libre
ball_JS
6. Frameworks CSS
Presentación
Para facilitar la construcción de interfaces, existen bibliotecas que brindan componentes y estilos prefabricados a nivel de código.
Dedicación
Libre
Icon_card_javascript
1. Diseño orientado a la conversión
Artículos, presentación
Adicional a un buen diseño visual, la ubicación estratégica de los elementos y CTAs es fundamental para convertir usuarios y lograr objetivos.
2
Horas
Icon_card_PWA
2. Qué son los Heatmap y su uso
Artículo
Un mapa de calor o heatmap es un recurso visual que permite analizar el comportamiento del usuario en un activo digital.
6
Minutos
Icon_card_angular_animation
3. Curso de Google Analytics para principiantes
Curso
En este curso aprenderás sobre la medición del tráfico de sitios web. Además, cómo analizar los informes básicos "Audiencia", "Adquisición" y "Comportamiento".
Dedicación
libre
íconos ruta de ui_iconos
4 .Funnel de conversión
Artículo, video
Metodología y herramienta para analizar y optimizar las conversiones, lograr acciones esperadas de los usuarios o mejorar las ventas.
30
Minutos
Icon_card_pruebas_angular
5. Cursos Fundamentos de Product Growth
Cursos cortos
Descubre cómo pueden los negocios aprovechar la metodología Growth Hacking para dirigir el crecimiento hacia la dirección correcta.
Dedicación
Libre
Icon_card_gatsby
6. Método Growth Pragma
Presentación
Conoce el método Pragma para el crecimiento y evolución de activos digitales.
Dedicación
Libre
curva_top

¡Gracias!

Los contenidos y recursos, compartidos a través de esta ruta de conocimiento, provienen de nuestro centro de aprendizaje y diferentes fuentes de internet. Agradecemos a los creadores de este contenido por compartir su conocimiento sobre UI, UX, diseño visual y demás con el mundo.

Explora más contenido
dentro de Academia Pragma

Más Pragmáticos como tú, también tienen mucho que enseñar y han compartido su conocimiento en nuestra Academia. Hemos seleccionado algunas entradas que seguro, te ayudarán en tu viaje de conocimiento.

FONDO BLOG H GRANDE

4 pilares del UX Research para el mejoramiento continuo

Uno de los principales retos que tenemos como aliados de nuestros clientes es acompañarlos en la gestión de sus activos digitales a través del mejoramiento continuo. En este proceso, el UX Research es una herramienta decisiva. Por eso, en este artículo les contaré un ejemplo práctico de sus 4 pilares.

Ver más →
h_diseño_estrategico_oculto

El valor oculto del diseño estratégico en UX

Para aprovechar el valor oculto del Diseño Estratégico es fundamental entender tres principios: diseños logrables en ambientes de desarrollo, alcanzar los objetivos del negocio; y por último, diseñar productos y servicios deseables ante los ojos de los usuarios finales.

Ver más →
h_confesiones_de_un_disenador_ux

Confesiones de un diseñador UX: ¿Cómo tratar con clientes difíciles?

Quizás tanto tú como yo hemos visto la implacable mirada de negación de un cliente o peor aún, varios de ellos al mismo tiempo. Quizás, también nos hemos enfrentado en discusiones interminables en las que nos sentimos derrotados

Ver más →