CursosEmpresasBlogLiveConfPrecios

Construcción de un Prototipo Clickeable

Clase 10 de 12 • Introducción al Diseño de Prototipos 2018

Clase anteriorSiguiente clase

Contenido del curso

Prototipado

  • 1

    Actualización de curso

    00:05 min
  • 2
    Conoce los beneficios del Prototipado

    Conoce los beneficios del Prototipado

    05:46 min
  • 3
    Niveles de Fidelidad

    Niveles de Fidelidad

    08:54 min
  • 4
    Introducción a Patrones de Diseño

    Introducción a Patrones de Diseño

    04:06 min
  • 5
    Introducción a UX Orientado a Objetos

    Introducción a UX Orientado a Objetos

    07:50 min
  • 6
    Wireframes en Papel (Baja Fidelidad)

    Wireframes en Papel (Baja Fidelidad)

    05:38 min
  • 7
    Wireframes digitales (Mediana Fidelidad)

    Wireframes digitales (Mediana Fidelidad)

    21:26 min
  • 8
    Introducción a Diseño Modular

    Introducción a Diseño Modular

    06:13 min
  • 9
    Prototipado de Alta Fidelidad

    Prototipado de Alta Fidelidad

    15:41 min
  • 10
    Construcción de un Prototipo Clickeable

    Construcción de un Prototipo Clickeable

    Viendo ahora

