CursosEmpresasBlogLiveConfPrecios

Wireframes del proyecto:sección cartelera

Clase 21 de 32 • Curso de Adobe XD 2019

Contenido del curso

Conocer la importancia de utilizar una herramienta especializada en el diseño de interfaces

  • 1

    Actualización de curso

    00:05 min
  • 2
    Qué es AdobeXD y por qué usar AdobeXD

    Qué es AdobeXD y por qué usar AdobeXD

    01:11 min
  • 3

    Instalación

    00:51 min

Crear y configurar un nuevo proyecto

  • 4
    Creación de un documento

    Creación de un documento

    03:03 min
  • 5
    Interfaz y navegación

    Interfaz y navegación

    05:24 min
  • 6

    Atajos de teclado

    00:12 min
  • 7
    Artboards

    Artboards

    05:18 min
  • 8
    Grids y layouts

    Grids y layouts

    06:40 min

Utilizar las herramientas de Diseño

  • 9
    Formas

    Formas

    14:17 min
  • 10
    Alinear y combinar formas

    Alinear y combinar formas

    06:55 min
  • 11
    Diseñar icono

    Diseñar icono

    14:06 min
  • 12
    Textos y tipografía

    Textos y tipografía

    06:29 min
  • 13
    Imágenes y máscaras

    Imágenes y máscaras

    06:24 min
  • 14
    Pluma

    Pluma

    06:09 min

Optimizar el trabajo con herramientas avanzadas

  • 15
    Repeat grid tool

    Repeat grid tool

    10:45 min
  • 16
    Cargar contenido en repeat grid tool

    Cargar contenido en repeat grid tool

    03:03 min
  • 17
    Componentes

    Componentes

    09:38 min
  • 18
    Panel de assets

    Panel de assets

    08:34 min
  • 19
    Responsive Resize

    Responsive Resize

    09:09 min
  • 20
    UI Kits

    UI Kits

    04:39 min

Diseñar una app

  • 21
    Wireframes del proyecto:sección cartelera

    Wireframes del proyecto:sección cartelera

    Viendo ahora
  • 22
    Wireframes del proyecto: menú inferior

    Wireframes del proyecto: menú inferior

    07:14 min
  • 23
    Mockups del proyecto

    Mockups del proyecto

    15:26 min
  • 24
    Definiendo la paleta de color para el mockup del proyecto

    Definiendo la paleta de color para el mockup del proyecto

    11:52 min
  • 25

    Teoría del color para el diseño de interfaces

    03:10 min
  • 26
    Agregar contenido al mockup del proyecto

    Agregar contenido al mockup del proyecto

    12:51 min

Crear prototipos interactivos

  • 27
    Prototipado

    Prototipado

    07:13 min
  • 28
    Animaciones automáticas con Adobe XD

    Animaciones automáticas con Adobe XD

    03:45 min
  • 29
    Animaciones avanzadas

    Animaciones avanzadas

    04:27 min

Aplicar las mejores prácticas y herramientas para exportar los proyectos

  • 30
    Exportado

    Exportado

    06:46 min
  • 31
    Compartir

    Compartir

    06:59 min
  • 32
    Conclusiones

    Conclusiones

    01:37 min
