Introducción al diseño de aplicaciones: crea un prototipo móvil en una tarde usando Marvel | Jaclyn Lenee | Skillshare

Velocidad de reproducción


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Introducción al diseño de aplicaciones: crea un prototipo móvil en una tarde usando Marvel

teacher avatar Jaclyn Lenee, UI/UX | App Design | Productivity

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      1:48

    • 2.

      Por qué el prototipo

      1:44

    • 3.

      Identificar los problemas para resolver

      2:06

    • 4.

      Investigación de patrones

      5:26

    • 5.

      cómo hacer bocetos;

      2:14

    • 6.

      Configura tu proyecto en Marvel

      2:41

    • 7.

      Diseño de pantes de diseño con Marvel

      13:02

    • 8.

      Construir tu prototipo

      5:12

    • 9.

      Prueba de tu prototipo

      3:43

    • 10.

      Finala

      1:09

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

271

Estudiantes

--

Proyecto

Acerca de esta clase



Esta clase es para cualquiera curiosidad por trabajar en el campo del diseño de UI/UX y para los emprenden que quieran crear sus propios patrones de diseño de boceto, bocetos de ideas, pantes de wifi y construirun un proyecto de aplicación interactivo para probar nuestros conceptos.

No es una experiencia previa para seguir. Usaremos herramientas gratuitas lo que significa que no necesitarás invertir en cualquier software especial.

Al final de la clase habrás creado un prototipo móvil de tappable que puedes probar con un amigo o cliente. Estarás con un proceso repetible y las herramientas que necesitas para empezar a diseñar aplicaciones.

Conoce a tu profesor(a)

Teacher Profile Image

Jaclyn Lenee

UI/UX | App Design | Productivity

Profesor(a)

Hello, I'm Jaclyn. I help early-stage startups build strong brands and delightful digital products.

 

Ver perfil completo

Habilidades relacionadas

