--- title: Academia Pragma | Ruta Diseño UI description: Descubre y aprende principios, conceptos, metodologías, procesos y herramientas sobre diseño UI para construir interfaces de usuario usables, eficientes y estéticas. --- [![logo_universo_pragma-05](https://www.pragma.com.co/hs-fs/hubfs/academia/logos/logo_universo_pragma-05.png?width=506&height=162&name=logo_universo_pragma-05.png "logo_universo_pragma-05")](https://www.pragma.com.co/academia/universo) [![ir a Pragma](https://no-cache.hubspot.com/cta/default/2829524/70eec929-e271-4e2a-9242-7638e2c879a7.png)](https://cta-redirect.hubspot.com/cta/redirect/2829524/70eec929-e271-4e2a-9242-7638e2c879a7) ** ** ** [![logo_universo_pragma-03](https://www.pragma.com.co/hs-fs/hubfs/academia/logos/logo_universo_pragma-03.png?width=506&height=162&name=logo_universo_pragma-03.png "logo_universo_pragma-03")](https://www.pragma.com.co/academia/universo) ** ** ** Buscar **Menú** ** ** ![BACKGROUND_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/BACKGROUND_disen%CC%83o_centrado_en_las_personas.jpg?width=1474&name=BACKGROUND_disen%CC%83o_centrado_en_las_personas.jpg "BACKGROUND_diseño_centrado_en_las_personas") # ![LOGO_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/LOGO_disen%CC%83o_centrado_en_las_personas.png?width=150&name=LOGO_disen%CC%83o_centrado_en_las_personas.png) # Diseño UI Explora tu ruta de aprendizaje. curva_bottom [¿Tienes alguna propuesta de mejora? ](https://docs.google.com/a/pragma.com.co/forms/d/e/1FAIpQLSd47Ptn4D_Y3HvMpfsDrsIwunSbT88slZ_ShE5PxVbJGnuTGQ/viewform)    ## 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. [![PLANETA_2_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab1) 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. [![PLANETA_3_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_3_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_3_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab2) Estación 2 #### Branding Conoce cuáles son los fundamentos del branding y su relación con el UI. [![PLANETA_1_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_1_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_1_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab3) 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. [![PLANETA_2_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab4) Estación 4 #### Fundamentos UX Conoce algunas técnicas, métodos y las bases necesarias para diseñar productos usables, accesibles, eficientes y deseables. [![PLANETA_3_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_3_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_3_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab5) 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). [![PLANETA_1_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_1_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_1_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab6) 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. [![PLANETA_2_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab7) 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. [![PLANETA_1_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_1_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_1_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab8) 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. [![PLANETA_2_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab9) 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. [![PLANETA_1_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_1_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_1_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab10) 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. [![PLANETA_2_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab11) 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. [![PLANETA_1_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_1_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_1_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab12) 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. [![PLANETA_2_diseño_centrado_en_las_personas](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/RUTA%20-%20Dise%C3%B1o%20Centrado%20en%20las%20Personas/PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg?width=450&height=450&name=PLANETA_2_disen%CC%83o_centrado_en_las_personas.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab13) 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. - [Principios de diseño visual](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab1) - [Branding](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab2) - [Investigación básica para UI](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab3) - [Fundamentos UX](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab4) - [Usabilidad y Accesibilidad](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab5) - [Metodologías](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab6) - [Herramientas de diseño UI](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab7) - [Design system y Atomic Design](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab8) - [Diseño Web y Móvil](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab9) - [Prototipado y microinteracciones](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab10) - [Entregables y Handoff](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab11) - [Aproximación al frontend](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab12) - [Conversión y Product Growth](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-ui#tab13) ![íconos ruta de ui_diseño](https://www.pragma.com.co/hubfs/academia/Universo/Ruta%20UI/%C3%ADconos%20ruta%20de%20ui_dise%C3%B1o.jpg) 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. [Reproducir vídeo](https://www.youtube.com/watch?v=7N2v0bpNFKA) ![íconos ruta de ui_gestalt](https://www.pragma.com.co/hubfs/academia/Universo/Ruta%20UI/%C3%ADconos%20ruta%20de%20ui_gestalt.jpg) 2. Principios de la Gestalt Artículo Aprende y aplica los principios de la percepción visual en el diseño UI. [Leer artículo ](https://www.uifrommars.com/principios-gestalt-diseno-web/) ![íconos ruta de ui_color](https://www.pragma.com.co/hubfs/academia/Universo/Ruta%20UI/%C3%ADconos%20ruta%20de%20ui_color.jpg) 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. [Teoría del color](https://www.interaction-design.org/literature/topics/color-theory) [Psicología del color](https://www.canva.com/es_mx/aprende/psicologia-del-color/) [Paleta de colores](https://www.uiprep.com/blog/how-to-create-the-perfect-color-palette) [Contraste del color](https://color.adobe.com/es/create/color-contrast-analyzer) ![íconos ruta de ui_composición](https://www.pragma.com.co/hubfs/academia/Universo/Ruta%20UI/%C3%ADconos%20ruta%20de%20ui_composici%C3%B3n.jpg) 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. [Reproducir vídeo](https://www.youtube.com/watch?v=gJhOHTOjGO8) ![íconos ruta de ui_tipografía](https://www.pragma.com.co/hubfs/academia/Universo/Ruta%20UI/%C3%ADconos%20ruta%20de%20ui_tipograf%C3%ADa.jpg) 5. Tipografía Artículos y herramientas Profundiza tus conocimientos en el uso, elementos y combinación de tipografía. [Tipografía](https://www.flux-academy.com/blog/why-is-typography-important-in-graphic-design) [Elementos](https://medium.com/gravitdesigner/typography-elements-everyone-needs-to-understand-5fdea82f470d) [Combinación de tipografías](https://dribbble.com/resources/font-pairing-tools) [Recomendaciones](https://htmlburger.com/blog/user-interface-fonts) [Librería de fuentes](https://fonts.google.com/) ![íconos ruta de ui_imágenes](https://www.pragma.com.co/hubfs/academia/Universo/Ruta%20UI/%C3%ADconos%20ruta%20de%20ui_im%C3%A1genes.jpg) 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. [Presentación](https://docs.google.com/presentation/d/17ZOE34GWhJLa9OoIVa66HPNldDqAZ8j7WcAqCVzxZwY/edit?usp=sharing) [Leer artículo](https://www.webfx.com/blog/web-design/use-images-websites/) ![íconos ruta de ui_iconos](https://www.pragma.com.co/hubfs/academia/Universo/Ruta%20UI/%C3%ADconos%20ruta%20de%20ui_iconos.jpg) 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: [7 Reglas básicas](https://webdesign.tutsplus.com/articles/basic-rules-for-using-icons-in-ui-design--cms-41244) [10 consejos](https://dribbble.com/stories/2021/09/15/ui-icon-tips) ![Icon_card_angular_animation](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_angular_animation.jpg) 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.  [Ir al curso](https://www.youtube.com/watch?v=SXhRdkNu1NA&list=PLhSj3UTs2_yVoP9-88WZI3HBS25vP6KoD) ![Icon_card_pruebas_angular](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_pruebas_angular.jpg) 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. [Ir al curso](https://www.youtube.com/watch?v=_c26Fyi7RFA&list=PLvq-jIkSeTUbpfewvbKLhHctdkgadAy-K) ![Icon_card_contentful_cms](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_contentful_cms.jpg) 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. [Ir al tutorial](https://www.youtube.com/watch?v=8aTZgbVdQKs&list=PLAd-1AckEO2e88L3qkqVzCZILYrT-qxb5)[Taller Sketch Pragma](https://drive.google.com/drive/folders/1MZ--3-Lmh8vocH3drb1GSFn7qQSibcDD?usp=share_link) ![Icon_card_curso_angular](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_curso_angular.jpg) 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. [Hacer Ejercicio](https://docs.google.com/presentation/d/1fdkOMq74KUyJJk363MKDcTt9IvYE0mMW/edit#slide=id.g14f3140f1c2_0_26) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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. [Principios](https://docs.google.com/presentation/d/18vrvqmeaq03aIuj0NgwyBTGM0P144FcN-v-yKXUhh0I/edit#slide=id.p) [Usabilidad](https://www.nngroup.com/articles/usability-101-introduction-to-usability/) [Aplicación](https://www.uifrommars.com/10-reglas-heuristicas-como-aplicarlas/) ![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg) 2. Test de usabilidad Artículo Conoce cómo configurar pruebas de usabilidad remotas optimizadas para obtener resultados reales y procesables. [Preparación](https://www.pragma.com.co/blog/las-4-etapas-para-preparar-una-prueba-de-usabilidad#:~:text=En%20el%20mundo%20de%20la,ante) [Guía pruebas de usabilidad](https://maze.co/guides/usability-testing/) ![ball_blue](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_blue.jpg) 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? [Fundamentos](https://www.merkle.com/es/es/blog/accesibilidad-ux-experiencias-usuario) [ Principios](https://www.w3.org/WAI/fundamentals/accessibility-principles/es) [Relación con UI](https://medium.com/@uxlord/ui-accessibility-checklist-for-ux-designers-wcag2-1-2020-f79719031d) [ Manejo de color](https://colorblindaccessibilitymanifesto.com/)[ Guía de inicio](https://accessibility-for-teams.com/accessibility-for-ux-designers) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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. [Leer Artículo](https://www.w3.org/TR/WCAG21/#intro) ![ball_JS](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_JS.jpg) 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. [Plantilla Test](https://docs.google.com/spreadsheets/d/13fUwlNHj1Ovf8xWf3l7_83mrFm1g3sAe/edit#gid=356727689) ![Icon_card_pruebas_angular](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_pruebas_angular.jpg) 6. Modelo de un producto accesible Charla Conoce cómo documentar un producto digital accesible a nivel de componentes y flujos. [Leer Presentación](https://docs.google.com/presentation/d/1G2WLLgL_HcDhOzmKDwaos__BNQ23vKAO5VtM6E_w_Tw/edit?usp=sharing) [Reproducir video charla](https://drive.google.com/file/d/1W2KF_6BExZzbSSWQlu0gJcpUJLMdBnei/view?usp=sharing) ![Icon_card_phaser3_curso](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_phaser3_curso.jpg) 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. [Qué es UX](https://www.interaction-design.org/literature/topics/ux-design) [Libro Pragma UX](https://www.pragma.com.co/todo-lo-que-debes-saber-sobre-experiencia-de-usuario-y-usabilidad?hsLang=es-co) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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. [Evaluación Heurística](http://design-toolkit.recursos.uoc.edu/es/guia/evaluacion-heuristica/) ![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg) 3. Leyes de UX Artículo Son un conjunto de buenas prácticas a considerar cuando se diseñan o construyen interfaces de usuario. [Leyes de UX](https://lawsofux.com/en/) ![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg) 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. [Definición](https://www.interaction-design.org/literature/topics/ux-research) [Fundamentos](https://www.crehana.com/blog/diseno-productos/ux-research/) ![ball_doc](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_doc.jpg) 5. Métodos de UX Research Artículo Conoce diferentes métodos de investigación UX y aprende cómo aplicarlos. [Métodos](https://www.nngroup.com/topic/research-methods/) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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. [Fundamentos](http://www.uxables.com/diseno-ux-ui/la-arquitectura-de-informacion-web-y-sus-tipos/) [Guía](http://design-toolkit.recursos.uoc.edu/es/guia/arquitectura-de-la-informacion/) ![ball_blue](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_blue.jpg) 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. [Principios](https://www.toptal.com/designers/interactive/interaction-design-principles) [Aplicación](https://rockcontent.com/es/blog/diseno-de-interaccion/) ![ball_JS](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_JS.jpg) 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. [Flowcharts](https://asana.com/es/resources/what-is-a-flowchart) [Sketching](https://uxmisfit.com/2017/11/12/ui-sketching-how-to-make-it-right-and-why-you-should-do-this-in-all-projects/) [Wireframes](https://balsamiq.com/learn/articles/what-are-wireframes/) [Recomendaciones](https://docs.google.com/presentation/d/1iaEipCIs76R8OEzG6irbanONXkrW9njTWTHd-iLEmbM/edit?usp=share_link) ![ball_doc](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_doc.jpg) 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. [Leer Artículo](http://design-toolkit.recursos.uoc.edu/es/guia/prototipado/) ![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg) 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. [Leer guía](http://design-toolkit.recursos.uoc.edu/es/guia/test-con-usuarios/) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 1. Benchmark visual y funcional Contenido variado Analiza la competencia y opciones del mercado para diseñar tu producto desde el valor diferencial. [Benchmarking](http://design-toolkit.recursos.uoc.edu/es/benchmarking/) [Pasos del Bench](http://design-toolkit.recursos.uoc.edu/es/guia/benchmarking/) [Bench visual](https://docs.google.com/presentation/d/1by2WbPcxdyYyQ7asXbeH6CtTx0iyCFudBWvV_Ivjwp8/edit#slide=id.gd) [Bench funcional](https://docs.google.com/presentation/d/1JOtgcyhOzFbU_RYR38j9tSQKcLdqbFI9-7ZIgCAi7Ck/edit#slide=id.g138882a03fc_0_970) ![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg) 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. [Qué es](https://www.sketch.com/blog/2022/05/17/what-is-a-moodboard/) [Cómo hacerlo](https://www.youtube.com/watch?v=DIaBKZFocqI) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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. [Explorar ejemplo](https://docs.google.com/presentation/d/1mol3JSHf2DxIHQRoC-bvtJjQONsnHT4DSAWp87TYLX0/edit#slide=id.gd981399016_0_0) ![Icon_card_gitgalaxy](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gitgalaxy.jpg) 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: [Pinterest](https://www.pinterest.com/) [Behance](https://www.behance.net) [Dribbble](https://dribbble.com/) [Muzzli](https://muz.li/) [Awwwards](https://www.awwwards.com/) ![Icon_card_curso_angular](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_curso_angular.jpg) 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. [Hacer Ejercicio](https://docs.google.com/presentation/d/1fdkOMq74KUyJJk363MKDcTt9IvYE0mMW/edit#slide=id.g14f3140f1c2_0_17) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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. [Guía](https://www.invisionapp.com/inside-design/guide-to-design-systems/) [Paso a paso](https://medium.com/uxenespanol/c%C3%B3mo-dise%C3%B1ar-un-design-system-as%C3%AD-creamos-nosotros-junipero-f0430548b394) [Ejemplo Decathlon](https://www.decathlon.design) [Ejemplo WP](https://build.washingtonpost.com) ![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg) 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. [Leer artículo](https://medium.com/@agonsi.onyedikachi/design-systems-the-difference-between-a-style-guide-and-pattern-library-2d6584c8a02a) ![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg) 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. [Checklist](https://www.designsystemchecklist.com/) ![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg) 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. [Conceptos](https://www.interaction-design.org/literature/topics/ui-design-patterns) [Biblioteca de patrones](http://ui-patterns.com/patterns) ![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg) 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. [Ventajas](https://www.uifrommars.com/atomic-design-ventajas) [Libro Atomic Design](https://drive.google.com/file/d/1xcjsyXiTxobBKBW3_ryt0e7RM6JxOhl2/view?usp=share_link) ![Icon_card_react_spring_library](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_react_spring_library.jpg) 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. [Hacer curso](https://www.youtube.com/playlist?list=PLXDU_eVOJTx6vqOWJSWH87Zb5-riiG63A) ![Icon_card_curso_ract](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_curso_ract.jpg) 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. [Hacer Ejercicio](https://docs.google.com/presentation/d/1fdkOMq74KUyJJk363MKDcTt9IvYE0mMW/edit#slide=id.g14f3140f1c2_0_34) ![ball_blue](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_blue.jpg) 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. [Introducción](http://design-toolkit.uoc.edu/es/diseno-centrado-en-las-personas/) [Concer Ruta DCP](https://www.pragma.com.co/academia/universo/galaxia-diseno/diseno-centrado-en-las-personas) ![ball_doc](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_doc.jpg) 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. [Definición](https://www.interaction-design.org/literature/article/what-is-design-thinking-and-why-is-it-so-popular) [Guía](http://guiaiso50001.cl/guia/wp-content/uploads/2017/04/guia-proceso-creativo.pdf) [Design Thinking para Dummies](https://docs.google.com/presentation/d/1CPj7tgY35K92xFdNmMEOMSEOovnDZCCtV6Zc15fx-RE/edit?usp=sharing) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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. [Lean UX](https://www.pragma.com.co/academia/conceptos/lean-ux-guia-metodologia) ![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg) 4. Agile UX Artículo Agile UX combina los principios del desarrollo de software ágil con el diseño de UI/UX. [Agile UX](https://www.ramotion.com/blog/agile-ux/) ![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg) 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. [Design Sprint](https://www.uifrommars.com/que-es-design-sprint-fases/) ![Icon_card_angular_animation](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_angular_animation.jpg) 6. Dual Track Presentación Un marco de trabajo que conecta los procesos de diseño de producto con procesos ágiles y de desarrollo. [Dual Track](https://docs.google.com/presentation/d/1wbau8AsQkgvinz0CMBprKPSdvb7MFuM9-v5Fh8x_4_w/edit?usp=share_link) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 1. Fundamentos del branding Artículo Entender qué es una marca y su relación con el diseño. [Leer artículo](https://es.99designs.com/blog/logo-branding/what-is-branding/) ![Icon_card_angular_animation](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_angular_animation.jpg) 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. [Reproducir vídeo](https://www.youtube.com/watch?v=tquJKXFPY3M) ![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg) 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. [Leer artículo](https://tubikstudio.medium.com/the-role-of-branding-in-ui-design-e6cc247b6b66) ![Icon_card_react_spring_library](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_react_spring_library.jpg) 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. [Reproducir vídeo](https://drive.google.com/file/d/1XF0jGEf-e2vUP2bwhz6o3SQyLSc0JXRy/view) ![ball_curso](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_curso.jpg) 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. [Hacer ejercicio](https://docs.google.com/presentation/d/1fdkOMq74KUyJJk363MKDcTt9IvYE0mMW/edit#slide=id.p1) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 1. Diseñando para entornos web y móviles Artículo Diferencias entre PWA, aplicaciones móviles nativas e híbridas. [Leer artículo](https://www.mobiloud.com/blog/native-web-or-hybrid-apps) ![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg) 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. [Explorar contenidos](https://drive.google.com/drive/folders/1DQG4nnZQ8E5G14iaVxUjzNkDzygZuf-A?usp=sharing) ![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg) 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. [IOS](https://developer.apple.com/design/human-interface-guidelines/platforms/overview) [Android](https://developer.android.com/design) [Material Guidelines](https://material.io/design/guidelines-overview) [Mejores prácticas](https://uxdesign.cc/8-rules-of-mobile-design-1b8d9936c241) ![Icon_card_seo_checklist](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_seo_checklist.jpg) 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. [Hacer Ejercicio](https://docs.google.com/presentation/d/1fdkOMq74KUyJJk363MKDcTt9IvYE0mMW/edit#slide=id.g14f3140f1c2_0_42) ![ball_JS](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_JS.jpg) 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. [Definición](https://freed.tools/blogs/ux-cx/prototipo) [Alta vs baja fidelidad](https://www.uifrommars.com/prototipos-baja-alta-fidelidad/) ![ball_doc](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_doc.jpg) 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. [Fundamentos](https://talentgarden.org/es/design/ux-funcional-animaciones-guia-disenador-ui/) [Principios](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc) [Ejemplos](https://medium.com/@macarena.cabrerizo/motion-ux-usabilidad-y-movimiento-e9a8b4f7cd74) ![ball_blue](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_blue.jpg) 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. [Definición](https://uxdesign.cc/micr%20o-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0) [Buenas prácticas](https://uxplanet.org/best-practices-for-microinteractions-9456211aeed0) [Charla sobre fundamentos](https://drive.google.com/drive/folders/1WBNdoUUxdm1bXosx4NC9nt046zcfGBXs?usp=drive_link) ![Icon_card_curso_angular](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_curso_angular.jpg) 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. [Hacer Ejercicio](https://docs.google.com/presentation/d/1fdkOMq74KUyJJk363MKDcTt9IvYE0mMW/edit#slide=id.g14f3140f1c2_0_50) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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. [Explorar contenido](https://support.zeplin.io/en/collections/48656-quick-start) ![Icon_card_pruebas_react](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_pruebas_react.jpg) 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. [Reproducir vídeo](https://drive.google.com/file/d/1od_hh5MHPyHD43IOWPWKQwXPupPsWQT8/view?usp=sharing) ![Icon_card_react_spring_library](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_react_spring_library.jpg) 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. [Reproducir vídeo](https://drive.google.com/file/d/12tQEWrhe38p7tz-vVb88viwJo9BjgjA8/view?usp=sharing) ![Icon_card_pruebas_angular](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_pruebas_angular.jpg) 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. [Reproducir vídeo](https://www.youtube.com/watch?v=BFQZPV30ol8) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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. [Versionamiento en Zeplin](https://zeplin.io/features/version-control/) [Versionamiento en Figma](https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history#Duplicate_a_version) ![Icon_card_seo_checklist](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_seo_checklist.jpg) 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. [Hacer ejercicio](https://docs.google.com/presentation/d/1fdkOMq74KUyJJk363MKDcTt9IvYE0mMW/edit#slide=id.g14f3140f1c2_0_56) ![Icon_card_gitgalaxy](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gitgalaxy.jpg) 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. [Definición](https://www.youtube.com/watch?v=Cw-sRswGM7g) [Profundizar](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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). [HTML](https://drive.google.com/drive/folders/1PymegCeKAskuOanpTvcS52o9bTOcf7EY?usp=sharing) [CSS](https://drive.google.com/drive/folders/1vRfqH4mVcKaBXDm7TS9j1kF7e0TnJMQ1?usp=sharing) [JavaScript](https://desarrolloweb.com/home/javascript) ![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg) 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. [SEO](https://drive.google.com/file/d/1p7vPiU9nJATIYOOXERXrgEt4DjEjiKsO/view) [SEO Y UI](https://drive.google.com/drive/folders/1vgssDJMT-62M69K3KPaS6QoW1Z02lPDJ) [Optimización de imágenes](https://yoast.com/image-seo/) ![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg) 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. [Definición Ecommerce](https://www.pragma.com.co/academia/conceptos/que-es-el-ecommerce-y-como-funciona) [Elementos](https://elearningindustry.com/ecommerce-website-design-10-essential-elements) [Magento UI Library](https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/theme-ui-lib.html) [Charla: enfrentando Magento](https://drive.google.com/drive/folders/1x3o5xQla98LcRgFwTZHDEDcanlr-W2zG?usp=sharing) [VTEX](https://docs.google.com/presentation/d/1Ye8KbWceVvGPRPMz6rpbCT8IVj1unFJns3YVfn-sJx8/edit?usp=sharing) ![ball_blue](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_blue.jpg) 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. [Charlas de introducción](https://drive.google.com/drive/folders/1OPk9wlKKwaGpKBV6xhVqkIlA_J1vK9hu?usp=sharing) [Laboratorios LC/NC](https://docs.google.com/presentation/d/16PWP4Ng61zTNT3WYgWqruat5ybDYqJSNKY0F0xTiX7g/edit?usp=sharing) ![ball_JS](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_JS.jpg) 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. [Navegar contenido](https://docs.google.com/presentation/d/1xHXkrLcEt38cAC3GxMQuvpc7eN6lo9my6scN4XHYxR8/edit?usp=sharing) ![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg) 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. [Diseño y conversión](https://medium.com/fotor-official/how-to-utilize-visual-design-to-improve-web-conversion-rate-9a38c0ab60e0) [Principios](https://unbounce.com/conversion-centered-design) [Guía Email Marketing](https://drive.google.com/file/d/1ypQTQ1s9urXOh_ckMfzjhNDSOVsb-mwW/view?usp=share_link) ![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg) 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. [Leer artículo](https://rockcontent.com/es/blog/heatmap/) ![Icon_card_angular_animation](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_angular_animation.jpg) 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". [Realizar curso](https://analytics.google.com/analytics/academy/course/6?hl=es) ![íconos ruta de ui_iconos](https://www.pragma.com.co/hubfs/academia/Universo/Ruta%20UI/%C3%ADconos%20ruta%20de%20ui_iconos.jpg) 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. [Qué es y tipos](https://www.rdstation.com/blog/es/embudo-de-conversion-que-es/) [Funnel en Google Analytics](https://www.youtube.com/watch?v=Wc7iRfcqZp8) ![Icon_card_pruebas_angular](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_pruebas_angular.jpg) 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. [North Star Metric](https://go.producthackers.com/course/north-star-metric-free-trial) [Growth Hacking](https://go.producthackers.com/course/solid-growth-free-trial) ![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg) 6. Método Growth Pragma Presentación Conoce el método Pragma para el crecimiento y evolución de activos digitales. [Explorar contenido](https://docs.google.com/presentation/d/1Q5MylW3qdMmYNf2z7tFgP2Q_UPm6xXiOUyKcffrrmZk/edit?usp=sharing) 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](https://www.pragma.com.co/hs-fs/hubfs/Imported%20sitepage%20images/FONDO%20BLOG%20H%20GRANDE.jpg?height=200&name=FONDO%20BLOG%20H%20GRANDE.jpg) *![](https://www.pragma.com.co/hs-fs/hubfs/academia/Universe/icons/icon_doc.png?width=50&name=icon_doc.png)* #### 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 →](https://www.pragma.com.co/blog/4-pilares-del-ux-research-para-el-mejoramiento-continuo) ![h_diseño_estrategico_oculto](https://www.pragma.com.co/hs-fs/hubfs/h_disen%CC%83o_estrategico_oculto.jpg?height=200&name=h_disen%CC%83o_estrategico_oculto.jpg) *![](https://www.pragma.com.co/hs-fs/hubfs/academia/Universe/icons/icon_doc.png?width=50&name=icon_doc.png)* #### 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 →](https://www.pragma.com.co/blog/el-valor-oculto-del-diseno-estrategico-en-ux) ![h_confesiones_de_un_disenador_ux](https://www.pragma.com.co/hs-fs/hubfs/blog/blogs/h_confesiones_de_un_disenador_ux.jpg?height=200&name=h_confesiones_de_un_disenador_ux.jpg) *![](https://www.pragma.com.co/hs-fs/hubfs/academia/Universe/icons/icon_video.png?width=50&name=icon_video.png)* #### 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 →](https://www.pragma.com.co/blog/confesiones-de-un-disenador-ux-como-tratar-con-clientes-dificiles) Síguenos [![Contáctanos](https://no-cache.hubspot.com/cta/default/2829524/01244c8f-8e8e-45c9-b1f5-fc1db12fae9e.png)](https://cta-redirect.hubspot.com/cta/redirect/2829524/01244c8f-8e8e-45c9-b1f5-fc1db12fae9e) #### Nuestras oficinas **Medellín** Carrera 42# 3 sur 81 Edificio milla de oro, piso 15 torre 1 m: +57 323 563 9223 Colombia **Bogotá** m: +57 323 563 9223 Colombia **Cali** m: +57 323 563 9223 Colombia`` **Panamá** Ciudad del Saber, Edificio #104, Clayton, Ancón. Panamá. [![Ciudad del Saber](https://www.pragma.com.co/hs-fs/hubfs/ciudad_del_saber.png?width=120&name=ciudad_del_saber.png "Ciudad del Saber")](https://ciudaddelsaber.org/) ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAoCAYAAAD6xArmAAAC5ElEQVRIDa3WTexeQxTH8SIoCSqRNKRJN92wkVhoGomXtLqsNhYoQoTGQpHoTheNxV9EtP5ElIR461aIeFkQi24QCxui1UaLtBEi3l/LR07/M0+Pufc+92lqNnPmnN/53rlz75yZRYtOoOEkbMU3+AHbcfoJIBdSsVm3Pfx/gN/vch2eCYzluAabcEexl0cy3ugB7xkE41TchU96EqsrYq/VQepv6AXjcuxPwlnML7ALq4egt+PPHtKv+Ax78EtP/G/cMwSNdfynSXoLV8fS1CScgivxSqON4a1Vd7THMvychL/hxv+IegZYj5+avBUTKZ5LwZj1+klwxIh1xV8p/+WjKViKWKPanhphdcJ4qCYX1vnxL16fnDHbZZ3MEQfOxR+JszHAc8nxwQhjMIz40LXNBfjZOsILg5kjATyaOM8E+MXkeHokfzCMBxPn+QA/kRyvD2aOBJoJzgf43gT+EaeNMDrhUpcPJc7mAF+SHGHe1skccWBDw7g0wCfjQArEk5eOsCZhLGmK1r4cvDmBw4wCft5EMGDgHLzb5N40kZdZv9kIPse6iagxsLZUu5zW/fjllT7OqmLvxXz5yHeXA7PvAPgIZzfPXxiWrfl2D3zMFbuuH1qfVOrtnfh6jIaDx/0X4Qxci5fK2Rf/eG4xfgRr4j+uEzuuHrcgb4D8gLBjza+YGVp21M6WMjA+MvOyYFsPZHepZE/2XA8CftXUmePC5sj5EqvaJMTmilO8tk+nrjnyEvyOi1poHWNjpZb+shrr9IgZ1razI2gciA1S25YmvDDEmVVR+ut6hcmJHSlnewodM3FWEoW54Vi032pO6vl+1cJNMm+IuUFhCeCdNJn7B/V4NQm/nVZGsbK5nq2dBl6XwGG+13cA4GJ8lbRRYxYPgiOAttJ9j8fKFo9LeFxd8/Uq+ONHW7x+TzFPk+uYj0+daQ6WGp3Xu0MrO+++nDezHdWr3Jr2Ia653+FDPIALWtC/O/+Bj9aDHkYAAAAASUVORK5CYII=)  [Términos y condiciones](https://www.pragma.com.co/es/terminos-condiciones) | [Políticas de privacidad](https://www.pragma.com.co/es/politicas-privacidad) Copyright Pragma S.A. 2021 ![](https://px.ads.linkedin.com/collect/?pid=1381858&fmt=gif) ```json { "@context" : "https://schema.org", "@id" : "https://www.pragma.com.co/#organization", "@type" : "Corporation", "address" : { "@type" : "PostalAddress", "addressCountry" : "CO", "addressLocality" : "Medellín", "addressRegion" : "Antioquia", "postalCode" : "XXXXX", "streetAddress" : "TU DIRECCIÓN AQUÍ" }, "alternateName" : "PRAGMA", "contactPoint" : [ { "@type" : "ContactPoint", "areaServed" : "CO", "availableLanguage" : "es", "contactType" : "customer service", "telephone" : "+57-4-605-2523" } ], "legalName" : "PRAGMA S.A.", "logo" : "https://www.pragma.com.co/hs-fs/hubfs/portal_pragma_2018/images/home/logos/logo_pragma_a_color.png", "name" : "PRAGMA S.A.", "sameAs" : [ "https://www.facebook.com/SomosPragma/", "https://twitter.com/SomosPragma", "https://www.instagram.com/somospragma/", "https://www.youtube.com/user/PragmaSA/", "https://www.linkedin.com/company/pragma-s-a-/" ], "url" : "https://www.pragma.com.co/" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://www.pragma.com.co/#website", "@type" : "WebSite", "inLanguage" : "es", "name" : "Pragma", "potentialAction" : { "@type" : "SearchAction", "query-input" : "required name=search_term_string", "target" : "https://www.pragma.com.co/hs-search-results?term={search_term_string}" }, "publisher" : { "@id" : "https://www.pragma.com.co/#organization" }, "url" : "https://www.pragma.com.co/" } ```