CursosEmpresasBlogLiveConfPrecios

Agregar contenido al mockup del proyecto

Clase 26 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

    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

    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

    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

    11:20 min
  • 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

    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

    Viendo ahora

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

      Comentarios

        Miguel Perez Vallejos

        Miguel Perez Vallejos

        student•
        hace 6 años
        2.jpg
          Efraín Hernández García

          Efraín Hernández García

          student•
          hace 6 años

          Waow! Ese diseño esta increible!

          Danilo Fernandez

          Danilo Fernandez

          student•
          hace 6 años

          Increíble.

        Andres Cabrera Cabrera

        Andres Cabrera Cabrera

        student•
        hace 7 años

        Soy un estudiante rebelde desde niño. Hice una App de Streaming de Videojuegos Clásicos, es la versión 1.0.

        Realice User Research con Entrevistas y Pruebas de Usabilidad, aplique Card Sorting para la Arquitectura de Información e hice un continúo Bechmark para encontrar patrones entre apps.

        Todo el feedback el Bienvenido :)

        1.png
        2.png
        3.png
        4.png
        5.png
        6.png
        7.png
        8.png
        9.png
          Elias Ojeda Medina

          Elias Ojeda Medina

          student•
          hace 7 años

          Te quedo genial!!

          Enzo Geron

          Enzo Geron

          student•
          hace 7 años

          Excelente

        santiagorestreporueda

        santiagorestreporueda

        student•
        hace 6 años
        flicker-adobexd-unavacaverde.jpg
        Jhafet Pianchachi

        Jhafet Pianchachi

        student•
        hace 6 años
        Captura de Pantalla 2020-04-13 a la(s) 14.32.30.png

        Holi estimados, espero les guste!! Un abrazo!! xoxo

          Franco Flores

          Franco Flores

          student•
          hace 5 años

          Muy buen trabajo, super estético y muy bien utilizado el grid, los espacios y los colores.

        Ares Alberto Vázquez Bravo

        Ares Alberto Vázquez Bravo

        student•
        hace 6 años
        Captura de Pantalla 2020-05-05 a la(s) 11.43.33.png
        Steve Calderón Sánchez

        Steve Calderón Sánchez

        student•
        hace 6 años

        Para evitar importar los iconos desde Illustrator, Xd tiene plugins, uno de ellos es Icons 4 Design, se instala en la parte de complementos, justo abajo de las capas

        Sergio Herreño

        Sergio Herreño

        student•
        hace 6 años
        Screenshot_5.png
        Alejandro Lagunas

        Alejandro Lagunas

        student•
        hace 7 años

        Les recomiendo instalar dos complementos muy buenos, “PhotoSplash” para colocar todo tipo de imágenes en sus proyectos y “User Images” para las imágenes de los avatares. :)

          Juan Carlos García Esquivel

          Juan Carlos García Esquivel

          student•
          hace 6 años

          Buenas recomendaciones, gracias.

        Maylith Ángulo Angulo

        Maylith Ángulo Angulo

        student•
        hace 6 años
        Repetir cuadrícula 5.png
        Uriel Alberto Arevalo Franco

        Uriel Alberto Arevalo Franco

        student•
        hace 7 años

        [(https://icomoon.io/)] es una interesante alternativa para obtener iconos svg si no cuentan con Ilustrator . Otra solución es intentar hacerlos para ganar experticia en el uso de los comandos XD.

        Angelo Ariel Nuñez Fonseca

        Angelo Ariel Nuñez Fonseca

        student•
        hace 6 años

        Me animé a realizarlo también en modo oscuro.

        Mockups.png
        Juan Daniel Diaz Jaramillo

        Juan Daniel Diaz Jaramillo

        student•
        hace 5 años

        Fui un poco rebelde y lo hice así. Acepto Feedback

        Home - MockUp – 1.png
        Anniel Luna

        Anniel Luna

        company_admin•
        hace 6 años
        mesa.png
        Fredy Alonso Hernández

        Fredy Alonso Hernández

        student•
        hace 6 años

        ¡Que genial es esto! :D :D :D

        adobe xd.JPG
        Nicolas Alvarez Tobon

        Nicolas Alvarez Tobon

        student•
        hace 6 años

        Mi aporte :P

        ![](

        flick.jpg

          Isaac Daniel Pingo Mezones

          Isaac Daniel Pingo Mezones

          student•
          hace 5 años

          Me parece el mejor

        Samuel Rivero Padilla

        Samuel Rivero Padilla

        student•
        hace 7 años

        Aquí está la tarea :) !

        Cesar Eduardo Velazco Medel

        Cesar Eduardo Velazco Medel

        student•
        hace 7 años

        Me la aplico con el "cmd + Q", no sabia para que servia y me entro la duda, así que lo hice :( jajaja, ahora ya se para que sirve...

        Andrés Camilo Vélez Mejía

        Andrés Camilo Vélez Mejía

        student•
        hace 6 años
        Anotación 2020-04-04 191132.png
        Emily del Carmen  Paredes Burgos

        Emily del Carmen Paredes Burgos

        student•
        hace 6 años

        Home – mockup.jpg

        Home – mockup – 1.jpg
        Nelson Enrique Guerra Díaz

        Nelson Enrique Guerra Díaz

        student•
        hace 6 años

        Como puedo hacer para ampliar la cantidad de texto automaticamente en los comentarios, para que el limite de palabras en el comentario sea mas amplia. ![](

        Ejercicio platzi.jpg

          Juan Carlos Barbaran Meza

          Juan Carlos Barbaran Meza

          student•
          hace 6 años

          Existen dos tipos de objeto que admiten texto, de linea o de parrafo. Si tienen uno como el sugundo solo es ampliar el cuadro que envuelve el parrafo, o puedes poner enters que indiquen que es más grande de lo que se indica.