CursosEmpresasBlogLiveConfPrecios

Cómo hacer un wireframe digital

Clase 15 de 22 • Curso de Sketch 2017

Clase anteriorSiguiente clase

Contenido del curso

Introducción al curso de Sketch

  • 1

    Actualización de Curso

    00:05 min
  • 2
    ¿Qué es Sketch y para qué sirve?

    ¿Qué es Sketch y para qué sirve?

    01:39 min

Las Herramientas de Sketch

  • 3
    Creación de documento e interfaz de Sketch

    Creación de documento e interfaz de Sketch

    02:01 min
  • 4
    Herramientas de navegación en Sketch

    Herramientas de navegación en Sketch

    01:27 min
  • 5
    Cómo funcionan los artboards en Sketch

    Cómo funcionan los artboards en Sketch

    04:11 min

Capas

  • 6
    Crear y manipular capas en Sketch

    Crear y manipular capas en Sketch

    10:12 min
  • 7
    Agrupar, bloquear y ocultar capas

    Agrupar, bloquear y ocultar capas

    04:09 min

Objetos, Máscaras y Textos

  • 8
    Combinar Objetos

    Combinar Objetos

    03:51 min
  • 9
    Máscaras en Sketch

    Máscaras en Sketch

    03:59 min
  • 10
    Uso de la pluma en Sketch

    Uso de la pluma en Sketch

    06:07 min
  • 11
    Creación de textos en Sketch

    Creación de textos en Sketch

    10:28 min
  • 12
    Símbolos en Sketch

    Símbolos en Sketch

    05:24 min
  • 13
    Aplicando símbolos

    Aplicando símbolos

    13:09 min

Proyecto - Diseñando una App

  • 14
    Layout, grillas y reglas

    Layout, grillas y reglas

    11:56 min
  • 15
    Cómo hacer un wireframe digital

    Cómo hacer un wireframe digital

    Viendo ahora
  • 16
    Cómo diseñar un UI Kit

    Cómo diseñar un UI Kit

    17:23 min
  • 17
    Diseñando íconos

    Diseñando íconos

    12:26 min
  • 18
    Armando el Mockup

    Armando el Mockup

    24:58 min
  • 19
    Exportando assets

    Exportando assets

    06:03 min
  • 20
    Mirror

    Mirror

    03:48 min
  • 21
    Plugins en Sketch

    Plugins en Sketch

    09:02 min

Material Bonus

  • 22

    Cosas útiles en Sketch

    02:43 min
Tomar examen
Resumen

Un wireframe debe ser simple y hacerse rápido. Lo importante es identificar los diferentes elementos y su distribución dentro de una vista.