Diseño Diseño UX/UI Prototipado
Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: Hola, amigos. Mi nombre es Jacqueline, y trabajo como diseñador freelance, incluso en la industria. Alrededor de 10 años me inicié con el diseño gráfico creando bajos esos y sitios web para pequeñas empresas. Y ahora trabajo principalmente con starups en etapa temprana, ayudándoles a crear sitios web receptivos y aplicaciones móviles. En esta clase, aprenderás a crear tu primer prototipo de aplicación móvil. Esta clase es para cualquier persona que tenga curiosidad por trabajar en el campo de la experiencia de usuario o diseño de interfaz de usuario artistas visuales que busquen ampliar su conjunto de habilidades comercializables o empresarios que deseen crear una aplicación propia. Esta va a ser una clase práctica de manos a mano. Vamos a estar haciendo algunos bocetos. Vamos a hacer un poco de diseño y una herramienta web, y lo iban a estar poniendo todo junto en un prototipo herbario superior que disputamos con nuestros amigos o clientes potenciales. No necesitas tener ninguna experiencia previa en diseño para seguir, y estaremos usando una herramienta gratuita de tanto para el diseño como para el prototipado, lo que significa que no vas a necesitar invertir en ningún equipo especial o software de diseño de pago para esta clase y realmente espero dotarte de un proceso repetible y la herramienta que necesitas para desarrollar aún más tu concepto de APP móvil. 2. Por qué el prototipo: como diseñador profesional de aplicaciones, considero que el prototipado es una parte necesaria de mi proceso. El prototipo me permite a mí y a mis compañeros probar ideas y probarlas con clientes reales antes de pasar cualquier tiempo codificando. Esto es importante porque ahorra mucho tiempo y dinero. Lo peor que puede pasar al crear una APP es pasar meses construyéndola en Lee para descubrir que no resuelve la necesidad de tus clientes. Después de que hayas lanzado como propietario de un negocio, puedes usar prototipos clicables o derrocar para probar ideas con tus clientes. Incluso puedes mostrarle un prototipo a un inversionista ya que estás intentando recaudar una ronda de financiamiento. Los prototipos también se pueden utilizar como herramienta de reclutamiento para vender la visión de tu producto antes irte. Incluso construyó un equipo clicable hacia fuera prototipos. Ayúdame a refinar mis diseños. Ayúdame a probar conceptos para asegurarme de que estoy resolviendo un problema real. Y eventualmente, una vez que estemos listos para comenzar a construir, utilizo prototipos como herramienta para ayudarme a comunicarme con los ingenieros de software que estarán construyendo la aplicación. Por eso creo que aprender a hacer prototipos es una habilidad esencial para cualquier persona que quiera trabajar en el diseño de APP. 3. Identificar los problemas para resolver: En primer lugar, necesitamos entender para quién estamos diseñando y cuáles son sus necesidades. Cuando estoy trabajando en un proyecto con un cliente, a menudo estoy etiquetando equipo con un gerente de producto. Realizaremos entrevistas a usuarios y haremos preguntas abiertas para entender mejor los temas que están enfrentando. Esto nos da una idea clara de los puntos de dolor que necesitamos resolver con nuestra solicitud para un proyecto de clase. Lo mantendré simple. Nos vamos a centrar en las necesidades de un amante del café. ¿ Se puede realmente específicamente estará diseñando esta aplicación para una popular cafetería Problema de negocios es, a menudo tienen una línea fuera de la puerta, lo que está alejando a los clientes y limitando las ventas. Por supuesto, el objetivo de los amantes del café es entrar, tomar su café y salir lo más rápido posible. Por lo que esperan construir una aplicación que permita a sus ocupados amantes del café pedir su bebida antes de tiempo y pagar para que puedan saltarse la fila y dirigirse directo al conteo de las camionetas. Por lo tanto, tómate unos minutos para reflexionar sobre los problemas que deberán resolverse con tu solicitud. Escríbelos en una publicación y manténgalo visible a lo largo de cada paso de este proceso. Esto nos ayudará a mantenernos enfocados en resolver los problemas de los usuarios lo que nos ayudará a alcanzar el oro de nuestro negocio. 4. Investigación de patrones: Por lo que ahora es el momento de reunir inspiración para nuestras pantallas de aplicaciones móviles. Algunos de mi recurso favorito es para hacer esto son patrones dot com patrones sin manera, um, um, este sitio es la colección comisariada de capturas de pantalla de muchos tipos diferentes de APS. Lo que me encanta de los patrones es que puedo buscar una categoría específica de ya sea un patrón de interacción o un tipo de característica y ver qué hace otro aire APS, Vea cuáles son las similitudes entre ellos y reunir ideas para cómo podríamos lograr cosas similares y son, uh, el segundo recurso que me volví Teoh ya que estoy reuniendo inspiración para una nueva APP móvil. El diseño es las directrices de la interfaz IOS. Por lo que Apple ha armado toda una biblioteca de recursos es para personas que están diseñando y desarrollando APS. Diseñaron específicamente estas pautas para el ábside que se presentará en la tienda APP así como las APS que Apple crea por su cuenta. Entonces si estás diseñando para IOS, si sabes que estás diseñando para IOS, recomiendo familiarizarte con estas pautas de interfaz humana y realmente usarlas como referencia a medida que te vas. Por lo que algunos ejemplos de esto serían, ya sabes, tienen muchos grandes principios para cómo trabajar con el color. Existen recomendaciones para la resolución de las imágenes que utiliza en su aplicación . Hay sugerencias de cómo diseñar tu icono de APP, Así que ciertamente no recomiendo leer cada una de estas pautas todo en una sola sesión. Hay mucho que digerir, pero solo debes saber que este es un recurso impresionante para ti ya que estás diseñando tus prototipos . Por lo que el tercer recurso que recomiendo cuatro nuevos diseñadores son las directrices de diseño de materiales de Google . Esto es esencialmente lo mismo que las pautas de interfaz humana de Apple, excepto que es para Android. Personalmente, Cuando estoy diseñando para Android, estoy constantemente haciendo referencia a estos lineamientos. Hay muchas recomendaciones específicas para, digamos, digamos, dimensionamiento de iconos, para espaciado de elementos en el diseño, incluso trabajando con color. Uh, un recurso muy rico para un diseñador que es una especie de averiguar las mejores prácticas para diseñar para la plataforma específica. El cuarto recurso que recomiendo para nuevos diseñadores de interfaz es usted x dot bolsa de valores dot com. Esto es como un foro cuatro Experiencia de usuario Diseñadores Teoh hacen preguntas y obtienen comentarios de otros diseñadores de la industria. Entonces la forma en que uso esto es cuando estoy trabajando en un tipo específico de interacción o característica , y no estoy exactamente seguro de la mejor manera de hacerlo. Un ejemplo es diseñar para pantallas de aire, como hace poco con uno de mis clientes que estaban diseñando pantalla de aire cuando Internet se apaga como ¿Qué aspecto tiene eso? ¿ Cuándo aparece? Teníamos todas estas preguntas, así que el primer lugar al que fui fue aquí usted ex bolsa en acaba de escribir, ya sabes, aire proyectado. Eso son prácticas. Aquí hay muchos recursos relacionados con la pantalla de aire. Algunos de ellos se ponen realmente granulares y detallados para nuestros propósitos. Simplemente estábamos buscando realmente cuáles son algunas de las mejores prácticas aquí, como puedes ver la pregunta original, ya sabes, ¿ dónde aparece el aire en el contexto de una forma? Y hay un montón de personas que tipo de tocó en voz alta sobre lo que han visto funcionar bien en las aplicaciones que han diseñado. En ocasiones verás personas que son experiencia de usuario profesional. Investigadores comparten resultados de un estudio de investigación sobre ese tema específico. Entonces si eres alguien que es completamente nuevo en el diseño de interacción, recomiendo encarecidamente libro marcando este ux dot bolsa de valores dot com y usándolo como referencia antes de que tipo de sumergirte en cualquier diseño específico. 5. cómo hacer bocetos;: Entonces ahora que hemos hecho un poco de investigación, podrías tener algunas ideas para cómo estructurar tu app. Pero antes de sumergirnos en la herramienta de diseño, vamos a hacer una ronda de bocetos para solo sacar esas ideas en papel. A veces nos imaginamos que están hasta ser bastante simples. Ya sabes, en nuestra imaginación, pensamos, Oh, Oh, solo necesito unas cuantas pantallas para ayudar a mi usuario a lograr su objetivo. Pero una vez que entramos en la fase de esbozo, empezamos a darnos cuenta de que puede haber ciertas áreas o elementos que son cruciales en. Pero necesitamos dirección de Teoh. Por lo que quiero que pienses a través del escenario de los usuarios. ¿ Dónde está esta persona que está usando tu app? ¿ Están en su auto o están en el trabajo? ¿ Están en el parque? ¿ Están en un teléfono móvil? ¿ Están en un iPad? Trata de ponerte en los zapatos de la persona que está usando tu aplicación, y es una muy buena idea. Teoh nota qué preguntas podrían tener ya que están interactuando con cada pantalla de tu app. Esto puede ayudarte a mantenerte enfocado en resolver para el objetivo del usuario, lugar de enfocarte en los aspectos específicos de cómo se va a ver en el elemento o un botón. Entonces en esta fase, solo estamos tratando de conseguir en papel los elementos necesarios para tu prototipo inicial. No te preocupes por que esto sea perfecto. Esto no es una competencia de dibujo, y la solución inevitablemente terminará diferente en un par de generaciones por el camino . Así que agarra un trozo de papel y un bolígrafo, ponte algo de música que te guste y pasaste unos 5 a 10 minutos simplemente dibujando a través de las pantallas que crees que son necesarias para la primera versión de tu prototipo. 6. Configura tu proyecto en Marvel: Por lo que ahora presentaremos Marvel App, que es una herramienta de diseño todo en uno que te permitirá diseñar pantallas y prototipos todo sin tener que pagar por ningún software. Recomiendo esta herramienta a cualquiera que sea completamente nuevo en el diseño de APP porque literalmente no hay inversión aparte de registrarse para una cuenta. Entonces la forma en que llegué aquí es que fui a mi navegador Web y escribo en maravilla app dot com. Ahora que estamos en el panel de control de Marvel, veo que puedo crear espacio para proyecto de EU. Entonces lo haré ahora. Y voy a seleccionar iPhone ocho porque sé que es un dispositivo realmente común. Dependiendo de su base de usuarios, el dispositivo para el que desea diseñar podría cambiar. No, podemos ver que tengo dos opciones que puedo diseñar desde cero o subir desde mi computadora. Marvel se utiliza comúnmente como herramienta de prototipado solamente, al menos en la comunidad profesional de diseño up. Eso se debe a que existen otras herramientas de diseño que se construyen específicamente para hacer diseño de pantallas sea realmente rápido e ineficiente. Sketch es una herramienta realmente popular. Es uno de mis favoritos, uno que uso en mi trabajo diario, pero sí cuesta dinero, y toma algo de tiempo para aprender. Entonces para esta clase, solo vamos a usar las herramientas de diseño Big 10 en Marvel. Entonces vamos a crear que diseñaste desde cero para que puedas ver mi lienzo. Aquí está la pantalla inmobiliaria con la que tenemos que trabajar para nuestro iPhone ocho. Y lo mencionarán personalmente, no creo que sea necesario tener diseños separados para cada resolución de pantalla o para cada dispositivo. Trato de escoger una resolución de pantalla que esté como en el medio, como si no fuera el teléfono más grande. No es el teléfono más pequeño, pero es una especie de medio camino. Y eso nos ayudará a diseñar en el diseño que puede ser como un poco picado si es necesario, y también estirado un poco si es necesario. Ya hemos empezado a implementarlo en código. Ahí es cuando podemos empezar a modificar los tamaños de texto o el diseño para cada dispositivo individual solo ellos a un lado. Pero algo Teoh no 7. Diseño de pantes de diseño con Marvel: Entonces ahora les voy a dar una introducción a las herramientas de diseño que están disponibles para nosotros en Marvel up. Por lo que del lado izquierdo, veo este rectángulo verde. Puedo redimensionarlo. Cambia la forma puedes cambiar el color, dale un enchufe en un código de color hexadecimal personalizado. Digamos que si estás trabajando dentro de una marca existente que tiene una pauta de marca con colores en ella, solo puedes agarrar el código hexadecimal de su pop. Es aquí que tu prototipo coincide con tu marca desde el get go también puede cambiar el radio de borde de este rectángulo. Entonces si quiero crear un botón redondeado, es realmente fácil para mí modificar eso con la barra aquí para convertirla en forma de pastilla. Si voy todo el camino radio más grande posible, puedo rotarlo. Puedo cambiar el tamaño manualmente si conozco los píxeles exactos que quiero este objeto. Pero en esta fase, realmente solo estamos tratando de conseguir el diseño básico en la pantalla para que podamos probarlo. Entonces no me preocupa demasiado que las cosas sean perfectas en píxeles o sean las proporciones exactas, porque esas eran todas las cosas que inevitablemente van a evolucionar a medida que aprendamos más en nuestras pruebas. El siguiente instrumento que está disponible para nosotros es la Elipse. Su círculo círculo podría ser usado como un positor para un avatar diga en tu aplicación. Tienes usuarios que están escribiendo reseñas para tu latte. Podrías usar un círculo como un pequeño avatar Marcador de posición allí. Círculo también podría ser usado en lugar de una Nikon si no tengo tiempo para enchufar iconos realistas. Pero yo dio recomiendo que al menos pongas un icono de marcador de posición porque en nuestra ronda de pruebas, estamos tratando de probar el concepto. Y si está lleno de contenido de placeholder, eso realmente no significa nada para el usuario. No vas a obtener datos de muy buena calidad de la prueba. Cuanto más real puedas hacerlo, mejores serán tus resultados. Va a hacer un pequeño elemento de menú para mi app de café. Usando la herramienta de rectángulo Estoy usando tonos de gris realmente comunes en prototipos iniciales de salida es para ti tonos de gris solo para que no vayas a obtener retroalimentación sobre los colores en esta fase. En realidad no es lo más importante en este momento. Lo más importante es la jerarquía visual y el diseño de los elementos en la pantalla . Entonces me voy a quedar. El color es bastante moderado y sencillo. Un atajo a conocer es la opción, arrastrar o todo para arrastrar. Si estás en la opción PC, haz clic y arrastra para copiar los elementos que has seleccionado, que es un práctico atajo. Si se dice, crear una cuadrícula como soy ahora podría incluso agarrar cuatro de estos y opción click y arrastrar para completar la cuadrícula en mi página principal que gané a todos estos tipos en este momento solo seis de ellos. Entonces si esto va a ser un botón necesitará algún texto. Necesitará un llamado a la acción. Solo estoy usando la herramienta de texto, y puedo llevar lo que quiera agregar a pedido a mi pedido. Lo suficientemente cerca por ahora. Como pueden ver, puedo cambiar el color del texto. Puedo cambiar a los peleados. Hay un montón de fuentes que están aquí para que cambies entre. Incluso puedes agregar un pensamiento personalizado si estás trabajando con una marca existente que usa la misma fuente en todas partes. Puedes subir eso aquí. También puedes ir a fuentes de Google, Fahnestock, google dot com para escoger algo que sea extra especial. Si no te gustan los que ya están aquí, estoy bien con Lata, que son los incumplimientos. Entonces sólo me voy a quedar con eso. Puedo cambiar el estilo o grosor o esperar. Uh, esto se conoce como peso luchado cuando estás diseñando para la Web y cuando lo estás mirando en el código CSS, generalmente hay múltiples esperas en un solo regular combatido es la fuente predeterminada base en 99% de los casos y la mayoría de los fondos también tienen un estilo audaz, por lo que si quieres enfatizar un poco de textual usa negrita y algunas fuentes tienen muchos pesos diferentes para elegir. Aquí podemos ver que tengo delgado, ligero, regular, regular, audaz y negro. Alemania es audaz por mi llamado a la acción porque realmente quería destacar. Falah. Ahí hay un botón. Entonces, ¿qué sigue? ¿ Qué más puedo dibujar en esta herramienta? Bueno, esta línea rosa es exactamente lo que suena. Es una línea que puedo soltar seca de cualquier manera, pero probablemente querrás caer en la calle dirección vertical u horizontal. Por lo que un útil consejo de herramienta para saber es mantener presionada la tecla de turno. Si mantienes presionada la tecla Mayús mientras arrastras esta línea, se dibujará en una dirección perfectamente horizontal o vertical. Simplemente mantendremos nuestras líneas bien necesitadas. A medida que estamos creando este prototipo, voy a utilizar de nuevo la herramienta de texto para añadir etiquetas para cada uno de mis productos en el menú. Y luego voy a usar opción click y arrastrar para copiar la etiqueta para el nombre del producto. Y si cambio y hago clic a estos ítems, puedo agregarlos todos a mi selección. Entonces ahora se seleccionan todos los cuatro elementos, tanto de mis bits de texto como mis líneas, y puedo hacer clic en opción click arrastrar para copiarlos. Y estos atajos funcionan en todas las principales herramientas de diseño, incluidas las Adobe Tools y Sketch. Por lo que el aprendizaje cambia una opción te ayudará cada vez que estés diseñando pantallas en el futuro. Por supuesto, no todos mis artículos tienen mucho nombre, así que solo voy a seguir adelante, doble clic y cambiar otras herramientas que están disponibles para nosotros en aplicación de mármol. Se cuenta con una útil herramienta para insertar fotos de stock a través de ceniza virgen y otra herramienta para insertar iconos. Ambas herramientas son geniales para hacer estallar en el contenido de marcador de posición y realmente acelerar el proceso de creación de prototipos para esta etapa temprana. También puedes subir imágenes desde tu computadora si tienes imágenes de producto o si encuentras algo que te guste en otro lugar. Una barra es uno de mis recursos favoritos es para imágenes para mis diseños de aplicaciones. Lo que tiene de especial la ceniza virgen es que todas las imágenes son totalmente gratuitas de usar tanto para proyectos personales como comerciales, por lo que podrías construir tu diseño de APP usando imágenes de Onley a partir de ceniza virgen, y no tendrías que pagar ni un centavo por un fotografía de stock. Te recomiendo que si estás creando una app que acabará en la tienda APP, vale la pena invertir el tiempo y el dinero ya sea en fotografía personalizada para tu aplicación o fotos de stock realmente bonitas que tipo de trabajo juntos cohesionadamente, pero una vez destellos de es un recurso realmente dulce. Me encanta navegar por las imágenes por aquí. Están bellamente comisariadas, bellamente editadas, y en realidad no se parecen a la fotografía de stock, y puedes buscar prácticamente cualquier cosa y encontrar una foto encantadora para usar en tu prototipo. Otro recurso que amo es el sustantivo proyecto dot com. Puedes buscar prácticamente cualquier cosa y encontrar un icono. Lo que es genial del proyecto sustantivo es que todos estos iconos son gratuitos de usar con atribución, lo que significa que si añades una pequeña línea diciendo que esta foto es de John Smith, entonces puedes usar ese Icahn de forma gratuita en tu aplicación. Pero es un poco incómodo si lo estás lanzando en la tienda APP tener todas estas pequeñas marcas de atribución a lo largo de tu app. Por lo que solo puedes seguir adelante y comprar el ícono solo un dólar 99 por cada uno. Entonces lo que tiendo a hacer es encontrar un ícono que me encanta en un no proyecto. Lo usaré en mi prototipo, pero no lo compraré hasta que sepa con certeza que lo vamos a estar usando en vivo. Entonces esto haga una pequeña nota para mí que una vez que salgamos a vivir, entraré aquí. Gasto los $2 para que tenga la licencia para usarlo Marvel Up también proporciona algunas plantillas útiles . Cuatro elementos comunes que podrías utilizar en Europa prototipo. Aquí puedes ver que tienen un botón pre hecho para ti. A las esquinas redondeadas le dieron el texto en el medio. Se puede modificar el color y el tipo. Rara vez usé estos elementos, aunque algunos podrían ser útiles. Al igual que este miedo del teclado, marcando lo que es interactuar con la forma. Tendrías esto en la parte inferior para simular que el teclado está funcionando. Fue literalmente un mensaje de diálogo en IOS. Este diálogo a menudo aparece para pedir permisos o para confirmar que quieres eliminar un elemento, cosas así. Así que navega por estos elementos de ID de plantilla que podrían ahorrarte algo de tiempo diseñando en esta herramienta, herramienta, sobre todo en esta fase temprana, donde el aspecto exacto de la cosa no es tan importante. Entonces ahora que conoces los conceptos básicos de la herramienta de diseño, adelante y hazte burlas de las pantallas del curso de tu app. Una vez que tengamos las pantallas básicas hechas, entonces volveremos y las vincularemos para crear tu primer problema. No te preocupes por que estas pantallas luzcan perfectas o se vean pulidas. El objetivo aquí es que se burlen el diseño y las interacciones principales para que podamos hacer nuestra primera ronda de pruebas. 8. Construir tu prototipo: Por lo que ahora vamos a unir nuestras pantallas para crear un prototipo gravable. Esta es mi parte favorita del proceso, porque una vez que lo hayamos hecho esto será capaz de interactuar con nuestro diseño en un teléfono y empezar a tener un sentido de si o diseñadores trabajando o no. Entonces aquí estoy y me maravilla y puedo ver todas las pantallas que he diseñado. Hasta el momento, me he centrado en las pantallas centrales que son necesarias para ayudar al amante del café a ordenar y pagar por su café. No me preocupaba diseñar la pantalla de la cuenta o las pantallas de error para cualquier pantalla que no esté en el camino Pappy de la experiencia. Bueno, hago clic en mi primer diseño, que es mi menú, y voy a crear un hot spot. Este hot spot, cuando se toca activará la pantalla para cambiar a la siguiente pantalla en el flujo. Por lo que solo hago clic y arrastre para dibujar el hot spot, y lo voy a vincular a mi página de detalles de artículo. Tengo una opción para agregar una animación de transición. Creo que quieres intentar agregar la animación pop para esta interacción porque Queremos crear la ilusión de esta tarjeta de lote tipo de expandirse y hacerse cargo de la pantalla, acercando para ver más detalle sobre este lote para la acción. Yo quiero que esto se active en la parte superior. Por lo que ahora puedo tocar el prototipo y probado para arriba tan arriba en matey y veo la pantalla con más información sobre la Lotto. A mí me gusta la animación. Creo que se ve bien. Se siente bien. Entonces voy a pasar a la siguiente pantalla. Trabajaremos en el hot spot para mi detalle de producto. Por lo que de nuevo voy a dar clic y arrastrar para crear un hot spot en este botón aquí en la frontera, y llegaré a la página del coche para la transición de pantalla. Voy a intentarlo, dijo Push Left. Se siente como si fuera un poco yendo al siguiente paso del check out procediendo cada vez más a la derecha hasta que finalmente todo check out. Lo probaremos, ver cómo se siente. Voy a presionar esta tecla de flecha e ir a la derecha a la siguiente pantalla, y solo seguiré añadiendo mi hot spot desde mi llamada. El botón de acción aquí en el carrito a la primera pantalla de pago aquí para pagar con apple pay . Podría burlarme de lo que parece cuando pagas con apple pay. Entonces la cosita, ustedes bots desde abajo. Yo sólo voy a burlarme de esto pagado con opción de tarjeta de crédito porque ya tengo que primavera se termina de nuevo aquí. Uh, cuando tenga tiempo, puedo agregar un hot spot aquí al formulario de tarjeta de crédito y tener una pantalla que simula el teclado apareciendo. En esta fase, realmente solo estoy tratando de bajar el flujo del núcleo y bajar el contenido. Entonces no estoy realmente preocupado por ese nivel de detalle en este momento, así que seguiré adelante y solo me burlaré del último CT a place order. Fui a mi confirmación, y luego mi confirmación es un momento emocionante. Estás todo listo. Mucho estará listo para recoger pronto. Uh, porque no tengo otra navegación de núcleo. Acabo de agregar este botón de vuelta al menú para que pueda volver a donde empecé. En la siguiente iteración de mi diseño. Voy a querer abordar la navegación, pero para esta primera fase, sólo estoy buscando conseguir ese flujo de compra de núcleo para poder obtener retroalimentación sobre el contenido antes de seguir adelante. Entonces ahora que he configurado todos mis puntos calientes, voy a darle una oportunidad. Grandes obras como se esperaba. Entonces ahora voy a mandar este prototipo a mi teléfono. Ahora es tu turno de vincular tus pantallas usando hot spots. Una vez que hayas hecho eso, pasarás a la fase de pruebas. 9. Prueba de tu prototipo: Entonces ahora que tenemos creado nuestro prototipo, lo enviaremos a nuestro teléfono. Tiene que compartir, y aquí tengo varias opciones para compartir correo electrónico o un enlace directo, pero prefiero compartir un texto a mi propio teléfono. Entonces ahora tengo un mensaje de texto con un enlace a este prototipo, y puedo hacer clic en él y previsualizarlo, y realmente está empezando a sentirse cada vez más como una aplicación móvil real. Ahora estoy muy emocionado de probar con mi primer usuario. Voy a agarrar a mi compañero de cuarto, que usa fuera todo el tiempo, y le encanta pedir café a Starbucks. Entonces si quieres, él será la persona adecuada para darme comentarios sobre esta primera versión. Mi forma preferida de probar un prototipo móvil es sentarse con un amigo y pedirles que completen la tarea. Entonces en este caso, voy a pedir a mi amigo que use esta aplicación para pedir y pagar un café. Es crucial que como los estás observando que no les des ninguna pista de qué hacer . Solo quieres observar, ver dónde van a ver sus ojos qué preguntas tienen ver dónde tributan y observar cualquier punto de dolor por cualquier tema que se presente mientras intentan completar la tarea. Tendrás que probar con 3 a 5 amigos Perversión de la app. Pero como esta es la primera versión, y ya tengo ideas para cómo mejorarla, solo tomaré los comentarios de mi amigo y haré otra iteración sobre el diseño antes de probar con otro. En el transcurso de un proyecto de diseño de APP, estoy probando decenas de veces, si no cientos de veces con una amplia variedad de personas que coinciden con mi perfil de cliente. Mi objetivo es notar tendencias, similitudes entre las experiencias de los usuarios. Por ejemplo, si alguien tiene un problema con pagar por un tema con la reforma de la tarjeta de crédito, si veo cada vez más personas teniendo un problema con eso, eso me ayuda a priorizar el trabajo de diseño en esa pieza específica de la aplicación. ¿ Y cómo sabemos cuándo se hace un diseño? Bueno, si tus clientes pueden completar con éxito toda la tarea que les pediste y no hay problemas mayores, entonces tal vez puedas hablar con el dueño del producto sobre comenzar el desarrollo en la aplicación Incluso cuando has desarrollado tu primera versión de trabajo de la APP, aún necesitas probarla, y las pruebas nunca se hacen. Es un hábito y una práctica que necesitas llevar contigo a lo largo de tu tiempo, diseñando y construyendo. Entonces ahora ¿cuál es tu término? Encuentra a un amigo o compañero de piso y les pidió que completaran una tarea con el prototipo up que has diseñado. 10. Finala: en esta clase, aprendimos que up design es un proceso iterativo. También aprendimos la importancia de probar un prototipo para aprender a mejorar el concepto antes de empezar a construirlo. Por lo que para tu proyecto final, sigue este proceso iterativo para crear tu primer prototipo de salida móvil. Bien definido El problema. Investigarás patrones de diseño con algunos bocetos. Diseñarás esas pantallas en Marvel, y luego las vincularás todas juntas en un prototipo herbario superior, que luego pondrá a prueba con amigos. De verdad espero que haya despertado tu curiosidad y el aprendizaje de Maura sobre el diseño de APP porque el campo en la industria es vasto y hay una tonelada por aprender sobre cada uno de estos pasos en el proceso. Espero que te divirtieras tanto como yo, y espero verte en la siguiente clase.