Mockups del proyecto

Clase 23 de 32 • Curso de Adobe XD 2019

Clase anteriorSiguiente clase

Richard Alejandro Avendaño Valenzuela

student•

Estos son mis apuntes sobre la diferencia entre Wireframes, Mockups y Prototypes. Espero sea útil para mas personas :)

Danilo Fernandez

student•

Buen aporte.

Euge Oller

student•

Porque tus apuntes están en inglés si tu hablas y comentas en español? además este es una comunidad de habla hispana, así que nada que ver con tu aporte Lol.

Daniel Gonzalez Herrera

student•

Para los que tienen Windows y descargaron el UI Kit desde la página de Apple, no lo van a poder abrir porque es un archivo .dmg el cuál es un tipo zip para Mac, para poder descomprimirlo descarguen 7-zip, pesa solo un mega y es gratis 😉 con eso ya podrán descomprimirlo y utilizarlo.

Paty Patricia

student•

Yo no he podido descomprimirlo. Hay alguna otra opción?

Pablo Perez

student•

Tambien en la clase de ui kit el profesor en uno de los comentarios de un alumno le da un link con los archivos para windows de ios

marco antonio cespedes mamani

student•

Excelente clase... y bueno yo justo queria comentar que mi idea como aspirante a desarrollador Front, trato de maquetar jugando y aplicando todo con la medida de 16 pixeles (8, 12, 24, 32). Para tener una simetría y costumbre natural.

Maria Auxiliadora Sanchez

student•

wireframe: Un wireframe es la primera representación de un diseño. mockup: Un mockup es una representación visual y estática de un diseño, es para tener una idea mas clara entre todos los mienbros del equipo de còmo lucirà el producto final. prototipo: Un prototipo es también un representación de la versión final de un diseño web que, además, simula la interactividad.

Andrés Palma

student•

Update xD:

Aquí la otra página:

Euge Oller

student•

Tranquilo actualizador!!! XD

DAVID DORADO

student•

Mockup = Bosquejo

JAVIER ALEXANDER MURCIA ALMANZA

student•

Bonita la hora de venir a crear las margenes del safe area.

Sebastian Marin

student•

Buenas noches. Tengo una pregunta. Debo realizar un mockup por cada tipo de télefono o tablet? Gracias

Mauricio Higuera

student•

No , se supone que debes adaptar tus diseños a todas las pantallas, con técnicas como responsive design o mobile first...

Jared Nava

student•

Es suficiente con hacer un mockup para celular, tablet y PC dependiendo de tu proyecto.

Adobe XD tiene una funcion bastante util llamada ++redimencionado interactivo++ para no hacer tan tedioso el proceso de adaptacion.

ver clase > Responsive Resize

Julio Pérez

student•

Alguien tiene problemas para acceder al documento? MOCKUPS DEL PROYECTO - Google Drive

Adriana Gonzalez

student•

Si no pueden acceder al documento drive de los recursos, ingresen a este link y ahi pueden descargar el mockup: https://developer.apple.com/design/resources/![Captura de Pantalla 2021-04-07 a la(s) 11.57.49 p. m..png](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202021-04-07%20a%20la%28s%29%2011.57.49%20p.%C2%A0m.-b67080b5-340c-4c2f-8fe7-0f4f813295ad.jpg)

Moises Gregorio Briceño Ramirez

student•

![](

Eduardo Reyes

student•

Algo relacionado a la tipografía, es que para poder verla en el teléfono, también hay que instalarla en el teléfono.

Jonathan Jiménez Soveranes

student•

Si gustan la fuente que recomienta apple aquí les dejo el link https://github.com/blaisck/sfwin

Pedro Alejandro Rodríguez García

student•

Gracias!

Emily del Carmen Paredes Burgos

student•

Disculpen chic@s, pero no encontré la tipografía "Proxima Nova "

JuanFe Peralta

Team Platzi•

La puedes encontrar aquí: https://fonts.adobe.com/fonts/proxima-nova

Emily del Carmen Paredes Burgos

student•

Gracias Juan

Moises Baldán López

student•

La Url del mockups del proyecto no funciona alguna otra solución ,gracias.

Nelson Rodríguez

student•

Continuamos nuestro retro....

Enrique Yael C

student•

recuerden(no referente a esta clase) no todo tiene por que ser reponsivo por ejemple aqui la descripcion de los carteles no hiba TODO agrupado aveces porque aveces puede dar dolores de cabeza :v

Jhon Alexander Romero Gonzaga

student•

Ahora si, a alocarse probando paletas de colores

Cristian Muñoz

student•

Hola, que pena no pude hacer los márgenes de la forma que el lo explica, ¿Hay otra forma?

Daniel Adolfo Ordoñez Rubio

student•

Hola, Cristian :) ¿Qué parte te da problema? Puedes hacer un rectángulo del tamaño que quieres y usarlo para colocar una lía guía. Dime qué intentaste y qué se te dificultó.

Cristian Muñoz

student•

Hola Dani, me acerque a los bordes pero no me aparece la guía, y coloco el rectángulo, pero no me funciona.

Pd: Gracias por responder

PERLA CECILIA CARREON MARTINEZ

student•

Hola, cómo puedo agregar la tipografía Proxima Nova?, no me aparece. Gracias

Javier Alas

student•

Descarga la fuente, descomprime el archivo y despues lo ejecutas para instalar la fuente. Reinicias la aplicacion y deberia de aparecerte disponible para su uso.

Javier Alas

student•

https://fonts.adobe.com/fonts/proxima-nova

Mockups del proyecto

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

Actualización de curso

Qué es AdobeXD y por qué usar AdobeXD

Instalación

Crear y configurar un nuevo proyecto

Creación de un documento

Interfaz y navegación

Atajos de teclado

Artboards

Grids y layouts

Utilizar las herramientas de Diseño

Formas

Alinear y combinar formas

Diseñar icono

Textos y tipografía

Imágenes y máscaras

Pluma

Optimizar el trabajo con herramientas avanzadas

Repeat grid tool

Cargar contenido en repeat grid tool

Componentes

Panel de assets

Responsive Resize

UI Kits

Diseñar una app

Wireframes del proyecto:sección cartelera

Wireframes del proyecto: menú inferior

Mockups del proyecto

Definiendo la paleta de color para el mockup del proyecto

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

Agregar contenido al mockup del proyecto

Crear prototipos interactivos

Prototipado

Animaciones automáticas con Adobe XD

Animaciones avanzadas

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

Exportado

Compartir

Conclusiones