Una recomendación importante en diseño de interfaces es mantener los márgenes, y esto si es algo que se puede empezar a hacer desde la creación de los wireframes como buena práctica.

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
        Julio J Yépez

        Julio J Yépez

        student•
        hace 8 años

        Usando …

          Julio J Yépez

          Julio J Yépez

          student•
          hace 8 años

          Aquí el proceso …

          Alejandro Sol Villaseñor

          Alejandro Sol Villaseñor

          student•
          hace 7 años

          Muy bueno amigo

        Salvador Hernández Villanueva

        Salvador Hernández Villanueva

        student•
        hace 8 años

        Con el shortcut CMD + (cualquier flecha) pueden agrandar la figura pixel por pixel para más precisión

          Carlos Jimenez

          Carlos Jimenez

          student•
          hace 8 años

          👍 Este un shortcut que ahorra mucho tiempo

          Alejandro Sol Villaseñor

          Alejandro Sol Villaseñor

          student•
          hace 7 años

          Gracias amigo por el shortcut!

        Mon Avellaneda

        Mon Avellaneda

        student•
        hace 8 años

        Diría que me queda un poco apretado. Me cuesta ver clara la proporción de los tamaños de texto y los espaciados. Aunque con el tip de los múltiplos de 8 ayuda bastante.

        wireframe_detalle.png
          Alejandro Sol Villaseñor

          Alejandro Sol Villaseñor

          student•
          hace 7 años

          Si, de hecho es algo que nos recomiendan las Human Interface Guidelines de Apple y Material Design de Google. Si no las has checado te recomiendo que les des una leída y trates de seguirlas lo más que se puedan.

        Andres Silva

        Andres Silva

        teacher•
        hace 7 años

        Utilizar fuentes en escalas (para este caso 4 u 8) esto ayudara a mantener la consistencia

        Christian Rainier Patiño Lara

        Christian Rainier Patiño Lara

        student•
        hace 7 años
          Tetsu Osnaya

          Tetsu Osnaya

          student•
          hace 6 años

          Ahhh prro traes el Sketch Dark Mode

        Roberto Ocando Morales

        Roberto Ocando Morales

        student•
        hace 7 años

        Que bueno, se siente muy bien realizar el ejercicio y ver el producto… muy buena clase…

        Alejandro Restrepo

        Alejandro Restrepo

        student•
        hace 8 años

        Alguien sabe como funciona la regla de 8x o 4x para los tamaños?

          Luis Diaz Venero

          Luis Diaz Venero

          student•
          hace 8 años

          Hola, la idea es que utilices múltiplos de 8 y 4 para los tamaños y distancias, para que el diseño/layout tenga coherencia y equilibrio. Saludos 😃

          Alejandro Sol Villaseñor

          Alejandro Sol Villaseñor

          student•
          hace 7 años

          Si, esto te ayudará a mejorar los diseños cuando trabajes con vistas responsivas tanto en Android como en iOS.

        Manuel Martínez Ortiz

        Manuel Martínez Ortiz

        student•
        hace 7 años
        Screen Shot 2018-10-22 at 6.23.05 PM.png

        Tutorial de Sketch para sacarle más provecho a está gran herramienta:

          Alejandro Sol Villaseñor

          Alejandro Sol Villaseñor

          student•
          hace 7 años

          Gracias por el aporte amigo, esta muy cool el wireframe que has realizado.

        cristopher peraza

        cristopher peraza

        student•
        hace 8 años

        Una buena practica para solucionar el problema de las proporciones, es el implementar los números de fibonacci.

        Estos nos permiten crear elementos con proporciones mas naturales a nuestro ojo.

        También recomiendo que investiguen acerca del golden ratio.

          Alejandro Sol Villaseñor

          Alejandro Sol Villaseñor

          student•
          hace 7 años

          Gracias, lo tomaré en cuenta 😃

          Aunque también te recomiendo leer los recursos que ofrece Apple en Human Interfaces Guidelines y el Material Design de Google.

        Jesus Sandrea

        Jesus Sandrea

        student•
        hace 7 años

        El el minuto 2:22 como hace el profesor para ver los margenes?

          Carlos Jimenez

          Carlos Jimenez

          student•
          hace 7 años

          Seleccionas el objeto luego oprimes Shift y colocas el cursor sobre el objeto que quieres ver márgenes

          Alejandro Sol Villaseñor

          Alejandro Sol Villaseñor

          student•
          hace 7 años

          Gracias por la información, justo tenía dudas con eso. Resulta más fácil.

        Aaron Yamil Luna Parrado

        Aaron Yamil Luna Parrado

        student•
        hace 6 años

        Buenas tardes, para el texto de Lorem Ipsun se tiene algun autorelleno para sketck? Gracias.

          Juan Castro

          Juan Castro

          teacher•
          hace 6 años

          :point_right: Lorem Ipsum Generator plugin for Sketch

        Ines Sias

        Ines Sias

        student•
        hace 6 años

        No termine de entender cómo haces lo del redondeado de los bordes. Cuando te referís a 33px.

          Carlos Jimenez

          Carlos Jimenez

          student•
          hace 6 años

          El valor máximo de las esquinas redondeadas es la mitad de la longitud. Es decir que si un rectángulo tiene 100px de alto, el valor máximo de la esquina redondeada es 50px, de ahí en adelante no tiene efecto:

          Screenshot 2019-08-21 10.06.21.png

          En el caso del proyecto de la clase la mitad de 33 es 16.5 así que de 17px en adelante va a generar el mismo resultado

        Lian Nivin

        Lian Nivin

        student•
        hace 6 años

        Este curso tiene examen de certificacion?

          Tetsu Osnaya

          Tetsu Osnaya

          student•
          hace 6 años

          Si. Aunque es un curso bastante práctico. Definitivamente te será más útil desarrollar un proyecto con este.

        Jose Chirinos

        Jose Chirinos

        student•
        hace 6 años

        excelente clase... !preview wireframe

        Victoria Yleana Goicoechea Miguel

        Victoria Yleana Goicoechea Miguel

        student•
        hace 6 años

        Canción: Anh Tran-Lau Dai Tinh Ai

        jorge nova ferrer

        jorge nova ferrer

        student•
        hace 6 años
        Captura de pantalla 2019-08-02 a las 13.44.59.png
          Tetsu Osnaya

          Tetsu Osnaya

          student•
          hace 6 años

          Te quedo muy bien

        Carlos Eduardo Mejía Torres

        Carlos Eduardo Mejía Torres

        student•
        hace 7 años

        Mi propuesta es un tanto distinta aunque basada en la propuesta por Carlos. Es una app de sonidos Foley donde tienes barra de busqueda, sonidos destacados, sonidos aleatorios y un listado igual

        1.png

          Tetsu Osnaya

          Tetsu Osnaya

          student•
          hace 6 años

          Aunque está diseñado en XD. Me encanta la sección de "Get Inspired"

        ezequiel cenicola

        ezequiel cenicola

        student•
        hace 7 años

        Skech tiene la opción de “Repeat Grid” como trae Adobe Xd ?

          Martha Muñoz

          Martha Muñoz

          student•
          hace 7 años

          Hola @ezecicola, hasta el momento Sketch no cuenta con la opción de "Repeat Grid" pero el plugin Craft tiene opciones similares y, en general, es un plugin muy valioso para optimizar el proceso de diseño en Sketch.

        Armando Alcantara

        Armando Alcantara

        student•
        hace 6 años
        Screen Shot 2019-08-31 at 12.06.28 PM.png