Creación de Wireframe Básico en Adobe XD para Aplicaciones Móviles
Todos los cursos GRATIS
Se acaba en:
:::
Resumen
La mejor manera de comunicar de manera rápida la solución al problema es al hacer un Wireframe.
Los wireframes nos servirán para comunicar la estructura de la solución de diseño que estamos pensando: ¿Dónde estarán los elementos? ¿cuál será su jerarquía? ¿Cuáles serán los call to action?
Para la clase utilizamos Adobe XD, pero puedes hacer este acercamiento con otro software y hasta en papel, lo importante es que no te preocupes con los detalles y que se entienda a la perfección el flujo de tu producto.
Considero que falta un botón para volver atrás, siempre habrá quienes cambian de opinión, además viene en el principio de "perdona al usuario". Un excelente curso !!
Tienes mucha razon. Uriel
Así es, no dejar atrapado al usuario, permitirle cometer errores y explorar la interfaz.
Puedes también probar Figma en donde puedes hacer todo esto y lo mejor es que puedes hacerlo de manera colaborativa. Te lo recomiendo mucho y además es gratis (la parte paga es para manejo de librerías en equipo)
Para esta etapa prefiero el papel ya que es rápido y permite que otros miembros del equipo se involucren en el proceso.
Un wireframe permite ofrecer al cliente o al equipo una visión del producto sin invertir mucho tiempo y dinero. Además de probar la viabilidad (a nivel de diseño) de los flujos establecidos anteriormente.
Es justo lo que comentas, los wireframes nos permiten generar propuestas de forma rápida y eficiente para que el cliente puedan tener una visión de lo que vendría siendo su producto a un costo bajo.
Totalmente de acuerdo, seria mucho mas fácil definir en lápiz y papel.
Acá les dejo mis wireframes, obviamente los ire mejorando y añadiendo más conforme vaya pasando el curso, este proyecto será completamente en serio.
En algunos casos el profe omite el hecho de que no todos conocemos los términos a los que se refiere. Al principio del video hace mención a un Splash ¿Qué es eso?
Un Splash es la primera pantalla que se muestra al abrir una aplicación, ya sea en tu celular o en el escritorio. Por lo general se presenta el logo y el nombre, mientras detras se va cargando la aplicación.
Mil gracias por tu respuesta 😊
Si ustedes son mas drag and drop, le recomiendo Marvel App, es una herramienta online que cuenta con componentes prediseñados y listos para hacer sus wireframes. Tiene versión gratuita.
Por aqui el wireframe de mi version de rocket pizza segun mi flujo
Prototipo:
Animación: Entradas, salidas...
Estados: Ej. Conectado, no conectado, sin respuesta...
Interacción: ¿Qué pasa cuando el usuario hace esto...?
Comportamiento
Interacción-retroalimentación
Estados
¿Te refieres solo a la etapa de prototipado?
Esta mal esto.
No se usar figma, tampoco lunacy. No me es facil aplicar lo que me estan mostrando.
NO puedo ir a la par.
tengo que esperar a ver los 4 modulos para despues recieeen saber como se usan las herramientas.
me muestran como hacen pero no la metodologia. No tengo los pasos para aplicar lo que estoy aprendiendo.
Que pasa si mientras me van explicando quiero practicar haciendo una app?
Hola Sebastian, puedes considerar hacer primero el curso de Figma, yo estuve igual, poco a poco con la practica pude entender como manejar el aplicativo.
Vaya, soluciones rápidas, ya que al ignorar estas bases uno como programador comienza a tener barreras en la creación de productos digitales.
El video es muy practico y didáctico,hice todos los pasos!
Wauw, me encantan esos momentos cuando no se que hacer, a pesar de que mi lógica es genial.
Jajaja. me divertí con esa frase
Sería muy bueno que se explicaran los comandos, ya que algunos somos nuevos en este campo y no sabemos cómo sacar por ejemplo duplicar paginas o los cuadros del menú.
imagino que este curso estaba luego de la ruta de adobe xd, hoy en día adobe xd no es muy utilizado y adobe cerro la opción de descargarla, hoy puedes utilizar figma, que es una herramiento muy poderosa e intuitiva de utilizar, hay cientos de cursos, acá en platzi tienen cursos muy buenos!
POR QUE NO EXPLICAS LOS COMANDOS O CÓMO HACER NUEVAS PAGINAS JAJA ES MI PRIMERA VEZ EN XD
Wireframing en Figma
Aquí dejo mi aporte, saludos!
Comparto mis Wireframes
Les comparto un proyecto personal, recién estoy empezando, sé que hay mucho que aprender e implemtentar!