Tomar examen

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
        Felipe Jacquin

        Felipe Jacquin

        student•
        hace 7 años
        • De igual forma se pueden renombrar las mesas de trabajo haciendo doble clic en el titùlo de la parte superior.

        • Creo que se confundio cuando indica en el min 5:33 que se duplica con la tecla SHIFT ya que es con la tecla ALT.

        Genial estoy aprendiendo un montòn de Adobe XD, muchas Gracias :D

        Izael Ruelas Garcia

        Izael Ruelas Garcia

        student•
        hace 6 años

        Para facilitar los wireframes tal vez puedes apoyarte con los siguientes templates

        Juan Esteban Galvis

        Juan Esteban Galvis

        student•
        hace 5 años

        En este tema de los prototipos hay tres niveles de fidelidad:

        • Baja Fidelidad: Es el diseño que hicieron con papel y lapiz para entender la idea y una idea básica de la distribución

        • Media Fidelidad: Es lo que está haciendo el profesor, está a blanco y negro pero ya se organiza tamaños y pantallas no tan tan detalladas pero si dan una mejor idea del diseño

        • Alta Fidelidad: Es el Mockup ya con los colores y el diseño finalizado, listo para prototipar (Conectar con las otras pantallas para simular interactividad)

        Un curso muy bueno para ver y entender este proceso es el de 'Diseño de Prototipos Móviles': https://platzi.com/clases/diseno-prototipos/

        Abigail Colina

        Abigail Colina

        student•
        hace 5 años
        Progress 1.PNG
          Juan Fernando López Hernández

          Juan Fernando López Hernández

          student•
          hace 5 años

          Tu aporte esta bastante genial.

        Domínguez Daniel Garbiel

        Domínguez Daniel Garbiel

        student•
        hace 6 años
        Móvil Android – 1.png

        Quizá un día este inspirado y me salga algo mejor, por el momento sólo me salió eso de la imaginación :)

          rebeca Narvaez

          rebeca Narvaez

          student•
          hace 6 años

          Una recomendación de diseño es Utilizar dos tipografías, máximo 3. Pero lo más más importante es que sean legibles. Sé que una de las partes más complejas es encontrar la tipografía adecuada, pero como recomendación personal, te diría que te alejes de las tipografías manuscritas a menos que el concepto de tu diseño así lo requiera, porque son difíciles de leer.

          :D

        Maylith Ángulo Angulo

        Maylith Ángulo Angulo

        student•
        hace 6 años

        Me gusto mucho esta clase.

        Sebastian Marin

        Sebastian Marin

        student•
        hace 6 años

        Super clase profe...... pensé que había perdido el amor y el gusto por el diseño. Gracias

        Maria Auxiliadora Sanchez

        Maria Auxiliadora Sanchez

        student•
        hace 5 años

        Ufff m falta mucho =(

        prototipo.JPG
        Manuel Cruz

        Manuel Cruz

        student•
        hace 6 años

        Soy yo o en Windows no se puede arrastrar una imagen sobre XD porque no la abre? Gracias!

          Fernando Carrión

          Fernando Carrión

          student•
          hace 6 años

          Acabo de hacer la parte de imágenes del curso, y tanto como para contenedores y máscara no tuve ningún problema al arrastrar la imagen. Tal vez algún formato en especial que estés utilizando?

          Aarón González

          Aarón González

          student•
          hace 6 años

          ¡Hola! Puede ser que el formato de la imagen no es admitido por XD. Intenta convertir la imagen a .jpg a .png y nos cuentas que tal :D

        Juan Fernando López Hernández

        Juan Fernando López Hernández

        student•
        hace 5 años

        Hola este es mi aporte.

        Adobe XD 30_12_2020 10_24_02.png

        Usuario anónimo

        Usuario anónimo

        user•
        hace 5 años

        error 404 en el recurso Wireframes del proyecto menú inferior - Google Drive

        Brian Robert Polo Lazo

        Brian Robert Polo Lazo

        student•
        hace 6 años

        Super versatìl Adobe XD, se respirà virtualmente pasiòn por le diseño en la clase, lo maximo el profesor!

        Jhon Alexander Romero Gonzaga

        Jhon Alexander Romero Gonzaga

        student•
        hace 6 años

        Primero los huesos, segundo los musculos y tercero el revestimiento del cuerpo.

        Cristian Ramos

        Cristian Ramos

        student•
        hace 5 años

        no me salen los UI KITS que le salen al profe !!

        Captura de pantalla 2021-05-24 161243.jpg

        Adriana Sánchez

        Adriana Sánchez

        student•
        hace 5 años

        Hola, no puedo abrir el archivo de Wireframes, me marca error 404, gracias.

          Daniel Adolfo Ordoñez Rubio

          Daniel Adolfo Ordoñez Rubio

          student•
          hace 5 años

          Hola, Adriana :) En lugar del enlace puedes descargar la imagen abajo (en la sección de archivos). Para ahorrarte la molestia, te la dejo acá :D

        Dustin Campos

        Dustin Campos

        student•
        hace 7 años

        Una pregunta, vine aqui porque en mi curso de introduccion al diseño de prototipos estaban usando sketch y no sabia utilizarlo asi que busqué lo mas parecido (AXD) pero ahora dicen que vaya a tomar el Curso UX: Curso de Diseño de Interfaces con Sketch...y ese curso esta dos pestañas mas adelante del de prototipado, deberia ir aprendiendo asi saltando cosas o en orden? sé que no hay un orden natural pero no me quiero desviar tampoco.

          Carlos Jimenez

          Carlos Jimenez

          student•
          hace 7 años

          En este curso nos enfocamos en aprender a usar el programa desde cero y no necesitas conocimientos previos. Cuando lo termines podrás completar el curso de prototipos o de UX.

          David Fernando Aguirre Rodriguez

          David Fernando Aguirre Rodriguez

          student•
          hace 6 años

          Te recomiendo que acabes un curso y después sigas otro

        Arnaldo Chura Condori

        Arnaldo Chura Condori

        student•
        hace 7 años

        Tengo una version anterior de XD y no puedo abrir el archivo que compartes podrías pasar a las versión 2.1? Please. me interesa los UI kits de apple. entre al link y me descarga em .dmg yo uso windows 10.

          Carlos Jimenez

          Carlos Jimenez

          student•
          hace 7 años

          Adobe XD es gratuito y la versión actual es la 19.2. Es mejor que descargues la nueva versión. Aquí encuentras todos los recursos de Apple:

          Tania Ramírez

          Tania Ramírez

          student•
          hace 7 años

          Creo que no es tu versión, sino el .dmg Puse los recursos en este link, ya están en Xd y no deberías tener problema en descargarlos. Solo debes bajarlos dentro de los próximos 7 días porque el link caduca

          Como quiera te recomiendo tener siempre actualizado Xd, es gratis así que siempre podrás actualizar sin problema :)

        Ramona Victoriano Adames

        Ramona Victoriano Adames

        student•
        hace 5 años

        no pude descargar la imagen, pero igual y lo hice sin ella. excelente video

        Nelson Rodríguez

        Nelson Rodríguez

        student•
        hace 5 años

        vamos con buen ritmo¡¡¡ #sin parar de aprender.

        Wireframes del proyecto_sección cartelera.jpg

        Jennifer Arismendi

        Jennifer Arismendi

        student•
        hace 6 años
        WIREFRAME home.jpg

        super práctico con adobe XD