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

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 y optimizar la eficiencia y 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, PWAs, 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 entrega del diseño, activos y assets al equipo de desarrollo. Aprende las herramientas y la estructura para hacerlo.

Estación 12

Aproximación al frontend

Conoce los elementos, librerías y frameworks Front End para construir la interfaz y, además, algunos elementos para entender el SEO.

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. 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 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.
20
Minutos
íconos ruta de ui_imágenes
6. Uso de imágenes
Presentación y Artículo
Aprende más sobre los formatos de imágenes y su óptimo uso en web para evitar tiempos de carga altos que generen una mala experiencia en nuestros usuarios.
15
Minutos
íconos ruta de ui_iconos
7. Iconografía
Artículo
Cuando hagas uso de iconografía en tus diseños, asegúrate de que sean familiares y entendibles para tu 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 aprende sobre diseño UI en esta herramienta.

Dedicación
Libre
Icon_card_curso_angular
4. Ejercicio
Práctica
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. Principios de la 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. Pruebas de usabilidad
Artículo
Conoce cómo configurar pruebas de usabilidad remotas optimizadas para obtener resultados reales y procesables.
45
Minutos
ball_blue
3. Principios de la 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. Web content accessibility guideline
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.
25
Minutos
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_phaser3_curso
1. Fundamentos de UX
Artículo y Libro
La experiencia de usuario (UX) es un proceso que permite diseñar productos significativos y 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 dentro de un proceso de DCU (diseño centrado en el usuario), en la fase de evaluación. Permite diagnosticar elementos por corregir que no hayan sido visibles en etapas previas antes del desarrollo o lanzamiento.
20
Minutos
Icon_card_javascript
3. Leyes de UX
Artículo
Son un grupo de mejores prácticas a considerar cuando se diseña o construye interfaces de usuario.
60
Minutos
Icon_card_gatsby
4. Ux Research
Artículos
La investigación UX permite estudiar sistemáticamente a 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 etiquetado de contenidos de un producto interactivo que responda a las necesidades de los usuarios.
50
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
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
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
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ículos
Herramienta visual que ayuda a encontrar la dirección correcta para los diseños y crear una base sólida para el look and feel que deseamos crear.
60
Minutos
Icon_card_PWA
3. Análisis de tendencias
Presentación
Conoce 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 sitios:
Dedicación
Libre
Icon_card_curso_angular
5. Ejercicio
Práctica
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 ensamblarse para construir cualquier activo digital.
60
Minutos
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.
15
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 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_curso_ract
6. Ejercicio
Práctica
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 el usuario
Artículos 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 ideas innovadoras que involucra equipos multidisciplinarios y usuarios.
95
Minutos
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.
40
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.
25
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. 
90
Minutos
Icon_card_PWA
1. Fundamentos de branding
Artículo
Entender qué es una marca y su relación con el diseño.
15
Minutos
Icon_card_angular_animation
2. Identidad de marca
Vídeo
Conoce más sobre la identidad de marca, para qué sirve, identidad visual, componentes de la identidad visual, logotipos, 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 Design nos permitirá incorporar personalidad y los elementos que componen la marca en nuestro diseño.
10
Minutos
Icon_card_react_spring_library
4. Asimilación de marca
Vídeo
Nuestra experiencia aporta conocimiento, te compartimos la experiencia de nuestro equipo trabajando con marcas en un entorno real.
37
Minutos
ball_curso
5. Ejercicio
Práctica
Teniendo en cuenta el contexto y el método realiza el ejercicio número uno, ubicado en el slide 5 de la presentación.
Dedilcación
Libre
Icon_card_PWA
1. Diseño web y móvil
Artículo
Diferencias entre PWA, aplicaciones móviles nativas e híbridas.
40
Minutos
Icon_card_javascript
2. Web Responsive Design
Contenido múltiple
Se usa para que una página o sitio web puedan visualizarse y adaptarse de manera dinámica en diferentes dispositivos: desktop, tablet y smartphone en pro de la accesibilidad.
60
Minutos
Icon_card_gatsby
3. Diseño móvil
Artículos
Conoce los patrones y mejores prácticas de diseño móvil para entornos nativas, híbridos o PWAs.
Dedicación
Libre
Icon_card_PWA
4. 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 usuario y lograr objetivos. 
2
Horas
Icon_card_seo_checklist
5. Ejercicio
Práctica
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
Diseño para una demostració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 mejorando 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
Práctica
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 y Design Systems para ser consultados e inspeccionados por los desarrolladores Frontend y otros stakeholders.
25
Minutos
Icon_card_pruebas_react
2. Zeplin y Figma
Vídeo
Conecta Zeplin con Figma y comparte tu diseño generando URL`s para entregar una vista rápida de la interacción y navegación entre interfaces.
20
Minutos
Icon_card_react_spring_library
3. Zeplin y Adobe XD
Vídeo
Conecta Zeplin con Adobe XD y comparte tu diseño generando URL`s para entregar una vista rápida de la interacción y navegación entre interfaces.
20
minutos
Icon_card_pruebas_angular
4. Zeplin y Sketch
Vídeo
Conecta Zeplin con Sketch y comparte tu diseño generando URL`s para entregar una vista rápida de la interacción y navegación entre interfaces.
20
Minutos
Icon_card_PWA
5. Manejo de versiones
Artículos
Permite especificar y entregar las versiones para el desarrollo sin generar archivos duplicados ni correr el riesgo de ediciones después de la publicación.
Dedicación
Libre
Icon_card_seo_checklist
6. Ejercicio
Práctica
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. 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. Desarrollo web
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
Artículos
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. E-commerce
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_JS
5. UI Librerías y frameworks
Presentación
Para facilitar la construcción de interfaces en frontend existen bibliotecas que brindan componentes y estilos prefabricados.
20
Minutos
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 →