Contenido Bonus

  • 11

    Patrones de Diseño o Patrones de Interfaz de Usuario (UI)

    01:57 min
  • 12

    Wireframes, Prototipos y Mockups: Qué son y cuándo usarlos

    04:29 min
  • Tomar el examen del curso
    • Luis Manuel Navarro Rangel

      Luis Manuel Navarro Rangel

      student•
      hace 8 años

      A partir de la versión 49 Sketch maneja Prototipado lo cual te permite crear ese prototipo clickeable con hotspots y todo lo que conlleva 😄

        Uriel Ramírez

        Uriel Ramírez

        student•
        hace 8 años

        Si, esta muy bueno!! 😄

        Luis Manuel Navarro Rangel

        Luis Manuel Navarro Rangel

        student•
        hace 8 años

        Sólo le falta incluir animaciones más complejas (scrolls, timing, etc) como Principle y será el absoluto monarca.

      Néstor José Silva Castillo

      Néstor José Silva Castillo

      student•
      hace 8 años

      Desde otra herramienta que no sea Sketch podemos migrar el trabajo hacia Invision? Seria genial poder haacerlo con AdobeXD o alguno similar

        Carlos Jimenez

        Carlos Jimenez

        student•
        hace 8 años

        Puedes hacerlo desde cualquier herramienta exportando .jpgs o .pngs por pantalla. Un poco más de trabajo pero va a funcionar perfecto

        Mauricio Rengifo Abella

        Mauricio Rengifo Abella

        student•
        hace 8 años

        En realidad ya puedes hacerlo en Adobe xD y el mismo programa te da la opcion de agregar interaccion y compartirlo online, pruebalo es genial y es super sencillo agregar esa funcionalidad.

      Wilmer Alvarez Mamani

      Wilmer Alvarez Mamani

      student•
      hace 8 años

      Consulta: alguna herramienta equivalente a Sketch en linux??

        Uriel Ramírez

        Uriel Ramírez

        student•
        hace 8 años

        Ese sereia Figma, que lo puedes ejecutar desde un navegador

        Mauricio Rengifo Abella

        Mauricio Rengifo Abella

        student•
        hace 8 años

        Adobe xD instalado con wine

      David Edson González Carrillo

      David Edson González Carrillo

      student•
      hace 7 años

      Les comparto mi proyecto, lo complemente con el curso de Adobe XD

      Enmascarar grupo 1.png

      José Luis Burgon Cervantes

      José Luis Burgon Cervantes

      student•
      hace 6 años

      Yo vengo trabajando con Adobe Xd y pues era consciente que Sketch es una herramienta muy similar y hasta más antigua que el mismo Xd pero ahora que sé que Sketch no tiene la capacidad de simular interacciones (cosa que si tiene Xd) entonces me convenzo de seguir usando la herramienta de Adobe :)

        julian orrego

        julian orrego

        student•
        hace 6 años

        Es una de las grandes ventajas de Adobe XD, además que se integra con las demás aplicaciones de Adobe.

        Luz Elena Velazquez Arvizu

        Luz Elena Velazquez Arvizu

        student•
        hace 6 años

        iba a preguntar justo esto por que tengo el cc entonces me enfocare a seguir usando XD es mas practico

      David Behar

      David Behar

      student•
      hace 7 años

      Adobe XD acaba de lanzar una experiencia increíble para hacer envés de “prototipos clickeables”, "prototipos interactuables"

      Adobe XD october update.png

      Ver video

        Solarte Orozco Jose Luis

        Solarte Orozco Jose Luis

        student•
        hace 7 años

        Excelente!! y hoy me vengo a enterar que adobe XD es Free.
        Aunque mi ambiente es Linux. pasare un rato por windows para utilizarla.

        David Navarro Rolon

        David Navarro Rolon

        student•
        hace 7 años

        Free?? A mí me aparece pago

      Jonathan Macalupu Reyes

      Jonathan Macalupu Reyes

      student•
      hace 7 años

      Adobe XD ya permite hacer un prototipado Clickeable directamente.

      Dustin Campos

      Dustin Campos

      student•
      hace 6 años

      En estas dos ultimas clases me hubiera gustado mucho que hables de las diferencias con el reproducir de adobe xd (que tome el curso justamente para dar este) y que hubieras dejado links de los iconos que utilizaste antes para avazanzar contigo y dejarte imagenes de nuestros avances. Tambien el uso de algunas palabras en ingles que usas con mucha normalidad sin haberlas explicado nunca es un poco molesto, y claro, con el avanzar de la clase mas o menos te das cuenta pero no creo que sea el punto. Muchas gracias igual he aprendido un monton y espero recibas mi feedback.

      Italika México

      Italika México

      student•
      hace 6 años

      Clickable Muckup

      Victor Alwin Hércules Carranza

      Victor Alwin Hércules Carranza

      student•
      hace 7 años

      Que software de prototipado ofrece las mejores animaciónes?

        Diego Forero

        Diego Forero

        Team Platzi•
        hace 7 años

        Tanto sketch como adobe xd tienen opciones muy similares ya que se basan en las transiciones que se usan en los dispositivos móviles como los slides hacia los lados.

        Victor Alwin Hércules Carranza

        Victor Alwin Hércules Carranza

        student•
        hace 7 años

        Pero existe algo mas allá? … por ejemplo pop ups, slides verticales, interacciones con mayor fidelidad a la idea del MVP ?

      Mario Merlo

      Mario Merlo

      student•
      hace 8 años

      Puedes subir los cartulas de la aplicación en formato png o jpg para poder realizar la practica en invision?

      Juan David Montoya Jaramillo

      Juan David Montoya Jaramillo

      student•
      hace 8 años

      Que herramienta para hacer protopitado clickeables puedo reproducir videos y audios?

        Belen Ceballos

        Belen Ceballos

        student•
        hace 8 años

        Mm no estoy segura de lo de los audios, pero prueba con Marvelapp, Invision, Flinto o , seguramente alguna de esas tiene la opción de hacerlo. Las primeras dos son más sencillas, mientras que las últimas requieren un poquito más de tiempo para aprender a usarla.

        Mateo Buitrago

        Mateo Buitrago

        student•
        hace 7 años

        Flinto lo hace!

      David Behar

      David Behar

      student•
      hace 7 años

      En Sketch agregaron recientemente la herramienta nativa para hacer prototipos interactuables, aunque es mucho mejor utilizar la herramienta de invision llamada craft

      prototyping in sketch.png

      Prototipos en Sketch
      craft .png

      Craft of invision

      Wilmer Diaz

      Wilmer Diaz

      student•
      hace 7 años

      Al día de hoy Adobe XD, presta la simulación en la sección Prototype y se puede ver directamente la construcción en tiemp real al clickear en el icono play o si se desea desde un movil en el icono phone.

      Juli Farsky de Dada

      Juli Farsky de Dada

      student•
      hace 7 años

      Recomiendo FIGMA, que tiene la opcion de armar el prototipo y luego hacer las conexiones para navegar dentro de el y analizar la interfase creada. Es muy sencillo de usar, es gratuito y rápido

      Mateo Buitrago

      Mateo Buitrago

      student•
      hace 7 años

      Les recomiendo esta herramienta para hacer test con usuarios con prototipos de invision:

      Camilo Diaz

      Camilo Diaz

      student•
      hace 7 años

      Para mi fue nuevo el termino “hover” Quiero ampliar mi vocabulario. ¿Que me recomiendan?. Alguna pagina, libro o blog. Gracias

        Duvan Carvajal

        Duvan Carvajal

        student•
        hace 7 años

        Te recomiendo aprender a fondo css, te encontraras con esos términos y conocerás muchos otros.

      Yuri Añorga

      Yuri Añorga

      student•
      hace 7 años

      Muchas gracias por el curso, ya tengo las bases para crear prototipos en productos digitales, y eso me encanta, gracias Misael, gracias Platzi.

      Jenffry José Bencomo Hernandez

      Jenffry José Bencomo Hernandez

      student•
      hace 6 años

      Firma me parece muy completo, además sirve para cualquier sistema Lo recomiendo!

      José Liendo

      José Liendo

      student•
      hace 6 años

      Hola que aplicación recomiendan free para prototypado uso Windows 32 bit

        Juan Castro

        Juan Castro

        teacher•
        hace 6 años

        :wave: ¡Hola!

        Te puedo recomendar Figma, Power Point (el más nuevo), Adobe XD. Sobretodo Figma porque puede funcionar directamente desde el navegador, sin necesidad de instalar nada. :wink:

        Juan Bedoya

        Juan Bedoya

        student•
        hace 6 años

        Hola

        Puedes usar Adobe XD, Figma o Invision Studio

    Escuelas

    • Desarrollo Web
      • Fundamentos del Desarrollo Web Profesional
      • Diseño y Desarrollo Frontend
      • Desarrollo Frontend con JavaScript
      • Desarrollo Frontend con Vue.js
      • Desarrollo Frontend con Angular
      • Desarrollo Frontend con React.js
      • Desarrollo Backend con Node.js
      • Desarrollo Backend con Python
      • Desarrollo Backend con Java
      • Desarrollo Backend con PHP
      • Desarrollo Backend con Ruby
      • Bases de Datos para Web
      • Seguridad Web & API
      • Testing Automatizado y QA para Web
      • Arquitecturas Web Modernas y Escalabilidad
      • DevOps y Cloud para Desarrolladores Web
    • English Academy
      • Inglés Básico A1
      • Inglés Básico A2
      • Inglés Intermedio B1
      • Inglés Intermedio Alto B2
      • Inglés Avanzado C1
      • Inglés para Propósitos Específicos
      • Inglés de Negocios
    • Marketing Digital
      • Fundamentos de Marketing Digital
      • Marketing de Contenidos y Redacción Persuasiva
      • SEO y Posicionamiento Web
      • Social Media Marketing y Community Management
      • Publicidad Digital y Paid Media
      • Analítica Digital y Optimización (CRO)
      • Estrategia de Marketing y Growth
      • Marketing de Marca y Comunicación Estratégica
      • Marketing para E-commerce
      • Marketing B2B
      • Inteligencia Artificial Aplicada al Marketing
      • Automatización del Marketing
      • Marca Personal y Marketing Freelance
      • Ventas y Experiencia del Cliente
      • Creación de Contenido para Redes Sociales
    • Inteligencia Artificial y Data Science
      • Fundamentos de Data Science y AI
      • Análisis y Visualización de Datos
      • Machine Learning y Deep Learning
      • Data Engineer
      • Inteligencia Artificial para la Productividad
      • Desarrollo de Aplicaciones con IA
      • AI Software Engineer
    • Ciberseguridad
      • Fundamentos de Ciberseguridad
      • Hacking Ético y Pentesting (Red Team)
      • Análisis de Malware e Ingeniería Forense
      • Seguridad Defensiva y Cumplimiento (Blue Team)
      • Ciberseguridad Estratégica
    • Liderazgo y Habilidades Blandas
      • Fundamentos de Habilidades Profesionales
      • Liderazgo y Gestión de Equipos
      • Comunicación Avanzada y Oratoria
      • Negociación y Resolución de Conflictos
      • Inteligencia Emocional y Autogestión
      • Productividad y Herramientas Digitales
      • Gestión de Proyectos y Metodologías Ágiles
      • Desarrollo de Carrera y Marca Personal
      • Diversidad, Inclusión y Entorno Laboral Saludable
      • Filosofía y Estrategia para Líderes
    • Diseño de Producto y UX
      • Fundamentos de Diseño UX/UI
      • Investigación de Usuarios (UX Research)
      • Arquitectura de Información y Usabilidad
      • Diseño de Interfaces y Prototipado (UI Design)
      • Sistemas de Diseño y DesignOps
      • Redacción UX (UX Writing)
      • Creatividad e Innovación en Diseño
      • Diseño Accesible e Inclusivo
      • Diseño Asistido por Inteligencia Artificial
      • Gestión de Producto y Liderazgo en Diseño
      • Diseño de Interacciones Emergentes (VUI/VR)
      • Desarrollo Web para Diseñadores
      • Diseño y Prototipado No-Code
    • Contenido Audiovisual
      • Fundamentos de Producción Audiovisual
      • Producción de Video para Plataformas Digitales
      • Producción de Audio y Podcast
      • Fotografía y Diseño Gráfico para Contenido Digital
      • Motion Graphics y Animación
      • Contenido Interactivo y Realidad Aumentada
      • Estrategia, Marketing y Monetización de Contenidos
    • Desarrollo Móvil
      • Fundamentos de Desarrollo Móvil
      • Desarrollo Nativo Android con Kotlin
      • Desarrollo Nativo iOS con Swift
      • Desarrollo Multiplataforma con React Native
      • Desarrollo Multiplataforma con Flutter
      • Arquitectura y Patrones de Diseño Móvil
      • Integración de APIs y Persistencia Móvil
      • Testing y Despliegue en Móvil
      • Diseño UX/UI para Móviles
    • Diseño Gráfico y Arte Digital
      • Fundamentos del Diseño Gráfico y Digital
      • Diseño de Identidad Visual y Branding
      • Ilustración Digital y Arte Conceptual
      • Diseño Editorial y de Empaques
      • Motion Graphics y Animación 3D
      • Diseño Gráfico Asistido por Inteligencia Artificial
      • Creatividad e Innovación en Diseño
    • Programación
      • Fundamentos de Programación e Ingeniería de Software
      • Herramientas de IA para el trabajo
      • Matemáticas para Programación
      • Programación con Python
      • Programación con JavaScript
      • Programación con TypeScript
      • Programación Orientada a Objetos con Java
      • Desarrollo con C# y .NET
      • Programación con PHP
      • Programación con Go y Rust
      • Programación Móvil con Swift y Kotlin
      • Programación con C y C++
      • Administración Básica de Servidores Linux
    • Negocios
      • Fundamentos de Negocios y Emprendimiento
      • Estrategia y Crecimiento Empresarial
      • Finanzas Personales y Corporativas
      • Inversión en Mercados Financieros
      • Ventas, CRM y Experiencia del Cliente
      • Operaciones, Logística y E-commerce
      • Gestión de Proyectos y Metodologías Ágiles
      • Aspectos Legales y Cumplimiento
      • Habilidades Directivas y Crecimiento Profesional
      • Diversidad e Inclusión en el Entorno Laboral
      • Herramientas Digitales y Automatización para Negocios
    • Blockchain y Web3
      • Fundamentos de Blockchain y Web3
      • Desarrollo de Smart Contracts y dApps
      • Finanzas Descentralizadas (DeFi)
      • NFTs y Economía de Creadores
      • Seguridad Blockchain
      • Ecosistemas Blockchain Alternativos (No-EVM)
      • Producto, Marketing y Legal en Web3
    • Recursos Humanos
      • Fundamentos y Cultura Organizacional en RRHH
      • Atracción y Selección de Talento
      • Cultura y Employee Experience
      • Gestión y Desarrollo de Talento
      • Desarrollo y Evaluación de Liderazgo
      • Diversidad, Equidad e Inclusión
      • AI y Automatización en Recursos Humanos
      • Tecnología y Automatización en RRHH
    • Finanzas e Inversiones
      • Fundamentos de Finanzas Personales y Corporativas
      • Análisis y Valoración Financiera
      • Inversión y Mercados de Capitales
      • Finanzas Descentralizadas (DeFi) y Criptoactivos
      • Finanzas y Estrategia para Startups
      • Inteligencia Artificial Aplicada a Finanzas
      • Domina Excel
      • Financial Analyst
      • Conseguir trabajo en Finanzas e Inversiones
    • Startups
      • Fundamentos y Validación de Ideas
      • Estrategia de Negocio y Product-Market Fit
      • Desarrollo de Producto y Operaciones Lean
      • Finanzas, Legal y Fundraising
      • Marketing, Ventas y Growth para Startups
      • Cultura, Talento y Liderazgo
      • Finanzas y Operaciones en Ecommerce
      • Startups Web3 y Blockchain
      • Startups con Impacto Social
      • Expansión y Ecosistema Startup
    • Cloud Computing y DevOps
      • Fundamentos de Cloud y DevOps
      • Administración de Servidores Linux
      • Contenerización y Orquestación
      • Infraestructura como Código (IaC) y CI/CD
      • Amazon Web Services
      • Microsoft Azure
      • Serverless y Observabilidad
      • Certificaciones Cloud (Preparación)
      • Plataforma Cloud GCP

    Platzi y comunidad

    • Platzi Business
    • Live Classes
    • Lanzamientos
    • Executive Program
    • Trabaja con nosotros
    • Podcast

    Recursos

    • Manual de Marca

    Soporte

    • Preguntas Frecuentes
    • Contáctanos

    Legal

    • Términos y Condiciones
    • Privacidad
    • Tyc promociones
    Reconocimientos
    Reconocimientos
    Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
    Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
    Logo reconocimientoPrimera Startup EdTech · 2018
    Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
    Logo reconocimientoCEO Mejor Emprendedor del año · 2024
    De LATAM conpara el mundo
    YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads